2026-04-15-2 dashboard convert to html without vite and react

2026-04-15 15:41:05 +03:00
parent 3802af0651
commit f1f1818501
13 changed files with 5126 additions and 220 deletions
@@ -0,0 +1,123 @@
+/**
+ * Playground Logic (Map Integration)
+ */
+
+const playground = {
+    map: null,
+    currentStyle: 'obsidian',
+    selectedKey: '',
+
+    init: (keys) => {
+        if (playground.map) return;
+        console.log('🗺️ Initializing Playground...');
+        
+        playground.renderKeySelect(keys);
+        playground.bindEvents();
+        
+        if (keys.length > 0) {
+            playground.selectedKey = keys[0].key;
+            playground.loadMap();
+        }
+    },
+
+    renderKeySelect: (keys) => {
+        const select = document.getElementById('pg-key-select');
+        if (!select) return;
+        select.innerHTML = keys.map(k => `<option value="${k.key}">${k.name}</option>`).join('');
+        if (keys.length === 0) select.innerHTML = '<option value="">No keys available</option>';
+    },
+
+    bindEvents: () => {
+        const select = document.getElementById('pg-key-select');
+        if (select) {
+            select.addEventListener('change', (e) => {
+                playground.selectedKey = e.target.value;
+                playground.updateMap();
+            });
+        }
+
+        const searchInput = document.getElementById('pg-search');
+        if (searchInput) {
+            searchInput.addEventListener('keydown', async (e) => {
+                if (e.key === 'Enter' && searchInput.value) {
+                    await playground.handleSearch(searchInput.value);
+                }
+            });
+        }
+    },
+
+    loadMap: async () => {
+        const container = document.getElementById('map');
+        if (!container || !playground.selectedKey) return;
+
+        try {
+            // Set RTL Text Plugin
+            if (maplibregl.getRTLTextPluginStatus() === 'unavailable') {
+                maplibregl.setRTLTextPlugin(
+                    'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.js',
+                    null,
+                    true
+                );
+            }
+
+            const styleUrl = `/api/maps/style.json?api_key=${playground.selectedKey}&theme=${playground.currentStyle}`;
+            const res = await fetch(styleUrl);
+            const styleData = await res.json();
+
+            playground.map = new maplibregl.Map({
+                container: 'map',
+                style: styleData,
+                center: [35.91, 31.95], // Amman, Jordan
+                zoom: 12,
+                attributionControl: false
+            });
+
+            playground.map.addControl(new maplibregl.NavigationControl(), 'top-right');
+            
+            playground.map.on('load', () => {
+                console.log('Map loaded!');
+                playground.map.resize();
+            });
+
+        } catch (error) {
+            console.error('Failed to init map', error);
+        }
+    },
+
+    updateMap: async () => {
+        if (!playground.map) return;
+        try {
+            const styleUrl = `/api/maps/style.json?api_key=${playground.selectedKey}&theme=${playground.currentStyle}`;
+            const res = await fetch(styleUrl);
+            const styleData = await res.json();
+            playground.map.setStyle(styleData);
+        } catch (error) {
+            console.error('Failed to update style', error);
+        }
+    },
+
+    setStyle: (style) => {
+        playground.currentStyle = style;
+        // Update UI buttons
+        document.getElementById('style-obsidian').className = (style === 'obsidian') ? 'flex-1 py-3 text-xs font-bold rounded-xl bg-blue-600 text-white shadow-lg shadow-blue-500/20' : 'flex-1 py-3 text-xs font-bold rounded-xl bg-slate-900 text-slate-500';
+        document.getElementById('style-light').className = (style === 'light') ? 'flex-1 py-3 text-xs font-bold rounded-xl bg-blue-600 text-white shadow-lg shadow-blue-500/20' : 'flex-1 py-3 text-xs font-bold rounded-xl bg-slate-900 text-slate-500';
+        
+        playground.updateMap();
+    },
+
+    handleSearch: async (query) => {
+        try {
+            const res = await fetch(`/api/geocoding/search?q=${encodeURIComponent(query)}`, {
+                headers: { 'x-api-key': playground.selectedKey }
+            });
+            if (res.ok) {
+                const data = await res.json();
+                if (data && data.length > 0) {
+                    playground.map.flyTo({ center: [data[0].longitude, data[0].latitude], zoom: 14 });
+                }
+            }
+        } catch (err) {
+            console.error("Search failed", err);
+        }
+    }
+};