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:
432
index.html
432
index.html
@@ -83,16 +83,18 @@
|
||||
<button class="tab" data-tab="leads">Liidit</button>
|
||||
<button class="tab" data-tab="tekniikka">Tekniikka</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="ohjeet">Ohjeet</button>
|
||||
<button class="tab" data-tab="archive">Arkisto</button>
|
||||
<button class="tab" data-tab="changelog">Muutosloki</button>
|
||||
<button class="tab" data-tab="settings" id="tab-settings" style="display:none">API</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Asiakkaat -->
|
||||
<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="content-layout">
|
||||
<div class="content-main">
|
||||
@@ -161,6 +163,31 @@
|
||||
</aside>
|
||||
</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">🗃</div>
|
||||
<p>Arkisto on tyhjä.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /subtab-customers-archive -->
|
||||
</div>
|
||||
|
||||
<!-- Tab: Liidit -->
|
||||
@@ -204,6 +231,7 @@
|
||||
<div class="sub-tab-bar">
|
||||
<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="laitetilat">Laitetilat</button>
|
||||
</div>
|
||||
|
||||
<!-- Sub-tab: Laitteet -->
|
||||
@@ -298,109 +326,91 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Ohjeet -->
|
||||
<div class="tab-content" id="tab-content-ohjeet">
|
||||
<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...">
|
||||
<!-- Sub-tab: Laitetilat -->
|
||||
<div class="sub-tab-content" id="subtab-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 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">⚙ Kategoriat</button>
|
||||
<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>
|
||||
<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">← 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>
|
||||
<!-- 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 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">✎ Muokkaa</button>
|
||||
<button class="btn-link" style="color:#dc2626;margin-left:0.5rem;" id="btn-delete-guide">🗑 Poista</button>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<!-- Muokkausnäkymä -->
|
||||
<div id="guide-edit-view" style="display:none;">
|
||||
<div style="margin-bottom:1rem;">
|
||||
<button class="btn-secondary" id="btn-guide-edit-cancel">← 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">• 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">🔗</button>
|
||||
<button type="button" class="guide-tb-btn" data-md="code" title="Koodi"></></button>
|
||||
<button type="button" class="guide-tb-btn" data-md="quote" title="Lainaus">❝</button>
|
||||
<button type="button" class="guide-tb-btn" id="btn-guide-image" title="Lisää kuva">📷 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... 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 | 📁 Raahaa kuva editoriin | 📷 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>
|
||||
|
||||
@@ -674,30 +684,6 @@
|
||||
</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">🗃</div>
|
||||
<p>Arkisto on tyhjä.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Dokumentit -->
|
||||
<div class="tab-content" id="tab-content-documents">
|
||||
<div class="sub-tab-bar" id="doc-sub-tab-bar">
|
||||
@@ -901,100 +887,6 @@
|
||||
</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 -->
|
||||
<div class="tab-content" id="tab-content-netadmin">
|
||||
<div class="main-container">
|
||||
@@ -1145,6 +1037,11 @@
|
||||
|
||||
<!-- Tab: Asiakaspalvelu -->
|
||||
<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">
|
||||
<!-- Listanäkymä -->
|
||||
<div id="ticket-list-view">
|
||||
@@ -1397,6 +1294,111 @@
|
||||
</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">⚙ 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">← 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">✎ Muokkaa</button>
|
||||
<button class="btn-link" style="color:#dc2626;margin-left:0.5rem;" id="btn-delete-guide">🗑 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">← 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">• 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">🔗</button>
|
||||
<button type="button" class="guide-tb-btn" data-md="code" title="Koodi"></></button>
|
||||
<button type="button" class="guide-tb-btn" data-md="quote" title="Lainaus">❝</button>
|
||||
<button type="button" class="guide-tb-btn" id="btn-guide-image" title="Lisää kuva">📷 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... 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 | 📁 Raahaa kuva editoriin | 📷 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>
|
||||
|
||||
<!-- Tab: Käyttäjät (vain admin) -->
|
||||
|
||||
88
script.js
88
script.js
@@ -211,6 +211,7 @@ async function showDashboard() {
|
||||
const hash = window.location.hash.replace('#', '');
|
||||
const [mainHash, subHash] = hash.split('/');
|
||||
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';
|
||||
switchToTab(startTab, subHash);
|
||||
}
|
||||
@@ -258,6 +259,11 @@ async function switchCompany(companyId) {
|
||||
// ==================== TABS ====================
|
||||
|
||||
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-content').forEach(c => c.classList.remove('active'));
|
||||
const tabBtn = document.querySelector(`.tab[data-tab="${target}"]`);
|
||||
@@ -265,27 +271,43 @@ function switchToTab(target, subTab) {
|
||||
const content = document.getElementById('tab-content-' + target);
|
||||
if (content) content.classList.add('active');
|
||||
// Tallenna aktiivinen tabi URL-hashiin
|
||||
if (target === 'tekniikka' && subTab) {
|
||||
if (subTab) {
|
||||
window.location.hash = target + '/' + subTab;
|
||||
} else {
|
||||
window.location.hash = target;
|
||||
}
|
||||
// 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 === 'tekniikka') {
|
||||
loadDevices(); loadIpam();
|
||||
// Palauta sub-tab
|
||||
const validSubTabs = ['devices', 'ipam'];
|
||||
if (subTab && validSubTabs.includes(subTab)) switchSubTab(subTab);
|
||||
const validSubTabs = ['devices', 'ipam', 'laitetilat'];
|
||||
if (subTab && validSubTabs.includes(subTab)) {
|
||||
switchSubTab(subTab);
|
||||
if (subTab === 'laitetilat') { loadLaitetilat(); showLaitetilatListView(); }
|
||||
} else {
|
||||
switchSubTab('devices');
|
||||
}
|
||||
}
|
||||
if (target === 'archive') loadArchive();
|
||||
if (target === 'changelog') loadChangelog();
|
||||
if (target === 'ohjeet') loadGuides();
|
||||
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 === 'laitetilat') { loadLaitetilat(); showLaitetilatListView(); }
|
||||
if (target === 'netadmin') loadNetadmin();
|
||||
if (target === 'users') loadUsers();
|
||||
if (target === 'settings') loadSettings();
|
||||
@@ -2995,7 +3017,7 @@ function switchSubTab(target) {
|
||||
if (btn) btn.classList.add('active');
|
||||
const content = document.getElementById('subtab-' + target);
|
||||
if (content) content.classList.add('active');
|
||||
// Tallenna sub-tab hashiin (esim. #tekniikka/ipam)
|
||||
if (target === 'laitetilat') { loadLaitetilat(); showLaitetilatListView(); }
|
||||
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));
|
||||
});
|
||||
|
||||
// ==================== 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 ====================
|
||||
// Sites-koodi poistettu: sijainnit hallitaan nyt Laitetilat-välilehdellä.
|
||||
|
||||
@@ -5518,20 +5574,14 @@ document.getElementById('btn-laitetila-edit-cancel')?.addEventListener('click',
|
||||
|
||||
// Poista laitetila
|
||||
document.getElementById('btn-laitetila-delete')?.addEventListener('click', async () => {
|
||||
console.log('Laitetila delete clicked, currentLaitetila:', currentLaitetila);
|
||||
if (!currentLaitetila) { console.log('Ei currentLaitetilaa!'); return; }
|
||||
if (!currentLaitetila) return;
|
||||
if (!confirm(`Poistetaanko laitetila "${currentLaitetila.nimi}" ja kaikki sen tiedostot?`)) return;
|
||||
try {
|
||||
console.log('Lähetetään laitetila_delete, id:', currentLaitetila.id);
|
||||
const result = await apiCall('laitetila_delete', 'POST', { id: currentLaitetila.id });
|
||||
console.log('Laitetila delete vastaus:', result);
|
||||
await apiCall('laitetila_delete', 'POST', { id: currentLaitetila.id });
|
||||
currentLaitetila = null;
|
||||
showLaitetilatListView();
|
||||
loadLaitetilat();
|
||||
} catch (e) {
|
||||
console.error('Laitetila delete virhe:', e);
|
||||
alert('Poisto epäonnistui: ' + e.message);
|
||||
}
|
||||
} catch (e) { alert('Poisto epäonnistui: ' + e.message); }
|
||||
});
|
||||
|
||||
// Uusi laitetila
|
||||
|
||||
Reference in New Issue
Block a user