updated frontend

html/index.html

@@ -12,9 +12,19 @@
     <div id="dash">
       <div id="map">
       </div>
-      <button id="togglefollow" class="btn btn-primary btn-lg btn-block">Unfollow tracker</button>
+      <div class="buttonscontainer">
+        <button id="togglefollowbtn" class="btn btn-primary btn-lg btn-block">Unfollow tracker</button>
+        <button id="upgradebtn" class="btn btn-primary btn-lg btn-block">Upgrade</button>
+        <button id="pingtrackerbtn" class="btn btn-primary btn-lg btn-block">Ping tracker</button>
+      </div>
+      <div class="buttonscontainer">
+        <button id="optionsbtn" class="btn btn-primary btn-lg btn-block">Options</button>
+        <button id="socketstatusbtn" class="btn btn-primary btn-lg btn-block">WS Status</button>
+        <button id="reloadwsbtn" class="btn btn-primary btn-lg btn-block">Reload WS</button>
+      </div>
     </div>
     <script src="static/bootstrap/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
     <script defer src="static/engine.js"></script>
+    <script src="static/service.js"></script>
   </body>
 </html>

html/static/engine.js

@@ -2,6 +2,7 @@
 
 let socket = new WebSocket("wss://trackme.ovh/ws");
 const arrows = ["↑", "↗", "→", "↘", "↓", "↙", "←", "↖"];
+let togglefollowbtn;
 
 class Position {
   constructor(type, iconUrl, iconRetinaUrl) {
@@ -157,16 +158,16 @@ function ping() {
 }
 
 function followButton() {
-  if (follow) togglefollow.innerHTML = "Unfollow tracker";
+  if (follow) togglefollowbtn.innerHTML = "Unfollow tracker";
-  else togglefollow.innerHTML = "Follow tracker";
+  else togglefollowbtn.innerHTML = "Follow tracker";
 }
 
 function main() {
-  const togglefollow = document.querySelector("#togglefollow");
+  togglefollowbtn = document.querySelector("#togglefollowbtn");
   follow = JSON.parse(localStorage.getItem("follow"));
   followButton();
 
-  togglefollow.addEventListener("click", function() {
+  togglefollowbtn.addEventListener("click", function() {
     follow = !follow;
     localStorage.setItem("follow", follow);
     followButton();

html/static/service.js

@@ -2,13 +2,13 @@
 const CACHE_NAME = "trackme-v1";
 const urlsToCache = [
   "/",
-  "/leaflet/leaflet.js",
+  "/static/leaflet/leaflet.js",
-  "/engine.js",
+  "/static/engine.js",
-  "/style.css",
+  "/static/style.css",
 ];
 {
   if ("serviceWorker" in navigator) {
-    navigator.serviceWorker.register("/engine.js")
+    navigator.serviceWorker.register("/static/service.js")
       .then((_reg) => {
         console.log("Registration successful");
       }).catch((error) => {
@@ -25,4 +25,8 @@ const urlsToCache = [
       })
     );
   });
+
+  self.addEventListener("fetch", function(event) {
+    console.log("fetch");
+  });
 }

html/static/style.css

@@ -1,12 +1,35 @@
+html, body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  display: flex;
+}
+
 .leaflet-popup-content {
   /*font-size: 13pt;*/
 }
 
 #map {
-  height: 95%;
-}
-
-#dash {
   height: 100%;
   width: 100%;
 }
+
+#dash {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.buttonscontainer {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.buttonscontainer > button {
+  margin: 3px;
+  width: 100%;
+}