Merge pull request #69 from MarinStevic/Map-development

GSoC: Updating the map

nodewatcher/modules/administration/location/static/location/js/map.js

@@ -5,8 +5,10 @@
 
     // Create a marker for each location
     $.nodewatcher.map.extendNode(function(node) {
-        if (node.data.l)
-            return L.marker({lng: node.data.l[0], lat: node.data.l[1]});
+        if (node.data.l) {
+            sidebarTableAddNode(node,"node-list-table");  //Add the node to the sidebar active node list
+            return L.marker({lng: node.data.l[0], lat: node.data.l[1]}).bindPopup('Name: <a href="../node/' + node.data.i + '">' + node.data.n + '</a><br>Type: ' + node.data.t);  //Show a popup when a node is selected with its name and type
+        }
     });
 
     // Create a polyline for each link

nodewatcher/modules/frontend/map/static/leaflet/css/leaflet-sidebar.css

@@ -0,0 +1,302 @@
+i.fa.fa-bars, i.fas.fa-eye-slash {
+	margin-top: 6px;
+}
+
+.sidebar-table, .sidebar-search {
+	width: 100%;
+}
+
+a.sidebar-table-cell, p.sidebar-table-cell {
+	margin: 2px;
+	font-size: 14px;
+}
+
+th.sidebar-table-name {
+	width: 70%; !important
+}
+
+h2.sidebar-table-name {
+	margin: 5px; !important
+}
+
+h2.sidebar-table-type {
+	margin: 5px; !important
+}
+
+th.sidebar-table-locate {
+	width: 24px; !important
+}
+
+.sidebar-table-container {
+    height: 100%;
+    overflow: auto;
+}
+
+.sidebar-table-row-header {
+    background-color: #f1f1f1;
+    border-bottom: 1px solid #ddd;
+}
+
+.node-list-table-row, .recently-offline-table-row {
+  border-bottom: 1px solid #ddd;
+}
+
+.node-list-table-row:hover, .recently-offline-table-row:hover {
+    background-color: #f1f1f1;
+}
+
+i.fas.fa-crosshairs.fa-2x {
+    display: none;
+}
+
+tr:hover i.fas.fa-crosshairs.fa-2x {
+    display: block;
+}
+
+.leaflet-sidebar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    height: 97%;
+    overflow: hidden;
+    z-index: 2000;
+}
+
+.leaflet-sidebar.collapsed {
+    width: 34px;
+    height: 64px;
+}
+
+@media (min-width: 0px) {
+    .leaflet-sidebar {
+        top: 10px;
+        bottom: 10px;
+        transition: width 500ms, height 500ms;
+    }
+}
+
+@media (min-width: 0px) and (max-width: 991px) {
+    .leaflet-sidebar {
+        width: 305px;
+        max-width: 305px;
+    }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+    .leaflet-sidebar {
+        width: 390px;
+        max-width: 390px;
+    }
+}
+
+@media (min-width: 1200px) {
+    .leaflet-sidebar {
+        width: 460px;
+        max-width: 460px;
+    }
+}
+
+.leaflet-sidebar-right {
+    right: 0;
+}
+
+@media (min-width: 0px) {
+    .leaflet-sidebar-right {
+        right: 10px;
+    }
+}
+
+.leaflet-sidebar-tabs {
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    background-color: #fff;
+}
+
+.leaflet-sidebar-right .leaflet-sidebar-tabs {
+    right: 0;
+}
+
+.leaflet-sidebar-tabs, .leaflet-sidebar-tabs > ul {
+    position: absolute;
+    width: 30px;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.leaflet-sidebar-tabs > li, .leaflet-sidebar-tabs > ul > li {
+    width: 100%;
+    height: 30px;
+    color: #333;
+    font-size: 12pt;
+    overflow: hidden;
+    transition: all 80ms;
+}
+
+.leaflet-sidebar-tabs > li:hover, .leaflet-sidebar-tabs > ul > li:hover {
+    color: #000;
+    background-color: #eee;
+}
+
+.leaflet-sidebar-tabs > li.active, .leaflet-sidebar-tabs > ul > li.active {
+    color: #fff;
+    background-color: #0074d9;
+}
+
+.leaflet-sidebar-tabs > li.disabled, .leaflet-sidebar-tabs > ul > li.disabled {
+    color: rgba(51, 51, 51, 0.4);
+}
+
+.leaflet-sidebar-tabs > li.disabled:hover, .leaflet-sidebar-tabs > ul > li.disabled:hover {
+    background: transparent;
+}
+
+.leaflet-sidebar-tabs > li.disabled > a, .leaflet-sidebar-tabs > ul > li.disabled > a {
+    cursor: default;
+}
+
+.leaflet-sidebar-tabs > li > a, .leaflet-sidebar-tabs > ul > li > a {
+    display: block;
+    width: 100%;
+    height: 100%;
+    line-height: 30px;
+    color: inherit;
+    text-decoration: none;
+    text-align: center;
+    cursor: pointer;
+}
+
+.leaflet-sidebar-tabs > ul + ul {
+    bottom: 0;
+}
+
+.leaflet-sidebar-content {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.95);
+    overflow-x: hidden;
+    overflow-y: auto;
+    overflow: hidden;
+}
+
+.leaflet-sidebar-right .leaflet-sidebar-content {
+    left: 0;
+    right: 30px;
+}
+
+.leaflet-sidebar.collapsed > .leaflet-sidebar-content {
+    overflow-y: hidden;
+}
+
+.collapsed > .leaflet-sidebar-content {
+    overflow-y: hidden;
+}
+
+.leaflet-sidebar-pane {
+    display: none;
+    left: 0;
+    right: 0;
+    box-sizing: border-box;
+    padding: 10px 0px;
+}
+
+.leaflet-sidebar-pane.active {
+    display: block;
+    height: 100%;
+}
+
+@media (min-width: 0px) and (max-width: 991px) {
+    .leaflet-sidebar-pane {
+        min-width: 265px;
+    }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+    .leaflet-sidebar-pane {
+        min-width: 350px;
+    }
+}
+
+@media (min-width: 1200px) {
+    .leaflet-sidebar-pane {
+        min-width: 420px;
+    }
+}
+
+.leaflet-sidebar-header {
+    margin: -10px -20px 0;
+    height: 30px;
+    padding: 0 20px;
+    line-height: 30px;
+    font-size: 14.4pt;
+    color: #fff;
+    background-color: #0074d9;
+}
+
+.leaflet-sidebar-right .leaflet-sidebar-header {
+    padding-left: 40px;
+}
+
+.leaflet-sidebar-close {
+    position: absolute;
+    top: 0;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.leaflet-sidebar-right .leaflet-sidebar-close {
+    left: 0;
+}
+
+.leaflet-sidebar {
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
+}
+
+.leaflet-sidebar.leaflet-touch {
+    box-shadow: none;
+    border-right: 2px solid rgba(0, 0, 0, 0.2);
+}
+
+@media (min-width: 0px) {
+    .leaflet-sidebar {
+        border-radius: 4px;
+    }
+    .leaflet-sidebar.leaflet-touch {
+        border: 2px solid rgba(0, 0, 0, 0.2);
+    }
+}
+
+@media (min-width: 0px) {
+    .leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
+        transition: right 500ms;
+    }
+}
+
+@media (min-width: 0px) and (max-width: 991px) {
+    .leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
+        right: 315px;
+    }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+    .leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
+        right: 400px;
+    }
+}
+
+@media (min-width: 1200px) {
+    .leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
+        right: 470px;
+    }
+}
+
+@media (min-width: 0px) {
+    .leaflet-sidebar-right.collapsed ~ .leaflet-control-container .leaflet-right {
+        right: 50px;
+    }
+}

nodewatcher/modules/frontend/map/static/leaflet/css/leaflet.fullscreen.css

@@ -0,0 +1,40 @@
+.leaflet-control-fullscreen a {
+  background:#fff url(../images/fullscreen.png) no-repeat 0 0;
+  background-size:26px 52px;
+  }
+  .leaflet-touch .leaflet-control-fullscreen a {
+    background-position: 2px 2px;
+    }
+  .leaflet-fullscreen-on .leaflet-control-fullscreen a {
+    background-position:0 -26px;
+    }
+  .leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a {
+    background-position: 2px -24px;
+    }
+
+/* Do not combine these two rules; IE will break. */
+.leaflet-container:-webkit-full-screen {
+  width:100%!important;
+  height:100%!important;
+  }
+.leaflet-container.leaflet-fullscreen-on {
+  width:100%!important;
+  height:100%!important;
+  }
+
+.leaflet-pseudo-fullscreen {
+  position:fixed!important;
+  width:100%!important;
+  height:100%!important;
+  top:0!important;
+  left:0!important;
+  z-index:99999;
+  }
+
+@media
+  (-webkit-min-device-pixel-ratio:2),
+  (min-resolution:192dpi) {
+    .leaflet-control-fullscreen a {
+      background-image:url(../images/fullscreen@2x.png);
+    }
+  }