jukka/cuitunet.fi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add instant fiber availability check to website

Browse Source 
Adds a quick address/postal code lookup that queries
intra.cuitunet.fi API to show if fiber is available,
directly in the contact section.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-10 02:00:25 +02:00
parent a29399979a
commit d286ce2eb3
2 changed files with 141 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
index.html
View File

@@ -227,7 +227,16 @@
<div class="availability-text">
<span class="overline">Saatavuuskysely & yhteydenotto</span>
<h2>Ota yhteyttä tai tarkista saatavuus</h2>
<p>Kerro osoitteesi niin selvitämme valokuidun saatavuuden, tai kysy mitä tahansa palveluistamme. Vastaamme 1–2 arkipäivässä. Yhteydenotto ei velvoita mihinkään.</p>
<p>Tarkista heti onko kuituliittymä saatavilla osoitteessasi, tai täytä lomake niin otamme yhteyttä 1–2 arkipäivässä.</p>
<div class="availability-check">
<h3>Pikasaatavuustarkistus</h3>
<div class="availability-check-form">
<input type="text" id="check-address" placeholder="Osoite tai postinumero">
<button type="button" class="btn btn-sm" id="check-btn">Tarkista</button>
</div>
<div id="check-result" class="check-result" style="display:none;"></div>
</div>
</div>
<form class="form" id="availability-form">
<div style="position:absolute;left:-9999px;top:-9999px;">
@@ -300,6 +309,61 @@ document.querySelector('.nav-toggle')?.addEventListener('click', function() {
document.querySelector('.nav')?.classList.toggle('open');
});
// Pikasaatavuustarkistus
(function() {
const API_URL = 'https://intra.cuitunet.fi/api.php';
const API_KEY = '3de64ed2a3ece1c0f497345e41e8e76d';
const checkInput = document.getElementById('check-address');
const checkBtn = document.getElementById('check-btn');
const checkResult = document.getElementById('check-result');
async function checkAvailability() {
const q = checkInput.value.trim();
if (!q) return;
checkResult.className = 'check-result loading';
checkResult.style.display = 'block';
checkResult.innerHTML = '<p>Tarkistetaan saatavuutta...</p>';
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 data = await res.json();
if (data.error) {
checkResult.className = 'check-result nok';
checkResult.innerHTML = '<h4>Virhe</h4><p>' + data.error + '</p>';
return;
}
if (data.saatavilla) {
let html = '<h4>Kuituliittymä on saatavilla!</h4>';
html += '<p>Löysimme ' + data.maara + ' kohde' + (data.maara > 1 ? 'tta' : 'n') + ':</p>';
data.kohteet.forEach(function(k) {
html += '<div class="check-result-address">';
html += '<strong>' + k.osoite + '</strong>';
if (k.postinumero) html += ', ' + k.postinumero;
if (k.kaupunki) html += ' ' + k.kaupunki;
if (k.nopeus) html += ' — ' + k.nopeus;
html += '</div>';
});
checkResult.className = 'check-result ok';
checkResult.innerHTML = html;
} else {
checkResult.className = 'check-result nok';
checkResult.innerHTML = '<h4>Ei saatavuutta vielä</h4><p>Kuituliittymää ei löytynyt osoitteellasi, mutta verkkomme laajenee jatkuvasti. Täytä lomake niin kerromme kun kuitu tulee saataville!</p>';
}
} catch (e) {
checkResult.className = 'check-result nok';
checkResult.innerHTML = '<h4>Yhteysvirhe</h4><p>Tarkistusta ei voitu suorittaa. Yritä hetken kuluttua uudelleen.</p>';
}
}
checkBtn?.addEventListener('click', checkAvailability);
checkInput?.addEventListener('keydown', function(e) { if (e.key === 'Enter') checkAvailability(); });
})();
// Saatavuuskysely-lomake
document.getElementById('availability-form')?.addEventListener('submit', async function(e) {
e.preventDefault();