feat(new tool): Timezone Converter

Fix #429

components.d.ts

@@ -157,6 +157,7 @@ declare module '@vue/runtime-core' {
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
     NImage: typeof import('naive-ui')['NImage']
+    NInput: typeof import('naive-ui')['NInput']
     NInputGroup: typeof import('naive-ui')['NInputGroup']
     NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
@@ -165,7 +166,9 @@ declare module '@vue/runtime-core' {
     NMenu: typeof import('naive-ui')['NMenu']
     NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
     NSlider: typeof import('naive-ui')['NSlider']
+    NSpace: typeof import('naive-ui')['NSpace']
     NStatistic: typeof import('naive-ui')['NStatistic']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']
@@ -197,6 +200,7 @@ declare module '@vue/runtime-core' {
     TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']
     TextToBinary: typeof import('./src/tools/text-to-binary/text-to-binary.vue')['default']
     TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']
+    TimezoneConverter: typeof import('./src/tools/timezone-converter/timezone-converter.vue')['default']
     TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']
     'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default']
     TomlToJson: typeof import('./src/tools/toml-to-json/toml-to-json.vue')['default']

package.json

@@ -50,6 +50,7 @@
     "change-case": "^4.1.2",
     "colord": "^2.9.3",
     "composerize-ts": "^0.6.2",
+    "countries-and-timezones": "^3.6.0",
     "country-code-lookup": "^0.1.0",
     "cron-validator": "^1.3.1",
     "cronstrue": "^2.26.0",
@@ -59,6 +60,7 @@
     "emojilib": "^3.0.10",
     "figue": "^1.2.0",
     "fuse.js": "^6.6.2",
+    "get-timezone-offset": "^1.0.5",
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",

pnpm-lock.yaml

@@ -50,6 +50,9 @@ dependencies:
   composerize-ts:
     specifier: ^0.6.2
     version: 0.6.2
+  countries-and-timezones:
+    specifier: ^3.6.0
+    version: 3.6.0
   country-code-lookup:
     specifier: ^0.1.0
     version: 0.1.0
@@ -77,6 +80,9 @@ dependencies:
   fuse.js:
     specifier: ^6.6.2
     version: 6.6.2
+  get-timezone-offset:
+    specifier: ^1.0.5
+    version: 1.0.5
   highlight.js:
     specifier: ^11.7.0
     version: 11.7.0
@@ -3374,7 +3380,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.6.1(vue@3.3.4)
+      '@vueuse/shared': 11.0.3(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -4016,10 +4022,10 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.6.1(vue@3.3.4):
-    resolution: {integrity: sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==}
+  /@vueuse/shared@11.0.3(vue@3.3.4):
+    resolution: {integrity: sha512-0rY2m6HS5t27n/Vp5cTDsKTlNnimCqsbh/fmT2LgE+aaU42EMfXo8+bNX91W9I7DDmxfuACXMmrd7d79JxkqWA==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.3.4)
+      vue-demi: 0.14.10(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -4636,6 +4642,11 @@ packages:
       browserslist: 4.22.1
     dev: true
 
+  /countries-and-timezones@3.6.0:
+    resolution: {integrity: sha512-8/nHBCs1eKeQ1jnsZVGdqrLYxS8nPcfJn8PnmxdJXWRLZdXsGFR8gnVhRjatGDBjqmPm7H+FtYpBYTPWd0Eiqg==}
+    engines: {node: '>=8.x', npm: '>=5.x'}
+    dev: false
+
   /country-code-lookup@0.1.0:
     resolution: {integrity: sha512-IOI66HEG+8bXfWPy+sTzuN7161vmDZOHg1wgIPFf3WfD73FeLajnn6C+fnxOIa9RL1WRBDMXQQWW/FOaOYaQ3w==}
     dev: false
@@ -5824,6 +5835,11 @@ packages:
       get-intrinsic: 1.2.2
     dev: true
 
+  /get-timezone-offset@1.0.5:
+    resolution: {integrity: sha512-+B+/vEJ9qJgZheDVNmuY+4il8sJhTFXRvSiiqyRfwiCEhTaZqn/yCoNToDzQL+Mv9DLKlyO1bSIP5nUCJQN9Aw==}
+    engines: {node: '>=4.0.0'}
+    dev: false
+
   /get-tsconfig@4.7.2:
     resolution: {integrity: sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==}
     dependencies:
@@ -9185,8 +9201,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.5(vue@3.3.4):
-    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
+  /vue-demi@0.14.10(vue@3.3.4):
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
@@ -9200,8 +9216,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.6(vue@3.3.4):
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+  /vue-demi@0.14.5(vue@3.3.4):
+    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
@@ -9497,6 +9513,7 @@ packages:
 
   /workbox-google-analytics@7.0.0:
     resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==}
+    deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
     dependencies:
       workbox-background-sync: 7.0.0
       workbox-core: 7.0.0

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/get-timezone-offset.d.ts

@@ -0,0 +1,3 @@
+declare module "get-timezone-offset" {
+    export default function(timeZoneName: string, date: Date);
+}

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 and get timezone vs countries infos',
+  keywords: ['timezone', 'tz', 'date', 'time', 'country', 'converter'],
+  component: () => import('./timezone-converter.vue'),
+  icon: CalendarTime,
+  createdAt: new Date('2024-08-15'),
+});

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

@@ -0,0 +1,129 @@
+<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 === browserTimezone ? 'Browser TZ - ' : ''}${tz.name} (${tz.utcOffset === tz.dstOffset ? tz.utcOffsetStr : `${tz.utcOffsetStr}/${tz.dstOffsetStr}`})`,
+}));
+
+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 currentTimezoneOffset = computed(() => {
+  return convertMinsToHrsMins(-getTimezoneOffset(currentTimezone.value, new Date(currentDatetimeRange.value[0])));
+});
+function convertToTimezone(tz: string, timestamp: number) {
+  return new Date(
+    timestamp
+    + getTimezoneOffset(currentTimezone.value, new Date()) * 60 * 1000
+    - getTimezoneOffset(browserTimezone, new Date()) * 60 * 1000,
+  ).toLocaleString(undefined,
+    { timeZone: tz, timeZoneName: undefined, hour12: false });
+}
+
+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="Timezones Date-Time Converter" mb-2>
+      <c-select
+        v-model:value="currentTimezone"
+        label="Timezone"
+        label-position="left"
+        searchable
+        :options="allTimezones"
+        mb-2
+      />
+      <n-date-picker
+        v-model:value="currentDatetimeRange"
+        type="datetimerange"
+        mb-2
+      />
+
+      <input-copyable
+        label="Current Timezone Offset (min)"
+        label-position="left"
+        :value="currentTimezoneOffset"
+        mb-2
+      />
+
+      <c-card title="Date-Time in other timezones">
+        <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>
+
+    <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>