-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
170 lines (143 loc) · 10.1 KB
/
index.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
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
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- For LeafletJS Maps -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<!-- Fullscreen Plugin-->
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
<!-- Primary Stylesheets -->
<link rel="stylesheet" href="index.css">
<title>HNav Content</title>
<!-- For Webpage Icon (appears on browser tab) -->
<link rel="icon" href="Icons/HuskyNavLogoTransparent.png">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8FCLWK5XT4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-8FCLWK5XT4');
</script>
<!-- For sending emails via Smtp.JS API -->
<script src="https://smtpjs.com/v3/smtp.js"></script>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous" defer></script>
<!-- LeafletJS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin="" defer></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet-lasso.umd.js" defer></script>
<!-- Fullscreen Plugin -->
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js' defer></script>
<!-- Load primary JavaScript source code -->
<script src="Scripts/utils.js" defer></script>
<script src="Scripts/handlers.js" defer></script>
<script src="Scripts/nodeModes.js" defer></script>
<script src="Scripts/lifecycleFns.js" defer></script>
<script src="Scripts/commandFns.js" defer></script>
<script src="Scripts/initFns.js" defer></script>
<script src="index.js" defer></script>
</head>
<div id="toast-div">
<div id="save-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-bs-delay="30000" data-bs-animation="true">
<div class="toast-body">
Don't forget to export your work!
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Export</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
</div>
</div>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid justify-content-space-between">
<span id="navbar-title" class="navbar-brand mb-0 h1">Husky Navigation <span class="badge bg-secondary">Developer Tools</span></span>
<div id="map-options" class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="edges-checkbox" autocomplete="off" onclick="handleEdgesCheck(this)">
<label id="mid-checkbox" class="btn btn-outline-light" for="edges-checkbox">Show Edges</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off" onclick="handleOverlayCheck(this)">
<label class="btn btn-outline-light" for="btncheck3">Show Overlay</label>
<!--
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off" onclick="handlePopupCheck(this)">
<label class="btn btn-outline-light" for="btncheck1">Show Popups</label>
-->
</div>
</nav>
<div id="page" class="container-fluid no-gutters">
<div class="row no-gutters">
<div id="map-column" class="col-6 no-gutters">
<div id="map"></div>
<div id="preview" class="bg-dark">
<h3 id="preview-title">Preview</h3>
<button id="update-prev-btn" type="button" class="btn btn-primary" onclick="updatePreview()">Update Preview</button>
<button id="save-btn" type="button" class="btn btn-primary" onclick="saveData()">Export</button>
<button id="send-btn" type="button" class="btn btn-primary" onclick="sendData()">Send</button>
<hr>
<div id="preview-text" ondrop="dropHandler(event)" ondragover="dragOverHandler(event);">
<p id="preview-fill-text">Please select node data to see preview. </br> <span style="color: gray;">Editing is not possible on mobile devices.</span></p>
</div>
</div>
</div>
<div class="col-6 no-gutters">
<div id="editor" class="bg-dark">
<div id="option-container">
<div style="display:flex; justify-content: flex-end;">
<h3 id="editor-title">Editor</h3>
<div id="editor-options" class="btn-group" role="group" aria-label="Mode Radio Toggle" onclick="handleModeChange()">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off">
<label class="btn btn-outline-success option" for="btnradio1">Add</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off" checked>
<label class="btn btn-outline-warning option" for="btnradio2">Connect</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off" checked>
<label class="btn btn-outline-warning option" for="btnradio3">Lasso</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off">
<label class="btn btn-outline-danger option" for="btnradio4">Delete</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio6" autocomplete="off">
<label id="btnradio6-label" class="btn btn-outline-light option" for="btnradio6">Move</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio5" autocomplete="off">
<label class="btn btn-outline-primary option" for="btnradio5">View</label>
</div>
</div>
<div style="display:flex; justify-content: flex-end;">
<input id="search-input" type="text" class="form-control" placeholder="" oninput="handleSearch(this)">
<div id="editor-table-options" class="btn-group option" role="group" aria-label="Mode Radio Toggle" onclick="handleTableChange()">
<input type="radio" class="btn-check" name="btnradio" id="btnradio11" autocomplete="off" checked>
<label class="btn btn-outline-info" for="btnradio11">View Table</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio22" autocomplete="off">
<label class="btn btn-outline-info" for="btnradio22">Modify Table</label>
</div>
<button id="update-table-btn" type="button" class="btn btn-primary option" onclick="drawTable()">Update Table</button>
</div>
</div>
<hr>
<div id="table-wrapper">
<table id="nodes-table" class="table table-dark fixed">
<thead>
<tr>
<th scope="col" style="width: 100px;">Id</th>
<th scope="col" style="width: 100px;">Lat</th>
<th scope="col" style="width: 100px;">Long</th>
<th scope="col" style="width: 100px;">Neighbors</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="dropbox-div-2" ondrop="dropHandler(event)" ondragover="dragOverHandler(event);">
<p class="dropbox-text-wide">Welcome to our map content service where we seek to make mapping both open source and more efficient. If you would like to define your own path by adding content to our map please make sure to click "Export Nodes" and contact
us by sending the resulting text file to this <a href="mailto: [email protected]">email address</address></a>. From the entire Husky Navigation Serivces team, thank you!
</p>
<p class="dropbox-text">To begin, please <b>drag and drop</b> your node data from a previous session, </ br> or continue with the latest node data.</p>
<img id="dropbox-icon-2" class="dropbox-icon" src="./Icons/Dropbox_Icon.png" alt="Italian Trulli">
<p class="default-source" onclick="init('', true)">Continue With Latest Node Data</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>