From 5effcb3ebe74b3173eba9f86059c075b82d4ba0e Mon Sep 17 00:00:00 2001
From: sharevb <sharevb@gmail.com>
Date: Sun, 12 Jan 2025 22:16:52 +0100
Subject: [PATCH] feat(new tool): Geo Distance Computer

Fix part of #1416
---
 .../geo-distance-calculator.vue               | 72 +++++++++++++++++++
 src/tools/geo-distance-calculator/index.ts    | 12 ++++
 src/tools/index.ts                            |  8 ++-
 3 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 src/tools/geo-distance-calculator/geo-distance-calculator.vue
 create mode 100644 src/tools/geo-distance-calculator/index.ts

diff --git a/src/tools/geo-distance-calculator/geo-distance-calculator.vue b/src/tools/geo-distance-calculator/geo-distance-calculator.vue
new file mode 100644
index 000000000..b2daf070d
--- /dev/null
+++ b/src/tools/geo-distance-calculator/geo-distance-calculator.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import haversine from 'haversine';
+import SpanCopyable from '@/components/SpanCopyable.vue';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+
+const latitude1 = useQueryParamOrStorage({ name: 'lat1', storageName: 'geo-dist:lat1', defaultValue: 0 });
+const longitude1 = useQueryParamOrStorage({ name: 'lng1', storageName: 'geo-dist:lng1', defaultValue: 0 });
+
+const latitude2 = useQueryParamOrStorage({ name: 'lat2', storageName: 'geo-dist:lat2', defaultValue: 0 });
+const longitude2 = useQueryParamOrStorage({ name: 'lng2', storageName: 'geo-dist:lng2', defaultValue: 0 });
+
+const start = computed(() => ({ latitude: latitude1.value, longitude: longitude1.value }));
+const end = computed(() => ({ latitude: latitude2.value, longitude: longitude2.value }));
+
+const { coords: userCoords } = useGeolocation();
+
+const distanceKM = computed(() => haversine(start.value, end.value, { unit: 'km' }));
+const distanceMeter = computed(() => haversine(start.value, end.value, { unit: 'meter' }));
+const distanceMile = computed(() => haversine(start.value, end.value, { unit: 'mile' }));
+const distanceNMI = computed(() => haversine(start.value, end.value, { unit: 'nmi' }));
+</script>
+
+<template>
+  <div>
+    <c-card title="Your position">
+      <n-form-item label="Accuracy">
+        <SpanCopyable :value="userCoords?.accuracy?.toString() || 'Unknown'" />
+      </n-form-item>
+      <n-form-item label="Latitude">
+        <SpanCopyable :value="userCoords?.latitude?.toString() || 'Unknown'" />
+      </n-form-item>
+      <n-form-item label="Longitude">
+        <SpanCopyable :value="userCoords?.longitude?.toString() || 'Unknown'" />
+      </n-form-item>
+      <n-form-item label="Altitude">
+        <SpanCopyable :value="userCoords?.altitude?.toString() || 'Unknown'" />
+      </n-form-item>
+      <n-form-item label="Heading">
+        <SpanCopyable :value="userCoords?.heading?.toString() || 'Unknown'" />
+      </n-form-item>
+      <n-form-item label="Speed">
+        <SpanCopyable :value="userCoords?.speed?.toString() || 'Unknown'" />
+      </n-form-item>
+    </c-card>
+
+    <c-card title="Distance computer">
+      <n-form-item label="Geolocation 1 (latitude, longitude)">
+        <n-input-number v-model:value="latitude1" :min="-90" :max="90" placeholder="Latitude..." />
+        <n-input-number v-model:value="longitude1" :min="-180" :max="180" placeholder="Longitude..." />
+      </n-form-item>
+      <n-form-item label="Geolocation 2 (latitude, longitude)">
+        <n-input-number v-model:value="latitude2" :min="-90" :max="90" placeholder="Latitude..." />
+        <n-input-number v-model:value="longitude2" :min="-180" :max="180" placeholder="Longitude..." />
+      </n-form-item>
+
+      <n-divider />
+
+      <n-form-item label="Distance (km)">
+        <SpanCopyable :value="distanceKM" />
+      </n-form-item>
+      <n-form-item label="Distance (mile)">
+        <SpanCopyable :value="distanceMile" />
+      </n-form-item>
+      <n-form-item label="Distance (meter)">
+        <SpanCopyable :value="distanceMeter" />
+      </n-form-item>
+      <n-form-item label="Distance (nmi)">
+        <SpanCopyable :value="distanceNMI" />
+      </n-form-item>
+    </c-card>
+  </div>
+</template>
diff --git a/src/tools/geo-distance-calculator/index.ts b/src/tools/geo-distance-calculator/index.ts
new file mode 100644
index 000000000..0babbb4eb
--- /dev/null
+++ b/src/tools/geo-distance-calculator/index.ts
@@ -0,0 +1,12 @@
+import { WorldLatitude } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Geo distance calculator',
+  path: '/geo-distance-calculator',
+  description: 'Compute distance between two geo location (and display current user location information)',
+  keywords: ['geo', 'distance', 'calculator'],
+  component: () => import('./geo-distance-calculator.vue'),
+  icon: WorldLatitude,
+  createdAt: new Date('2025-01-01'),
+});
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 388cfaf49..4636ea1e6 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -2,6 +2,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 emailNormalizer } from './email-normalizer';
+import { tool as geoDistanceCalculator } from './geo-distance-calculator';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -172,7 +173,12 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Measurement',
-    components: [chronometer, temperatureConverter, benchmarkBuilder],
+    components: [
+      chronometer,
+      temperatureConverter,
+      benchmarkBuilder,
+      geoDistanceCalculator,
+    ],
   },
   {
     name: 'Text',