mirror of
https://github.com/owntracks/recorder.git
synced 2026-05-05 02:36:45 +00:00
130 lines
3.7 KiB
JavaScript
130 lines
3.7 KiB
JavaScript
|
|
/**
|
|
* @file
|
|
* Contains common functions used when showing a map.
|
|
*/
|
|
|
|
import { debug } from "./debug.js";
|
|
import { getCosmeticName, getCosmeticLocation, getBaseTopic, escapeHTML } from "./misc.js";
|
|
|
|
/**
|
|
* Loads a map solution. The solution is Google Maps if an API key is present,
|
|
* or a Leaflet map if no API key is present.
|
|
* When the map solution has been loaded, an `initialize` function is called
|
|
* from the local `map_google.js` or `map_leaflet.js` file, depending on which
|
|
* solution was loaded.
|
|
*
|
|
* @param {...any} initializerArguments - Optional arguments to pass to the `initialize` function.
|
|
*/
|
|
export async function loadMapSolution(...initializerArguments){
|
|
|
|
debug("Loading map solution");
|
|
if(apiKey){
|
|
debug("Found API key, using Google Maps");
|
|
debug("API key:", apiKey);
|
|
|
|
const initialize = await getLocalMapInitializer("google");
|
|
|
|
const script = document.createElement('script');
|
|
script.src = `https://maps.googleapis.com/maps/api/js?v=3&key=${ apiKey }`;
|
|
script.addEventListener("load", () => {initialize(...initializerArguments);});
|
|
document.querySelector("head").appendChild(script);
|
|
|
|
}else{
|
|
debug("Did not find API key, using Leaflet map");
|
|
|
|
const initialize = await getLocalMapInitializer("leaflet");
|
|
|
|
const style = document.createElement("link");
|
|
style.rel = "stylesheet";
|
|
style.href = "../static/leaflet/leaflet.css";
|
|
document.querySelector("head").appendChild(style);
|
|
|
|
const script = document.createElement('script');
|
|
script.src = "../static/leaflet/leaflet.js";
|
|
script.addEventListener("load", () => {initialize(...initializerArguments);});
|
|
document.querySelector("head").appendChild(script);
|
|
|
|
}
|
|
|
|
async function getLocalMapInitializer(solution){
|
|
const { initialize } = await import(new URL(`map_${solution}.js`, window.location));
|
|
return initialize;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Creates an HTML representation of the "loc" (location) element obtained from the recorder API
|
|
* Intended to be used in a map marker popup.
|
|
*
|
|
* @param {object} loc - A location element obtained from the recorder API.
|
|
* @returns {string} - An HTML string that can be used in a map marker popup.
|
|
*/
|
|
export function generatePopupHTML(
|
|
{
|
|
face,
|
|
topic,
|
|
name,
|
|
label,
|
|
tid,
|
|
addr,
|
|
lat,
|
|
lon,
|
|
ghash,
|
|
acc,
|
|
tst,
|
|
batt,
|
|
vel,
|
|
cog,
|
|
},
|
|
){
|
|
let html = "";
|
|
|
|
// Face
|
|
if(face !== undefined) html += escapeHTML `<img class='face' alt='' src='data:image/png;base64,${ face.replaceAll("'", "") }' height='35' width='35'>`;
|
|
|
|
// Name
|
|
html += escapeHTML `<span class="name"><b>${ getCosmeticName({topic, name, label, tid}) }</b><br></span>`;
|
|
|
|
// Location
|
|
html += escapeHTML `<span class="location">${ getCosmeticLocation({addr, lat, lon}) }<br></span>`;
|
|
|
|
// Ghash + base topic
|
|
const baseTopic = getBaseTopic(topic);
|
|
|
|
html += escapeHTML `<span class='low-level'>${ ghash || "unknown" }, ${ baseTopic || "unknown" }`;
|
|
|
|
// Date
|
|
if(tst !== undefined){
|
|
const date = new Date(tst * 1000).toLocaleDateString(undefined, {
|
|
day: 'numeric',
|
|
month: 'short',
|
|
year: 'numeric',
|
|
hour: 'numeric',
|
|
minute: 'numeric',
|
|
second: 'numeric',
|
|
timeZoneName: 'short',
|
|
});
|
|
html += `, </span><span class="date">${date}`;
|
|
}
|
|
html += "<br></span>";
|
|
|
|
// Latitude and longtitude
|
|
html += escapeHTML `<span class="lat-lon">(${lat},${lon}), </span>`;
|
|
|
|
// Miscellaneous
|
|
html += "<span class='misc'>";
|
|
const misc = [];
|
|
|
|
misc.push(`acc: ${ acc === undefined ? "?" : `${acc} m` }`);
|
|
|
|
if(vel !== undefined) misc.push(escapeHTML `vel: ${vel} km/h`);
|
|
if(batt !== undefined) misc.push(escapeHTML `batt: ${batt}%`);
|
|
if(cog !== undefined) misc.push(escapeHTML `cog: ${cog}`);
|
|
|
|
html += misc.join(", ");
|
|
html += "</span>";
|
|
|
|
return html;
|
|
}
|