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,61 @@
+{% load static %}
+
+{% load env_extras %}
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <script>let MAP_BASE_URL = "{% get_env_var 'ADMIN_MAP_BASE_URL' %}";</script>
+    <link rel="stylesheet" href="{% static '/admin/iframed.css'%}"/> 
+
+    <link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
+    {% block dark-mode-vars %}
+      <link rel="stylesheet" href="{% static "admin/css/dark_mode.css" %}">
+      <script src="{% static "admin/js/theme.js" %}" defer></script>
+    {% endblock %}
+    <link rel="stylesheet" href="{% static "/admin/admin_ext.css" %}">
+
+  </head>
+  <body>
+    <div id="page_container">
+      <div id="admin_panel_div" class="frameGrow">
+        <iframe src="panel" id="admin_panel_iframe" class="frameGrow"></iframe>
+      </div>
+
+        <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>
+    </div>
+  <script src="{% static '/admin/map.js' %}"></script>
+  </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/admin_ext.css b/src/meshweb/static/admin/admin_ext.css
@@ -131,6 +131,33 @@
     margin-left: -4px; /* IDK why this is needed CSS is voodoo */
 }
 
+/* Invisible full-screen div */
+.fullscreenInvis {
+    position: fixed; /* Makes the div stay in place even when scrolling */
+    top: 0;         /* Position the top of the div at the top of the screen */
+    left: 0;        /* Position the left of the div at the left edge of the screen */
+    width: 100vw;   /* Full width of the viewport */
+    height: 100vh;  /* Full height of the viewport */
+    background: transparent; /* No visible background */
+    pointer-events: none;    /* Makes it non-interactive */
+    z-index: 9999;  /* Ensure it appears on top of other elements if needed */
+}
+
+
+/* Hidden state */
+.hiddenDuringResize {
+    display: none; /* Completely hides the element */
+}
+
+.bigBar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: transparent;
+}
+
 .floating-button {
     z-index: 100;
     position: absolute;
@@ -187,4 +214,4 @@ fieldset h2 {
 
 .hidden {
     display: none;
-}
+}
diff --git a/src/meshweb/static/admin/iframed.css b/src/meshweb/static/admin/iframed.css
@@ -0,0 +1,19 @@
+iframe {
+  height: 100%;
+  width: 100%;
+  border: none;
+  z-index: 1;
+}
+
+.frameGrow {
+    flex-grow: 1;
+    border: none;
+    margin: 0;
+    padding: 0;
+}
+
+#page_container {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}