diff --git a/src/map.js b/src/map.js index 33064e1..0413227 100644 --- a/src/map.js +++ b/src/map.js @@ -1,17 +1,8 @@ -import { createApp, reactive, ref, computed, onMounted } from '../lib/vue.esm-browser.js'; - +import { createApp, reactive, ref, computed, watch, onMounted, toRaw } from '../lib/vue.esm-browser.js'; +import * as ntools from './node-utils.js'; const apiUrl = 'https://map.meshcore.dev/api/v1/nodes'; -const keyOrder = ['adv_name', 'type', 'link', 'inserted_date', 'updated_date', 'public_key', 'coords', 'params' ] -const humanLabel = { - coords: 'Coordinates', - adv_name: 'Name', - inserted_date: 'Inserted', - updated_date: 'Last updated', - public_key: 'Public key', - type: 'Node type', - params: 'Radio params', - link: 'Meshcore link', -}; + +let presets = []; const types = { '1': 'Client', @@ -20,25 +11,133 @@ const types = { '4': 'Sensor' }; -const humanValue = { - inserted_date(val) { - return new Date(val).toLocaleString(); +const updateStatusDesc = { + 'none': 'manualy added', + 'recent': 'updated recently', + 'stale': 'updated while ago', + 'old': 'not updated', + 'extinct': 'will be deleted soon' +}; + +const radioParamDesc = { + 'bw': { + label: 'Bandwidth', + unit: 'kHz' }, - updated_date(val) { - return new Date(val).toLocaleString(); + 'freq': { + label: 'Frequency', + unit: 'MHz', }, - coords(val) { - return `${val}`; + 'sf': { + label: 'Spreading factor', + unit: '', }, - type(val) { - return types[val]; + 'cr': { + label: 'Coding rate', + unit: '', }, - link(val) { - return `Copy to clipboard` +}; + +const columnOrder = ['adv_name', 'type', 'status', 'link', 'inserted_date', 'updated_date', 'public_key', 'coords', 'preset', 'params' ]; +const columns = { + coords: { + label: 'Coordinates', + value: (val) => `${val}` }, - params(val) { - return Object.entries(val).map(([key, val]) => `${key}=${val}`).join(', ') + adv_name: { + label: 'Name', + value: (val) => escape(val) + }, + status: { + label: 'Update status', + value: (val) => updateStatusDesc[val] + }, + inserted_date: { + label: 'Inserted', + value: (val) => { + const dt = new Date(val); + return `${timeAgo(dt.getTime())}` + } + }, + updated_date: { + label: 'Updated', + value: (val) => { + const dt = new Date(val); + return `${timeAgo(dt.getTime())}` + } + }, + public_key: { + label: 'Public key' + }, + type: { + label: 'Type', + value: (val) => types[val] + }, + preset: { + label: 'Radio preset', + value: (val) => { + const preset = findPreset(val) || {}; + console.log({ val, preset }); + return preset?.params?.freq ? preset.name : 'Custom' + } + }, + params: { + label: 'Radio params', + value: (val) => (Object.entries(val).map(([key, val]) => { + const paramKey = radioParamDesc[key]; + return escape(`${paramKey.label}: ${val}${paramKey.unit}`) + }).join('') + ) + }, + link: { + label: 'Meshcore link', + value: (val) => `Copy to clipboard` + }, +}; + +function timeAgo(msec) { + const seconds = Math.floor((Date.now() - msec) / 1000); + + const units = [ + { name: 'year', limit: 31536000 }, + { name: 'month', limit: 2592000 }, + { name: 'day', limit: 86400 }, + { name: 'hour', limit: 3600 }, + { name: 'minute', limit: 60 }, + { name: 'second', limit: 1 } + ]; + + for (const unit of units) { + const count = Math.floor(seconds / unit.limit); + + if (count >= 1) { + return `${count} ${unit.name}${count > 1 ? 's' : ''} ago`; + } } + + return 'just now'; +} + +function escape(html) { + return html.replace(/[&<>"']/g, c => `&#${c.charCodeAt(0)};`) +} + +function getSvgIconUrl(text, color) { + const svg = ` + + + + ${text} + `; + + return L.icon({ + iconUrl: URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' })), + iconSize: [32, 32], + iconAnchor: [17, 17], + popupAnchor: [0, -16], + }); } function clearLocationHash () { @@ -47,10 +146,59 @@ function clearLocationHash () { function getTable(node) { return ''+ - '' + keyOrder.flatMap(key => node[key] ? [`${humanLabel[key]}${ humanValue[key] ? humanValue[key](node[key]) : node[key] }`] : [] ).join('') + ''+ + '' + columnOrder.flatMap(key => node[key] ? [`${columns[key].label}${ columns[key].value ? columns[key].value(node[key]) : node[key] }`] : [] ).join('') + ''+ ''; } +function getNodePopupHTML(node) { + const userActionUrl = encodeURI(localStorage.getItem('userActionUrl') || ''); + const userActionLabel = localStorage.getItem('userActionLabel') || ''; + const userActionAnchor = userActionUrl ? ` + ${userActionLabel} + ` : ''; + + return ` + ${getTable(node)} + + Request node deletion + ${userActionAnchor} + + `; +} + +async function getPresets() { + if(presets.length) return presets; + + const res = await fetch('https://api.meshcore.nz/api/v1/config'); + const presetsApi = (await res.json()).config.suggested_radio_settings.entries; + + presets = presetsApi.map(p => ({ + name: p.title, + desc: p.description, + params: { + freq: p.frequency, + bw: p.bandwidth, + sf: p.spreading_factor, + cr: p.coding_rate + } + })); + + presets.unshift({ + name: 'All presets', + params: {} + }); + + return presets; +} + +function findPreset(params) { + return presets.find(p => + params.sf == p.params.sf && + params.freq == p.params.freq && + params.bw == p.params.bw + ) ?? {} +} + window.isNewerThan = (date, days) => { const daysMs = 1000 * 3600 * 24 * days; const dateMs = new Date(date).getTime(); @@ -58,17 +206,27 @@ window.isNewerThan = (date, days) => { return dateMs > Date.now() - daysMs; } -const deletionMailUrl = new URL('mailto:recrof@gmail.com'); -deletionMailUrl.searchParams.append('subject', 'MeshCore Map node deletion request'); -deletionMailUrl.searchParams.append('body', - 'Please delete my node from MeshCore Map database\n'+ - 'MeshCore link: \n' -); +function getDeletionMailUrl(node) { + const deletionMailUrl = new URL('mailto:recrof@gmail.com'); + deletionMailUrl.searchParams.append('subject', 'MeshCore Map node deletion request'); + deletionMailUrl.searchParams.append('body', [ + 'Please delete my node(s) from MeshCore Map database', + 'MeshCore link(s) or Public key(s):', + '', + node ? node.public_key : '', + '', + '*** IMPORTANT ***', + 'if you have multiple nodes to delete, put them into single email, delimited by newline. public key is enough, you don\'t need to add name or screenshot of the node.', + ].join('\n') + ); + + return deletionMailUrl.toString().replaceAll('+', '%20').replaceAll('\n', '%0A'); +} const appAttribution = ` - App: recrof, + App: recrof, support my work | - Node deletion request + Node deletion request `; const baseMapSelected = localStorage.getItem('baseMapSelected') || 'OpenStreetMap'; @@ -83,11 +241,11 @@ const baseMaps = { }), }; -let initCoords = { lat: 7, lon: 25, zoom: 3 }; +let params = { lat: 7, lon: 25, zoom: 3 }; const urlParams = Object.fromEntries(new URLSearchParams(location.search)); -if(!(isNaN(urlParams.lat) || isNaN(urlParams.lon) || isNaN(urlParams.zoom))) { - initCoords = urlParams +if(Number(urlParams.lat) && Number(urlParams.lon) && Number(urlParams.zoom)) { + params = urlParams } const map = window.leafletMap = leaflet.map('map', { @@ -98,7 +256,7 @@ const map = window.leafletMap = leaflet.map('map', { ], layers: baseMaps[baseMapSelected], zoomControl: false -}).setView([initCoords.lat, initCoords.lon], initCoords.zoom); +}).setView([params.lat, params.lon], params.zoom); map.on('baselayerchange', function(ev) { localStorage.setItem('baseMapSelected', ev.name); @@ -107,21 +265,154 @@ map.on('baselayerchange', function(ev) { L.control.layers(baseMaps, null, { position: 'bottomleft' }).addTo(map); // map.zoomControl.setPosition('bottomleft'); -const icons = Object.fromEntries([1, 2, 3, 4].map(id => [id, L.icon({ - iconUrl: `img/node_types/${id}.svg`, - iconSize: [32, 32], - iconAnchor: [17, 17], - popupAnchor: [0, -16], -})])); +const icons = Object.fromEntries(['none', 'recent', 'stale', 'old', 'extinct'].map(color => [color, + Object.fromEntries([1, 2, 3, 4].map(id => [id, L.icon({ + iconUrl: `img/node_types/${id}.svg`, + iconSize: [32, 32], + iconAnchor: [17, 17], + popupAnchor: [0, -16], + className: `update-${color}` + })])) +])); createApp({ setup() { - const dialogAddNode = ref(); const app = window.app = reactive({ - nodes: null, + nodes: [], + nodesByType: {}, + filteredNodes: [], search: '', link: '', - nodeFilter: [1, 2, 3, 4] + nodeFilter: [], + fromDate: '', + clusteringZoom: 12, + urlParams, + presets, + presetIndex: 0, + loading: false, + }); + + async function refreshMap({ clusteringZoom = 0 } = {}) { + markerClusterGroup.clearLayers(); + const nodes = app.filteredNodes.length > 0 ? app.filteredNodes : app.nodes; + + map.removeLayer(markerClusterGroup); + + if(clusteringZoom) { + markerClusterGroup = L.markerClusterGroup({ + disableClusteringAtZoom: clusteringZoom + }); + } + + for(const node of nodes) { + markerClusterGroup.addLayer(toRaw(node.marker)); + } + + map.addLayer(markerClusterGroup); + } + + function showNode(node) { + node.marker.openPopup(); + map.flyTo(node.marker.getLatLng(), 19); + app.search = ''; + } + + function highlightString(source, toHighlight) { + const escapedSource = source.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>'); + const matchIndex = source.toLowerCase().indexOf(toHighlight.toLowerCase()); + const highlightString = matchIndex >= 0 ? source.substring(matchIndex, matchIndex + toHighlight.length) : toHighlight; + return escapedSource.replace(highlightString, `${highlightString}`); + } + + function clearFilters() { + app.nodeFilter = [1, 2, 3, 4]; + app.fromDate = '2025-03-01'; + app.cluster = 12; + app.presetIndex = 0; + } + + function getDaysEpochMsec(days) { + return days * 24 * 60 * 60 * 1000; + } + + function getNodeUpdateStatus(node) { + if(node.source !== 'uploader') return 'none'; + const updateEpoch = new Date(node.updated_date).getTime(); + if(updateEpoch < Date.now() - getDaysEpochMsec(20)) return 'extinct'; + else if(updateEpoch < Date.now() - getDaysEpochMsec(10)) return 'old'; + else if(updateEpoch < Date.now() - getDaysEpochMsec(5)) return 'stale'; + + return 'recent'; + } + + async function downloadNodes() { + try { + app.loading = true; + const nodesReq = await fetch(apiUrl); + app.nodes = await nodesReq.json(); + + getPresets().then((presets) => { + app.presets = presets; + }); + + for(const node of app.nodes) { + const updateStatus = getNodeUpdateStatus(node); + let icon = icons[updateStatus][node.type.toString()]; + + (app.nodesByType[node.type] ??= []).push(node); + + if(node.type === 1) { + const label = ntools.getNameIconLabel(node.adv_name); + const color = ntools.getColourForName(node.adv_name); + icon = getSvgIconUrl(label, color); + } + + const marker = node.marker = L.marker( + [node.adv_lat, node.adv_lon], { icon, title: node.adv_name } + ); + + node.status = updateStatus; + node.preset = node.params; + node.coords = `${node.adv_lat.toFixed(4)}, ${node.adv_lon.toFixed(4)}`; + node.lastAdvertDate = new Date(node.last_advert); + node.insertDate = new Date(node.inserted_date); + node.updatedDate = node.updated_date && new Date(node.updated_date); + const popup = L.popup({ minWidth: 350, maxWidth: 350, content: () => getNodePopupHTML(node) }); + marker.bindPopup(popup); + } + } + catch(e) { + alert('There was an error loading map nodes:', e); + } + finally { + app.loading = false; + } + } + + clearFilters(); + + const filtersActive = computed(() => app.filteredNodes.length && app.nodes.length !== app.filteredNodes.length); + + watch( + [ + () => app.nodeFilter, + () => app.fromDate, + ], + () => { + const fromDate = new Date(app.fromDate); + app.filteredNodes = app.nodeFilter + .flatMap(type => app.nodesByType[type]) + .filter(node => node && (node.updatedDate ? node.updatedDate > fromDate : node.insertDate > fromDate)); + console.log('refresh', app.nodeFilter, app.filteredNodes.length); + app.urlParams.nodes = app.nodeFilter.join(','); + app.urlParams.date = app.fromDate; + refreshMap({ download: false }); + } + ); + + watch(() => app.clusteringZoom, () => { + app.urlParams.cluster = app.clusteringZoom; + refreshMap({ download: false, clusteringZoom: app.clusteringZoom }); }); const stats = computed(() => { @@ -145,88 +436,60 @@ createApp({ const searchResults = computed(() => { if(!app.search) { return [] } + const nodes = app.filteredNodes.length > 0 ? app.filteredNodes : app.nodes; - return app.nodes.filter( + const results = nodes.filter( node => node.adv_name.toLowerCase().includes(app.search.toLowerCase()) || node.public_key.startsWith(app.search) ).toSorted( (a, b) => a.adv_name.localeCompare(b.adv_name) ).slice(0, 20); - }) - async function refreshMap(refresh, noDownload) { - if(!noDownload) { - const nodesReq = await fetch(apiUrl); - app.nodes = await nodesReq.json(); - } - const markers = L.markerClusterGroup(); - for(const node of app.nodes) { - const marker = L.marker([node.adv_lat, node.adv_lon], { icon: icons[node.type.toString()], title: node.adv_name }); - node.marker = marker; - node.coords = `${node.adv_lat.toFixed(4)}, ${node.adv_lon.toFixed(4)}`; - node.lastAdvertDate = new Date(node.last_advert); - const popup = L.popup({ minWidth: 350, maxWidth: 350, content: getTable(node) }); - marker.bindPopup(popup); - markers.addLayer(marker); - } - if(refresh) { - map.eachLayer(layer => layer.clearLayers()); - } - map.addLayer(markers); - } + return results; + }); - async function addNode() { - if(!(app.link && app.link.startsWith('meshcore://'))) { - alert('Please paste valid meshcore link.'); - return; - }; + let markerClusterGroup = L.markerClusterGroup({ + disableClusteringAtZoom: app.clusteringZoom + }); - const res = await fetch(apiUrl, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - links: [ app.link ], - radio: {} - }) - }); - const reply = await res.json(); - alert(reply.message || reply.error); - clearLocationHash(); - location.reload(); - } - - function showNode(node) { - node.marker.openPopup(); - map.flyTo(node.marker.getLatLng(), 19); - app.search = ''; - } - - function highlightString(source, toHighlight) { - const escapedSource = source.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>'); - const matchIndex = source.toLowerCase().indexOf(toHighlight.toLowerCase()); - const highlightString = matchIndex >= 0 ? source.substring(matchIndex, matchIndex + toHighlight.length) : toHighlight; - return escapedSource.replace(highlightString, `${highlightString}`); - } - - refreshMap(); + watch( + () => app.urlParams, + () => { + history.replaceState({}, '', `/?${new URLSearchParams(app.urlParams)}`); + }, + { deep: true } + ); map.on('moveend', function(e) { const pos = map.getCenter(); const zoom = map.getZoom(); - history.replaceState({}, '', `/?lat=${pos.lat.toFixed(4)}&lon=${pos.lng.toFixed(4)}&zoom=${zoom}`); + app.urlParams.zoom = zoom; + app.urlParams.lat = pos.lat.toFixed(4); + app.urlParams.lon = pos.lng.toFixed(4); }); onMounted(() => { - if(location.hash === '#add-new-node') { - dialogAddNode.value.showModal(); - dialogAddNode.value.addEventListener("close", () => clearLocationHash()); - } + downloadNodes().then(() => { + if(urlParams.nodes) { + app.nodeFilter = urlParams.nodes.split(','); + } + if(urlParams.date) { + app.fromDate = urlParams.date + } + if(urlParams.cluster) { + app.clusteringZoom = urlParams.cluster; + } + refreshMap(); + }) + }) window.refreshMap = refreshMap; + return { - app, refreshMap, addNode, - stats, searchResults, - showNode, dialogAddNode, highlightString + app, refreshMap, + stats, searchResults, filtersActive, + showNode, highlightString, + clearFilters } }, }).mount('#app') \ No newline at end of file diff --git a/src/node-utils.js b/src/node-utils.js new file mode 100644 index 0000000..9dd272a --- /dev/null +++ b/src/node-utils.js @@ -0,0 +1,33 @@ +function fnv1aHash(str) { + let hash = 0x811c9dc5n; + for (let i = 0; i < str.length; i++) { + hash = BigInt.asIntN(32, hash ^ BigInt(str.charCodeAt(i))); + hash = BigInt.asIntN(32, hash * 0x01000193n); + } + + return Number(hash & 0xFFFFFFFFn); +} + +export function getColourForName(name, saturation = 60, lightness = 50) { + const hash = fnv1aHash(name); + + return `hsl(${hash % 360}deg, ${saturation}%, ${lightness}%)`; +} + +export function getNameIconLabel(name) { + if (typeof name !== 'string' || name.length === 0) { + return '' + } + + const match = name.match(/\p{Emoji_Presentation}/u); + if (!match) { + name = name.trim(); + const segments = name.split(' '); + if (segments.length == 1) { + return name.charAt(0); + } + return `${segments.at(0)[0]}${segments.at(-1)[0]}`; + } + + return match[0]; +} \ No newline at end of file