-
Notifications
You must be signed in to change notification settings - Fork 5
/
view.ejs
163 lines (138 loc) · 8.35 KB
/
view.ejs
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<title>SnapperGPS - Download</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css"/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="display: none;" id="upload-id" value="<%= uploadID %>"></div>
<!-- Nav bar -->
<%- include ('partials/navBar', {pageName: 'download'}) %>
<!-- Main body -->
<main class="container">
<div class="row">
<div class="col">
<h1>View and download your track - <%= uploadID %>
<div class="spinner-border" role="status" id="download-spinner" style="margin-left: 10px;"></div>
</h1>
</div>
</div>
<div class="row bg-light">
<div class="col">
<div id="display-map" style="height: 400px;"></div>
<!-- Twitter banner size -->
<!-- <div id="display-map" style="height: 500px; width: 1500px;"></div> -->
</div>
</div>
<div class="row bg-light">
<div class="row btnrow">
<div class="col-auto btncol">
<label for="start-date-input" style="margin-right: 10px;">Start:</label>
<input id="start-date-input" disabled type="date">
<input id="start-time-input" disabled type="time" value="00:00">
<label id="start-timezone" for="start-time-input">UTC</label>
</div>
<div class="col-auto btncol">
<label for="end-date-input" style="margin-right: 10px;">End:</label>
<input id="end-date-input" disabled type="date">
<input id="end-time-input" disabled type="time" value="00:00">
<label id="end-timezone" for="end-time-input">UTC</label>
</div>
</div>
</div>
<div class="row bg-light">
<div class="btnrow" style="margin-top: 10px">
<div class="col">
<button class="btn btn-primary btncol quarter-width half-width full-width" id="download-csv-button" disabled style="min-width: 175px">Download CSV</button>
<button class="btn btn-primary btncol quarter-width half-width full-width" id="download-geojson-button" disabled style="min-width: 175px">Download GeoJSON</button>
<button class="btn btn-primary btncol quarter-width half-width full-width" id="download-kml-button" disabled style="min-width: 175px">Download KML</button>
<button class="btn btn-primary btncol quarter-width half-width full-width" id="download-json-button" disabled style="min-width: 175px">Download JSON</button>
</div>
</div>
</div>
<div class="row bg-light">
<div>
<div class="card text-dark bg-light-card mb-3" style="width: 100%">
<div class="card-header">
Receiver ID: <span id="device-id-display">-</span>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item" style="display:none;" id="nickname-list-item">Nickname: <span id="nickname-lbl">-</span></li>
<li class="list-group-item">Upload date/time: <span id="upload-date-display">-</span></li>
<li class="list-group-item">Processed snapshots: <span id="processed-position-count-display">-</span></li>
<li class="list-group-item">Estimates without confidence: <span id="percentage-lbl">-</span></li>
<li class="list-group-item" style="display:none;" id="max-velocity-list-item">Velocity limit: <span id="max-velocity-lbl">-</span></li>
</ul>
</div>
</div>
</div>
<div id="battery-warning-display" style="display: none;">
<div class="card text-white bg-warning mb-3">
<div class="card-header"><b>Warning</b></div>
<div class="card-body">
<p id="battery-warning-text" class="card-text"></p>
</div>
</div>
</div>
<div id="processing-warning-display" style="display: none;">
<div class="card text-white bg-warning mb-3">
<div class="card-header"><b>Warning</b></div>
<div class="card-body">
<p id="processing-warning-text" class="card-text"></p>
</div>
</div>
</div>
<div class="row bg-light">
<div class="row">
<div class="col">
Does your track look noisy?
You can try to smooth it.
First, remove outliers.
For this, identify any outliers in the map above and click on their pink circles.
Then, click <i>Remove</i>.
Once you have removed all outliers, you can move the slider below.
<br>
<i>(Hint: You can display the track as line by ticking the box in the layer menu in the top right corner of the map.)</i>
</div>
</div>
<div class="row row-ident">
<div class="col">
<input id="smooth-input" type="range" value="2" min="-4" max="2" step="0.1" class="form-range" style="direction: rtl;" disabled>
</div>
</div>
<div class="row row-ident">
<div class="col">
<span id="smooth-span"></span>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none; margin-left: 5px" id="smooth-spinner"></span>
</div>
</div>
</div>
<div class="row bg-light">
<div class="row">
<div class="col">
Have you removed all outliers, smoothed your track, and downloaded your data?
Then you can view an animation of your track <a class="text-link" href="/animate">here</a>.
</div>
</div>
</div>
<div class="row bg-white">
<div class="col">
<a class="text-link" href="/view">Back</a>
</div>
</div>
</main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="js/serverCommunication.js"></script>
<script src="js/view/viewComms.js"></script>
<script type="module" src="js/view/viewUI.js"></script>
</html>