-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (137 loc) · 10 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>-->
<!--<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.1/vivus.min.js'></script>-->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="assets/js/vendor/p5.min.js"></script>
<script src="assets/js/vendor/cycle.js"></script>
<script src="assets/js/vendor/graph.js"></script>
<script src="assets/js/vendor/bezier.js"></script>
<script src="assets/js/vendor/jquery.js"></script>
<script>if (window.module) module = window.module;</script>
<script src="assets/data/nodes.js"></script>
<script src="assets/data/nodeGraph.js"></script>
<!--<script src="assets/data/locations.js"></script>-->
<script src="assets/js/settings.js"></script>
<script src="assets/js/helpers.js"></script>
<script src="assets/js/calculations.js"></script>
<script src="assets/js/modules/Events.js"></script>
<script src="assets/js/modules/Node.js"></script>
<script src="assets/js/modules/City.js"></script>
<script src="assets/js/modules/NodeManager.js"></script>
<script src="assets/js/modules/Bridges.js"></script>
<script src="assets/js/ui.js"></script>
<script src="assets/js/modules/Map.js"></script>
<script src="assets/js/modules/Vehicle.js"></script>
<script src="assets/js/modules/Car.js"></script>
<script src="assets/js/modules/Truck.js"></script>
<script src="assets/js/dev.js"></script>
<script src="assets/js/setup.js"></script>
<script src="assets/js/draw.js"></script>
<link rel="stylesheet" href="assets/css/main.css">
<title>E-Motion</title>
</head>
<body class="nav-active">
<!--<div class="block"></div>
<svg id="bla" xmlns="http://www.w3.org/2000/svg" width="500" height="600"><defs><style>.cls-1{fill:#FFF;stroke:#ff502d;stroke-miterlimit:10;stroke-width:6px;}</style></defs><title>Element 1</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_2-2" data-name="Ebene 2"><path class="cls-1" d="M111.33,43.39c-1.22-1.64-3.68-3.31-4.2-6.82a3.67,3.67,0,0,1-.05-.43c-.16-3.87,4.66-4.71,4.67-8.67,0-4.59-5.59-6.87-4.67-9.33s6.57-.78,8.67-4-1.31-7.82,0-8.67c1-.65,3.25,2,8.67,6a54.91,54.91,0,0,0,9.33,6c5.4,2.61,6.49,1.59,10,4,4.23,2.9,3.28,4.79,6.67,6.67,6.43,3.56,15-.48,15.33-.67,3.69-1.81,3.57-3.32,6.67-4,4.53-1,6.32,1.91,10,.67a9.86,9.86,0,0,0,6-7.33c.79-4.42-2.58-6.44-1.33-9.33s5.7-3.5,9.33-4c2.4-.33,12.28-1.7,14.67,2.67,1.69,3.09-2.23,5.69-.67,10.67.9,2.86,2.33,2.45,5.33,7.33a53.88,53.88,0,0,1,4,8s5.2,4.39,5.33,6.67c.2,3.58-5.12,5.1-4.67,8,.49,3.18,7.2,3.08,8,6.67.6,2.69-2.92,3.87-3.33,8-.25,2.53,1.16,4.83,4,9.33,3.67,5.83,5.14,6.24,8,11.33,2.18,3.88,3.27,5.82,3.33,8.67.07,3.12-1.14,3.82-2,9.33-.74,4.74.07,4.72-.67,7.33-1.73,6.14-6.78,8.27-6,10,.67,1.47,4.28-.13,10,.67,3,.42,6.93,2.28,14.67,6,7.31,3.51,8.79,4.59,11.33,4,3.94-.92,5.65-4.74,7.33-4,2,.86.06,6.2,2.67,8,2.4,1.66,6.17-1.4,7.33,0,1.41,1.7-2.67,8-2.67,8a66.67,66.67,0,0,0,8,4,33.84,33.84,0,0,0,8,2.67c4.72.8,6.91-.26,7.33.67.69,1.51-3.84,6.89-9.33,7.33s-7.93-4.13-11.33-2.67c-2.79,1.2-1.51,4.46-4.67,7.33-2.82,2.57-5.43,1.4-15.33,3.33-7.72,1.51-8.44,2.68-8.67,3.33-.83,2.44,3.09,4.25,4,10,.25,1.62.67,4.26-.67,6.67-1.85,3.32-4.92,2.41-8,6-1.48,1.72-.84,2-3.33,7.33-2.26,4.83-3.4,7.24-5.33,8.67-3.9,2.87-9,2.17-10,2-5.38-.87-7.4-4.39-9.33-3.33-2.22,1.22.27,6-2.67,9.33-1.92,2.19-3.65,1-8,3.33-4.71,2.58-3.94,4.74-8,6.67-4.85,2.3-8.12.25-10,2.67-1.44,1.84-.74,4.59,0,7.33,1.69,6.27,4.48,7.39,8,14,4,7.46,3,10.92,6,12,4.18,1.52,8.27-4.48,11.33-2.67,2.45,1.45,2.15,6.68,2,9.33-.22,3.93-1.25,3.92-1.33,8a50.05,50.05,0,0,0,.67,8c1.1-.21,5.74-1,6.67.67,1,1.94-3.21,6.08-4.67,7.33-12.64,10.93-40.09.11-42-.67-17.79-7.22-13.8-13-30.67-20-15.69-6.52-32.18-6.94-47.33-7.33-13.84-.36-12.27,1.06-18.67,0-16-2.65-16.5-10-42-22a30.46,30.46,0,0,1-9.18-4.65c-2.41-1.83-4.68-3.59-4.82-6-.22-3.95,5.44-6.4,4.67-8-.91-1.87-7.31,1.64-11.33-1.33-3.85-2.84-1.64-8.74-5.33-10.67-2.77-1.44-4.92,1.39-8.67,0-3.13-1.16-5.94-4.74-5.33-7.33.9-3.88,9.51-5.73,16-5.33s9.65,3,11.33,1.33c2.64-2.58-3.38-10.52-.67-13.33,2.45-2.54,8.68,2.6,12,0,4-3.16-2.44-12.93,2.67-19.33,2.61-3.28,5.58-2.32,7.33-6s-.6-5.48.67-10.67c1.32-5.37,4.44-6,4-8.67-.33-2-2.85-1.94-9.29-5.79-3.37-2-5.06-3-5.38-4.21-.92-3.33,4.87-5,8.67-12.67,1.55-3.11,2.36-7,4-14.67,1.36-6.39,1.16-7.59.67-8.67-2.23-4.83-9.14-3.86-10-7.33-1-4.06,7.8-7.95,6.67-12-.83-3-6-2.46-6.67-5.33-.73-3,4.27-6.74,8.67-10,8.09-6,9.22-6.34,10-6,2.5,1.09.86,5.8,4,8,2.88,2,5.78-.89,10,.67s3.09,5.5,7.33,8c3.53,2.08,7.42,1.29,14.67-.17,4.89-1,7.45-1.54,9.33-3.83.41-.5,1.29-1.69,2.17-8.67C112.22,49.09,112.7,45.24,111.33,43.39Z"/></g></g></svg>-->
<!--<canvas id="simulation"></canvas>-->
<div id="sidebar-toggle">
<h1 id="project-title">E-Motion</h1>
<a href="#" id="toggle-button"></a>
</div>
<div id="sidebar">
<h1>Einstellungen</h1>
<div class="data-group cozy">
<div class="two columns center-text">
<span class="label" tooltip="Die Anzahl der Trucks, die in Betrieb sind">Anzahl der Trucks</span>
<div class="param numbers"><!--
--><div class="add"></div><!--
--><input id="truckAmount" class="amount update-sim" type="number" min="0" max="13" value="8"><!--
--><div class="subtract"></div><!--
--></div>
</div><!--
--><div class="two columns center-text">
<span class="label" tooltip="Die Anzahl der Elektroautos, die versorgt werden müssen">Anzahl der Autos</span>
<div class="param numbers"><!--
--><div class="add"></div><!--
--><input id="carAmount" class="amount update-sim" type="number" min="0" max="300" value="40"><!--
--><div class="subtract"></div><!--
--></div>
</div>
</div>
<div class="data-group cozy">
<span tooltip="Wie viele Stunden die Trucks jeden Tag unterwegs sind" class="label">Betriebszeit der Trucks</span>
<input id="truckUptime" class="param draggable unit-hours update-sim" min="1" max="24" value="7" type="range">
</div>
<div class="data-group cozy">
<span tooltip="Wie viel % des Akkus die Tanker aufladen" class="label">Ladelimit der Autos</span>
<input id="carChargeLimit" class="param draggable unit-percent update-sim" min="0.01" max="1" step="0.01" value="0.25" type="range">
</div>
<div class="data-group cozy">
</div>
<h1>Trucks</h1>
<div class="data-group">
<div class="static-value-group three seamless">
<span class="headline">Geladene Autos</span>
<div class="static-value">
<span id="chargesPerDay" class="amount">423</span>
<span class="label" tooltip="So viele Autos können durch die Trucks jeden Tag aufgeladen werden">Täglich</span>
</div><!--
--><div class="static-value">
<span id="chargesPerMonth" class="amount">423</span>
<span class="label" tooltip="So viele Autos können durch die Trucks jeden Monat aufgeladen werden">Monatlich</span>
</div><!--
--><div class="static-value">
<span id="chargesPerYear" class="amount">423</span>
<span class="label" tooltip="So viele Autos können durch die Trucks jedes Jahr aufgeladen werden">Jährlich</span>
</div>
</div>
<!--<div class="static-value">
<span id="maxTruckUptime" class="amount">20:51:01</span>
<span class="label" tooltip="So lange dauert es, wenn ein Truck ohne Unterbrechungen Autos lädt, bis er leer wird">bis ein Truck selbst aufladen muss</span>
</div><!--
--<div class="progress-bar">
<span class="label">Aktuelle durchschnittliche Ladung</span>
<span class="amount">50%</span>
<div class="bar">
<div class="progress" style="width: 50%"></div>
</div>
</div>-->
</div>
<h1>Autos</h1>
<div class="data-group">
<div class="static-value-group three seamless">
<span class="headline">Stehengebliebene Autos</span>
<div class="static-value">
<span id="stuckCarsToday" class="amount">0</span>
<span class="label" tooltip="So vielen Autos ist heute der Tank leer gegangen">Heute</span>
</div><!--
--><div class="static-value">
<span id="stuckCarsTotal" class="amount">0</span>
<span class="label" tooltip="So vielen Autos ist der Tank seit Simulationsstart leer gegangen">Insgesamt</span>
</div><!--
--><div class="static-value">
<span id="stuckCarsAverage" class="amount">0</span>
<span class="label" tooltip="So viele Autos bleiben im Durchschnitt pro Tag liegen. Versuche das Ladelimit der Autos oder die Anzahl der Trucks zu erhöhen.">Ø pro Tag</span>
</div>
</div>
</div>
<div class="data-group">
<div id="average-charge" class="progress-bar">
<span class="label" tooltip="Wie viel % der Ladung, die im Ladelimit angegeben wurden, haben die Autos aktuell noch">Aktueller Durchschnitt der benötigten Ladung</span>
<div class="bar">
<div class="progress" style="width: 0%">
<span class="amount">0%</span>
</div>
</div>
</div>
</div>
</div>
<div id="canvas-wrapper"></div>
</body>
</html>