OK I think we have feature pairity

nycmeshnet · Jan 11, 2025 · 93bf978 · 93bf978
1 parent 9fd0a2c
commit 93bf978
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 21 deletions.
diff --git a/src/meshdb/templates/admin/iframed.html b/src/meshdb/templates/admin/iframed.html
@@ -21,15 +21,37 @@
       <div id="admin_panel_div" class="frameGrow">
         <iframe src="panel" id="admin_panel_iframe" class="frameGrow"></iframe>
       </div>
-      <div class="handle" id="handle">
-        <span class="vert-align-helper"></span>
-        <img class="handlebar" id="handlebar" src="{% static '/admin/map/img/handlebar.svg' %}" height="60px"/>
-      </div>
-      <!-- Only shows up during resizes -->
-      <div class="handle hiddenDuringResize" id="substituteHandle">
-        <span class="vert-align-helper"></span>
-        <img class="handlebar" id="substituteHandlebar" src="{% static '/admin/map/img/handlebar.svg' %}" height="60px"/>
+
+        <div class="floating-button">
+            <a href="#" class="button" style="display: inline-block" id="show_map_button">
+                <img src="{% static '/admin/map/img/map.png' %}" height="16px" title="Show Map">
+            </a>
+        </div>
+
+      <div id="map_controls">
+        <!-- This handle is always visible, unless you're resizing, in which case
+        goes big and invisible to block the iframes from stealing focus -->
+        <div class="handle" id="handle">
+          <span class="vert-align-helper"></span>
+          <img class="handlebar" id="handlebar" src="{% static '/admin/map/img/handlebar.svg' %}" height="60px"/>
+        </div>
+        <!-- Only shows up during resizes -->
+        <div class="handle hiddenDuringResize" id="substituteHandle">
+          <span class="vert-align-helper"></span>
+          <img class="handlebar" id="substituteHandlebar" src="{% static '/admin/map/img/handlebar.svg' %}" height="60px"/>
+        </div>
+        <div class="floating-button">
+            <a href="#" class="button" style="display: inline-block" id="map_hide_button">
+                <img src="{% static '/admin/map/img/cross.png' %}" height="24px" title="Hide Map">
+            </a>
+        </div>
+        <div class="floating-button-below">
+            <a href="#" class="button" style="display: inline-block" id="map_recenter_button">
+                <img src="{% static '/admin/map/img/recenter.png' %}" height="24px" title="Recenter map">
+            </a>
+        </div>
       </div>
+
       <div id="map_panel_div">
       <iframe src="{% get_env_var 'ADMIN_MAP_BASE_URL' %}" id="map_panel"></iframe>
       </div>

diff --git a/src/meshweb/static/admin/map.js b/src/meshweb/static/admin/map.js
@@ -1,5 +1,5 @@
 
-const admin_panel_iframe = document.getElementById("admin_panel_iframe")
+const admin_panel_iframe = document.getElementById("admin_panel_iframe");
 
 let currentSplit = parseFloat(localStorage.getItem("MESHDB_MAP_SIZE"));
 if (isNaN(currentSplit)) {
@@ -230,7 +230,7 @@ function interceptLinks() {
 
 async function updateAdminPanelLocation(selectedNodes) {
     if (!selectedNodes) return;
-    console.log(`Updating admin panel location: ${selectedNodes}`);
+    console.log(`[Admin Panel] Updating admin panel location: ${selectedNodes}`);
     if (selectedNodes.indexOf("-") !== -1) return;
 
     let selectedNodeInt = parseInt(selectedNodes);
@@ -242,7 +242,7 @@ async function updateAdminPanelLocation(selectedNodes) {
     const nodeResponse = await fetch(`/api/v1/nodes/${selectedNodes}/`);
 
     // Disable onLoad for Admin Panel while we navigate to a new page
-    //dontListenForAdminPanelLoad();
+    dontListenForAdminPanelLoad();
 
     if (installResponse.ok){
         const installJson = await installResponse.json();
@@ -258,17 +258,16 @@ async function updateAdminPanelLocation(selectedNodes) {
         }
     }
 
-    //listenForAdminPanelLoad();
-
-    //updateDebugURLBars();
+    // Restore the listener
+    listenForAdminPanelLoad();
 }
 
 function listenForRecenterClick() {
     const recenterButton = document.querySelector("#map_recenter_button");
 
     function onRecenterClick(event) {
         console.log("recenterclick");
-        updateMapForLocation();
+        updateMapLocation();
         event.preventDefault();
     }
 
@@ -341,8 +340,9 @@ function hideMapIfAppropriate() {
 
     const mapDisabled = localStorage.getItem("MESHDB_MAP_DISABLED") === "true" || isMobile;
     if (mapDisabled) {
-        document.getElementById('map').classList.add("hidden");
-        document.getElementById('main').classList.remove("flex");
+        document.getElementById('map_panel_div').classList.add("hidden");
+        document.getElementById('map_controls').classList.add("hidden");
+        //document.getElementById('main').classList.remove("flex");
 
         if (!isMobile) {
             const showMapButton = document.getElementById('show_map_button');
@@ -426,17 +426,14 @@ async function updateMapLocation() {
     return;
   }
 
-  console.log(`Updating map location: ${selectedNodes}`);
+  console.log(`[Admin Panel] Updating map location: ${selectedNodes}`);
 
   // MAP_BASE_URL comes from iframed.html
   document.getElementById("map_panel").contentWindow.postMessage({selectedNodes: selectedNodes}, MAP_BASE_URL);
-
-  //updateDebugURLBars();
 }
 
 async function listenForMapClick() {
     window.addEventListener("message", ({ data, source }) => {
-      //console.log(`Got message from map:${JSON.stringify(data)}`);
       updateAdminPanelLocation(data.selectedNodes);
     });
 }
@@ -450,10 +447,14 @@ async function dontListenForAdminPanelLoad() {
 }
 
 function start() {
+    if (hideMapIfAppropriate()) {
+        return;
+    }
     allowMapResize();
     interceptLinks();
     listenForAdminPanelLoad();
     listenForMapClick();
+    listenForRecenterClick();
 }
 
 start();