Toteuta käyttöliittymä tuntien lisäämiseksi

index.html

@@ -43,6 +43,9 @@
 			#opettajat > li > span {
 				margin-left: 0.5em;
 			}
+			#tunti-kertaa-viikossa {
+				width: 3em;
+			}
 			.piilotettu {
 				display: none;
 			}
@@ -75,6 +78,24 @@
 			</div>
 		</details>
 
+		<details class="ruutu" open>
+			<summary>Tunnit</summary>
+			<div>
+				<form id="lisää-tunti">
+					<label for="tunti-nimi">Nimi</label>
+					<input id="tunti-nimi" type="text" required>
+					<label for="tunti-luokka">Luokka</label>
+					<select id="tunti-luokka" required></select>
+					<label for="tunti-opettaja">Opettaja</label>
+					<select id="tunti-opettaja" required></select>
+					<input id="tunti-kertaa-viikossa" type="number" min="1" value="1">
+					<label for="tunti-kertaa-viikossa">kertaa viikossa</label>
+					<input type="submit" value="+">
+				</form>
+				<ul id="tunnit"></ul>
+			</div>
+		</details>
+
 		<script src="testit.js"></script>
 		<script src="tietotyypit.js"></script>
 		<script src="tietomalli.js"></script>

käyttöliittymä.js

@@ -73,6 +73,19 @@ function piirräLuokat() {
 		luokkaAsteLista,
 		vanhaLuokkaAsteLista
 	);
+
+	let vanhaTuntiLuokkaValinta = document.getElementById('tunti-luokka');
+	let tuntiLuokkaValinta = document.createElement('select');
+	tuntiLuokkaValinta.id = 'tunti-luokka';
+	for (let luokka of luokkaAsteet.luokat()) {
+		let valinta = document.createElement('option');
+		valinta.appendChild(document.createTextNode(luokka));
+		tuntiLuokkaValinta.appendChild(valinta);
+	}
+	vanhaTuntiLuokkaValinta.parentNode.replaceChild(
+		tuntiLuokkaValinta,
+		vanhaTuntiLuokkaValinta
+	);
 }
 
 function luoLuokkaAsteLista() {
@@ -171,6 +184,20 @@ function piirräOpettajat() {
 		opettajaLista,
 		vanhaOpettajaLista
 	);
+
+	let vanhaTuntiOpettajaValinta = document.getElementById('tunti-opettaja');
+	let tuntiOpettajaValinta = document.createElement('select');
+	tuntiOpettajaValinta.id = 'tunti-opettaja';
+	for (let [lyhenne, nimi] of opettajat.opettajat()) {
+		let valinta = document.createElement('option');
+		valinta.appendChild(document.createTextNode(nimi));
+		valinta.value = lyhenne;
+		tuntiOpettajaValinta.appendChild(valinta);
+	}
+	vanhaTuntiOpettajaValinta.parentNode.replaceChild(
+		tuntiOpettajaValinta,
+		vanhaTuntiOpettajaValinta
+	);
 }
 
 function luoOpettajaLista() {