Siirrä Ohjeet, Laitetilat ja Arkisto alinaveihin

- Ohjeet → Asiakaspalvelu-tabin alle sub-tabiksi
- Laitetilat → Tekniikka-tabin alle sub-tabiksi
- Arkisto → Asiakkaat-tabin alle sub-tabiksi
- Päivitä hash-reititys ja vanhojen linkkien yhteensopivuus
- Lisää switchSupportSubTab() ja switchCustomerSubTab()
- Siivoa debug-logitukset laitetila-poistosta

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-12 09:24:16 +02:00
parent 5a796d8b13
commit de384b5cb9
2 changed files with 286 additions and 234 deletions

View File

@@ -83,16 +83,18 @@
<button class="tab" data-tab="leads">Liidit</button> <button class="tab" data-tab="leads">Liidit</button>
<button class="tab" data-tab="tekniikka">Tekniikka</button> <button class="tab" data-tab="tekniikka">Tekniikka</button>
<button class="tab" data-tab="documents">Dokumentit</button> <button class="tab" data-tab="documents">Dokumentit</button>
<button class="tab" data-tab="laitetilat">Laitetilat</button>
<button class="tab" data-tab="netadmin">NetAdmin</button> <button class="tab" data-tab="netadmin">NetAdmin</button>
<button class="tab" data-tab="ohjeet">Ohjeet</button>
<button class="tab" data-tab="archive">Arkisto</button>
<button class="tab" data-tab="changelog">Muutosloki</button> <button class="tab" data-tab="changelog">Muutosloki</button>
<button class="tab" data-tab="settings" id="tab-settings" style="display:none">API</button> <button class="tab" data-tab="settings" id="tab-settings" style="display:none">API</button>
</div> </div>
<!-- Tab: Asiakkaat --> <!-- Tab: Asiakkaat -->
<div class="tab-content active" id="tab-content-customers"> <div class="tab-content active" id="tab-content-customers">
<div class="sub-tab-bar" id="customers-sub-tab-bar">
<button class="sub-tab active" data-cust-subtab="customers-list">Asiakkaat</button>
<button class="sub-tab" data-cust-subtab="customers-archive">Arkisto</button>
</div>
<div id="subtab-customers-list" class="sub-tab-content active">
<div class="main-container"> <div class="main-container">
<div class="content-layout"> <div class="content-layout">
<div class="content-main"> <div class="content-main">
@@ -161,6 +163,31 @@
</aside> </aside>
</div> </div>
</div> </div>
</div><!-- /subtab-customers-list -->
<!-- Sub-tab: Arkisto -->
<div id="subtab-customers-archive" class="sub-tab-content">
<div class="main-container">
<div class="table-card">
<table id="archive-table">
<thead>
<tr>
<th>Yritys</th>
<th>Liittymiä</th>
<th>Arkistoitu</th>
<th>Arkistoija</th>
<th>Toiminnot</th>
</tr>
</thead>
<tbody id="archive-tbody"></tbody>
</table>
<div id="no-archive" class="empty-state" style="display:none">
<div class="empty-icon">&#128451;</div>
<p>Arkisto on tyhjä.</p>
</div>
</div>
</div>
</div><!-- /subtab-customers-archive -->
</div> </div>
<!-- Tab: Liidit --> <!-- Tab: Liidit -->
@@ -204,6 +231,7 @@
<div class="sub-tab-bar"> <div class="sub-tab-bar">
<button class="sub-tab active" data-subtab="devices">Laitteet</button> <button class="sub-tab active" data-subtab="devices">Laitteet</button>
<button class="sub-tab" data-subtab="ipam">IPAM</button> <button class="sub-tab" data-subtab="ipam">IPAM</button>
<button class="sub-tab" data-subtab="laitetilat">Laitetilat</button>
</div> </div>
<!-- Sub-tab: Laitteet --> <!-- Sub-tab: Laitteet -->
@@ -298,109 +326,91 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Tab: Ohjeet --> <!-- Sub-tab: Laitetilat -->
<div class="tab-content" id="tab-content-ohjeet"> <div class="sub-tab-content" id="subtab-laitetilat">
<div class="main-container"> <div class="main-container">
<!-- Listanäkymä -->
<!-- Listanäkymä --> <div id="laitetilat-list-view">
<div id="guides-list-view"> <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;gap:0.75rem;flex-wrap:wrap;"> <h3 style="color:var(--primary-dark);margin:0;">🏢 Laitetilat</h3>
<div class="search-bar" style="flex:1;max-width:400px;"> <button class="btn-primary" id="btn-new-laitetila">+ Uusi laitetila</button>
<input type="text" id="guide-search-input" placeholder="Hae ohjeista...">
</div> </div>
<div style="display:flex;gap:0.5rem;align-items:center;"> <div id="laitetilat-grid" class="laitetilat-grid"></div>
<select id="guide-category-filter" style="padding:8px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;"> <div id="no-laitetilat" class="empty-state" style="display:none;">
<option value="">Kaikki kategoriat</option> <div class="empty-icon">🏢</div>
</select> <p>Ei laitetiloja vielä.</p>
<button class="btn-primary" id="btn-add-guide" style="display:none;">+ Uusi ohje</button> <p class="empty-hint">Klikkaa "+ Uusi laitetila" aloittaaksesi.</p>
<button class="btn-secondary" id="btn-manage-guide-cats" style="display:none;" title="Hallinnoi kategorioita">&#9881; Kategoriat</button>
</div> </div>
</div> </div>
<div id="guides-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;"></div>
<div id="no-guides" class="empty-state" style="display:none;">
<p>Ei ohjeita vielä.</p>
<p class="empty-hint">Ylläpitäjä voi lisätä ohjeita "+ Uusi ohje" -napista.</p>
</div>
</div>
<!-- Lukunäkymä --> <!-- Lukunäkymä -->
<div id="guide-read-view" style="display:none;"> <div id="laitetila-read-view" style="display:none;">
<div style="margin-bottom:1rem;"> <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem;">
<button class="btn-secondary" id="btn-guide-back">&larr; Takaisin</button> <button class="btn-secondary" id="btn-laitetila-back"> Takaisin</button>
</div> <div style="display:flex;gap:0.5rem;">
<div class="table-card" style="padding:2rem 2.5rem;"> <button class="btn-primary" id="btn-laitetila-edit">✏️ Muokkaa</button>
<div style="margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #f0f2f5;"> <button class="btn-danger" id="btn-laitetila-delete" style="display:none;">🗑 Poista</button>
<h1 id="guide-read-title" style="font-size:1.6rem;color:var(--primary-color);margin-bottom:0.5rem;"></h1> </div>
<div id="guide-read-meta" style="font-size:0.82rem;color:#888;display:flex;gap:1rem;flex-wrap:wrap;"></div>
</div> </div>
<div id="guide-read-content" class="guide-content" style="line-height:1.7;font-size:0.95rem;"></div> <div class="table-card" style="padding:1.5rem;">
<div id="guide-read-tags" style="margin-top:1.5rem;padding-top:1rem;border-top:1px solid #f0f2f5;"></div> <h2 id="laitetila-read-nimi" style="margin:0 0 0.25rem;color:var(--primary-dark);"></h2>
<div id="guide-read-actions" style="margin-top:1rem;display:none;"> <p id="laitetila-read-osoite" style="color:#888;font-size:0.9rem;margin-bottom:1rem;"></p>
<button class="btn-secondary" id="btn-edit-guide">&#9998; Muokkaa</button> <p id="laitetila-read-kuvaus" style="color:#555;margin-bottom:1.5rem;white-space:pre-wrap;"></p>
<button class="btn-link" style="color:#dc2626;margin-left:0.5rem;" id="btn-delete-guide">&#128465; Poista</button> <div style="background:#f8f9fb;padding:1rem;border-radius:10px;margin-bottom:1.5rem;">
<h4 style="margin:0 0 0.75rem;color:var(--primary-dark);">Lisää tiedosto</h4>
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:end;">
<input type="file" id="laitetila-file-input" multiple style="flex:1;min-width:200px;">
<input type="text" id="laitetila-file-desc" placeholder="Kuvaus (valinnainen)" style="flex:1;min-width:200px;">
<button class="btn-primary" id="btn-laitetila-upload">Lataa</button>
</div>
</div>
<div id="laitetila-gallery" style="display:none;margin-bottom:1.5rem;">
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">Kuvat</h4>
<div id="laitetila-gallery-grid" class="gallery-grid"></div>
</div>
<div id="laitetila-files-section" style="display:none;">
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">Tiedostot</h4>
<div id="laitetila-files-list"></div>
</div>
<div id="laitetila-devices-section" style="margin-top:1.5rem;">
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">🖥 Laitteet</h4>
<div id="laitetila-devices-list"></div>
</div>
</div>
</div>
<!-- Muokkausnäkymä -->
<div id="laitetila-edit-view" style="display:none;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
<button class="btn-secondary" id="btn-laitetila-edit-back">← Takaisin</button>
</div>
<div class="table-card" style="padding:1.5rem;">
<h3 style="color:var(--primary-dark);margin:0 0 1rem;" id="laitetila-edit-title">Uusi laitetila</h3>
<form id="laitetila-edit-form">
<input type="hidden" id="laitetila-edit-id">
<div class="form-grid" style="grid-template-columns:1fr 1fr;">
<div class="form-group">
<label>Nimi *</label>
<input type="text" id="laitetila-edit-nimi" required placeholder="Esim. Keskuskatu 5 - Kellari">
</div>
<div class="form-group">
<label>Osoite</label>
<input type="text" id="laitetila-edit-osoite" placeholder="Katuosoite">
</div>
<div class="form-group full-width">
<label>Kuvaus</label>
<textarea id="laitetila-edit-kuvaus" rows="4" placeholder="Laitetilan kuvaus..."></textarea>
</div>
</div>
<div style="margin-top:1rem;display:flex;gap:0.5rem;">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="btn-laitetila-edit-cancel">Peruuta</button>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
<!-- Muokkausnäkymä -->
<div id="guide-edit-view" style="display:none;">
<div style="margin-bottom:1rem;">
<button class="btn-secondary" id="btn-guide-edit-cancel">&larr; Peruuta</button>
</div>
<div class="table-card" style="padding:1.5rem 2rem;">
<h2 id="guide-edit-title" style="color:var(--primary-color);margin-bottom:1rem;">Uusi ohje</h2>
<form id="guide-form">
<input type="hidden" id="guide-form-id">
<div class="form-group" style="margin-bottom:1rem;">
<label for="guide-form-title">Otsikko *</label>
<input type="text" id="guide-form-title" required placeholder="Ohjeen otsikko">
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;">
<div class="form-group">
<label for="guide-form-category">Kategoria</label>
<select id="guide-form-category">
<option value="">Ei kategoriaa</option>
</select>
</div>
<div class="form-group">
<label for="guide-form-tags">Tagit (pilkulla erotettuna)</label>
<input type="text" id="guide-form-tags" placeholder="vpn, asennus, ohje">
</div>
</div>
<div class="form-group" style="margin-bottom:0.5rem;">
<label>Sisältö (Markdown)</label>
<div id="guide-editor-toolbar" style="display:flex;gap:0.25rem;margin-bottom:0.5rem;flex-wrap:wrap;">
<button type="button" class="guide-tb-btn" data-md="bold" title="Lihavointi"><strong>B</strong></button>
<button type="button" class="guide-tb-btn" data-md="italic" title="Kursiivi"><em>I</em></button>
<button type="button" class="guide-tb-btn" data-md="h2" title="Otsikko">H2</button>
<button type="button" class="guide-tb-btn" data-md="h3" title="Alaotsikko">H3</button>
<button type="button" class="guide-tb-btn" data-md="ul" title="Lista">&#8226; Lista</button>
<button type="button" class="guide-tb-btn" data-md="ol" title="Numeroitu lista">1. Lista</button>
<button type="button" class="guide-tb-btn" data-md="link" title="Linkki">&#128279;</button>
<button type="button" class="guide-tb-btn" data-md="code" title="Koodi">&lt;/&gt;</button>
<button type="button" class="guide-tb-btn" data-md="quote" title="Lainaus">&#10077;</button>
<button type="button" class="guide-tb-btn" id="btn-guide-image" title="Lisää kuva">&#128247; Kuva</button>
<input type="file" id="guide-image-input" accept="image/*" style="display:none;">
<span style="flex:1;"></span>
<button type="button" class="guide-tb-btn" id="btn-guide-preview-toggle">Esikatselu</button>
</div>
<textarea id="guide-form-content" rows="20" style="font-family:'SF Mono',Monaco,Consolas,monospace;font-size:0.88rem;line-height:1.6;resize:vertical;min-height:300px;" placeholder="Kirjoita Markdown-muodossa...&#10;&#10;Vinkki: Liitä kuvakaappaus suoraan Ctrl+V / ⌘V tai raahaa kuvatiedosto tähän"></textarea>
<div id="guide-preview-pane" class="guide-content" style="display:none;padding:1rem;border:2px solid #e0e0e0;border-radius:8px;min-height:300px;background:#fafbfc;"></div>
<div style="font-size:0.78rem;color:#999;margin-top:4px;">📋 Liitä screenshot: Ctrl+V &nbsp;|&nbsp; 📁 Raahaa kuva editoriin &nbsp;|&nbsp; 📷 Tai käytä Kuva-nappia</div>
</div>
<label style="display:flex;align-items:center;gap:0.5rem;margin:0.75rem 0;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" id="guide-form-pinned"> Kiinnitetty (näkyy aina listauksen alussa)
</label>
<div style="padding:1rem 0 0 0;border-top:1px solid #eee;display:flex;gap:0.5rem;">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="guide-form-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
</div> </div>
</div> </div>
@@ -674,30 +684,6 @@
</div> </div>
</div> </div>
<!-- Tab: Arkisto -->
<div class="tab-content" id="tab-content-archive">
<div class="main-container">
<div class="table-card">
<table id="archive-table">
<thead>
<tr>
<th>Yritys</th>
<th>Liittymiä</th>
<th>Arkistoitu</th>
<th>Arkistoija</th>
<th>Toiminnot</th>
</tr>
</thead>
<tbody id="archive-tbody"></tbody>
</table>
<div id="no-archive" class="empty-state" style="display:none">
<div class="empty-icon">&#128451;</div>
<p>Arkisto on tyhjä.</p>
</div>
</div>
</div>
</div>
<!-- Tab: Dokumentit --> <!-- Tab: Dokumentit -->
<div class="tab-content" id="tab-content-documents"> <div class="tab-content" id="tab-content-documents">
<div class="sub-tab-bar" id="doc-sub-tab-bar"> <div class="sub-tab-bar" id="doc-sub-tab-bar">
@@ -901,100 +887,6 @@
</div> </div>
</div> </div>
<!-- Tab: Laitetilat -->
<div class="tab-content" id="tab-content-laitetilat">
<div class="main-container">
<!-- Listanäkymä -->
<div id="laitetilat-list-view">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem;">
<h3 style="color:var(--primary-dark);margin:0;">🏢 Laitetilat</h3>
<button class="btn-primary" id="btn-new-laitetila">+ Uusi laitetila</button>
</div>
<div id="laitetilat-grid" class="laitetilat-grid"></div>
<div id="no-laitetilat" class="empty-state" style="display:none;">
<div class="empty-icon">🏢</div>
<p>Ei laitetiloja vielä.</p>
<p class="empty-hint">Klikkaa "+ Uusi laitetila" aloittaaksesi.</p>
</div>
</div>
<!-- Lukunäkymä -->
<div id="laitetila-read-view" style="display:none;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem;">
<button class="btn-secondary" id="btn-laitetila-back">← Takaisin</button>
<div style="display:flex;gap:0.5rem;">
<button class="btn-primary" id="btn-laitetila-edit">✏️ Muokkaa</button>
<button class="btn-danger" id="btn-laitetila-delete" style="display:none;">🗑 Poista</button>
</div>
</div>
<div class="table-card" style="padding:1.5rem;">
<h2 id="laitetila-read-nimi" style="margin:0 0 0.25rem;color:var(--primary-dark);"></h2>
<p id="laitetila-read-osoite" style="color:#888;font-size:0.9rem;margin-bottom:1rem;"></p>
<p id="laitetila-read-kuvaus" style="color:#555;margin-bottom:1.5rem;white-space:pre-wrap;"></p>
<!-- Tiedostojen lataus -->
<div style="background:#f8f9fb;padding:1rem;border-radius:10px;margin-bottom:1.5rem;">
<h4 style="margin:0 0 0.75rem;color:var(--primary-dark);">Lisää tiedosto</h4>
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:end;">
<input type="file" id="laitetila-file-input" multiple style="flex:1;min-width:200px;">
<input type="text" id="laitetila-file-desc" placeholder="Kuvaus (valinnainen)" style="flex:1;min-width:200px;">
<button class="btn-primary" id="btn-laitetila-upload">Lataa</button>
</div>
</div>
<!-- Kuvagalleria -->
<div id="laitetila-gallery" style="display:none;margin-bottom:1.5rem;">
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">Kuvat</h4>
<div id="laitetila-gallery-grid" class="gallery-grid"></div>
</div>
<!-- Muut tiedostot -->
<div id="laitetila-files-section" style="display:none;">
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">Tiedostot</h4>
<div id="laitetila-files-list"></div>
</div>
<!-- Laitteet tässä tilassa -->
<div id="laitetila-devices-section" style="margin-top:1.5rem;">
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">🖥 Laitteet</h4>
<div id="laitetila-devices-list"></div>
</div>
</div>
</div>
<!-- Muokkausnäkymä -->
<div id="laitetila-edit-view" style="display:none;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
<button class="btn-secondary" id="btn-laitetila-edit-back">← Takaisin</button>
</div>
<div class="table-card" style="padding:1.5rem;">
<h3 style="color:var(--primary-dark);margin:0 0 1rem;" id="laitetila-edit-title">Uusi laitetila</h3>
<form id="laitetila-edit-form">
<input type="hidden" id="laitetila-edit-id">
<div class="form-grid" style="grid-template-columns:1fr 1fr;">
<div class="form-group">
<label>Nimi *</label>
<input type="text" id="laitetila-edit-nimi" required placeholder="Esim. Keskuskatu 5 - Kellari">
</div>
<div class="form-group">
<label>Osoite</label>
<input type="text" id="laitetila-edit-osoite" placeholder="Katuosoite">
</div>
<div class="form-group full-width">
<label>Kuvaus</label>
<textarea id="laitetila-edit-kuvaus" rows="4" placeholder="Laitetilan kuvaus..."></textarea>
</div>
</div>
<div style="margin-top:1rem;display:flex;gap:0.5rem;">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="btn-laitetila-edit-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Tab: NetAdmin --> <!-- Tab: NetAdmin -->
<div class="tab-content" id="tab-content-netadmin"> <div class="tab-content" id="tab-content-netadmin">
<div class="main-container"> <div class="main-container">
@@ -1145,6 +1037,11 @@
<!-- Tab: Asiakaspalvelu --> <!-- Tab: Asiakaspalvelu -->
<div class="tab-content" id="tab-content-support"> <div class="tab-content" id="tab-content-support">
<div class="sub-tab-bar" id="support-sub-tab-bar">
<button class="sub-tab active" data-support-subtab="support-tickets">Tiketit</button>
<button class="sub-tab" data-support-subtab="support-ohjeet">Ohjeet</button>
</div>
<div id="subtab-support-tickets" class="sub-tab-content active">
<div class="main-container"> <div class="main-container">
<!-- Listanäkymä --> <!-- Listanäkymä -->
<div id="ticket-list-view"> <div id="ticket-list-view">
@@ -1397,6 +1294,111 @@
</div> </div>
</div> </div>
</div><!-- /subtab-support-tickets -->
<!-- Sub-tab: Ohjeet -->
<div id="subtab-support-ohjeet" class="sub-tab-content">
<div class="main-container">
<!-- Listanäkymä -->
<div id="guides-list-view">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;gap:0.75rem;flex-wrap:wrap;">
<div class="search-bar" style="flex:1;max-width:400px;">
<input type="text" id="guide-search-input" placeholder="Hae ohjeista...">
</div>
<div style="display:flex;gap:0.5rem;align-items:center;">
<select id="guide-category-filter" style="padding:8px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;">
<option value="">Kaikki kategoriat</option>
</select>
<button class="btn-primary" id="btn-add-guide" style="display:none;">+ Uusi ohje</button>
<button class="btn-secondary" id="btn-manage-guide-cats" style="display:none;" title="Hallinnoi kategorioita">&#9881; Kategoriat</button>
</div>
</div>
<div id="guides-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;"></div>
<div id="no-guides" class="empty-state" style="display:none;">
<p>Ei ohjeita vielä.</p>
<p class="empty-hint">Ylläpitäjä voi lisätä ohjeita "+ Uusi ohje" -napista.</p>
</div>
</div>
<!-- Lukunäkymä -->
<div id="guide-read-view" style="display:none;">
<div style="margin-bottom:1rem;">
<button class="btn-secondary" id="btn-guide-back">&larr; Takaisin</button>
</div>
<div class="table-card" style="padding:2rem 2.5rem;">
<div style="margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #f0f2f5;">
<h1 id="guide-read-title" style="font-size:1.6rem;color:var(--primary-color);margin-bottom:0.5rem;"></h1>
<div id="guide-read-meta" style="font-size:0.82rem;color:#888;display:flex;gap:1rem;flex-wrap:wrap;"></div>
</div>
<div id="guide-read-content" class="guide-content" style="line-height:1.7;font-size:0.95rem;"></div>
<div id="guide-read-tags" style="margin-top:1.5rem;padding-top:1rem;border-top:1px solid #f0f2f5;"></div>
<div id="guide-read-actions" style="margin-top:1rem;display:none;">
<button class="btn-secondary" id="btn-edit-guide">&#9998; Muokkaa</button>
<button class="btn-link" style="color:#dc2626;margin-left:0.5rem;" id="btn-delete-guide">&#128465; Poista</button>
</div>
</div>
</div>
<!-- Muokkausnäkymä -->
<div id="guide-edit-view" style="display:none;">
<div style="margin-bottom:1rem;">
<button class="btn-secondary" id="btn-guide-edit-cancel">&larr; Peruuta</button>
</div>
<div class="table-card" style="padding:1.5rem 2rem;">
<h2 id="guide-edit-title" style="color:var(--primary-color);margin-bottom:1rem;">Uusi ohje</h2>
<form id="guide-form">
<input type="hidden" id="guide-form-id">
<div class="form-group" style="margin-bottom:1rem;">
<label for="guide-form-title">Otsikko *</label>
<input type="text" id="guide-form-title" required placeholder="Ohjeen otsikko">
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;">
<div class="form-group">
<label for="guide-form-category">Kategoria</label>
<select id="guide-form-category">
<option value="">Ei kategoriaa</option>
</select>
</div>
<div class="form-group">
<label for="guide-form-tags">Tagit (pilkulla erotettuna)</label>
<input type="text" id="guide-form-tags" placeholder="vpn, asennus, ohje">
</div>
</div>
<div class="form-group" style="margin-bottom:0.5rem;">
<label>Sisältö (Markdown)</label>
<div id="guide-editor-toolbar" style="display:flex;gap:0.25rem;margin-bottom:0.5rem;flex-wrap:wrap;">
<button type="button" class="guide-tb-btn" data-md="bold" title="Lihavointi"><strong>B</strong></button>
<button type="button" class="guide-tb-btn" data-md="italic" title="Kursiivi"><em>I</em></button>
<button type="button" class="guide-tb-btn" data-md="h2" title="Otsikko">H2</button>
<button type="button" class="guide-tb-btn" data-md="h3" title="Alaotsikko">H3</button>
<button type="button" class="guide-tb-btn" data-md="ul" title="Lista">&#8226; Lista</button>
<button type="button" class="guide-tb-btn" data-md="ol" title="Numeroitu lista">1. Lista</button>
<button type="button" class="guide-tb-btn" data-md="link" title="Linkki">&#128279;</button>
<button type="button" class="guide-tb-btn" data-md="code" title="Koodi">&lt;/&gt;</button>
<button type="button" class="guide-tb-btn" data-md="quote" title="Lainaus">&#10077;</button>
<button type="button" class="guide-tb-btn" id="btn-guide-image" title="Lisää kuva">&#128247; Kuva</button>
<input type="file" id="guide-image-input" accept="image/*" style="display:none;">
<span style="flex:1;"></span>
<button type="button" class="guide-tb-btn" id="btn-guide-preview-toggle">Esikatselu</button>
</div>
<textarea id="guide-form-content" rows="20" style="font-family:'SF Mono',Monaco,Consolas,monospace;font-size:0.88rem;line-height:1.6;resize:vertical;min-height:300px;" placeholder="Kirjoita Markdown-muodossa...&#10;&#10;Vinkki: Liitä kuvakaappaus suoraan Ctrl+V / ⌘V tai raahaa kuvatiedosto tähän"></textarea>
<div id="guide-preview-pane" class="guide-content" style="display:none;padding:1rem;border:2px solid #e0e0e0;border-radius:8px;min-height:300px;background:#fafbfc;"></div>
<div style="font-size:0.78rem;color:#999;margin-top:4px;">📋 Liitä screenshot: Ctrl+V &nbsp;|&nbsp; 📁 Raahaa kuva editoriin &nbsp;|&nbsp; 📷 Tai käytä Kuva-nappia</div>
</div>
<label style="display:flex;align-items:center;gap:0.5rem;margin:0.75rem 0;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" id="guide-form-pinned"> Kiinnitetty (näkyy aina listauksen alussa)
</label>
<div style="padding:1rem 0 0 0;border-top:1px solid #eee;display:flex;gap:0.5rem;">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="guide-form-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
</div>
</div><!-- /subtab-support-ohjeet -->
</div> </div>
<!-- Tab: Käyttäjät (vain admin) --> <!-- Tab: Käyttäjät (vain admin) -->

View File

@@ -211,6 +211,7 @@ async function showDashboard() {
const hash = window.location.hash.replace('#', ''); const hash = window.location.hash.replace('#', '');
const [mainHash, subHash] = hash.split('/'); const [mainHash, subHash] = hash.split('/');
const validTabs = ['customers', 'leads', 'tekniikka', 'ohjeet', 'todo', 'documents', 'laitetilat', 'netadmin', 'archive', 'changelog', 'support', 'users', 'settings', 'companies']; const validTabs = ['customers', 'leads', 'tekniikka', 'ohjeet', 'todo', 'documents', 'laitetilat', 'netadmin', 'archive', 'changelog', 'support', 'users', 'settings', 'companies'];
// ohjeet, laitetilat, archive ovat nyt sub-tabeja — switchToTab hoitaa uudelleenohjauksen
const startTab = validTabs.includes(mainHash) ? mainHash : 'customers'; const startTab = validTabs.includes(mainHash) ? mainHash : 'customers';
switchToTab(startTab, subHash); switchToTab(startTab, subHash);
} }
@@ -258,6 +259,11 @@ async function switchCompany(companyId) {
// ==================== TABS ==================== // ==================== TABS ====================
function switchToTab(target, subTab) { function switchToTab(target, subTab) {
// Yhteensopivuus: vanhat hash-linkit → uusi rakenne
if (target === 'ohjeet') { target = 'support'; subTab = 'ohjeet'; }
if (target === 'archive') { target = 'customers'; subTab = 'archive'; }
if (target === 'laitetilat') { target = 'tekniikka'; subTab = 'laitetilat'; }
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
const tabBtn = document.querySelector(`.tab[data-tab="${target}"]`); const tabBtn = document.querySelector(`.tab[data-tab="${target}"]`);
@@ -265,27 +271,43 @@ function switchToTab(target, subTab) {
const content = document.getElementById('tab-content-' + target); const content = document.getElementById('tab-content-' + target);
if (content) content.classList.add('active'); if (content) content.classList.add('active');
// Tallenna aktiivinen tabi URL-hashiin // Tallenna aktiivinen tabi URL-hashiin
if (target === 'tekniikka' && subTab) { if (subTab) {
window.location.hash = target + '/' + subTab; window.location.hash = target + '/' + subTab;
} else { } else {
window.location.hash = target; window.location.hash = target;
} }
// Lataa sisältö tarvittaessa // Lataa sisältö tarvittaessa
if (target === 'customers') loadCustomers(); if (target === 'customers') {
loadCustomers();
if (subTab === 'archive') {
switchCustomerSubTab('customers-archive');
} else {
switchCustomerSubTab('customers-list');
}
}
if (target === 'leads') loadLeads(); if (target === 'leads') loadLeads();
if (target === 'tekniikka') { if (target === 'tekniikka') {
loadDevices(); loadIpam(); loadDevices(); loadIpam();
// Palauta sub-tab const validSubTabs = ['devices', 'ipam', 'laitetilat'];
const validSubTabs = ['devices', 'ipam']; if (subTab && validSubTabs.includes(subTab)) {
if (subTab && validSubTabs.includes(subTab)) switchSubTab(subTab); switchSubTab(subTab);
if (subTab === 'laitetilat') { loadLaitetilat(); showLaitetilatListView(); }
} else {
switchSubTab('devices');
}
} }
if (target === 'archive') loadArchive();
if (target === 'changelog') loadChangelog(); if (target === 'changelog') loadChangelog();
if (target === 'ohjeet') loadGuides();
if (target === 'todo') { loadTodos(); if (subTab) switchTodoSubTab(subTab); } if (target === 'todo') { loadTodos(); if (subTab) switchTodoSubTab(subTab); }
if (target === 'support') { loadTickets(); showTicketListView(); if (document.getElementById('ticket-auto-refresh').checked) startTicketAutoRefresh(); } if (target === 'support') {
loadTickets(); showTicketListView();
if (document.getElementById('ticket-auto-refresh').checked) startTicketAutoRefresh();
if (subTab === 'ohjeet') {
switchSupportSubTab('support-ohjeet');
} else {
switchSupportSubTab('support-tickets');
}
}
if (target === 'documents') { loadDocuments(); showDocsListView(); if (subTab === 'kokoukset') switchDocSubTab('docs-kokoukset'); else switchDocSubTab('docs-all'); } if (target === 'documents') { loadDocuments(); showDocsListView(); if (subTab === 'kokoukset') switchDocSubTab('docs-kokoukset'); else switchDocSubTab('docs-all'); }
if (target === 'laitetilat') { loadLaitetilat(); showLaitetilatListView(); }
if (target === 'netadmin') loadNetadmin(); if (target === 'netadmin') loadNetadmin();
if (target === 'users') loadUsers(); if (target === 'users') loadUsers();
if (target === 'settings') loadSettings(); if (target === 'settings') loadSettings();
@@ -2995,7 +3017,7 @@ function switchSubTab(target) {
if (btn) btn.classList.add('active'); if (btn) btn.classList.add('active');
const content = document.getElementById('subtab-' + target); const content = document.getElementById('subtab-' + target);
if (content) content.classList.add('active'); if (content) content.classList.add('active');
// Tallenna sub-tab hashiin (esim. #tekniikka/ipam) if (target === 'laitetilat') { loadLaitetilat(); showLaitetilatListView(); }
window.location.hash = 'tekniikka/' + target; window.location.hash = 'tekniikka/' + target;
} }
@@ -3003,6 +3025,40 @@ document.querySelectorAll('#tab-content-tekniikka .sub-tab').forEach(btn => {
btn.addEventListener('click', () => switchSubTab(btn.dataset.subtab)); btn.addEventListener('click', () => switchSubTab(btn.dataset.subtab));
}); });
// ==================== ASIAKASPALVELU SUB-TABS ====================
function switchSupportSubTab(target) {
document.querySelectorAll('#support-sub-tab-bar .sub-tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('#tab-content-support > .sub-tab-content').forEach(c => c.classList.remove('active'));
const btn = document.querySelector(`[data-support-subtab="${target}"]`);
if (btn) btn.classList.add('active');
const content = document.getElementById('subtab-' + target);
if (content) content.classList.add('active');
if (target === 'support-ohjeet') { loadGuides(); window.location.hash = 'support/ohjeet'; }
else { window.location.hash = 'support'; }
}
document.querySelectorAll('#support-sub-tab-bar .sub-tab').forEach(btn => {
btn.addEventListener('click', () => switchSupportSubTab(btn.dataset.supportSubtab));
});
// ==================== ASIAKKAAT SUB-TABS ====================
function switchCustomerSubTab(target) {
document.querySelectorAll('#customers-sub-tab-bar .sub-tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('#tab-content-customers > .sub-tab-content').forEach(c => c.classList.remove('active'));
const btn = document.querySelector(`[data-cust-subtab="${target}"]`);
if (btn) btn.classList.add('active');
const content = document.getElementById('subtab-' + target);
if (content) content.classList.add('active');
if (target === 'customers-archive') { loadArchive(); window.location.hash = 'customers/archive'; }
else { window.location.hash = 'customers'; }
}
document.querySelectorAll('#customers-sub-tab-bar .sub-tab').forEach(btn => {
btn.addEventListener('click', () => switchCustomerSubTab(btn.dataset.custSubtab));
});
// ==================== SIJAINNIT — YHDISTETTY LAITETILOIHIN ==================== // ==================== SIJAINNIT — YHDISTETTY LAITETILOIHIN ====================
// Sites-koodi poistettu: sijainnit hallitaan nyt Laitetilat-välilehdellä. // Sites-koodi poistettu: sijainnit hallitaan nyt Laitetilat-välilehdellä.
@@ -5518,20 +5574,14 @@ document.getElementById('btn-laitetila-edit-cancel')?.addEventListener('click',
// Poista laitetila // Poista laitetila
document.getElementById('btn-laitetila-delete')?.addEventListener('click', async () => { document.getElementById('btn-laitetila-delete')?.addEventListener('click', async () => {
console.log('Laitetila delete clicked, currentLaitetila:', currentLaitetila); if (!currentLaitetila) return;
if (!currentLaitetila) { console.log('Ei currentLaitetilaa!'); return; }
if (!confirm(`Poistetaanko laitetila "${currentLaitetila.nimi}" ja kaikki sen tiedostot?`)) return; if (!confirm(`Poistetaanko laitetila "${currentLaitetila.nimi}" ja kaikki sen tiedostot?`)) return;
try { try {
console.log('Lähetetään laitetila_delete, id:', currentLaitetila.id); await apiCall('laitetila_delete', 'POST', { id: currentLaitetila.id });
const result = await apiCall('laitetila_delete', 'POST', { id: currentLaitetila.id });
console.log('Laitetila delete vastaus:', result);
currentLaitetila = null; currentLaitetila = null;
showLaitetilatListView(); showLaitetilatListView();
loadLaitetilat(); loadLaitetilat();
} catch (e) { } catch (e) { alert('Poisto epäonnistui: ' + e.message); }
console.error('Laitetila delete virhe:', e);
alert('Poisto epäonnistui: ' + e.message);
}
}); });
// Uusi laitetila // Uusi laitetila