Skip to content

Commit

Permalink
feat(new tool): Geo Distance Computer
Browse files Browse the repository at this point in the history
Fix part of #1416
  • Loading branch information
sharevb committed Jan 12, 2025
1 parent 08d977b commit 5effcb3
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 1 deletion.
72 changes: 72 additions & 0 deletions src/tools/geo-distance-calculator/geo-distance-calculator.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<script setup lang="ts">
import haversine from 'haversine';

Check failure on line 2 in src/tools/geo-distance-calculator/geo-distance-calculator.vue

View workflow job for this annotation

GitHub Actions / ci

Cannot find module 'haversine' or its corresponding type declarations.
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>
12 changes: 12 additions & 0 deletions src/tools/geo-distance-calculator/index.ts
Original file line number Diff line number Diff line change
@@ -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'),
});
8 changes: 7 additions & 1 deletion src/tools/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -172,7 +173,12 @@ export const toolsByCategory: ToolCategory[] = [
},
{
name: 'Measurement',
components: [chronometer, temperatureConverter, benchmarkBuilder],
components: [
chronometer,
temperatureConverter,
benchmarkBuilder,
geoDistanceCalculator,
],
},
{
name: 'Text',
Expand Down

0 comments on commit 5effcb3

Please sign in to comment.