[client] Create initial tabbed interface for popup

client_src/css/main.css

@@ -5,6 +5,8 @@
 @import "../../node_modules/leaflet.markercluster/dist/MarkerCluster.css";
 @import "../../node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css";
 
+@import "./popup.css";
+
 /** Ensure that some assets are copied that aren't by default **/
 .non-existent {
     background: url(../../node_modules/leaflet/dist/images/marker-icon-2x.png),
@@ -50,40 +52,6 @@ main {
     z-index: 100 !important;
 }
 
-h2.device-name { text-align: center; }
-.device-name::after {
-    content: "#" attr(data-id);
-    float: right; margin-right: 1em;
-    
-    font-size: 80%;
-    color: hsl(230, 45%, 65%);
-}
-
-.device-data {
-    display: flex;
-    flex-direction: row;
-}
-
-.device-property-table {
-    border-collapse: collapse;
-}
-.device-property-table tr:nth-child(odd) {
-    background: hsla(222, 100%, 70%, 0.25);
-}
-.device-property-table th {
-    padding-right: 2em;
-}
-.device-property-table td:nth-child(2) {
-    border-left: 0.2em solid hsl(222, 100%, 59%);
-    padding-left: 0.5em;
-}
-
-.reading-types {
-    display: flex;
-    flex-direction: row;
-    list-style-type: none;
-}
-
 button.selected {
     font-weight: bolder;
 }

client_src/css/popup.css

@@ -0,0 +1,70 @@
+.leaflet-popup-content {
+	width: auto !important;
+}
+
+h2.device-name { text-align: center; }
+.device-name::after {
+    content: "#" attr(data-id);
+    float: right; margin-right: 1em;
+    
+    font-size: 80%;
+    color: hsl(230, 45%, 65%);
+}
+
+.tabs {
+	list-style-type: none;
+	margin: 0; padding: 0;
+	
+	display: flex;
+	flex-direction: row;
+}
+.tabs li {
+	flex: 1;
+	
+	text-align: center;
+	font-size: 120%;
+}
+.tabs li a {
+	display: inline-block; width: 100%;
+	box-sizing: border-box;
+	padding: 0.45em;
+	
+	opacity: 0.5;
+	background: hsla(252, 82%, 66%, 0.53);
+	border-bottom: 0;
+	border-radius: 0.25em 0.25em 0 0;
+	
+	color: hsl(252, 100%, 59%);
+	text-decoration: none;
+}
+.tabs li a.selected { opacity: 1; }
+
+/* Default */
+.tab-content { display: none; }
+/* Override if target is set */
+.tab-content:target { display: block !important; }
+
+.device-data {
+    display: flex;
+    flex-direction: row;
+}
+
+.device-property-table {
+    border-collapse: collapse;
+}
+.device-property-table tr:nth-child(odd) {
+    background: hsla(222, 100%, 70%, 0.25);
+}
+.device-property-table th {
+    padding-right: 2em;
+}
+.device-property-table td:nth-child(2) {
+    border-left: 0.2em solid hsl(222, 100%, 59%);
+    padding-left: 0.5em;
+}
+
+.reading-types {
+    display: flex;
+    flex-direction: row;
+    list-style-type: none;
+}

client_src/js/LayerDeviceMarkers.mjs

@@ -47,7 +47,7 @@ class LayerDeviceMarkers {
 		// Create the popup
 		let popup = L.popup({
 			className: "popup-device",
-			maxWidth: 720,
+			maxWidth: 640,
 			autoPanPadding: L.point(100, 100)
 		}).setContent("⌛ Loading..."); // TODO: Display a nice loading animation here
 		marker.on("popupopen", this.marker_popup_open_handler.bind(this, device.id));
@@ -81,10 +81,22 @@ class LayerDeviceMarkers {
 		));
 		result.querySelector(".device-name").dataset.id = device_info.id;
 		
+		
+		// ----------------------------------
+		
+		result.appendChild(CreateElement("ul.tabs"));
+		let tabs = result.querySelector(".tabs");
+		tabs.innerHTML = `<li><a href="#tab-info">Info</a></li>
+		<li><a href="#tab-data">Data</a></li>`;
+		tabs.addEventListener("click", (event) => {
+			tabs.querySelectorAll("a").forEach((el) => el.classList.remove("selected"));
+			event.target.classList.add("selected");
+		})
+		
 		// ----------------------------------
 		
 		let data_container = CreateElement("div.device-data",
-			CreateElement("div.device-params")
+			CreateElement("div.device-params.tab-content#tab-info")
 		);
 		result.appendChild(data_container);
 		let params_container = data_container.querySelector(".device-params");
@@ -136,6 +148,8 @@ class LayerDeviceMarkers {
 		chart_device_data.setup("PM25").then(() => 
 			console.info("[layer/markers] Device chart setup complete!")
 		);
+		chart_device_data.display.classList.add("tab-content");
+		chart_device_data.display.setAttribute("id", "tab-data");
 		data_container.appendChild(chart_device_data.display);
 		
 		// ----------------------------------

client_src/js/MapManager.mjs

@@ -4,8 +4,6 @@
 import L from 'leaflet';
 import 'leaflet-fullscreen';
 
-import GetFromUrl from './Helpers/GetFromUrl.mjs';
-
 import Config from './Config.mjs';
 import LayerDeviceMarkers from './LayerDeviceMarkers.mjs';
 import LayerHeatmap from './LayerHeatmap.mjs';