diff --git a/index.html b/index.html index fbfa1cb..6ab866d 100644 --- a/index.html +++ b/index.html @@ -231,9 +231,13 @@

Pikasaatavuustarkistus

-
- - +
+ +
+ + +
+
@@ -313,22 +317,30 @@ document.querySelector('.nav-toggle')?.addEventListener('click', function() { (function() { const API_URL = 'https://intra.cuitunet.fi/api.php'; const API_KEY = '560160bf6558260e1734e6ad5933cabe'; - const checkInput = document.getElementById('check-address'); + const checkAddress = document.getElementById('check-address'); + const checkZip = document.getElementById('check-zip'); + const checkCity = document.getElementById('check-city'); const checkBtn = document.getElementById('check-btn'); const checkResult = document.getElementById('check-result'); async function checkAvailability() { - const q = checkInput.value.trim(); - if (!q) return; + const osoite = checkAddress.value.trim(); + const postinumero = checkZip.value.trim(); + const kaupunki = checkCity.value.trim(); + if (!osoite || !postinumero || !kaupunki) { + checkResult.className = 'check-result nok'; + checkResult.style.display = 'block'; + checkResult.innerHTML = '

Täytä kaikki kentät: osoite, postinumero ja kaupunki.

'; + return; + } checkResult.className = 'check-result loading'; checkResult.style.display = 'block'; checkResult.innerHTML = '

Tarkistetaan saatavuutta...

'; try { - const isZip = /^\d{5}$/.test(q); - const param = isZip ? 'postinumero=' + encodeURIComponent(q) : 'osoite=' + encodeURIComponent(q); - const res = await fetch(API_URL + '?action=saatavuus&key=' + encodeURIComponent(API_KEY) + '&' + param); + const params = 'osoite=' + encodeURIComponent(osoite) + '&postinumero=' + encodeURIComponent(postinumero) + '&kaupunki=' + encodeURIComponent(kaupunki); + const res = await fetch(API_URL + '?action=saatavuus&key=' + encodeURIComponent(API_KEY) + '&' + params); const data = await res.json(); if (data.error) { @@ -338,18 +350,8 @@ document.querySelector('.nav-toggle')?.addEventListener('click', function() { } if (data.saatavilla) { - let html = '

Kuituliittymä on saatavilla!

'; - html += '

Löysimme ' + data.maara + ' kohde' + (data.maara > 1 ? 'tta' : 'n') + ':

'; - data.kohteet.forEach(function(k) { - html += '
'; - html += '' + k.osoite + ''; - if (k.postinumero) html += ', ' + k.postinumero; - if (k.kaupunki) html += ' ' + k.kaupunki; - if (k.nopeus) html += ' — ' + k.nopeus; - html += '
'; - }); checkResult.className = 'check-result ok'; - checkResult.innerHTML = html; + checkResult.innerHTML = '

Kuituliittymä on saatavilla osoitteessasi!

Täytä vieressä oleva lomake niin otamme yhteyttä ja kerromme lisää.

'; } else { checkResult.className = 'check-result nok'; checkResult.innerHTML = '

Ei saatavuutta vielä

Kuituliittymää ei löytynyt osoitteellasi, mutta verkkomme laajenee jatkuvasti. Täytä lomake niin kerromme kun kuitu tulee saataville!

'; @@ -361,7 +363,9 @@ document.querySelector('.nav-toggle')?.addEventListener('click', function() { } checkBtn?.addEventListener('click', checkAvailability); - checkInput?.addEventListener('keydown', function(e) { if (e.key === 'Enter') checkAvailability(); }); + [checkAddress, checkZip, checkCity].forEach(function(el) { + el?.addEventListener('keydown', function(e) { if (e.key === 'Enter') checkAvailability(); }); + }); })(); // Saatavuuskysely-lomake diff --git a/style.css b/style.css index e1b7ba3..d0d5c99 100644 --- a/style.css +++ b/style.css @@ -572,13 +572,19 @@ img { margin-bottom: 12px; } -.availability-check-form { +.availability-check-fields { display: flex; + flex-direction: column; gap: 8px; } -.availability-check-form input { - flex: 1; +.availability-check-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; +} + +.availability-check-fields input { padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 8px; @@ -587,7 +593,7 @@ img { transition: border-color 0.2s, box-shadow 0.2s; } -.availability-check-form input:focus { +.availability-check-fields input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232, 137, 29, 0.1);