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

<!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">
						<span id="student-info-dot-green"></span>
						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">
						<span id="student-info-dot-orange"></span>
						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">
						<span id="student-info-dot-red"></span>
						Rote Punkte <span class="student-info-points" id="student-info-points-red">0</span>
					</div>
					<div id="student-info-points-sum-container" class="student-info-mid-element">
						&sum; <span class="student-info-points" id="student-info-points-sum"></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>

			<details id="graduation">
				<summary>Graduierung</summary>

				<div id="graduation-level-change" data-availability="if-coach">
					<h4 id="graduation-level-change-headline">Graduierung abgeschlossen?</h4>
					<button id="graduation-level-change-submit">Ändere Level</button>
					<input type="number" min="1" max="4" id="graduation-level-change-level" />
				</div>

				<div id="graduation-history">
					<h4 id="graduation-history-headline">Änderungsverlauf</h4>
					<table class="table table-striped">
						<thead>
							<tr>
								<th>Änderung</th>
								<th>Datum</th>
								<th>Grund</th>
								<th>Coach</th>
								<th>Context</th>
							</tr>
						</thead>
						<tbody id="graduation-changes"></tbody>
					</table>
				</div>
			</details>
		</div>
	</body>
</html>