From 643c68dc2c3929d719de29a482fe63d6f74e07b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juhani=20Krekel=C3=A4?= <juhani@krekelä.fi>
Date: Thu, 3 Aug 2023 18:03:52 +0300
Subject: [PATCH] =?UTF-8?q?=C3=84l=C3=A4=20k=C3=A4yt=C3=A4=20prompt():ia?=
 =?UTF-8?q?=20tai=20alert():ia?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html        | 13 +++++++++++
 käyttöliittymä.js | 57 +++++++++++++++++++++++++++++++----------------
 2 files changed, 51 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 598eb49..e31f823 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,19 @@
 			.testit-epäonnistunut {
 				background-color: #e77;
 			}
+			.virhe {
+				background-color: #fbb;
+				margin-right: 0.5em;
+			}
+			.luokka-aste-lomake {
+				display: inline;
+			}
+			.piilotettu {
+				display: none;
+			}
+			.luokka-aste-kenttä {
+				width: 3em;
+			}
 			#luokka-asteet {
 				list-style-type: none;
 			}
diff --git a/käyttöliittymä.js b/käyttöliittymä.js
index 2a8602f..c260b6d 100644
--- a/käyttöliittymä.js
+++ b/käyttöliittymä.js
@@ -59,26 +59,45 @@ function luoLuokkaAsteListassa(aste) {
 
 	luokkaAsteListassa.appendChild(luoLuokkaLista(aste));
 
-	luokkaAsteListassa.appendChild(luoPainike('✎', () => {
-		// TODO: Älä käytä prompt():ia ja alert():ia
-		let vastaus = prompt('Uusi luokka-aste');
-		if (vastaus === null) {
-			// Käytääjä painoi 'Peruuta'
-			return;
+	let muokkausVirhe = document.createElement('span');
+	muokkausVirhe.classList.add('virhe');
+	muokkausVirhe.classList.add('piilotettu');
+	muokkausVirhe.appendChild(document.createTextNode(''));
+	luokkaAsteListassa.appendChild(muokkausVirhe);
+
+	// Luo muokkauspainike ja -lomake, joista vain yksi on näkyvillä kerralla
+	let muokkausLomake = document.createElement('form');
+	muokkausLomake.classList.add('piilotettu');
+	muokkausLomake.classList.add('luokka-aste-lomake');
+	let asteValitsin = document.createElement('input');
+	asteValitsin.classList.add('luokka-aste-kenttä');
+	asteValitsin.type = 'number';
+	asteValitsin.min = 1;
+	asteValitsin.value = aste;
+	muokkausLomake.append(asteValitsin);
+	let muokkausLomakePainike = document.createElement('input');
+	muokkausLomakePainike.type = 'submit';
+	muokkausLomakePainike.value = '✓';
+	muokkausLomake.appendChild(muokkausLomakePainike);
+	muokkausLomake.addEventListener('submit', (tapahtuma) => {
+		tapahtuma.preventDefault();
+		let uusiAste = parseInt(asteValitsin.value);
+		if (luokkaAsteet.asteet[uusiAste] === undefined || aste === uusiAste) {
+			suorita(tapahtumaTyypit.muutaAste, aste, uusiAste);
+			piirräLuokat();
+		} else {
+			muokkausVirhe.firstChild.textContent =
+				`Luokka-aste ${uusiAste} on jo olemassa.`;
+			muokkausVirhe.classList.remove('piilotettu');
 		}
-		vastaus = parseInt(vastaus, 10);
-		if (Number.isNaN(vastaus)) {
-			// Ei numero
-			alert('Luokka-asteen pitää olla numero');
-			return;
-		} else if (vastaus < 1) {
-			// Luokka-aste alkaa 1:stä
-			alert('Luokka-asteeen pitää olla vähintään 1');
-			return;
-		}
-		suorita(tapahtumaTyypit.muutaAste, aste, vastaus);
-		piirräLuokat();
-	}));
+	});
+	luokkaAsteListassa.appendChild(muokkausLomake);
+
+	let muokkausPainike = luoPainike('✎', () => {
+		muokkausLomake.classList.remove('piilotettu');
+		muokkausPainike.classList.add('piilotettu');
+	});
+	luokkaAsteListassa.appendChild(muokkausPainike);
 
 	return luokkaAsteListassa;
 }