-
Notifications
You must be signed in to change notification settings - Fork 44
/
Map.cshtml
105 lines (86 loc) · 2.78 KB
/
Map.cshtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
@using System.Collections.Immutable
@using Zigbee2MqttAssistant.Models.Devices
@using Zigbee2MqttAssistant.Services
@inject IBridgeStateService stateService
@{
ViewData["Title"] = "Map";
var state = stateService.CurrentState;
var devices = state
.Devices
.Where(d => !string.IsNullOrWhiteSpace(d.ZigbeeId))
.ToImmutableList();
var links = devices
.SelectMany(d => d.Parents.Select(p => (from:d.ZigbeeId, to:p.zigbeeId, quality:p.linkQuality)))
.ToImmutableList();
string getShape(ZigbeeDevice device)
{
switch (device.Type)
{
case "Coordinator":
return "hexagon";
case "EndDevice":
return "ellipse";
default:
return "box";
}
}
string getMass(ZigbeeDevice device)
{
switch (device.Type)
{
case "Coordinator":
return "5";
case "EndDevice":
return "1";
default:
return "2";
}
}
}
<h1>Map</h1>
<div class="card">
@if (!state.Devices.Any(d => d.Parents.Any()))
{
<div>MAP NOT AVAILABLE YET - REFRESH TO SEE SOMETHING.</div>
<form method="get">
<button class="btn btn-outline-secondary" asp-area="" asp-action="Map">REFRESH</button>
</form>
}
<div id="map"></div>
</div>
<script src="~/lib/vis-network/dist/vis-network.js" asp-append-version="true"></script>
<script type="text/javascript">
var network;
(function (ctl) {
const options = {
autoResize: true
};
const nodes = new vis.DataSet([
@foreach(var device in devices)
{
WriteLiteral("{id: '" + device.ZigbeeId + "', label: '" + device.FriendlyName + "', shape:'" + getShape(device) + "', mass:" + getMass(device) + "},\n");
}
]);
const edges = new vis.DataSet([
@{
@foreach(var link in links)
{
WriteLiteral("{from: '" + link.from + "', to: '" + link.to + "', value: " + link.quality + ", label: " + link.quality + "},\n");
}
}
]);
const data = {
nodes: nodes,
edges: edges
};
network = new vis.Network(ctl, data, options);
const onResize = function () {
const rect = ctl.getBoundingClientRect();
const pageHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
const ctlHeight = Math.max((pageHeight - rect.top) - 20, 200);
ctl.style.height = ctlHeight + "px";
};
onResize();
document.addEventListener("resize", onResize);
})(document.getElementById("map"));
</script>