Skip to content

Commit

Permalink
updated website for apple pwa
Browse files Browse the repository at this point in the history
  • Loading branch information
@EricAndrechek
EricAndrechek committed Apr 14, 2024
1 parent 92ead33 commit dafa403
Show file tree
Hide file tree
Showing 4 changed files with 183 additions and 11 deletions.
44 changes: 35 additions & 9 deletions tracking-dashboard/frontend/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Balloon Tracking Map</title>
<link rel="manifest" href="/manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
Expand Down Expand Up @@ -462,10 +464,10 @@
// add coordinates to 6 decimal places
popup_data += `<p>Coordinates: ${coordinates[1].toFixed(6)}, ${coordinates[0].toFixed(6)}</p>`;
if (altitude) {
popup_data += `<p>Altitude: ${altitude.toFixed(2)} m</p>`;
popup_data += `<p>Altitude: ${altitudeConversion(altitude)}</p>`;
}
if (speed) {
popup_data += `<p>Speed: ${speed.toFixed(2)} mph</p>`;
popup_data += `<p>Speed: ${speedConversion(speed)}</p>`;
}
if (heading) {
popup_data += `<p>Heading: ${heading.toFixed(2)}°</p>`;
Expand All @@ -474,10 +476,34 @@
popup_data += `<p>Last Update: ${last_update}</p>`;
}

const popup = new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(popup_data)
.addTo(map);
// add telemetry data if it exists
if (telemetry[name]) {
const telemetry_data = telemetry[name];
for (const key in telemetry_data) {
if (key === "undefined") {
continue;
}
const value = telemetry_data[key];
if (value === "undefined" || value === undefined || value === null || value === "null" || value === "None" || value === "none" || value === "") {
continue;
}
popup_data += `<p>${key}: ${value}</p>`;
}
}

// show popup-page
const popup_page = document.getElementById("popup-page");
// clear innerHTML of popup-page
popup_page.innerHTML = "";
// create div to hold popup data
const popup_div = document.createElement("div");
popup_div.classList.add("popup-div");
popup_div.innerHTML = popup_data;

// add popup_div to popup_page
popup_page.appendChild(popup_div);
// show popup_page
popup_page.classList.add("page-show");
}

const call_circle_popup = (feature, closest) => {
Expand All @@ -502,10 +528,10 @@
// set popup with data (only data that is not undefined, none, null, "", etc)

if (altitude) {
popup_data += `<p>Altitude: ${altitude.toFixed(2)} m</p>`;
popup_data += `<p>Altitude: ${altitudeConversion(altitude)}</p>`;
}
if (speed) {
popup_data += `<p>Speed: ${speed.toFixed(2)} mph</p>`;
popup_data += `<p>Speed: ${speedConversion(speed)}</p>`;
}
if (heading) {
popup_data += `<p>Heading: ${heading.toFixed(2)}°</p>`;
Expand Down
105 changes: 104 additions & 1 deletion tracking-dashboard/frontend/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,112 @@ const settings = () => {
// hide popup-page
document.getElementById("popup-page").classList.remove("page-show");
} else {
document.getElementById("popup-page").classList.add("page-show");
// wipe contents of popup-page
document.getElementById("popup-page").innerHTML = "";

// populate settings form with current settings
// fill with some unit selection options

// create input elements
const speed_units = document.createElement("select");
speed_units.setAttribute("id", "speed-units");
speed_units.setAttribute("name", "speed-units");
speed_units.setAttribute("class", "input-select");
const speed_units_options = ["m/s", "km/h", "mph", "knots"];
for (let i = 0; i < speed_units_options.length; i++) {
const option = document.createElement("option");
option.setAttribute("value", speed_units_options[i]);
option.innerText = speed_units_options[i];
speed_units.appendChild(option);
}
// get speed_units from localStorage
const speed_units_value = localStorage.getItem("speed_units");
if (speed_units_value !== null) {
speed_units.value = speed_units_value;
}
// create label for speed_units
const speed_units_label = document.createElement("label");
speed_units_label.setAttribute("for", "speed-units");
speed_units_label.innerText = "Speed Units";

const altitude_units = document.createElement("select");
altitude_units.setAttribute("id", "altitude-units");
altitude_units.setAttribute("name", "altitude-units");
altitude_units.setAttribute("class", "input-select");
const altitude_units_options = ["m", "ft"];
for (let i = 0; i < altitude_units_options.length; i++) {
const option = document.createElement("option");
option.setAttribute("value", altitude_units_options[i]);
option.innerText = altitude_units_options[i];
altitude_units.appendChild(option);
}
// get altitude_units from localStorage
const altitude_units_value = localStorage.getItem("altitude_units");
if (altitude_units_value !== null) {
altitude_units.value = altitude_units_value;
}
// create label for altitude_units
const altitude_units_label = document.createElement("label");
altitude_units_label.setAttribute("for", "altitude-units");
altitude_units_label.innerText = "Altitude Units";

// create settings form
const settings_form = document.createElement("form");
settings_form.setAttribute("id", "settings-form");
settings_form.setAttribute("class", "form");
settings_form.appendChild(speed_units_label);
settings_form.appendChild(speed_units);
settings_form.appendChild(altitude_units_label);
settings_form.appendChild(altitude_units);

// onchange event listener for speed_units
speed_units.addEventListener("change", (event) => {
localStorage.setItem("speed_units", event.target.value);
});

// onchange event listener for altitude_units
altitude_units.addEventListener("change", (event) => {
localStorage.setItem("altitude_units", event.target.value);
});

// append settings form to popup-page
document.getElementById("popup-page").appendChild(settings_form);

// show popup-page
document.getElementById("popup-page").classList.add("page-show");
}
};

const speedConversion = (speed) => {
// convert speed to the units specified in localStorage
let speed_units = localStorage.getItem("speed_units");
let results = "";
if (speed_units === "m/s") {
results += (speed * 0.44704).toFixed(2) + " m/s";
} else if (speed_units === "km/h") {
results += (speed * 1.609344).toFixed(2) + " km/h";
} else if (speed_units === "mph") {
results += speed.toFixed(2) + " mph";
} else if (speed_units === "knots") {
results += (speed * 0.868976).toFixed(2) + " knots";
} else {
result += speed.toFixed(2) + " mph";
}
return results;
};

const altitudeConversion = (altitude) => {
// convert altitude to the units specified in localStorage
let altitude_units = localStorage.getItem("altitude_units");
let results = "";
if (altitude_units === "m") {
results += altitude.toFixed(2) + " m";
} else if (altitude_units === "ft") {
results += (altitude * 3.28084).toFixed(2) + " ft";
} else {
results += altitude.toFixed(2) + " m";
}
return results;
};

const closePopupPage = () => {
Expand Down
9 changes: 8 additions & 1 deletion tracking-dashboard/frontend/service-worker.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
const CACHE_NAME = "balloon-map-cache-v1.0.0";
const CACHE_NAME = "balloon-map-cache-v1.0.1";
const urlsToCache = [
"/",
"/main.js",
"/styles.css",
"/mqtt.js",
"/manifest.json",
"/assets/balloon.png",
"/assets/car.png",
"/assets/car-flip.png",
"/assets/chevron-down.svg",
"/assets/map-pin.svg",
"/assets/settings.svg",
"/assets/x-mark.svg",
"https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css",
"https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js",
"https://unpkg.com/mqtt@5.5.1/dist/mqtt.min.js",
Expand Down
36 changes: 36 additions & 0 deletions tracking-dashboard/frontend/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,3 +175,39 @@ body {
cursor: pointer;
width: 40px;
}

#settings-form {
/* Center form horizontally */
padding-top: 50px;
margin: 0 auto;
width: 80%;
display: flex;
flex-direction: column;
gap: 15px;
font-size: 20px;
font-family: Arial, sans-serif;
}

#settings-form label {
display: inline-block;
width: 100%;
font-weight: bold;
}

#settings-form select {
width: 100%;
height: 30px;
font-size: 20px;
margin-bottom: 10px;
}

.popup-div {
padding-top: 50px;
margin: 0 auto;
width: 80%;
display: flex;
flex-direction: column;
gap: 15px;
font-size: 20px;
font-family: Arial, sans-serif;
}

0 comments on commit dafa403

Please sign in to comment.