fix: add 24h switch and bugs fixes

Fixes Timezones <> Countries reactivity
Fix current timezone field to be readonlt
Added 24h format switch

Author: sharevb

components.d.ts

@@ -130,29 +130,22 @@ declare module '@vue/runtime-core' {
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
-    NButton: typeof import('naive-ui')['NButton']
-    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
+    NDivider: typeof import('naive-ui')['NDivider']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NH1: typeof import('naive-ui')['NH1']
     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']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
-    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']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
@@ -180,6 +173,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']
+    TextToUnicode: typeof import('./src/tools/text-to-unicode/text-to-unicode.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']

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

@@ -16,6 +16,8 @@ function convertMinsToHrsMins(minutes: number) {
 
 const otherTimezones = useStorage<{ name: string }[]>('timezone-conv:zones', [{ name: 'Etc/GMT' }]);
 const currentTimezone = useStorage<string>('timezone-conv:current', browserTimezone);
+const use24HourTimeFormat = useStorage<boolean>('timezone-conv:24h', true);
+
 const now = Date.now();
 const currentDatetimeRange = ref<[number, number]>([now, now]);
 const currentTimezoneOffset = computed(() => {
@@ -27,7 +29,7 @@ function convertToTimezone(tz: string, timestamp: number) {
     + getTimezoneOffset(currentTimezone.value, new Date()) * 60 * 1000
     - getTimezoneOffset(browserTimezone, new Date()) * 60 * 1000,
   ).toLocaleString(undefined,
-    { timeZone: tz, timeZoneName: undefined, hour12: false });
+    { timeZone: tz, timeZoneName: undefined, hour12: !use24HourTimeFormat.value });
 }
 
 const tzToCountriesInput = ref(browserTimezone);
@@ -58,12 +60,18 @@ const countryToTimezonesOutput = computed(() => ctz.getTimezonesForCountry(count
         mb-2
       />
 
-      <input-copyable
-        label="Current Timezone Offset (min)"
-        label-position="left"
-        :value="currentTimezoneOffset"
-        mb-2
-      />
+      <n-space justify="space-evenly">
+        <input-copyable
+          label="Current Timezone Offset (min)"
+          label-position="left"
+          :value="currentTimezoneOffset"
+          readonly
+          mb-2
+        />
+        <n-form-item label="Use 24 hour time format" label-placement="left">
+          <n-switch v-model:value="use24HourTimeFormat" />
+        </n-form-item>
+      </n-space>
 
       <c-card title="Date-Time in other timezones">
         <n-dynamic-input
@@ -92,9 +100,9 @@ const countryToTimezonesOutput = computed(() => ctz.getTimezonesForCountry(count
 
     <c-card title="Country to Timezones" mb-2>
       <c-select
+        v-model:value="countryToTimezonesInput"
         label="Country"
         label-position="left"
-        :value="countryToTimezonesInput"
         searchable
         :options="allCountries"
       />
@@ -110,9 +118,9 @@ const countryToTimezonesOutput = computed(() => ctz.getTimezonesForCountry(count
 
     <c-card title="Timezones to Countries" mb-2>
       <c-select
+        v-model:value="tzToCountriesInput"
         label="Timezone"
         label-position="left"
-        :value="tzToCountriesInput"
         searchable
         :options="allTimezones"
       />