From b3397f4f4aa6275ac37b966d9136ba42c288e4fa Mon Sep 17 00:00:00 2001
From: Mario <github@franzbonenkamp.de>
Date: Sun, 29 Oct 2023 14:56:42 +0100
Subject: [PATCH] Fixes #417: README is missing some permissions (#419)

* Add resize listener and height calculation

* Fixed typos

* add permissions for new views
---
 README.md                                     |  9 +++++
 netbox_topology_views/api/views.py            |  4 +-
 netbox_topology_views/navigation.py           |  2 +-
 .../static/netbox_topology_views/css/app.css  | 24 ++++++++++-
 .../netbox_topology_views/index.html          | 40 +++++++++++++++++--
 netbox_topology_views/views.py                |  6 +--
 6 files changed, 74 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 6ed75e7..f1542bd 100644
--- a/README.md
+++ b/README.md
@@ -201,3 +201,12 @@ Set `Coordinate Groups` according to your needs:
 
 Set `Coordinates` according to your needs:
  + netbox_topology_views | coordinate | view/add/change/delete
+
+Set `Power Feed Coordinates` according to your needs:
+ + netbox_topology_views | power feed coordinate | view/add/change/delete
+
+Set `Power Panel Coordinates` according to your needs:
+ + netbox_topology_views | power panel coordinate | view/add/change/delete
+
+Set `Circuit Coordinates` according to your needs:
+ + netbox_topology_views | circuit coordinate | view/add/change/delete
diff --git a/netbox_topology_views/api/views.py b/netbox_topology_views/api/views.py
index 47e1074..ae68835 100644
--- a/netbox_topology_views/api/views.py
+++ b/netbox_topology_views/api/views.py
@@ -139,8 +139,8 @@ class SaveRoleImageViewSet(PermissionRequiredMixin, ReadOnlyModelViewSet):
     queryset = DeviceRole.objects.none()
     serializer_class = RoleImageSerializer
     permission_required = (
-        "dcim.add_device_role",
-        "dcim.change_device_role",
+        "dcim.add_devicerole",
+        "dcim.change_devicerole",
     )
 
     @action(detail=False, methods=["post"])
diff --git a/netbox_topology_views/navigation.py b/netbox_topology_views/navigation.py
index 9d79974..431f515 100644
--- a/netbox_topology_views/navigation.py
+++ b/netbox_topology_views/navigation.py
@@ -106,7 +106,7 @@
         ),
         ('PREFERENCES', 
             (
-                PluginMenuItem(link="plugins:netbox_topology_views:images", link_text="Images", permissions=[ "dcim.view_site","dcim.view_device_role"]),
+                PluginMenuItem(link="plugins:netbox_topology_views:images", link_text="Images", permissions=[ "dcim.view_site","dcim.view_devicerole"]),
                 PluginMenuItem(link="plugins:netbox_topology_views:individualoptions", link_text="Individual Options", permissions=['netbox_topology_views.change_individualoptions']),
             ),
         ),
diff --git a/netbox_topology_views/static/netbox_topology_views/css/app.css b/netbox_topology_views/static/netbox_topology_views/css/app.css
index a411c7b..fc5e09a 100644
--- a/netbox_topology_views/static/netbox_topology_views/css/app.css
+++ b/netbox_topology_views/static/netbox_topology_views/css/app.css
@@ -1 +1,23 @@
-#visgraph{height:64vh}html[data-netbox-color-mode=dark] #visgraph{background-color:#212529}.image-dropdown img{width:64px;height:64px}.image-dropdown-content{display:flex;flex-wrap:wrap;gap:.5rem;padding-inline:.5rem;width:50vw;max-width:32rem}.image-dropdown-content>img{cursor:pointer}
+#visgraph {
+ height:64vh;
+ border: 1px solid #ced4da
+}
+html[data-netbox-color-mode=dark] 
+#visgraph {
+ background-color:#212529;
+ border: 1px solid #495057
+}
+.image-dropdown img {
+ width:64px;height:64px
+}
+.image-dropdown-content {
+ display:flex;
+ flex-wrap:wrap;
+ gap:.5rem;
+ padding-inline:.5rem;
+ width:50vw;
+ max-width:32rem
+}
+.image-dropdown-content>img {
+ cursor:pointer
+}
diff --git a/netbox_topology_views/templates/netbox_topology_views/index.html b/netbox_topology_views/templates/netbox_topology_views/index.html
index a7471a4..de3d19c 100644
--- a/netbox_topology_views/templates/netbox_topology_views/index.html
+++ b/netbox_topology_views/templates/netbox_topology_views/index.html
@@ -29,7 +29,7 @@
 {% endblock controls %}
 
 {% block tabs %}
-	<ul class="nav nav-tabs px-3">
+	<ul class="nav nav-tabs px-3" id="tabswrapper">
     	{% block tab_items %}
 		<li class="nav-item" role="presentation">
 			<button class="nav-link active" id="network-tab" data-bs-toggle="tab" data-bs-target="#networks" type="button" role="tab" aria-controls="filters-form" aria-selected="true">
@@ -50,11 +50,13 @@
 
 {% block content-wrapper %}
   {% with config=settings.PLUGINS_CONFIG.netbox_topology_views %}
-    <div class="tab-content">
+    <div class="tab-content" id="tabcontentwrapper">
 
       {# Applied filters #}
       {% if filter_form %}
-        {% applied_filters model filter_form request.GET %}
+        <div id="filterwrapper">
+          {% applied_filters model filter_form request.GET %}
+        </div>
       {% endif %}
 
       <div class="tab-pane show active" id="networks" role="tabpanel" aria-labelledby="network-tab">
@@ -78,6 +80,36 @@
     const brokenImage = '{{ broken_image }}';
     const topologyData = {{ topology_data | safe }};
     const basePath = '{{ basepath }}';
-  </script>
+
+    window.addEventListener("resize", resizeCanvas);
+    resizeCanvas();
+
+    function resizeCanvas() {
+      heightToSubtract = getElementHeight('.navbar') + 
+        getElementHeight('.title-container') + 
+        getElementHeight('#tabswrapper') + 
+        getElementHeight('#filterwrapper') + 
+        getElementHeight('.footer') +
+        getElementPadding('#tabcontentwrapper');
+
+      document.getElementById("visgraph").style.height = "calc(100vh - " + heightToSubtract + "px)";
+    }
+
+    function getElementPadding(element) {
+      el = document.querySelector(element);
+      els = getComputedStyle(el);
+      padding = parseInt(els.paddingTop) + parseInt(els.paddingBottom);
+
+      return padding;
+    }
+
+    function getElementHeight(element) {
+      el = document.querySelector(element);
+      els = getComputedStyle(el);
+      height = el.offsetHeight + parseInt(els.marginTop) + parseInt(els.marginBottom);
+
+      return height;
+    }
+</script>
 	<script src="{% static 'netbox_topology_views/js/app.js' %}" defer></script>
 {% endblock javascript %}
diff --git a/netbox_topology_views/views.py b/netbox_topology_views/views.py
index aff3840..a2ebdda 100644
--- a/netbox_topology_views/views.py
+++ b/netbox_topology_views/views.py
@@ -771,9 +771,9 @@ def get(self, request):
 class TopologyImagesView(PermissionRequiredMixin, View):
     permission_required = (
         "dcim.view_site",
-        "dcim.view_device_role",
-        "dcim.add_device_role",
-        "dcim.change_device_role",
+        "dcim.view_devicerole",
+        "dcim.add_devicerole",
+        "dcim.change_devicerole",
     )
 
     def get(self, request: HttpRequest):