feat(new tool): TTL Calculator

Fix #828

components.d.ts

@@ -127,24 +127,19 @@ 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']
-    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NFormItem: typeof import('naive-ui')['NFormItem']
-    NGi: typeof import('naive-ui')['NGi']
-    NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NLabel: typeof import('naive-ui')['NLabel']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
-    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSpace: typeof import('naive-ui')['NSpace']
-    NSpin: typeof import('naive-ui')['NSpin']
     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']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
@@ -159,6 +154,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
+    SafelinkDecoder: typeof import('./src/tools/safelink-decoder/safelink-decoder.vue')['default']
     SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
     SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
     SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']
@@ -177,6 +173,7 @@ declare module '@vue/runtime-core' {
     TomlToYaml: typeof import('./src/tools/toml-to-yaml/toml-to-yaml.vue')['default']
     'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default']
     ToolCard: typeof import('./src/components/ToolCard.vue')['default']
+    TtlCalculator: typeof import('./src/tools/ttl-calculator/ttl-calculator.vue')['default']
     UlidGenerator: typeof import('./src/tools/ulid-generator/ulid-generator.vue')['default']
     UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']
     UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']

src/tools/index.ts

@@ -6,6 +6,7 @@ import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
 import { tool as textToUnicode } from './text-to-unicode';
 import { tool as safelinkDecoder } from './safelink-decoder';
+import { tool as ttlCalculator } from './ttl-calculator';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -156,7 +157,11 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Math',
-    components: [mathEvaluator, etaCalculator, percentageCalculator],
+    components: [
+      mathEvaluator,
+      etaCalculator,
+      ttlCalculator,
+      percentageCalculator],
   },
   {
     name: 'Measurement',

src/tools/ttl-calculator/index.ts

@@ -0,0 +1,12 @@
+import { CalendarTime } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'TTL calculator',
+  path: '/ttl-calculator',
+  description: 'TTL to Time converter',
+  keywords: ['ttl', 'dns', 'calculator', 'time', 'live', 'duration'],
+  component: () => import('./ttl-calculator.vue'),
+  icon: CalendarTime,
+  createdAt: new Date('2024-04-20'),
+});

src/tools/ttl-calculator/ttl-calculator.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { formatDuration, intervalToDuration } from 'date-fns';
+import SpanCopyable from '@/components/SpanCopyable.vue';
+
+const days = ref(0);
+const hours = ref(24);
+const minutes = ref(0);
+const seconds = ref(0);
+const ttlDisplay = computed(() => (days.value * 86400 + hours.value * 3600 + minutes.value * 60 + seconds.value).toString());
+
+const ttl = ref(0);
+const timeDisplay = computed(() => formatDuration(intervalToDuration({ start: 0, end: ttl.value * 1000 })));
+</script>
+
+<template>
+  <div>
+    <c-card title="Time to TTL" mb-3>
+      <n-space>
+        <n-form-item label="Days">
+          <n-input-number v-model:value="days" :min="0" />
+        </n-form-item>
+        <n-form-item label="Hours">
+          <n-input-number v-model:value="hours" :min="0" />
+        </n-form-item>
+        <n-form-item label="Minutes">
+          <n-input-number v-model:value="minutes" :min="0" />
+        </n-form-item>
+        <n-form-item label="Seconds">
+          <n-input-number v-model:value="seconds" :min="0" />
+        </n-form-item>
+      </n-space>
+
+      <n-divider />
+
+      <n-form-item label="TTL:" label-placement="left">
+        <SpanCopyable :value="ttlDisplay" />
+      </n-form-item>
+    </c-card>
+
+    <c-card title="TTL to Time">
+      <n-form-item label="TTL">
+        <n-input-number v-model:value="ttl" :min="0" />
+      </n-form-item>
+
+      <n-divider />
+
+      <n-form-item label="Time">
+        <SpanCopyable :value="timeDisplay" />
+      </n-form-item>
+    </c-card>
+  </div>
+</template>