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;
}