1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<script setup lang="ts">
// Duplicate issue with sub directory
import { addMilliseconds, formatRelative } from 'date-fns';
import { enGB } from 'date-fns/locale';
import { formatMsDuration } from './eta-calculator.service';
const unitCount = ref(3 * 62);
const unitPerTimeSpan = ref(3);
const timeSpan = ref(5);
const timeSpanUnitMultiplier = ref(60000);
const startedAt = ref(Date.now());
const durationMs = computed(() => {
const timeSpanMs = timeSpan.value * timeSpanUnitMultiplier.value;
return unitCount.value / (unitPerTimeSpan.value / timeSpanMs);
});
const endAt = computed(() =>
formatRelative(addMilliseconds(startedAt.value, durationMs.value), Date.now(), { locale: enGB }),
);
</script>
<template>
<div>
<div text-justify op-70>
With a concrete example, if you wash 3 plates in 5 minutes and you have 500 plates to wash, it will take you 5
hours and 10 minutes to wash them all.
</div>
<n-divider />
<div flex gap-2>
<n-form-item label="Amount of element to consume" flex-1>
<n-input-number v-model:value="unitCount" :min="1" />
</n-form-item>
<n-form-item label="The consumption started at" flex-1>
<n-date-picker v-model:value="startedAt" type="datetime" />
</n-form-item>
</div>
<p>Amount of unit consumed by time span</p>
<div flex flex-col items-baseline gap-y-2 md:flex-row>
<n-input-number v-model:value="unitPerTimeSpan" :min="1" />
<div flex items-baseline gap-2>
<span ml-2>in</span>
<n-input-number v-model:value="timeSpan" min-w-130px :min="1" />
<c-select
v-model:value="timeSpanUnitMultiplier"
min-w-130px
:options="[
{ label: 'milliseconds', value: 1 },
{ label: 'seconds', value: 1000 },
{ label: 'minutes', value: 1000 * 60 },
{ label: 'hours', value: 1000 * 60 * 60 },
{ label: 'days', value: 1000 * 60 * 60 * 24 },
]"
/>
</div>
</div>
<n-divider />
<c-card mb-2>
<n-statistic label="Total duration">
{{ formatMsDuration(durationMs) }}
</n-statistic>
</c-card>
<c-card>
<n-statistic label="It will end ">
{{ endAt }}
</n-statistic>
</c-card>
</div>
</template>
<style lang="less" scoped>
.n-input-number,
.n-date-picker {
width: 100%;
}
</style>
|
