update map to be more useful

MeshAddicts · Jun 29, 2024 · 42130e9 · 42130e9
1 parent 2422dc4
commit 42130e9
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 13 deletions.
diff --git a/templates/static/layout-map.html.j2 b/templates/static/layout-map.html.j2
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>{% block title %}{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        corePlugins: {
+          preflight: false,
+        },
+      }
+    </script>
+    {% block head %}{% endblock %}
+</head>
+<body>
+  <div class="w-full h-full">
+    <!-- Static sidebar for desktop -->
+    <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-60 lg:flex-col">
+      <!-- Sidebar component, swap this element with another sidebar if you like -->
+      <div class="flex flex-col px-6 pb-4 overflow-y-auto bg-gray-300 border-r-2 grow gap-y-5 border-r-cyan-600">
+        <div class="flex items-center h-24 mt-4 shrink-0">
+          <div class="text-2xl">
+            <div class="p-0 m-0">S<span class="text-gray-500">ACRAMENTO</span></div>
+            <div class="p-0 m-0">V<span class="text-gray-500">ALLEY</span></div>
+            <div class="p-0 m-0">M<span class="text-gray-500">ESH</span></div>
+          </div>
+        </div>
+
+        <div>
+          {{ config.mesh.description }}
+        </div>
+
+        {% if config.mesh.url %}
+          <div>
+            <a href="{{ config.mesh.url }}" class="text-xs text-gray-900">Website</a>
+          </div>
+        {% endif %}
+
+        <nav class="flex flex-col flex-1">
+          <h3>Mesh</h3>
+          <div class="mb-2">
+            <a href="chat.html">Chat</a>
+          </div>
+          <div class="mb-2">
+            <a href="map.html">Map</a>
+          </div>
+          <div class="mb-2">
+            <a href="nodes.html">Nodes</a>
+          </div>
+          <div class="mb-2">
+            <a href="neighbors.html">Node Neighbors</a>
+          </div>
+          <div class="mb-2">
+            <a href="network.html">Network</a>
+          </div>
+          <div class="mb-2">
+            <a href="routes.html">Routes</a>
+          </div>
+          <div class="mb-2">
+            <a href="stats.html">Stats</a>
+          </div>
+          <div class="mb-2">
+            <a href="telemetry.html">Telemetry</a>
+          </div>
+          <div class="mb-2">
+            <a href="traceroutes.html">Traceroutes</a>
+          </div>
+        </nav>
+
+        <nav class="flex flex-col flex-1">
+          <h3>Logs</h3>
+          <div class="mb-2">
+            <a href="mesh_log.html">Mesh Messages</a>
+          </div>
+          <div class="mb-2">
+            <a href="mqtt_log.html">MQTT Messages</a>
+          </div>
+        </nav>
+
+        <div class="flex-grow"></div>
+        <div class="flex flex-col">
+          <h5 class="mb-2">Powered by MeshInfo</h5>
+          <a href="https://github.com/kevinelliott/meshinfo" class="text-xs text-gray-500">
+            <img src="https://img.shields.io/github/stars/kevinelliott/meshinfo?style=social" alt="GitHub Stars">
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="h-full lg:pl-60">
+      {% block content %}{% endblock %}
+    </div>
+  </div>
+
+  <style>
+      body {
+          font-family: monospace;
+          font-size: 12px;
+          margin: 0;
+          padding: 0;
+          height: 100vh;
+          width: 100vw;
+      }
+  </style>
+</body>
+</html>
diff --git a/templates/static/map.html.j2 b/templates/static/map.html.j2
@@ -1,4 +1,4 @@
-{% extends "templates/static/layout.html.j2" %}
+{% extends "templates/static/layout-map.html.j2" %}
 
 {% block title %}Map{% endblock %}
 {% block head %}
@@ -7,18 +7,11 @@
 {% endblock %}
 
 {% block content %}
-  <h1>Map</h1>
-  <p>
-    Map of the mesh as seen by <b>KE-R</b> (!4355f528).
-  </p>
-  <p>Last updated: {{ timestamp.astimezone(zoneinfo).strftime('%Y-%m-%d %H:%M:%S %z') }}</p>
-
   <div id="map" class="map"></div>
   <div id="popup" class="ol-popup">
     <a href="#" id="popup-closer" class="ol-popup-closer"></a>
     <div id="popup-content"></div>
   </div>
-
   <script type="module">
     async function reverseGeocode(lon, lat) {
       return fetch('https://nominatim.openstreetmap.org/reverse?format=json&lon=' + lon + '&lat=' + lat)
@@ -59,13 +52,13 @@
 
     var defaultStyle = new ol.style.Style({
       image: new ol.style.Circle({
-        radius: 10,
+        radius: 6,
         fill: new ol.style.Fill({
-          color: 'rgba(0, 0, 255, 0.1)'
+          color: 'rgba(0, 0, 240, 1)'
         }),
         stroke: new ol.style.Stroke({
-          color: 'blue',
-          width: 1
+          color: 'white',
+          width: 2
         })
       })
     });
@@ -161,7 +154,6 @@
       }
     });
   </script>
-
   <style>
     #map {
       height: 100%;