-
Notifications
You must be signed in to change notification settings - Fork 1
/
geofenceuser.html
117 lines (96 loc) · 5.01 KB
/
geofenceuser.html
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
106
107
108
109
110
111
112
113
114
115
116
117
<html>
<head>
<meta charset="utf-8">
<meta content="" name="description">
<title>Users in Geofence</title>
<link href="./relationship.css" rel="stylesheet">
<style>
div.absolute {
position: absolute;
top: 10px;
}
div.box {
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="showcase absolute">
<canvas height="600" width="600" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas>
</div>
<script src="./d3.min.js"></script>
<script src="./relation.js"></script>
<script>
var load = function () {
var regex = new RegExp("[?&]applicationid(=([^&#]*)|&|#|$)");
var parsedUrl = regex.exec(window.location.href);
if (!parsedUrl || !parsedUrl[2]) {
alert('missing "applicationid" parameter in query string');
return;
}
var applicationid = parsedUrl[2];
regex = new RegExp("[?&]geofenceid(=([^&#]*)|&|#|$)");
parsedUrl = regex.exec(window.location.href);
if (!parsedUrl || !parsedUrl[2]) {
alert('missing "geofenceid" parameter in query string');
return;
}
var geofenceid = parsedUrl[2];
var pagesize = 10000;
var domain = "https://training.gpsgate.com";
var apiPath = '/comGpsGate/api/v.1/';
d3.json(domain + apiPath + ‘applications/’ + applicationid + ‘/geofences/’ + geofenceid + ‘/users?pagesize=’ + pagesize)
.header(“Authorization”,“Hh9IALcjtsAXuGVWEUmtuUZ12oacH%2bW6Sv1N7eAoQwJYfFQKKhYcXcnna2XQx3%2fn”)
.get(
function (users) {
d3.json(domain + apiPath + ‘applications/’ + applicationid + ‘/geofences/’ + geofenceid)
.header(“Authorization”,“Hh9IALcjtsAXuGVWEUmtuUZ12oacH%2bW6Sv1N7eAoQwJYfFQKKhYcXcnna2XQx3%2fn”)
.get(
function (geofence) {
if (!users || !geofence)
return;
var canvas = document.querySelector("canvas"),
width = 600,
height = 600;
// building nodes:
// o = [
// {id:0, name: "applicationId"}, // application node
// {id:1, name: "geofence0.name"}, // geofences nodes
// {id:2, name: "geofence1.name"},
// ...
// {id:n+1, name: "geofencen.name"},
// {id:n+1, name: "user0.name"}, // users nodes
// {id:n+2, name: "user1.name"},
// ...
// {id:n+1+m, name: "userm.name"}
// ]
var o = [];
o.push({ id: 0, name: geofence.name });
o[0].radius = 14;
o[0].color = "#FFA142";
for (var u = 0; u < users.length; ++u) {
o.push({ id: 1 + u, name: users[u].name });
o[1 + u].radius = 10;
o[1 + u].color = "#FF85C2";
}
// building relations:
var i = [];
// geofence
i.push({ source: 0, target: 1 });
// geofence/users
for (var u = 0; u < users.length; u++) {
i.push({ source: 0, target: 1 + u });
}
var s = new relation;
s.setNodes(o), s.setLinks(i), s.setCanvas(canvas), s.setSize(width, height), s.setRadius(12), s.setLinkLength(90), s.setCharge(-60), s.init(), s.run()
});
});
};
load();
</script>
</div>
</body>
</html>