@jjlmoya/utils-drones 1.1.0

package/src/tool/gps-coordinates-converter/component.astro

@@ -0,0 +1,355 @@
+---
+import GpsInputs from "./components/GpsInputs.astro";
+import GpsResults from "./components/GpsResults.astro";
+import GpsMap from "./components/GpsMap.astro";
+import GpsHistory from "./components/GpsHistory.astro";
+import "./GpsCoordinatesConverter.css";
+
+const { ui } = Astro.props;
+---
+
+<div class="gps-converter-ui" 
+    data-ui-copied={ui.copied} 
+    data-ui-no-history={ui.noHistory} 
+    data-ui-load={ui.load} 
+    data-ui-delete={ui.delete}
+>
+    <div class="tech-mega-card animate-in fade-in zoom-in duration-700">
+        <div class="card-grid">
+            <aside class="config-sidebar">
+                <GpsInputs ui={ui} />
+                <div class="divider"></div>
+                <GpsHistory ui={ui} />
+            </aside>
+
+            <main class="main-display">
+                <GpsResults ui={ui} />
+                <div class="divider"></div>
+                <GpsMap ui={ui} />
+            </main>
+        </div>
+    </div>
+</div>
+
+<script is:inline lang="ts">
+    interface GMSObject {
+        g: number;
+        m: number;
+        s: number;
+        h: string;
+        mDec: number;
+    }
+
+    interface HistoryItem {
+        id: number;
+        lat: string;
+        lng: string;
+        time: string;
+    }
+
+    let mode: string = 'DD';
+
+    const elements: Record<string, HTMLElement | null> = {
+        latDD: document.getElementById('latDD') as HTMLInputElement,
+        lngDD: document.getElementById('lngDD') as HTMLInputElement,
+        latG: document.getElementById('latG') as HTMLInputElement,
+        latM: document.getElementById('latM') as HTMLInputElement,
+        latS: document.getElementById('latS') as HTMLInputElement,
+        latH: document.getElementById('latH') as HTMLSelectElement,
+        lngG: document.getElementById('lngG') as HTMLInputElement,
+        lngM: document.getElementById('lngM') as HTMLInputElement,
+        lngS: document.getElementById('lngS') as HTMLInputElement,
+        lngH: document.getElementById('lngH') as HTMLSelectElement,
+        valDD: document.getElementById('valDD'),
+        valGMS: document.getElementById('valGMS'),
+        valDM: document.getElementById('valDM'),
+        valMaps: document.getElementById('valMaps'),
+        historyList: document.getElementById('historyList'),
+        modeDD: document.getElementById('modeDD'),
+        modeGMS: document.getElementById('modeGMS'),
+        ddInputs: document.getElementById('dd-inputs'),
+        gmsInputs: document.getElementById('gms-inputs'),
+        btnMyLocation: document.getElementById('btnMyLocation'),
+    };
+    const container: HTMLElement | null = document.querySelector('.gps-converter-ui');
+    const uiLocal = {
+        copied: container?.dataset.uiCopied || 'Copied',
+        noHistory: container?.dataset.uiNoHistory || 'No history',
+        load: container?.dataset.uiLoad || 'Load',
+        delete: container?.dataset.uiDelete || 'Delete'
+    };
+
+    function init(): void {
+        initMap();
+        setupListeners();
+        loadHistory();
+        updateFromDD(40.4168, -3.7038);
+    }
+
+    function initMap(): void {
+        const mapContainer = document.getElementById('gpsMap');
+        if (!mapContainer) return;
+    }
+
+    function parseCoordValue(val: string): number {
+        return parseFloat(val.replace(',', '.'));
+    }
+
+    function setupModeListeners(): void {
+        elements.modeDD?.addEventListener('click', () => switchMode('DD'));
+        elements.modeGMS?.addEventListener('click', () => switchMode('GMS'));
+    }
+
+    function setupLocationListener(): void {
+        elements.btnMyLocation?.addEventListener('click', () => {
+            if ("geolocation" in navigator) {
+                navigator.geolocation.getCurrentPosition((position) => {
+                    updateFromDD(position.coords.latitude, position.coords.longitude);
+                });
+            }
+        });
+    }
+
+    function setupDDInputListeners(): void {
+        [elements.latDD, elements.lngDD].forEach(el => {
+            el?.addEventListener('input', () => {
+                if (mode === 'DD') {
+                    const lat = parseCoordValue(elements.latDD.value);
+                    const lng = parseCoordValue(elements.lngDD.value);
+                    updateFromDD(lat, lng, false);
+                }
+            });
+        });
+    }
+
+    function setupGMSInputListeners(): void {
+        const gmsElements = [elements.latG, elements.latM, elements.latS, elements.latH,
+                           elements.lngG, elements.lngM, elements.lngS, elements.lngH];
+        gmsElements.forEach(el => {
+            el?.addEventListener('input', () => {
+                if (mode === 'GMS') {
+                    const lat = gmsToDecimal(
+                        parseFloat(elements.latG.value) || 0,
+                        parseFloat(elements.latM.value) || 0,
+                        parseFloat(elements.latS.value) || 0,
+                        elements.latH.value
+                    );
+                    const lng = gmsToDecimal(
+                        parseFloat(elements.lngG.value) || 0,
+                        parseFloat(elements.lngM.value) || 0,
+                        parseFloat(elements.lngS.value) || 0,
+                        elements.lngH.value
+                    );
+                    updateFromDD(lat, lng, false);
+                }
+            });
+        });
+    }
+
+    function setupCopyListeners(): void {
+        document.querySelectorAll('.copy-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const targetId = btn.getAttribute('data-copy');
+                const text = document.getElementById(targetId!)?.textContent;
+                if (text) {
+                    navigator.clipboard.writeText(text);
+                    const original = btn.innerHTML;
+                    btn.innerHTML = uiLocal.copied;
+                    setTimeout(() => btn.innerHTML = original, 2000);
+                }
+            });
+        });
+    }
+
+    function setupClearHistoryListener(): void {
+        document.getElementById('clearHistory')?.addEventListener('click', () => {
+            localStorage.removeItem('gps_history');
+            loadHistory();
+        });
+    }
+
+    function setupListeners(): void {
+        setupModeListeners();
+        setupLocationListener();
+        setupDDInputListeners();
+        setupGMSInputListeners();
+        setupCopyListeners();
+        setupClearHistoryListener();
+    }
+
+    function setSwitchModeDisplay(isDD: boolean): void {
+        if (isDD) {
+            if (elements.ddInputs) elements.ddInputs.style.display = 'grid';
+            if (elements.gmsInputs) elements.gmsInputs.style.display = 'none';
+        } else {
+            if (elements.ddInputs) elements.ddInputs.style.display = 'none';
+            if (elements.gmsInputs) elements.gmsInputs.style.display = 'flex';
+        }
+    }
+
+    function setSwitchModeActive(isDD: boolean): void {
+        if (isDD) {
+            elements.modeDD?.classList.add('active');
+            elements.modeGMS?.classList.remove('active');
+        } else {
+            elements.modeDD?.classList.remove('active');
+            elements.modeGMS?.classList.add('active');
+        }
+    }
+
+    function switchMode(newMode: string): void {
+        mode = newMode;
+        const isDD = mode === 'DD';
+        setSwitchModeActive(isDD);
+        setSwitchModeDisplay(isDD);
+    }
+
+    function updateGMSInputs(lat: number, lng: number): void {
+        const latGMS = decimalToGMS(lat, true);
+        const lngGMS = decimalToGMS(lng, false);
+        elements.latG.value = latGMS.g.toString();
+        elements.latM.value = latGMS.m.toString();
+        elements.latS.value = latGMS.s.toFixed(2);
+        elements.latH.value = latGMS.h;
+        elements.lngG.value = lngGMS.g.toString();
+        elements.lngM.value = lngGMS.m.toString();
+        elements.lngS.value = lngGMS.s.toFixed(2);
+        elements.lngH.value = lngGMS.h;
+    }
+
+    function updateResultsDisplay(lat: number, lng: number): void {
+        const latGMS = decimalToGMS(lat, true);
+        const lngGMS = decimalToGMS(lng, false);
+        if (elements.valDD) elements.valDD.textContent = `${lat.toFixed(6)}, ${lng.toFixed(6)}`;
+        if (elements.valGMS) elements.valGMS.textContent = `${formatGMS(latGMS)}, ${formatGMS(lngGMS)}`;
+        if (elements.valDM) elements.valDM.textContent = `${formatDM(latGMS)}, ${formatDM(lngGMS)}`;
+        if (elements.valMaps) elements.valMaps.textContent = `${lat.toFixed(6)},${lng.toFixed(6)}`;
+    }
+
+    function updateFromDD(lat: number, lng: number, updateInputs: boolean = true): void {
+        if (isNaN(lat) || isNaN(lng)) return;
+
+        if (updateInputs) {
+            elements.latDD.value = lat.toFixed(6);
+            elements.lngDD.value = lng.toFixed(6);
+            updateGMSInputs(lat, lng);
+        } else if (mode === 'DD') {
+            updateGMSInputs(lat, lng);
+        }
+
+        updateResultsDisplay(lat, lng);
+        saveToHistory(lat, lng);
+    }
+
+    function getHemisphere(value: number, isLat: boolean): string {
+        if (value >= 0) return isLat ? 'N' : 'E';
+        return isLat ? 'S' : 'W';
+    }
+
+    function decimalToGMS(d: number, isLat: boolean): GMSObject {
+        const h = getHemisphere(d, isLat);
+        const absD = Math.abs(d);
+        const g = Math.floor(absD);
+        const mDecimal = (absD - g) * 60;
+        const m = Math.floor(mDecimal);
+        const s = (mDecimal - m) * 60;
+        return { g, m, s, h, mDec: mDecimal };
+    }
+
+    function gmsToDecimal(g: number, m: number, s: number, h: string): number {
+        let d = g + (m / 60) + (s / 3600);
+        if (h === 'S' || h === 'W') d = -d;
+        return d;
+    }
+
+    function formatGMS(obj: GMSObject): string {
+        return `${obj.g}° ${obj.m}' ${obj.s.toFixed(2)}" ${obj.h}`;
+    }
+
+    function formatDM(obj: GMSObject): string {
+        return `${obj.g}° ${obj.mDec.toFixed(3)}' ${obj.h}`;
+    }
+
+    function saveToHistory(lat: number, lng: number): void {
+        let history: HistoryItem[] = JSON.parse(localStorage.getItem('gps_history') || '[]');
+        const entry: HistoryItem = {
+            id: Date.now(),
+            lat: lat.toFixed(5),
+            lng: lng.toFixed(5),
+            time: new Date().toLocaleTimeString()
+        };
+
+        if (history.length > 0 && history[0].lat === entry.lat && history[0].lng === entry.lng) return;
+
+        history.unshift(entry);
+        history = history.slice(0, 5);
+        localStorage.setItem('gps_history', JSON.stringify(history));
+        renderHistory(history);
+    }
+
+    function loadHistory(): void {
+        const history: HistoryItem[] = JSON.parse(localStorage.getItem('gps_history') || '[]');
+        renderHistory(history);
+    }
+
+    function renderHistoryHTML(history: HistoryItem[]): string {
+        return history.map(item => `
+            <div class="history-item" data-id="${item.id}">
+                <div class="hist-info" data-lat="${item.lat}" data-lng="${item.lng}">
+                    <span class="hist-coords">${item.lat}, ${item.lng}</span>
+                    <span class="hist-time">${item.time}</span>
+                </div>
+                <div class="hist-actions">
+                    <button class="action-btn load-btn" title="${uiLocal.load}" data-lat="${item.lat}" data-lng="${item.lng}">
+                        <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+                    </button>
+                    <button class="action-btn delete-btn" title="${uiLocal.delete}" data-id="${item.id}">
+                        <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                    </button>
+                </div>
+            </div>
+        `).join('');
+    }
+
+    function setupHistoryEventListeners(): void {
+        document.querySelectorAll('.load-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const lat = parseFloat(btn.getAttribute('data-lat')!);
+                const lng = parseFloat(btn.getAttribute('data-lng')!);
+                updateFromDD(lat, lng);
+            });
+        });
+
+        document.querySelectorAll('.delete-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const id = parseInt(btn.getAttribute('data-id')!);
+                let history: HistoryItem[] = JSON.parse(localStorage.getItem('gps_history') || '[]');
+                history = history.filter((item) => item.id !== id);
+                localStorage.setItem('gps_history', JSON.stringify(history));
+                renderHistory(history);
+            });
+        });
+
+        document.querySelectorAll('.hist-info').forEach(info => {
+            info.addEventListener('click', () => {
+                const lat = parseFloat(info.getAttribute('data-lat')!);
+                const lng = parseFloat(info.getAttribute('data-lng')!);
+                updateFromDD(lat, lng);
+            });
+        });
+    }
+
+    function renderHistory(history: HistoryItem[]) {
+        if (!elements.historyList) return;
+        if (history.length === 0) {
+            elements.historyList.innerHTML = `<div class="no-history">${uiLocal.noHistory}</div>`;
+            return;
+        }
+        elements.historyList.innerHTML = renderHistoryHTML(history);
+        setupHistoryEventListeners();
+    }
+
+    init();
+</script>

package/src/tool/gps-coordinates-converter/components/GpsHistory.astro

@@ -0,0 +1,36 @@
+---
+const { ui } = Astro.props;
+---
+
+<div class="tech-section">
+    <div class="header-row">
+        <h3 class="section-title">{ui.recentHistory}</h3>
+        <button id="clearHistory" class="text-btn">{ui.clear}</button>
+    </div>
+    <div id="historyList" class="history-list">
+        <div class="no-history">{ui.noHistory}</div>
+    </div>
+</div>
+
+<style>
+    .header-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .text-btn {
+        background: transparent;
+        border: none;
+        color: #94a3b8;
+        font-size: 0.7rem;
+        font-weight: 700;
+        cursor: pointer;
+        text-transform: uppercase;
+    }
+    .text-btn:hover { color: #ef4444; }
+    .no-history {
+        font-size: 0.8rem;
+        color: #94a3b8;
+        font-style: italic;
+    }
+</style>

package/src/tool/gps-coordinates-converter/components/GpsInputs.astro

@@ -0,0 +1,92 @@
+---
+const { ui } = Astro.props;
+import { Icon } from "astro-icon/components";
+---
+
+<div class="tech-section">
+    <div class="row-header">
+        <div class="mode-switch">
+            <button id="modeDD" class="mode-btn active" data-mode="DD">{ui.decimalDD}</button>
+            <button id="modeGMS" class="mode-btn" data-mode="GMS">{ui.degreesGMS}</button>
+        </div>
+        <button id="btnMyLocation" class="loc-btn" title={ui.useLocation}>
+            <Icon name="mdi:crosshairs-gps" size={18} />
+        </button>
+    </div>
+
+    <div id="dd-inputs" class="compact-inputs">
+        <div class="input-block">
+            <label class="field-label">{ui.lat}</label>
+            <input type="text" id="latDD" class="tech-input" placeholder="40.4168" />
+        </div>
+        <div class="input-block">
+            <label class="field-label">{ui.lng}</label>
+            <input type="text" id="lngDD" class="tech-input" placeholder="-3.7038" />
+        </div>
+    </div>
+
+    <div id="gms-inputs" class="tech-section" style="display: none;">
+        <div class="gms-group">
+            <label class="field-label">{ui.latGMS}</label>
+            <div class="compact-inputs">
+                <input type="number" id="latG" class="tech-input" placeholder="G" />
+                <input type="number" id="latM" class="tech-input" placeholder="M" />
+                <input type="number" id="latS" class="tech-input" placeholder="S" step="any" />
+                <select id="latH" class="tech-input">
+                    <option value="N">N</option>
+                    <option value="S">S</option>
+                </select>
+            </div>
+        </div>
+        <div class="gms-group">
+            <label class="field-label">{ui.lngGMS}</label>
+            <div class="compact-inputs">
+                <input type="number" id="lngG" class="tech-input" placeholder="G" />
+                <input type="number" id="lngM" class="tech-input" placeholder="M" />
+                <input type="number" id="lngS" class="tech-input" placeholder="S" step="any" />
+                <select id="lngH" class="tech-input">
+                    <option value="E">E</option>
+                    <option value="W">W</option>
+                </select>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .row-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 1rem;
+    }
+    .loc-btn {
+        background: #0ea5e910;
+        border: 1px solid #0ea5e930;
+        color: #0ea5e9;
+        padding: 0.6rem;
+        border-radius: 12px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+    }
+    .loc-btn:hover {
+        background: #0ea5e920;
+        transform: scale(1.05);
+    }
+    .gms-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+    .compact-inputs {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0.5rem;
+    }
+    #dd-inputs.compact-inputs {
+        grid-template-columns: 1fr 1fr;
+    }
+</style>

package/src/tool/gps-coordinates-converter/components/GpsMap.astro

@@ -0,0 +1,18 @@
+---
+---
+
+<div class="tech-section">
+    <h3 class="section-title">Visualización en Mapas</h3>
+    <div id="gpsMap" class="map-container"></div>
+    <small class="hint">Haz clic en el mapa para capturar coordenadas directamente.</small>
+</div>
+
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+
+<style>
+    .hint {
+        font-size: 0.75rem;
+        color: #94a3b8;
+        margin-top: -0.5rem;
+    }
+</style>

package/src/tool/gps-coordinates-converter/components/GpsResults.astro

@@ -0,0 +1,50 @@
+---
+const { ui } = Astro.props;
+import { Icon } from "astro-icon/components";
+---
+
+<div class="results-area">
+    <div class="result-box">
+        <div class="res-header">
+            <span class="res-label">{ui.decimalDD}</span>
+            <button class="copy-btn" data-copy="valDD">
+                <Icon name="mdi:content-copy" size={14} />
+                {ui.copy}
+            </button>
+        </div>
+        <div id="valDD" class="val-display">0.0000, 0.0000</div>
+    </div>
+
+    <div class="result-box">
+        <div class="res-header">
+            <span class="res-label">{ui.gmsTraditional}</span>
+            <button class="copy-btn" data-copy="valGMS">
+                <Icon name="mdi:content-copy" size={14} />
+                {ui.copy}
+            </button>
+        </div>
+        <div id="valGMS" class="val-display">0° 0' 0" N, 0° 0' 0" E</div>
+    </div>
+
+    <div class="result-box">
+        <div class="res-header">
+            <span class="res-label">{ui.nauticalDM}</span>
+            <button class="copy-btn" data-copy="valDM">
+                <Icon name="mdi:content-copy" size={14} />
+                {ui.copy}
+            </button>
+        </div>
+        <div id="valDM" class="val-display">0° 0.000' N, 0° 0.000' E</div>
+    </div>
+
+    <div class="result-box">
+        <div class="res-header">
+            <span class="res-label">{ui.googleMapsFormat}</span>
+            <button class="copy-btn" data-copy="valMaps">
+                <Icon name="mdi:google-maps" size={14} />
+                {ui.copy}
+            </button>
+        </div>
+        <div id="valMaps" class="val-display">0.0, 0.0</div>
+    </div>
+</div>