Add public availability API and settings panel

Public saatavuus endpoint with API key + CORS protection for
cuitunet.fi website integration. Admin settings tab for API key
management and testing. Includes standalone widget page.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-10 01:50:52 +02:00
parent 8ba925d3dc
commit 14707b9616
5 changed files with 341 additions and 0 deletions

View File

@@ -76,6 +76,7 @@
<button class="tab" data-tab="archive">Arkisto</button>
<button class="tab" data-tab="changelog">Muutosloki</button>
<button class="tab" data-tab="users" id="tab-users" style="display:none">Käyttäjät</button>
<button class="tab" data-tab="settings" id="tab-settings" style="display:none">Asetukset</button>
</div>
<!-- Tab: Asiakkaat -->
@@ -258,6 +259,51 @@
</div>
</div>
<!-- Tab: Asetukset (vain admin) -->
<div class="tab-content" id="tab-content-settings">
<div class="main-container">
<div class="table-card" style="padding:1.5rem;">
<h3 style="color:#0f3460;margin-bottom:1rem;border-bottom:2px solid #f0f2f5;padding-bottom:0.5rem;">Saatavuus-API</h3>
<p style="color:#666;font-size:0.85rem;margin-bottom:1rem;">Julkinen API jolla cuitunet.fi voi tarkistaa kuituverkon saatavuuden osoitteessa. Palauttaa vain osoite + nopeus - ei asiakastietoja.</p>
<div class="form-grid" style="max-width:600px;">
<div class="form-group full-width">
<label>API-avain</label>
<div style="display:flex;gap:0.5rem;">
<input type="text" id="settings-api-key" readonly style="flex:1;font-family:monospace;background:#f8f9fb;">
<button class="btn-primary" id="btn-generate-key" style="white-space:nowrap;">Generoi uusi</button>
</div>
</div>
<div class="form-group full-width">
<label>Sallitut originit (CORS) - yksi per rivi</label>
<textarea id="settings-cors" rows="3" style="font-family:monospace;font-size:0.85rem;" placeholder="https://cuitunet.fi&#10;https://www.cuitunet.fi"></textarea>
</div>
<div class="form-group full-width">
<button class="btn-primary" id="btn-save-settings">Tallenna asetukset</button>
</div>
</div>
<h3 style="color:#0f3460;margin:1.5rem 0 1rem;border-bottom:2px solid #f0f2f5;padding-bottom:0.5rem;">API-ohjeet</h3>
<div style="background:#f8f9fb;padding:1rem;border-radius:8px;font-size:0.85rem;font-family:monospace;overflow-x:auto;">
<div style="margin-bottom:0.75rem;"><strong>Endpoint:</strong><br>GET https://intra.cuitunet.fi/api.php?action=saatavuus</div>
<div style="margin-bottom:0.75rem;"><strong>Parametrit:</strong><br>
&bull; <code>key</code> = API-avain (pakollinen)<br>
&bull; <code>osoite</code> = Haettava osoite (esim. "Kauppakatu 5")<br>
&bull; <code>postinumero</code> = Postinumero (esim. "20100")<br>
Anna vähintään toinen: osoite tai postinumero.</div>
<div style="margin-bottom:0.75rem;"><strong>Esimerkki:</strong><br>
<code id="api-example-url">api.php?action=saatavuus&key=AVAIN&osoite=Kauppakatu+5</code></div>
<div><strong>Vastaus:</strong><br>
<code>{"saatavilla":true,"kohteet":[{"osoite":"...","postinumero":"...","kaupunki":"...","nopeus":"..."}],"maara":1}</code></div>
</div>
<h3 style="color:#0f3460;margin:1.5rem 0 1rem;border-bottom:2px solid #f0f2f5;padding-bottom:0.5rem;">Testaa API</h3>
<div style="display:flex;gap:0.5rem;max-width:500px;">
<input type="text" id="test-api-address" placeholder="Osoite tai postinumero" style="flex:1;">
<button class="btn-primary" id="btn-test-api">Testaa</button>
</div>
<pre id="test-api-result" style="margin-top:0.75rem;background:#f8f9fb;padding:1rem;border-radius:8px;font-size:0.85rem;display:none;overflow-x:auto;"></pre>
</div>
</div>
</div>
<footer>
<p>CuituNet Intra &mdash; Asiakashallintajärjestelmä</p>
</footer>