sbrl-github/Air-Quality-Web
1
0
Fork 0
mirror of https://github.com/ConnectedHumber/Air-Quality-Web synced 2024-11-26 07:02:59 +00:00
Code Issues Releases Wiki Activity

Make popup content prettier

Browse source
This commit is contained in:
Starbeamrainbowlabs 2019-01-18 22:58:22 +00:00
parent 19029a942b
commit 10824f2920
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
2 changed files with 33 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
client_src/css/main.css
View file

@ -44,6 +44,13 @@ main {
z-index: 100 !important; z-index: 100 !important;
} }
.device-name::after {
content: "#" attr(data-id);
float: right; margin-right: 1em;
font-size: 80%;
color: hsl(230, 45%, 65%);
}
.device-property-list { .device-property-list {
margin: 0; padding: 0 0 0 1em; margin: 0; padding: 0 0 0 1em;
} }

31
client_src/js/LayerDeviceMarkers.mjs
View file

@ -61,6 +61,10 @@ class LayerDeviceMarkers {
let device_info = JSON.parse(await GetFromUrl(`${Config.api_root}?action=device-info&device-id=${device_id}`)); let device_info = JSON.parse(await GetFromUrl(`${Config.api_root}?action=device-info&device-id=${device_id}`));
device_info.location = [ device_info.latitude, device_info.longitude ];
delete device_info.latitude;
delete device_info.longitude;
event.popup.setContent(this.render_device_info(device_info)); event.popup.setContent(this.render_device_info(device_info));
} }
@ -72,19 +76,36 @@ class LayerDeviceMarkers {
)); ));
result.querySelector(".device-name").dataset.id = device_info.id; result.querySelector(".device-name").dataset.id = device_info.id;
let info_list = []; let info_list = [];
for(let property in device_info) { for(let property in device_info) {
// Filter out properties we're handling specially // Filter out properties we're handling specially
if(["id"].includes(property)) continue; if(["id", "other"].includes(property)) continue;
// Ensure the property is a string - giving special handling to
// some property values
let value = device_info[property];
if(typeof value != "string") {
switch(property) {
case "location":
value = `(${value[0]}, ${value[1]})`;
break;
default:
value = value.toString();
break;
}
}
info_list.push(CreateElement( info_list.push(CreateElement(
"li.device-property", "tr.device-property",
`${property.split("_").map((word) => word[0].toUpperCase()+word.slice(1)).join(" ")}: ${device_info[property]}` CreateElement("th.name", property.split("_").map((word) => word[0].toUpperCase()+word.slice(1)).join(" ")),
CreateElement("td.value", value)
)); ));
} }
result.appendChild(CreateElement("ul.device-property-list", ...info_list)); result.appendChild(CreateElement("table.device-property-list", ...info_list));
result.appendChild(CreateElement("p.device-notes",
CreateElement("em", device_info.other)
));
return result; return result;
} }