nycmeshnet · WillNilges · Feb 4, 2025 · Jan 4, 2025 · Jan 4, 2025 · Jan 4, 2025
diff --git a/src/meshapi/admin/urls.py b/src/meshapi/admin/urls.py
@@ -7,11 +7,14 @@
     AdminPasswordResetDoneView,
     AdminPasswordResetView,
 )
+from meshdb.views import admin_iframe_view, minimal_example_view
 
 urlpatterns = [
     path("password_reset/", AdminPasswordResetView.as_view(), name="admin_password_reset"),
     path("password_reset/done/", AdminPasswordResetDoneView.as_view(), name="password_reset_done"),
     path("password_reset/<uidb64>/<token>/", AdminPasswordResetConfirmView.as_view(), name="password_reset_confirm"),
     path("password_reset/done/", AdminPasswordResetCompleteView.as_view(), name="password_reset_complete"),
-    path("", admin.site.urls),
+    path("panel/", admin.site.urls),
+    path("", admin_iframe_view),
+    path("minimal_example/", minimal_example_view),
 ]
diff --git a/src/meshdb/settings.py b/src/meshdb/settings.py
@@ -61,6 +61,8 @@
 
 USE_X_FORWARDED_HOST = True
 
+X_FRAME_OPTIONS = "SAMEORIGIN"
+
 SECURE_HSTS_SECONDS = 31536000
 SECURE_HSTS_PRELOAD = False
 SECURE_HSTS_INCLUDE_SUBDOMAINS = False
@@ -167,6 +169,7 @@
 
     CORS_ALLOWED_ORIGINS += [
         "http://127.0.0.1:3000",
+        "http://127.0.0.1:3001",
         "http://localhost:3000",
         "http://127.0.0.1:80",
         "http://localhost:80",

diff --git a/src/meshdb/templates/admin/base.html b/src/meshdb/templates/admin/base.html
@@ -113,9 +113,6 @@
             {% block footer %}<div id="footer"></div>{% endblock %}
           </div>
         </div>
-        {% block map_sidebar %}
-            {% include "admin/map_sidebar.html" %}
-        {% endblock %}
     </div>
 
 </div>

diff --git a/src/meshdb/templates/admin/iframed.html b/src/meshdb/templates/admin/iframed.html
@@ -0,0 +1,14 @@
+{% load static %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="{% static '/admin/iframed.js' %}"></script>
+    <link rel="stylesheet" href="{% static '/admin/iframed.css'%}"/> 
+  </head>
+  <body>
+  <div class="adminContainer">
+    <iframe src="panel" id="iframe_panel" class="frameGrow" onLoad="adminPanelLoaded();"></iframe>
+    <iframe src="http://127.0.0.1:3001" id="map_panel" class="frameGrow"></iframe>
+  </div>
+  </body>
+</html>
diff --git a/src/meshdb/templates/admin/minimal_example.html b/src/meshdb/templates/admin/minimal_example.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Embedded Page</title>
+  </head>
+  <body>
+    <h2>Embedded</h2>
+    <textarea cols="30" rows="10" disabled id="output">waiting</textarea>
+    <input type="text" id="field" />
+    <button id="send">Send</button>
+    <script>
+      // set up references to DOM nodes
+      const output = document.getElementById("output");
+      const button = document.getElementById("send");
+      const field = document.getElementById("field");
+
+      // create a variable for the parent window. We will assign it once we get the first message.
+      let parent = null;
+
+      // add an event listener to send messages when the button is clicked
+      button.addEventListener("click", () => {
+        // don't do anything if there is no parent reference yet
+        if (parent === null) {
+          return;
+        }
+
+        // otherwise get the field text, and send it to the parent
+        const text = field.value;
+        parent.postMessage(text);
+      });
+
+      // add an event listener to run when a message is received
+      window.addEventListener("message", ({ data, source }) => {
+        console.log("Got message.");
+        // if we don't have a reference to the parent window yet, set it now
+        if (parent === null) {
+          parent = source;
+        }
+
+        // now we can do whatever we want with the message data.
+        // in this case, displaying it, and then sending it back
+        // wrapped in an object
+        output.textContent = JSON.stringify(data);
+        const response = {
+          success: true,
+          request: { data },
+        };
+        parent.postMessage(response);
+      });
+    </script>
+  </body>
+</html>
+
diff --git a/src/meshdb/views.py b/src/meshdb/views.py
@@ -0,0 +1,11 @@
+from django.shortcuts import render
+from django.contrib.admin.views.decorators import staff_member_required
+
+@staff_member_required
+def admin_iframe_view(request):
+    return render(request, 'admin/iframed.html')
+
+
+@staff_member_required
+def minimal_example_view(request):
+    return render(request, 'admin/minimal_example.html')
diff --git a/src/meshweb/static/admin/iframed.css b/src/meshweb/static/admin/iframed.css
@@ -0,0 +1,29 @@
+body, html {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0
+}
+
+iframe {
+    display: flex;
+    flex-grow: 1; border: none; margin: 0; padding: 0; 
+}
+
+iframe:focus {
+    outline: none;
+}
+
+.adminContainer {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: row;
+    overflow: hidden;
+}
+.frameGrow {
+    flex-grow: 1;
+    border: none;
+    margin: 0;
+    padding: 0;
+}
diff --git a/src/meshweb/static/admin/iframed.js b/src/meshweb/static/admin/iframed.js
@@ -0,0 +1,187 @@
+function extractUUIDs(inputString) {
+    // Regular expression to match UUIDs
+    const uuidRegex = /\b[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\b/g;
+    // Find all matches in the input string
+    const matches = inputString.match(uuidRegex);
+    // Return the matches or an empty array if none found
+    return matches || [];
+}
+
+function extractModel(inputString) {
+  const relevantModels = ["member", "building", "install", "node", "device", "sector", "link"];
+  return relevantModels.find(element => inputString.includes(element));
+}
+
+
+function getCurrentTarget(url){
+    let path = url.replace(/^\/admin\/meshapi\//, "");
+    path = path.replace(/\/$/, "");
+
+    const [type, id, action] = path.split("/");
+    return [type, id, action];
+}
+
+// XXX (wdn): This function is plural, but it's actually just one node?
+async function getNewSelectedNodes(url){
+    //const [type, id, action] = getCurrentTarget(url);
+
+    const objectUUIDs = extractUUIDs(url);
+    const type = extractModel(url);
+
+    // Guard against looking up an empty UUID
+    if (objectUUIDs.length == 0) {
+      console.log("Found no UUID")
+      return null;
+    }
+    const id = objectUUIDs[0];
+
+    let nodeId = null;
+
+    if (type === "install") {
+        if (!id) return null;
+        const installResponse = await fetch(`/api/v1/installs/${id}/`);
+        if (!installResponse.ok) return null;
+        const install = await installResponse.json();
+        nodeId = install.install_number;
+    } else if (type === "node") {
+        if (!id) return null;
+        const nodeResponse = await fetch(`/api/v1/nodes/${id}/`);
+        if (!nodeResponse.ok) return null;
+        const node = await nodeResponse.json();
+        if (node.network_number) {
+            nodeId = node.network_number;
+        } else {
+            nodeId = node.installs[0].install_number;
+        }
+    } else if (type === "building") {
+        if (!id) return null;
+        const buildingResponse = await fetch(`/api/v1/buildings/${id}/`);
+        if (!buildingResponse.ok) return null;
+        const building = await buildingResponse.json();
+        if (building.primary_node && building.primary_node.network_number) {
+            nodeId = building.primary_node.network_number;
+        } else if (building.installs) {
+            nodeId = building.installs[0].install_number;
+        }
+    } else if (["device", "sector", "accesspoint"].indexOf(type) !== -1) {
+        if (!id) return null;
+        const deviceResponse = await fetch(`/api/v1/devices/${id}/`);
+        if (!deviceResponse.ok) return null;
+        const device = await deviceResponse.json();
+        nodeId = device.node.network_number;
+    } else if (type === "member") {
+        if (!id) return null;
+        const memberResponse = await fetch(`/api/v1/members/${id}/`);
+        if (!memberResponse.ok) return null;
+        const member = await memberResponse.json();
+        nodeId = member.installs.map(install => install.install_number).join("-");
+    } else if (type === "link") {
+        if (!id) return null;
+        const linkResponse = await fetch(`/api/v1/links/${id}/`);
+        if (!linkResponse.ok) return null;
+        const link = await linkResponse.json();
+
+        const device1Response = await fetch(`/api/v1/devices/${link.from_device.id}/`);
+        if (!device1Response.ok) return null;
+        const device1 = await device1Response.json();
+
+        const device2Response = await fetch(`/api/v1/devices/${link.to_device.id}/`);
+        if (!device2Response.ok) return null;
+        const device2 = await device2Response.json();
+
+        if (device1.node.network_number && device2.node.network_number) {
+            nodeId = `${device1.node.network_number}-${device2.node.network_number}`;
+        }
+    } else if (type === "los") {
+        if (!id) return null;
+        const losResponse = await fetch(`/api/v1/loses/${id}/`);
+        if (!losResponse.ok) return null;
+        const los = await losResponse.json();
+
+        let b1NodeId = null;
+        const buildingResponse1 = await fetch(`/api/v1/buildings/${los.from_building.id}/`);
+        if (!buildingResponse1.ok) return null;
+        const building1 = await buildingResponse1.json();
+        if (building1.primary_node && building1.primary_node.network_number) {
+            b1NodeId = building1.primary_node.network_number;
+        } else if (building1.installs) {
+            b1NodeId = building1.installs[0].install_number;
+        }
+
+        let b2NodeId = null;
+        const buildingResponse2 = await fetch(`/api/v1/buildings/${los.to_building.id}/`);
+        if (!buildingResponse2.ok) return null;
+        const building2 = await buildingResponse2.json();
+        if (building2.primary_node && building2.primary_node.network_number) {
+            b2NodeId = building2.primary_node.network_number;
+        } else if (building2.installs) {
+            b2NodeId = building2.installs[0].install_number;
+        }
+
+        if (b1NodeId && b2NodeId)  nodeId = `${b1NodeId}-${b2NodeId}`;
+    }
+
+    return nodeId ? `${nodeId}` : null;
+}
+
+
+// FIXME: Refreshes reset your location. Need to make sure that the iframe gets the refresh/forward/backward stuff. Check andrew's code.
+// FIXME: Also need to make sure that admin/members/uuid directs you to this iframe setup properly
+async function adminPanelLoaded() {
+  const iframe_panel_url = document.getElementById("iframe_panel").contentWindow.location.href;
+
+  const selectedNodes = await getNewSelectedNodes(iframe_panel_url);
+
+  document.getElementById("iframe_url").innerHTML = `${iframe_panel_url} ---> Selected Nodes: ${selectedNodes}`;
+
+  if (selectedNodes === null) {
+    console.log("No node");
+    return;
+  }
+
+  console.log(`Got node: ${selectedNodes}`);
+
+  //const selectedEvent = new Event("setMapNode");//, {detail: {selectedNodes: selectedNodes}});
+  //selectedEvent.selectedNodes = selectedNodes;
+    document.getElementById("map_panel").contentWindow.postMessage({selectedNodes: selectedNodes}, "http://127.0.0.1:3001");
+}
+
+async function updateAdminPanelLocation(selectedNodes) {
+    if (!selectedNodes) return;
+    if (selectedNodes.indexOf("-") !== -1) return;
+
+    let selectedNodeInt = parseInt(selectedNodes);
+    if (selectedNodeInt >= 1000000) {
+        /* Hack for APs to not break things. We unfortantely can't do a lot better than this without much pain*/
+        return;
+    }
+    const installResponse = await fetch(`/api/v1/installs/${selectedNodes}/`);
+    const nodeResponse = await fetch(`/api/v1/nodes/${selectedNodes}/`);
+    if (installResponse.ok){
+        const installJson = await installResponse.json();
+        if (installJson.node && installJson.node.network_number)  {
+            const newAdminPanelURL = new URL(`/admin/panel/meshapi/node/${installJson.node.id}/change`, document.location);
+            document.getElementById("iframe_panel").src = `panel/meshapi/node/${installJson.node.id}/change`;
+            //updateMapForLocation(installJson.node.network_number.toString());
+        } else {
+            const newAdminPanelURL = new URL(`/admin/panel/meshapi/install/${installJson.id}/change`, document.location);
+            document.getElementById("iframe_panel").src = `panel/meshapi/install/${installJson.id}/change`;
+        }
+    } else {
+        if (nodeResponse.ok)  {
+            const nodeJson = await nodeResponse.json();
+            const newAdminPanelURL = new URL(`/admin/panel/meshapi/node/${nodeJson.id}/change`, document.location);
+            document.getElementById("iframe_panel").src = `panel/meshapi/node/${nodeJson.id}/change`;
+        }
+    }
+}
+
+window.addEventListener("message", ({ data, source }) => {
+        console.log(`Admin Panel got event: ${JSON.stringify(data)}`);
+        // Check if we have the correct data
+        // look up the id of the node
+        // replace admin panel window location
+        //this.updateSelected.bind(this)(data.selectedNodes, false);
+        updateAdminPanelLocation(data.selectedNodes);
+    }
+);