diff --git a/app/components/Todo/TimeDisplay/TimeDisplay.vue b/app/components/Todo/TimeDisplay/TimeDisplay.vue
index 06f4bbe..64cfb9c 100644
--- a/app/components/Todo/TimeDisplay/TimeDisplay.vue
+++ b/app/components/Todo/TimeDisplay/TimeDisplay.vue
@@ -3,7 +3,7 @@
import TimeDisplayPoint from "./TimeDisplayPoint.vue";
import TimeDisplayRange from "./TimeDisplayRange.vue";
- const props = defineProps<{ timeframe: TimeRange | TimePoint }>();
+ const props = defineProps<{ timeframe: TimeRange[] | TimePoint }>();
const point = computed(() => {
if ("type" in props.timeframe) {
@@ -12,13 +12,13 @@
});
const range = computed(() => {
- if ("start" in props.timeframe) {
- return props.timeframe as TimeRange;
+ if (Array.isArray(props.timeframe)) {
+ return props.timeframe as TimeRange[];
}
});
-
+
diff --git a/app/components/Todo/TimeDisplay/TimeDisplayLine.vue b/app/components/Todo/TimeDisplay/TimeDisplayLine.vue
new file mode 100644
index 0000000..2406d0c
--- /dev/null
+++ b/app/components/Todo/TimeDisplay/TimeDisplayLine.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
diff --git a/app/components/Todo/TimeDisplay/TimeDisplayPoint.vue b/app/components/Todo/TimeDisplay/TimeDisplayPoint.vue
index 7fa954e..b58ff66 100644
--- a/app/components/Todo/TimeDisplay/TimeDisplayPoint.vue
+++ b/app/components/Todo/TimeDisplay/TimeDisplayPoint.vue
@@ -2,6 +2,7 @@
import { parseAbsoluteToLocal } from "@internationalized/date";
import { addDays, sanitizeDate } from "~/utils/date";
import type { TimePoint } from "~/utils/types";
+ import TimeDisplayLine from "./TimeDisplayLine.vue";
const { point } = defineProps<{ point: TimePoint }>();
@@ -36,15 +37,10 @@
diff --git a/app/components/Todo/TimeDisplay/TimeDisplayRange.vue b/app/components/Todo/TimeDisplay/TimeDisplayRange.vue
index 6da2e30..8eef415 100644
--- a/app/components/Todo/TimeDisplay/TimeDisplayRange.vue
+++ b/app/components/Todo/TimeDisplay/TimeDisplayRange.vue
@@ -2,8 +2,9 @@
import { getLocalTimeZone, parseDate } from "@internationalized/date";
import { addDays, sanitizeDate } from "~/utils/date";
import type { TimeRange } from "~/utils/types";
+ import TimeDisplayLine from "./TimeDisplayLine.vue";
- const { range } = defineProps<{ range: TimeRange }>();
+ const { ranges } = defineProps<{ ranges: TimeRange[] }>();
const weekOffset = useWeekOffset();
const start = computed(() => {
@@ -14,53 +15,69 @@
});
const timeFrameString = computed(() => {
- return `${range.start.toWellFormed()} - ${range.end.toWellFormed()}`;
+ if (!ranges[0]) return "";
+ return `${ranges[0].start.toWellFormed()} - ${ranges[0].end.toWellFormed()}`;
});
- const time = computed(() => {
- return {
+ function getVisualInfo(range: TimeRange) {
+ function capTime(time: number): number {
+ return Math.min(
+ Math.max(time, sanitizeDate(start.value).getTime()),
+ addDays(sanitizeDate(start.value), 7).getTime(),
+ );
+ }
+
+ function getWidth(time: { start: number; end: number }) {
+ const timeDiff = time.end - time.start;
+ const numberOfDays = timeDiff / (24 * 60 * 60 * 1000.0);
+ const percentage = numberOfDays / 7.0;
+ return percentage;
+ }
+
+ function getOffset(time: { start: number; end: number }) {
+ const timeDiff = time.start - start.value.getTime();
+ const numberOfDays = timeDiff / (24 * 60 * 60 * 1000.0);
+ const percentage = numberOfDays / 7.0;
+ return percentage;
+ }
+
+ let time = {
start: parseDate(range.start).toDate(getLocalTimeZone()).getTime(),
end: parseDate(range.end)
.add({ days: 1 })
.toDate(getLocalTimeZone())
.getTime(),
};
- });
- function capTime(time: number): number {
- return Math.min(
- Math.max(time, sanitizeDate(start.value).getTime()),
- addDays(sanitizeDate(start.value), 7).getTime(),
- );
- }
+ let cappedTimed = {
+ start: capTime(time.start),
+ end: capTime(time.end),
+ };
+
+ let width = getWidth(cappedTimed);
+ let offset = getOffset(cappedTimed);
- const cappedTime = computed(() => {
return {
- start: capTime(time.value.start),
- end: capTime(time.value.end),
+ time,
+ width,
+ offset,
};
- });
-
- const width = computed(() => {
- const timeDiff = cappedTime.value.end - cappedTime.value.start;
- const numberOfDays = timeDiff / (24 * 60 * 60 * 1000.0);
- const percentage = numberOfDays / 7.0;
- return percentage;
- });
+ }
- const offset = computed(() => {
- const timeDiff = cappedTime.value.start - start.value.getTime();
- const numberOfDays = timeDiff / (24 * 60 * 60 * 1000.0);
- const percentage = numberOfDays / 7.0;
- return percentage;
+ const infos = computed(() => {
+ return ranges.map((range) => getVisualInfo(range));
});
const isCappedRight = computed(() => {
- return time.value.end > addDays(sanitizeDate(start.value), 7).getTime();
+ return infos.value.some((info) => {
+ return info.time.end > addDays(sanitizeDate(start.value), 7).getTime();
+ });
});
const isCappedLeft = computed(() => {
- return time.value.start < sanitizeDate(start.value).getTime();
+ return infos.value.some((info) => {
+ return info.time.start < sanitizeDate(start.value).getTime();
+ });
});
@@ -69,30 +86,19 @@
class="relative flex h-2 flex-col justify-center"
:title="timeFrameString"
>
-
-
-
-
diff --git a/app/composables/useFilteredTodos.ts b/app/composables/useFilteredTodos.ts
index 46fbb93..a1218b3 100644
--- a/app/composables/useFilteredTodos.ts
+++ b/app/composables/useFilteredTodos.ts
@@ -67,10 +67,10 @@ export function filterTodos(todos: Todo[], filter: Filter) {
}
const time = getTimeRange(todo);
- if (time === undefined) return false;
+ if (!time?.visuel[0]) return false;
- const start = parseDate(time.visuel.start);
- const end = parseDate(time.visuel.end);
+ const start = parseDate(time.visuel[0].start);
+ const end = parseDate(time.visuel[0].end);
if (filter.time === "today") {
if (start.compare(weekStart) > 0 || end.compare(weekStart) < 0) {
diff --git a/app/utils/todo.ts b/app/utils/todo.ts
index 56a4943..823088a 100644
--- a/app/utils/todo.ts
+++ b/app/utils/todo.ts
@@ -23,10 +23,9 @@ export function isChecked(todo: Todo): boolean {
return date >= start && date <= end;
}
-//Todo: return array of all visual TimeRanges
export function getTimeRange(
todo: Todo,
-): { visuel: TimeRange; valid: TimeRange } | undefined {
+): { visuel: TimeRange[]; valid: TimeRange } | undefined {
if (todo.time?.type === "range") {
const range = {
start: todo.time.start,
@@ -34,7 +33,7 @@ export function getTimeRange(
};
return {
- visuel: range,
+ visuel: [range],
valid: range,
};
}
@@ -43,14 +42,19 @@ export function getTimeRange(
const today = sanitizeDate(new Date());
if (todo.time.mode === "daily") {
- const range = {
- start: toLocalDateString(today),
- end: toLocalDateString(today),
- };
+ const visuel = Array.from({ length: 8 }, (_, i) => {
+ return {
+ start: toLocalDateString(addDays(today, i)),
+ end: toLocalDateString(addDays(today, i)),
+ };
+ });
return {
- visuel: range,
- valid: range,
+ visuel,
+ valid: {
+ start: toLocalDateString(today),
+ end: toLocalDateString(today),
+ },
};
}
@@ -61,19 +65,22 @@ export function getTimeRange(
const start = new Date(weekStart);
- let visuelStart = addDays(start, todo.time.start ?? 0);
- let visuelEnd = addDays(start, todo.time.end ?? 6);
+ const visuelStart = addDays(start, todo.time.start ?? 0);
+ const visuelEnd = addDays(start, todo.time.end ?? 6);
- if (visuelEnd < today) {
- visuelStart = addDays(visuelStart, 7);
- visuelEnd = addDays(visuelEnd, 7);
- }
-
- return {
- visuel: {
+ const visuel = [
+ {
start: toLocalDateString(visuelStart),
end: toLocalDateString(visuelEnd),
},
+ {
+ start: toLocalDateString(addDays(visuelStart, 7)),
+ end: toLocalDateString(addDays(visuelEnd, 7)),
+ },
+ ];
+
+ return {
+ visuel,
valid: {
start: toLocalDateString(start),
end: toLocalDateString(addDays(start, 6)),
@@ -89,10 +96,12 @@ export function getTimeRange(
);
return {
- visuel: {
- start: toLocalDateString(day),
- end: toLocalDateString(day),
- },
+ visuel: [
+ {
+ start: toLocalDateString(day),
+ end: toLocalDateString(day),
+ },
+ ],
valid: {
start: toLocalDateString(new Date(today.getFullYear(), 0, 0)),
end: toLocalDateString(