-
Notifications
You must be signed in to change notification settings - Fork 48
/
dashboard.html
253 lines (231 loc) · 15.9 KB
/
dashboard.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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<svg style="display: none">
<defs>
<!-- Based on the actual game gfx. -->
<symbol id="svg-ets2-truck" viewBox="0 0 54 36">
<path d="m14 31a2 2 0 0 0 -2 -2 2 2 0 0 0 -2 2 2 2 0 0 0 2 2 2 2 0 0 0 2 -2zm3 0a5 5 0 0 1 -5 5 5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5 5 5 0 0 1 5 5zm-14-25h8v8h-8zm45 25a2 2 0 0 0 -2 -2 2 2 0 0 0 -2 2 2 2 0 0 0 2 2 2 2 0 0 0 2 -2zm3 0a5 5 0 0 1 -5 5 5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5 5 5 0 0 1 5 5zm-38-31-3 3h-8l-1 1v10h-1v10h2v2h-2v6h6.0859a6 6 0 0 1 -0.0859 -1 6 6 0 0 1 6 -6 6 6 0 0 1 6 6 6 6 0 0 1 -0.08984 1h8.09v-1h7v1h7.0859a6 6 0 0 1 -0.086 -1 6 6 0 0 1 6 -6 6 6 0 0 1 6 6 6 6 0 0 1 -0.08984 1h2.09v-6h-1v-2h-3v-3h-12v3h-17v-2h3v-19h-1v-3h-10z"/>
</symbol>
<!-- Based on the actual game gfx. -->
<symbol id="svg-ets2-trailer" viewBox="0 0 105 39">
<path d="m95 34a2 2 0 0 0 -2 -2 2 2 0 0 0 -2 2 2 2 0 0 0 2 2 2 2 0 0 0 2 -2zm3 0a5 5 0 0 1 -5 5 5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5 5 5 0 0 1 5 5zm-14 0a2 2 0 0 0 -2 -2 2 2 0 0 0 -2 2 2 2 0 0 0 2 2 2 2 0 0 0 2 -2zm3 0a5 5 0 0 1 -5 5 5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5 5 5 0 0 1 5 5zm-14 0a2 2 0 0 0 -2 -2 2 2 0 0 0 -2 2 2 2 0 0 0 2 2 2 2 0 0 0 2 -2zm3 0a5 5 0 0 1 -5 5 5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5 5 5 0 0 1 5 5zm-31-4h13v4h-13zm-43-30h101a2 2 0 0 1 2 2v26h-105v-26a2 2 0 0 1 2-2z"/>
</symbol>
<!-- Based on the actual game gfx. -->
<symbol id="svg-ats-truck" viewBox="0 0 73 40">
<path d="M15 34a3 3 0 0 0 -3 -3 3 3 0 0 0 -3 3 3 3 0 0 0 3 3 3 3 0 0 0 3 -3zm3 0a6 6 0 0 1 -6 6 6 6 0 0 1 -6 -6 6 6 0 0 1 6 -6 6 6 0 0 1 6 6zm47 0a3 3 0 0 0 -3 -3 3 3 0 0 0 -3 3 3 3 0 0 0 3 3 3 3 0 0 0 3 -3zm3 0a6 6 0 0 1 -6 6 6 6 0 0 1 -6 -6 6 6 0 0 1 6 -6 6 6 0 0 1 6 6zm-13-14h14v3h-14zM16 9h9v8h-9zm11 0h4v8h-4zM27,0l-4 4h-6l-2 2v11h-12v2h-1v10h-2v6h5.078a7 7 0 0 1 -0.078 -1 7 7 0 0 1 7 -7 7 7 0 0 1 7 7 7 7 0 0 1 -0.08 1h6.08v-2h11v2h19.078a7 7 0 0 1 -0.078 -1 7 7 0 0 1 7 -7 7 7 0 0 1 7 7 7 7 0 0 1 -0.08 1h2.08v1h2v-12h-2v1h-21v-1h-3v-24h-8v24h-1v-24z"/>
</symbol>
<!-- Based on the actual game gfx. -->
<symbol id="svg-ats-trailer" viewBox="0 0 114 43">
<path d="m104 38a2 2 0 0 0 -2 -2 2 2 0 0 0 -2 2 2 2 0 0 0 2 2 2 2 0 0 0 2 -2zm3 0a5 5 0 0 1 -5 5 5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5 5 5 0 0 1 5 5zm-14 0a2 2 0 0 0 -2 -2 2 2 0 0 0 -2 2 2 2 0 0 0 2 2 2 2 0 0 0 2 -2zm3 0a5 5 0 0 1 -5 5 5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5 5 5 0 0 1 5 5zm-42-4h21v4h-21zM2 0h110a2 2 0 0 1 2 2v30h-114v-30a2 2 0 0 1 2-2z"/>
</symbol>
<!-- Based on the actual game icon. 12x12 image with 2 pixel margin. -->
<symbol id="svg-gear" viewBox="-2 -2 16 16">
<path d="m0 0v12h2v-5h3v5h2v-5h3 2v-2-5h-2v5h-3v-5h-2v5h-3v-5h-2z"/>
</symbol>
<!-- Based on the actual game icon. -->
<symbol id="svg-fuel" viewBox="0 0 16 16">
<path d="m9 3h-6v3h6zm-8-2h10v6h-1v6h2v-11h1v3h1v2h-1v8h-12v-2h1v-6h-1z"/>
</symbol>
<!-- Based on the actual game icon. -->
<symbol id="svg-fatigue" viewBox="0 0 18 12">
<path d="m5.5 4.5a1.5 1.5 0 0 1 -1.5 1.5 1.5 1.5 0 0 1 -1.5 -1.5 1.5 1.5 0 0 1 1.5 -1.5 1.5 1.5 0 0 1 1.5 1.5zm0.5-1.5v3h1 8a4 3 0 0 0 -4 -3h-5zm-6-3h2v7h14v-5h2v10h-2v-3h-14v3h-2z"/>
</symbol>
<!-- Based on http://typicons.com/ 24x24 image with 3 pixel margin. -->
<symbol id="svg-compass" viewBox="3 3 18 18">
<path d="M12 5c3.859.001 7 3.142 7 7.001 0 3.858-3.141 6.998-7 6.999-3.859 0-7-3.14-7-6.999s3.141-7 7-7.001m0-2c-4.971.001-9 4.03-9 9.001 0 4.97 4.029 8.999 9 8.999 4.97-.001 9-4.03 9-8.999 0-4.971-4.029-9-9-9.001zM16.182 7.819c-.129-.128-.315-.178-.491-.127l-5.951 1.706c-.166.048-.295.177-.342.343l-1.707 5.951c-.051.175-.002.363.127.491.095.095.223.146.354.146l.138-.02 5.95-1.708c.165-.047.295-.177.342-.343l1.707-5.949c.05-.173.002-.361-.127-.49zm-7.282 7.282l1.383-4.817 3.434 3.435-4.817 1.382z"/>
</symbol>
<!-- Based on http://fontawesome.io/ -->
<symbol id="svg-phone-squared" viewBox="0 0 857 858">
<path d="m714 595q0-6-1-9-1-5-21-17t-50-27l-29-16q-3-2-11-8t-14-8-12-3q-10 0-26 18t-32 37-24 18q-4 0-9-2t-9-3-9-6-8-4q-56-31-95-71t-71-95q-1-2-5-8t-5-9-4-9-2-9q0-8 12-19t25-21 25-23 11-20q0-5-2-12t-9-14-7-10q-2-4-8-16t-14-25-15-27-14-23-9-10-9-1q-27 0-56 13-26 11-45 52t-19 73q0 9 1 19t3 17 5 19 6 16 7 18 6 17q33 92 121 179t178 121q4 1 17 6t19 7 16 5 18 5 17 3 19 2q32 0 73-19t53-45q12-30 12-56zm143-434v536q0 66-47 113t-114 48h-535q-67 0-114-48t-47-113v-536q0-66 47-113t114-48h535q67 0 114 48t47 113z"/>
</symbol>
<!-- Based on http://www.entypo.com/ -->
<symbol id="svg-help-circled" viewBox="0 0 920 920">
<path d="m454.12-0.02963q190-2 326 130t140 322q2 190-131 327t-323 141q-190 2-327-131t-139-323q-4-190 130-327t324-139zm-2 740q30 0 49-19t19-47q2-30-17-49t-49-19h-2q-28 0-47 18t-21 46q0 30 19 49t47 21h2zm166-328q26-34 26-78 0-78-54-116-52-38-134-38-64 0-104 26-68 42-72 146v4h110v-4q0-26 16-54 16-24 54-24 40 0 52 20 16 20 16 44 0 18-16 40-8 12-20 20l-6 4q-6 4-16 11t-20 15-21 17-17 17q-14 20-18 78v8h108v-4q0-12 4-28 6-20 28-36l28-18q46-34 56-50z"/>
</symbol>
<!-- Based on U+27A4 Black Rightwards Arrowhead -->
<symbol id="svg-arrow-up" viewBox="-3.5 0 39 39">
<path d="M16,24 1,32 16,0 31,32z"/>
</symbol>
<!-- Cruise Control On by BomSymbols from the Noun Project -->
<symbol id="svg-cruise-control" viewBox="0 17.703 609.929 603.647">
<path d="M345.928,621.351c145.575,0,264.001-118.426,264.001-263.994c0-145.575-118.426-264-264.001-264s-264,118.425-264,264
C81.927,502.918,200.353,621.351,345.928,621.351z M179.861,211.835l22.502,22.496c2.838,2.838,6.558,4.257,10.27,4.257
c3.712,0,7.432-1.419,10.27-4.257c5.676-5.676,5.676-14.87,0-20.546L200.4,191.29c35.489-31.138,80.992-51.099,130.995-54.361
v31.905c0,8.023,6.504,14.527,14.526,14.527c8.023,0,14.527-6.503,14.527-14.527v-31.905
c50.002,3.262,95.498,23.223,130.994,54.361l-22.489,22.496c-5.676,5.676-5.676,14.876,0,20.546
c2.838,2.838,6.558,4.257,10.27,4.257c3.713,0,7.432-1.419,10.27-4.257l22.489-22.496c31.139,35.489,51.099,80.986,54.36,130.995
h-31.904c-8.023,0-14.526,6.503-14.526,14.526c0,8.023,6.503,14.527,14.526,14.527h31.904
c-3.262,49.996-23.222,95.492-54.36,130.988l-22.489-22.489c-5.676-5.676-14.869-5.676-20.546,0c-5.676,5.677-5.676,14.87,0,20.546
l22.489,22.489c-35.489,31.145-80.985,51.099-130.994,54.367v-31.918c0-8.023-6.504-14.526-14.527-14.526
c-8.022,0-14.526,6.503-14.526,14.526v31.918c-50.002-3.269-95.499-23.223-130.995-54.367l22.503-22.489
c5.676-5.676,5.676-14.869,0-20.546c-5.676-5.676-14.87-5.676-20.546,0l-22.503,22.489c-31.138-35.489-51.099-80.992-54.36-130.988
h31.912c8.023,0,14.526-6.503,14.526-14.527c0-8.023-6.503-14.526-14.526-14.526h-31.912
C128.762,292.821,148.723,247.331,179.861,211.835z"/>
<path d="M310.809,342.776c-1.863,4.492-2.912,9.415-2.912,14.58c0,20.963,17.056,38.011,38.024,38.011
c20.963,0,38.019-17.048,38.019-38.011c0-20.976-17.056-38.024-38.019-38.024c-5.165,0-10.081,1.042-14.573,2.912l-53.204-53.204
c-5.676-5.676-14.87-5.676-20.546,0c-5.676,5.676-5.676,14.87,0,20.546L310.809,342.776z"/>
<path d="M129.159,157.676H29.531c-5.878,0-11.171-3.538-13.417-8.971c-2.253-5.427-1.009-11.668,3.147-15.832l39.544-39.544
L7.983,42.506c-5.676-5.676-5.676-14.869,0-20.545s14.87-5.676,20.546,0l50.823,50.823l39.544-39.544
c4.149-4.156,10.417-5.414,15.832-3.147c5.434,2.246,8.971,7.539,8.971,13.417v99.628c0,0,0.067,5.703-3.295,9.907
C137.041,157.246,129.159,157.676,129.159,157.676z"/>
</symbol>
</defs>
</svg>
<div id="rotate-button-div" class="ol-unselectable ol-control">
<button id="rotate-button">
<svg width="0.7em" height="0.7em"><use xlink:href="#svg-arrow-up" fill="currentColor"/></svg>
</button>
</div>
<div class="dashboard connected">
<aside>
<div class="_speed">
<span class="cruiseControl">
<svg width="1em" height="1em"><use xlink:href="#svg-cruise-control" fill="lime"/></svg>
<span class="truck-cruiseControlSpeed"></span>
</span>
<span class="noCruiseControl truckSpeedRoundedKmhMph"></span> <span class="speedUnits"></span>
</div>
<div class="_gear _middle">
<svg width="1em" height="1em"><use xlink:href="#svg-gear" fill="#969696"/></svg><span class="gear _yellow-color"></span>
</div>
<div class="_damage _middle">
<div class="fillingIcon truckDamage">
<div class="top isEts2"><svg width="1.5em" height="1em"><use xlink:href="#svg-ets2-truck" fill="#969696"/></svg></div>
<div class="bot isEts2"><svg width="1.5em" height="1em"><use xlink:href="#svg-ets2-truck" fill="#930002"/></svg></div>
<div class="top isAts"><svg width="1.5em" height="1em"><use xlink:href="#svg-ats-truck" fill="#969696"/></svg></div>
<div class="bot isAts"><svg width="1.5em" height="1em"><use xlink:href="#svg-ats-truck" fill="#930002"/></svg></div>
</div>
</div>
<div class="_fuel _middle">
<div class="fillingIcon fuel">
<div class="top"><svg width="1.5em" height="1em"><use xlink:href="#svg-fuel" fill="#969696"/></svg></div>
<div class="bot"><svg width="1.5em" height="1em"><use xlink:href="#svg-fuel" fill="#f3c24c"/></svg></div>
</div>
</div>
<div class="_rest _middle">
<div class="fillingIcon rest">
<div class="top"><svg width="1.5em" height="1em"><use xlink:href="#svg-fatigue" fill="#969696"/></svg></div>
<div class="bot"><svg width="1.5em" height="1em"><use xlink:href="#svg-fatigue" fill="#1e88e5"/></svg></div>
</div>
</div>
<div class="_time">
<span class="game-time" id="headerTime"></span>
</div>
</aside>
<div class="_tabs">
<article id="_map">
<p class="loading-text" data-mra-text="LoadingMapPleaseWait"></p>
<div class="_no-map">
<div class="_row">
<p style="margin-top: 250px">No map available</p>
<div id="map-text" class="hasJob ol-unselectable ol-control"><span data-mra-text="ETA"></span>: <span class="navigation-estimatedTime"></span>, <span class="navigationEstimatedDistanceKmMi"></span> <span class="distanceUnits"></span>, <span class="navigation-timeToDestination"></span></div>
<div id="speed-limit" class="ol-unselectable ol-control game-specific"><span class="speedLimitRoundedKmhMph"></span></div>
</div>
</div>
</article>
<article id="_cargo">
<div class="noJob">
<div class="_row _yellow-color">
<p data-mra-text="CurrentJob"></p>
<p><!-- There is no way to get the current balance from the telemetry. --></p>
</div>
<div class="_row">
<p></p>
<p></p>
</div>
<div class="_row">
<p></p>
<p></p>
</div>
<div class="_row">
<p data-mra-text="NoJob"></p>
<p></p>
</div>
<div class="_row">
<p></p>
<p></p>
</div>
<div class="_row">
<p data-mra-text="NextRestStopIn"></p>
<p class="game-nextRestStopTime _yellow-color"></p>
</div>
</div>
<div class="hasJob">
<div class="_row _yellow-color">
<p data-mra-text="CurrentJob"></p>
<p><!-- There is no way to get the current balance from the telemetry. --></p>
</div>
<div class="_row">
<p data-mra-text="CargoName"></p>
<p><span class="trailer-name"></span> (<span class="trailerMassKgOrT"></span>)</p>
</div>
<div class="_row">
<p data-mra-text="Destination"></p>
<p><span class="job-destinationCity"></span> - <span class="job-destinationCompany"></span></p>
</div>
<div class="_row" id="expected">
<p data-mra-text="Expected"></p>
<!--p><span class="job-???????"></span> - <span class="job-deadlineTime"></span></p-->
<p><span class="job-deadlineTime"></span></p>
</div>
<div class="_row">
<p data-mra-text="JobIncome"></p>
<p class="jobIncome"></p>
<!--p><span class="currencyCode"></span> <span class="jobIncome"></span></p-->
</div>
<div class="_row" id="remains">
<p data-mra-text="Remains"></p>
<p class="job-remainingTime"></p>
</div>
<div class="_row">
<p data-mra-text="NextRestStopIn"></p>
<p class="game-nextRestStopTime _yellow-color"></p>
</div>
</div>
</article>
<article id="_damage">
<figure>
<div class="fillingIcon truckDamage">
<div class="top isEts2"><svg width="7em" height="4em"><use xlink:href="#svg-ets2-truck" fill="#969696"/></svg></div>
<div class="bot isEts2"><svg width="7em" height="4em"><use xlink:href="#svg-ets2-truck" fill="#930002"/></svg></div>
<div class="top isAts"><svg width="7em" height="4em"><use xlink:href="#svg-ats-truck" fill="#969696"/></svg></div>
<div class="bot isAts"><svg width="7em" height="4em"><use xlink:href="#svg-ats-truck" fill="#930002"/></svg></div>
</div>
<figcaption><span data-mra-text="Truck"></span>: <span class="scsTruckDamageRounded"></span>%</figcaption>
</figure>
<figure>
<div class="fillingIcon trailerDamage">
<div class="top isEts2"><svg width="11em" height="4em"><use xlink:href="#svg-ets2-trailer" fill="#969696"/></svg></div>
<div class="bot isEts2"><svg width="11em" height="4em"><use xlink:href="#svg-ets2-trailer" fill="#930002"/></svg></div>
<div class="top isAts"><svg width="11em" height="4em"><use xlink:href="#svg-ats-trailer" fill="#969696"/></svg></div>
<div class="bot isAts"><svg width="11em" height="4em"><use xlink:href="#svg-ats-trailer" fill="#930002"/></svg></div>
</div>
<figcaption><span data-mra-text="Trailer"></span>: <span class="wearTrailerRounded"></span>%</figcaption>
</figure>
</article>
<article id="_about">
<p id="version">Mobile Route Advisor </p>
<p id="update-status" class="_yellow-color" style="display: none">A newer version is available!</p>
<p><a href="https://github.com/mike-koch/ets2-mobile-route-advisor" target="_blank">https://github.com/mike-koch/ets2-mobile-route-advisor</a></p>
</article>
</div>
<nav>
<div id="_map_button" onclick="goToMap()">
<svg width="1em" height="1em"><use xlink:href="#svg-compass" fill="#ffffff"/></svg>
</div>
<div id="_cargo_button" onclick="showTab('_cargo')">
<svg class="isEts2" width="1em" height="1em"><use xlink:href="#svg-ets2-truck" fill="#ffffff"/></svg>
<svg class="isAts" width="1em" height="1em"><use xlink:href="#svg-ats-truck" fill="#ffffff"/></svg>
</div>
<div id="_damage_button" onclick="showTab('_damage')">
<svg width="1em" height="1em"><use xlink:href="#svg-phone-squared" fill="#ffffff"/></svg>
</div>
<div id="_about_button" onclick="showTab('_about')">
<svg width="1em" height="1em"><use xlink:href="#svg-help-circled" fill="#ffffff"/></svg>
</div>
</nav>
<footer>
<span data-mra-text="MobileRouteAdvisor"></span>
</footer>
</div>
<div id="_overlay">
<p class="statusMessage"></p>
</div>