feat(new tool): Timezone Converter

Fix CorentinTh#429

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as timezoneConverter } from './timezone-converter';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -85,6 +86,7 @@ export const toolsByCategory: ToolCategory[] = [
     name: 'Converter',
     components: [
       dateTimeConverter,
+      timezoneConverter,
       baseConverter,
       romanNumeralConverter,
       base64StringConverter,

src/tools/timezone-converter/index.ts

@@ -0,0 +1,12 @@
+import { CalendarTime } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Timezone Converter',
+  path: '/timezone-converter',
+  description: 'Convert Date-Time from a timezone to others',
+  keywords: ['timezone', 'tz', 'date', 'time', 'converter'],
+  component: () => import('./timezone-converter.vue'),
+  icon: CalendarTime,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/timezone-converter/timezone-converter.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import ctz from 'countries-and-timezones';
+import getTimezoneOffset from 'get-timezone-offset';
+
+const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+const allTimezones = Object.values(ctz.getAllTimezones()).map(tz => ({
+  value: tz.name,
+  label: `${tz.name} (${tz.utcOffset === tz.dstOffset ? tz.utcOffsetStr : `${tz.utcOffsetStr}/${tz.dstOffsetStr}`})`,
+}));
+
+function convertToTimezone(tz: string, timestamp: number) {
+  return new Date(timestamp).toLocaleString(undefined,
+    { timeZone: tz, timeZoneName: undefined, hour12: false });
+}
+
+function convertMinsToHrsMins(minutes: number) {
+  const h = String(Math.floor(minutes / 60)).padStart(2, '0');
+  const m = String(minutes % 60).padStart(2, '0');
+  return `${h}:${m}`;
+}
+
+const otherTimezones = useStorage<{ name: string }[]>('timezone-conv:zones', [{ name: 'Etc/GMT' }]);
+const currentTimezone = useStorage<string>('timezone-conv:current', browserTimezone);
+const now = Date.now();
+const currentDatetimeRange = ref<[number, number]>([now, now]);
+
+const tzToCountriesInput = ref(browserTimezone);
+const tzToCountriesOutput = computed(() => ctz.getCountriesForTimezone(tzToCountriesInput.value));
+
+const allCountries = Object.values(ctz.getAllCountries()).map(c => ({
+  value: c.id,
+  label: `${c.name} (${c.id})`,
+}));
+const countryToTimezonesInput = ref('FR');
+const countryToTimezonesOutput = computed(() => ctz.getTimezonesForCountry(countryToTimezonesInput.value));
+</script>
+
+<template>
+  <div>
+    <c-card title="Current Date-Time range" mb-2>
+      <c-select
+        label="Timezone"
+        label-position="left"
+        :value="currentTimezone"
+        searchable
+        :options="allTimezones"
+        mb-1
+      />
+      <n-date-picker
+        v-model:value="currentDatetimeRange" type="datetimerange" clearable mb-2
+      />
+
+      <input-copyable
+        label="Current Timezone Offset (min)"
+        label-position="left"
+        :value="convertMinsToHrsMins(-getTimezoneOffset(currentTimezone, new Date(currentDatetimeRange[0])))"
+      />
+    </c-card>
+
+    <c-card title="Other timezones" mb-4>
+      <n-dynamic-input
+        v-model:value="otherTimezones"
+        show-sort-button
+        :on-create="() => ({ name: browserTimezone })"
+      >
+        <template #default="{ value }">
+          <div flex flex-wrap items-center gap-1>
+            <n-select
+              v-model:value="value.name"
+              filterable
+              placeholder="Please select a timezone"
+              :options="allTimezones"
+              w-full
+            />
+            <div w-full flex items-baseline gap-1>
+              <n-input style="min-width: 49%" readonly :value="convertToTimezone(value.name, currentDatetimeRange[0])" />
+              <n-input style="min-width: 49%" readonly :value="convertToTimezone(value.name, currentDatetimeRange[1])" />
+            </div>
+          </div>
+        </template>
+      </n-dynamic-input>
+    </c-card>
+
+    <c-card title="Country to Timezones" mb-2>
+      <c-select
+        label="Country"
+        label-position="left"
+        :value="countryToTimezonesInput"
+        searchable
+        :options="allCountries"
+      />
+
+      <n-divider />
+
+      <ul>
+        <li v-for="(tz, ix) in countryToTimezonesOutput" :key="ix">
+          {{ tz.name }} ({{ tz.countries.join(', ') }}): UTC= {{ tz.utcOffsetStr }}, DST= {{ tz.dstOffsetStr }}
+        </li>
+      </ul>
+    </c-card>
+
+    <c-card title="Timezones to Countries" mb-2>
+      <c-select
+        label="Timezone"
+        label-position="left"
+        :value="tzToCountriesInput"
+        searchable
+        :options="allTimezones"
+      />
+
+      <n-divider />
+
+      <ul>
+        <li v-for="(country, ix) in tzToCountriesOutput" :key="ix">
+          {{ country.name }} ({{ country.id }}): {{ country.timezones.join(', ') }}
+        </li>
+      </ul>
+    </c-card>
+  </div>
+</template>