forked from
tobinio.dev/task-line
A simple to-do app focused on tasks that can be completed within a specific time span.
simplify code
+8
-40
+8
-40
app/components/Todo/TimeDisplay/TimeDisplayPoint.vue
+8
-40
app/components/Todo/TimeDisplay/TimeDisplayPoint.vue
···
5
5
6
6
const { point } = defineProps<{ point: TimePoint }>();
7
7
8
-
const timeFrameString = computed(() => {
9
-
return point.time;
10
-
});
11
-
12
8
const time = computed(() => {
13
-
let time = parseAbsoluteToLocal(point.time).toDate().getTime();
14
-
15
-
return {
16
-
start: time - 1000 * 60 * 30,
17
-
end: time + 1000 * 60 * 30,
18
-
};
19
-
});
20
-
21
-
function capTime(time: number): number {
22
-
return Math.min(
23
-
Math.max(time, sanitizeDate(new Date()).getTime()),
24
-
addDays(sanitizeDate(new Date()), 7).getTime(),
25
-
);
26
-
}
27
-
28
-
const cappedTime = computed(() => {
29
-
return {
30
-
start: capTime(time.value.start),
31
-
end: capTime(time.value.end),
32
-
};
33
-
});
34
-
35
-
const width = computed(() => {
36
-
const timeDiff = cappedTime.value.end - cappedTime.value.start;
37
-
const numberOfDays = timeDiff / (24 * 60 * 60 * 1000.0);
38
-
const percentage = numberOfDays / 7.0;
39
-
return percentage;
9
+
return parseAbsoluteToLocal(point.time).toDate().getTime();
40
10
});
41
11
42
12
const offset = computed(() => {
43
13
const now = new Date();
44
14
now.setHours(0, 0, 0, 0);
45
15
46
-
const timeDiff = cappedTime.value.start - now.getTime();
16
+
const timeDiff = time.value - now.getTime();
47
17
const numberOfDays = timeDiff / (24 * 60 * 60 * 1000.0);
48
18
const percentage = numberOfDays / 7.0;
19
+
49
20
return percentage;
50
21
});
51
22
52
23
const isCappedRight = computed(() => {
53
-
return time.value.end > addDays(sanitizeDate(new Date()), 7).getTime();
24
+
return time.value > addDays(sanitizeDate(new Date()), 7).getTime();
54
25
});
55
26
56
27
const isCappedLeft = computed(() => {
57
-
return time.value.start < sanitizeDate(new Date()).getTime();
28
+
return time.value < sanitizeDate(new Date()).getTime();
58
29
});
59
30
</script>
60
31
61
32
<template>
62
-
<div
63
-
class="relative flex h-2 flex-col justify-center"
64
-
:title="timeFrameString"
65
-
>
33
+
<div class="relative flex h-2 flex-col justify-center" :title="point.time">
66
34
<div
67
35
class="absolute top-1/2 flex h-2 w-full -translate-y-1/2 justify-evenly"
68
36
>
···
73
41
/>
74
42
</div>
75
43
<div
76
-
class="bg-primary absolute top-1/2 h-1 -translate-y-1/2 rounded-full"
44
+
v-if="!isCappedLeft && !isCappedRight"
45
+
class="bg-primary absolute top-1/2 h-2 w-2 -translate-y-1/2 rounded-full"
77
46
:style="{
78
-
width: `${width * 100}%`,
79
47
left: `${offset * 100}%`,
80
48
}"
81
49
/>