feat(new-tool): added an ETA calculator

5 files changed, 112 insertions, 1 deletions

diff --git a/src/plugins/naive.plugin.ts b/src/plugins/naive.plugin.ts
index d4e59f8..4662798 100644
--- a/src/plugins/naive.plugin.ts
+++ b/src/plugins/naive.plugin.ts
@@ -51,9 +51,11 @@ import {
   NScrollbar,
   NGradientText,
   NCode,
+  NDatePicker,
 } from 'naive-ui';
 
 const components = [
+  NDatePicker,
   NCode,
   NGradientText,
   NScrollbar,
diff --git a/src/tools/eta-calculator/eta-calculator.service.ts b/src/tools/eta-calculator/eta-calculator.service.ts
new file mode 100644
index 0000000..6c061a9
--- /dev/null
+++ b/src/tools/eta-calculator/eta-calculator.service.ts
@@ -0,0 +1,16 @@
+import { formatDuration } from 'date-fns';
+
+export function formatMsDuration(duration: number) {
+  const ms = Math.floor(duration % 1000);
+  const secs = Math.floor(((duration - ms) / 1000) % 60);
+  const mins = Math.floor((((duration - ms) / 1000 - secs) / 60) % 60);
+  const hrs = Math.floor((((duration - ms) / 1000 - secs) / 60 - mins) / 60);
+
+  return (
+    formatDuration({
+      hours: hrs,
+      minutes: mins,
+      seconds: secs,
+    }) + (ms > 0 ? ` ${ms} ms` : '')
+  );
+}
diff --git a/src/tools/eta-calculator/eta-calculator.vue b/src/tools/eta-calculator/eta-calculator.vue
new file mode 100644
index 0000000..62a630c
--- /dev/null
+++ b/src/tools/eta-calculator/eta-calculator.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <n-text depth="3" style="text-align: justify; width: 100%; display: inline-block">
+      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, and if you start now, you'll end
+      {{ endAt }}.
+    </n-text>
+    <br />
+    <n-divider />
+    <n-space item-style="flex:1 1 0">
+      <div>
+        <n-space item-style="flex:1 1 0">
+          <n-form-item label="Amount of element to consume">
+            <n-input-number v-model:value="unitCount" />
+          </n-form-item>
+          <n-form-item label="The consumption started at">
+            <n-date-picker v-model:value="startedAt" type="datetime" />
+          </n-form-item>
+        </n-space>
+
+        <n-form-item label="Amount of unit consumed by time span" :show-feedback="false">
+          <n-input-number v-model:value="unitPerTimeSpan" />
+          <span style="margin: 0 10px">in</span>
+          <n-input-group>
+            <n-input-number v-model:value="timeSpan" />
+            <n-select
+              v-model:value="timeSpanUnitMultiplier"
+              :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 },
+              ]"
+            ></n-select>
+          </n-input-group>
+        </n-form-item>
+
+        <n-divider />
+        <n-space vertical>
+          <n-card>
+            <n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic>
+          </n-card>
+          <n-card>
+            <n-statistic label="It will end ">{{ endAt }}</n-statistic>
+          </n-card>
+        </n-space>
+      </div>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { addMilliseconds, formatRelative } from 'date-fns';
+import { enGB } from 'date-fns/locale';
+import { computed, ref } from 'vue';
+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>
+
+<style lang="less" scoped>
+.n-input-number,
+.n-date-picker {
+  width: 100%;
+}
+</style>
diff --git a/src/tools/eta-calculator/index.ts b/src/tools/eta-calculator/index.ts
new file mode 100644
index 0000000..abda287
--- /dev/null
+++ b/src/tools/eta-calculator/index.ts
@@ -0,0 +1,12 @@
+import { Hourglass } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'ETA calculator',
+  path: '/eta-calculator',
+  description:
+    'An ETA (Estimated Time of Arrival) calculator to know the approximate end time of a task, for example the moment of ending of a download.',
+  keywords: ['eta', 'calculator', 'estimated', 'time', 'arrival', 'average'],
+  component: () => import('./eta-calculator.vue'),
+  icon: Hourglass,
+});
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 22613d3..98bb620 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -11,6 +11,7 @@ import { tool as crontabGenerator } from './crontab-generator';
 import { tool as dateTimeConverter } from './date-time-converter';
 import { tool as deviceInformation } from './device-information';
 import { tool as cypher } from './encryption';
+import { tool as etaCalculator } from './eta-calculator';
 import { tool as gitMemo } from './git-memo';
 import { tool as hashText } from './hash-text';
 import { tool as htmlEntities } from './html-entities';
@@ -59,7 +60,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Math',
     icon: LockOpen,
-    components: [mathEvaluator],
+    components: [mathEvaluator, etaCalculator],
   },
   {
     name: 'Measurement',