cockpit.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

<!doctype html>
<html lang="de">
	<head>
		<meta charset="utf-8" />
		<title>Cockpit</title>
		<link rel="stylesheet" href="cockpit.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="./dist/cockpit.js"></script>
	</head>
	<body>
		<div id="student-selection-container">
			<div id="student-selection-search-container">
				<input
					type="text"
					id="student-selection"
					class="student-selection"
					placeholder="Vorname Nachname Klasse"
				/>
				<button id="student-selection-clear" style="display: none">&times;</button>
				<span id="student-selection-loader" style="display: none"></span>
			</div>
			<ul id="student-selection-list"></ul>
			<p id="student-selection-noresults" style="display: none">No results found</p>
		</div>

		<div id="student-content" style="display: none">
			<div id="student-info">
				<div id="student-info-top" class="student-info-banner">
					<div id="student-info-icons">
						<img id="student-info-icon" src="assets/user-profile-icon.svg" />
						<img id="student-level-icon" />
					</div>
					<div id="student-info-name-container">
						<span id="student-info-name"></span>
						<span id="student-info-tag"></span>
					</div>
					<div id="student-info-coach-container">
						<img id="student-info-coach-icon" />
						<div id="student-info-coach-column">
							Lernbegleiter:
							<span id="student-info-coach"></span>
						</div>
					</div>
				</div>

				<div id="student-observation" class="student-info-banner"></div>

				<div id="student-info-mid" class="student-info-banner">
					<div id="student-info-green" class="student-info-mid-element">
						⚫Grüne Punkte <span class="student-info-points" id="student-info-points-green">0</span>
					</div>
					<div id="student-info-orange" class="student-info-mid-element">
						⚫Orangene Punkte
						<span class="student-info-points" id="student-info-points-orange">0</span>
					</div>
					<div id="student-info-red" class="student-info-mid-element">
						⚫Rote Punkte <span class="student-info-points" id="student-info-points-red">0</span>
					</div>
					<div id="student-info-level-container" class="student-info-mid-element">
						Graduierungsstatus:
						<span id="student-info-level"></span>
					</div>
				</div>

				<div id="student-info-point-reason-container" style="display: none">
					<textarea id="student-info-point-reason" name="reason" rows="5" spellcheck="default">
					</textarea>
					<button id="student-info-point-reason-submit">&crarr;</button>
				</div>

				<!-- <div id="student-info-bottom" class="student-info-banner"> -->
				<!-- <div id="student-info-stickers-container" class="student-info-bottom-element"> -->
				<!-- Monstersticker -->
				<!-- <div id="student-info-stickers"> -->
				<!-- </div> -->
				<!-- </div> -->
				<!-- <div id="student-info-bonus-container" class="student-info-bottom-element"> -->
				<!-- Bonuskarten -->
				<!-- <div id="student-info-bonus-row"> -->
				<!-- <img /> -->
				<!-- <span id="student-info-bonus-amount">0</span> -->
				<!-- </div> -->
				<!-- </div> -->
				<!-- </div> -->
			</div>

			<!-- <details id="progress"> -->
			<!-- <summary>Lernfortschritt</summary> -->
			<!-- </details> -->

			<!-- <details id="calendar"> -->
			<!-- <summary>Kalender</summary> -->
			<!-- </details> -->

			<details id="graduation">
				<summary>Graduierung</summary>
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Datum</th>
							<th>Grund</th>
							<th>Coach</th>
						</tr>
					</thead>
					<tbody id="graduation-changes"></tbody>
				</table>
			</details>
		</div>
	</body>
</html>