Jukka Lampikoski
a0ee98cc9b
- When company logo is set, show only "Hallintapaneeli" without company name (logo identifies the company) - Ticket auto-refresh checkbox is checked by default - Auto-refresh starts when switching to support tab Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
851 lines
50 KiB
HTML
851 lines
50 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Noxus Intra</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<!-- Login -->
|
|
<div id="login-screen" class="login-screen">
|
|
<div class="login-box">
|
|
<img id="login-logo" src="" alt="Logo" style="height:48px;margin-bottom:0.75rem;display:none;">
|
|
<h1 id="login-title">Noxus Intra</h1>
|
|
<p id="login-subtitle">Kirjaudu sisään</p>
|
|
<form id="login-form">
|
|
<input type="text" id="login-username" placeholder="Käyttäjätunnus" required autofocus>
|
|
<input type="password" id="login-password" placeholder="Salasana" required>
|
|
<div class="captcha-row">
|
|
<span id="captcha-question" class="captcha-question">Ladataan...</span>
|
|
<input type="number" id="login-captcha" placeholder="Vastaus" required>
|
|
</div>
|
|
<button type="submit">Kirjaudu</button>
|
|
</form>
|
|
<div id="login-error" class="error" style="display:none"></div>
|
|
<a href="#" id="forgot-link" class="forgot-link">Unohdin salasanan</a>
|
|
</div>
|
|
<!-- Salasanan palautuspyyntö -->
|
|
<div class="login-box" id="forgot-box" style="display:none">
|
|
<h1 class="login-brand-title">Noxus Intra</h1>
|
|
<p>Salasanan palautus</p>
|
|
<form id="forgot-form">
|
|
<input type="text" id="forgot-username" placeholder="Käyttäjätunnus" required autofocus>
|
|
<button type="submit">Lähetä palautuslinkki</button>
|
|
</form>
|
|
<div id="forgot-msg" class="success-msg" style="display:none"></div>
|
|
<div id="forgot-error" class="error" style="display:none"></div>
|
|
<a href="#" id="forgot-back" class="forgot-link">Takaisin kirjautumiseen</a>
|
|
</div>
|
|
<!-- Uusi salasana (reset token) -->
|
|
<div class="login-box" id="reset-box" style="display:none">
|
|
<h1 class="login-brand-title">Noxus Intra</h1>
|
|
<p>Aseta uusi salasana</p>
|
|
<form id="reset-form">
|
|
<input type="password" id="reset-password" placeholder="Uusi salasana" required>
|
|
<input type="password" id="reset-password2" placeholder="Salasana uudelleen" required>
|
|
<button type="submit">Vaihda salasana</button>
|
|
</form>
|
|
<div id="reset-msg" class="success-msg" style="display:none"></div>
|
|
<div id="reset-error" class="error" style="display:none"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard -->
|
|
<div id="dashboard" style="display:none">
|
|
<header>
|
|
<div class="header-left">
|
|
<div class="header-brand" id="brand-home" style="cursor:pointer;">
|
|
<img id="header-logo" src="" alt="Logo" style="height:32px;display:none;">
|
|
<span class="brand-icon" id="header-brand-icon">⚡</span>
|
|
<div>
|
|
<h1 id="header-title">Noxus Intra</h1>
|
|
<span class="subtitle" id="header-subtitle">Hallintapaneeli</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<span id="user-info" class="user-info"></span>
|
|
<select id="company-selector" class="company-selector" style="display:none;"></select>
|
|
<button id="btn-users" class="btn-secondary" style="display:none">Käyttäjät</button>
|
|
<button id="btn-companies" class="btn-secondary" style="display:none">Yritykset</button>
|
|
<button id="btn-add" class="btn-primary">+ Lisää asiakas</button>
|
|
<button id="btn-logout" class="btn-secondary">Kirjaudu ulos</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Tabs -->
|
|
<div class="tab-bar">
|
|
<button class="tab" data-tab="support">Asiakaspalvelu</button>
|
|
<button class="tab active" data-tab="customers">Asiakkaat</button>
|
|
<button class="tab" data-tab="leads">Liidit</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="main-container">
|
|
<div class="content-layout">
|
|
<div class="content-main">
|
|
<div class="toolbar">
|
|
<div class="search-bar">
|
|
<span class="search-icon">🔍</span>
|
|
<input type="text" id="search-input" placeholder="Hae yrityksen nimellä, osoitteella tai yhteyshenkilöllä...">
|
|
</div>
|
|
</div>
|
|
<div class="table-card">
|
|
<table id="customer-table">
|
|
<thead>
|
|
<tr>
|
|
<th data-sort="yritys">Yritys ↕</th>
|
|
<th data-sort="asennusosoite">Osoite ↕</th>
|
|
<th data-sort="kaupunki">Kaupunki ↕</th>
|
|
<th data-sort="liittymanopeus">Nopeus ↕</th>
|
|
<th data-sort="hinta">Hinta/kk ↕</th>
|
|
<th data-sort="sopimuskausi">Sopimus ↕</th>
|
|
<th>Toiminnot</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="customer-tbody"></tbody>
|
|
</table>
|
|
<div id="no-customers" class="empty-state" style="display:none">
|
|
<div class="empty-icon">📋</div>
|
|
<p>Ei asiakkaita vielä.</p>
|
|
<p class="empty-hint">Klikkaa "+ Lisää asiakas" lisätäksesi ensimmäisen asiakkaan.</p>
|
|
</div>
|
|
</div>
|
|
<div class="summary-bar">
|
|
<span id="customer-count">0 asiakasta</span>
|
|
<span id="total-billing">Laskutus yhteensä: 0,00 €/kk</span>
|
|
</div>
|
|
</div>
|
|
<aside class="sidebar-stats">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Asiakkaita</div>
|
|
<div class="stat-value" id="stat-count">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Liittymiä</div>
|
|
<div class="stat-value" id="stat-connections">0</div>
|
|
</div>
|
|
<div class="stat-card highlight">
|
|
<div class="stat-label">Laskutus / kk</div>
|
|
<div class="stat-value stat-highlight" id="stat-billing">0,00 €</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Laskutus / vuosi</div>
|
|
<div class="stat-value" id="stat-yearly">0,00 €</div>
|
|
</div>
|
|
<div class="stat-card trivia">
|
|
<div class="stat-label">Keskihinta / kk</div>
|
|
<div class="stat-value" id="stat-avg-price">-</div>
|
|
</div>
|
|
<div class="stat-card trivia">
|
|
<div class="stat-label">Suosituin postinumero</div>
|
|
<div class="stat-value" id="stat-top-zip">-</div>
|
|
<div class="stat-sub" id="stat-top-zip-detail"></div>
|
|
</div>
|
|
<div class="stat-card trivia">
|
|
<div class="stat-label">Nopeudet</div>
|
|
<div id="stat-speed-table" class="speed-table"></div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Liidit -->
|
|
<div class="tab-content" id="tab-content-leads">
|
|
<div class="main-container">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
|
|
<button class="btn-primary" id="btn-add-lead">+ Lisää liidi</button>
|
|
<div class="search-bar" style="flex:1;max-width:400px;margin-left:1rem;">
|
|
<span class="search-icon">🔍</span>
|
|
<input type="text" id="lead-search-input" placeholder="Hae liidejä...">
|
|
</div>
|
|
</div>
|
|
<div class="table-card">
|
|
<table id="leads-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Yritys</th>
|
|
<th>Yhteyshenkilö</th>
|
|
<th>Kaupunki</th>
|
|
<th>Tila</th>
|
|
<th>Lisätty</th>
|
|
<th>Toiminnot</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="leads-tbody"></tbody>
|
|
</table>
|
|
<div id="no-leads" class="empty-state" style="display:none">
|
|
<div class="empty-icon">🎯</div>
|
|
<p>Ei liidejä vielä.</p>
|
|
<p class="empty-hint">Klikkaa "+ Lisää liidi" lisätäksesi ensimmäisen.</p>
|
|
</div>
|
|
</div>
|
|
<div class="summary-bar">
|
|
<span id="lead-count">0 liidiä</span>
|
|
</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">🗃</div>
|
|
<p>Arkisto on tyhjä.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Muutosloki -->
|
|
<div class="tab-content" id="tab-content-changelog">
|
|
<div class="main-container">
|
|
<div class="table-card">
|
|
<table id="changelog-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Aika</th>
|
|
<th>Käyttäjä</th>
|
|
<th>Toiminto</th>
|
|
<th>Asiakas</th>
|
|
<th>Lisätiedot</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="changelog-tbody"></tbody>
|
|
</table>
|
|
<div id="no-changelog" class="empty-state" style="display:none">
|
|
<div class="empty-icon">📜</div>
|
|
<p>Ei lokimerkintöjä.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Asiakaspalvelu -->
|
|
<div class="tab-content" id="tab-content-support">
|
|
<div class="main-container">
|
|
<!-- Listanäkymä -->
|
|
<div id="ticket-list-view">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;gap:0.75rem;flex-wrap:wrap;">
|
|
<button class="btn-primary" id="btn-fetch-emails">📧 Hae postit</button>
|
|
<div class="search-bar" style="flex:1;max-width:400px;">
|
|
<span class="search-icon">🔍</span>
|
|
<input type="text" id="ticket-search-input" placeholder="Hae tiketeistä...">
|
|
</div>
|
|
<select id="ticket-type-filter" style="padding:9px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;">
|
|
<option value="">Kaikki tyypit</option>
|
|
<option value="laskutus">Laskutus</option>
|
|
<option value="tekniikka">Tekniikka</option>
|
|
<option value="vika">Vika</option>
|
|
<option value="muu">Muu</option>
|
|
</select>
|
|
<select id="ticket-status-filter" style="padding:9px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;">
|
|
<option value="">Kaikki avoimet</option>
|
|
<option value="uusi">Uusi</option>
|
|
<option value="kasittelyssa">Käsittelyssä</option>
|
|
<option value="odottaa">Odottaa vastausta</option>
|
|
<option value="ratkaistu">Ratkaistu</option>
|
|
</select>
|
|
<select id="ticket-sort" style="padding:9px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;">
|
|
<option value="status">Tila → uusin</option>
|
|
<option value="updated">Päivitetty</option>
|
|
<option value="created">Luotu</option>
|
|
</select>
|
|
<input type="text" id="ticket-tag-filter" placeholder="#tagi" style="padding:9px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;max-width:120px;">
|
|
<label style="display:flex;align-items:center;gap:0.4rem;font-size:0.85rem;color:#777;cursor:pointer;white-space:nowrap;">
|
|
<input type="checkbox" id="ticket-show-closed"> Suljetut
|
|
</label>
|
|
<button class="btn-secondary" id="btn-ticket-rules" style="padding:7px 14px;font-size:0.82rem;">⚙ Säännöt</button>
|
|
<label style="display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;color:#777;cursor:pointer;white-space:nowrap;margin-left:auto;">
|
|
<input type="checkbox" id="ticket-auto-refresh" checked> Autopäivitys
|
|
<select id="ticket-refresh-interval" style="padding:3px 6px;border:1px solid #ddd;border-radius:5px;font-size:0.8rem;">
|
|
<option value="30">30s</option>
|
|
<option value="60" selected>1 min</option>
|
|
<option value="120">2 min</option>
|
|
<option value="300">5 min</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div id="ticket-fetch-status" style="display:none;padding:0.75rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:0.9rem;"></div>
|
|
<div id="bulk-actions-toolbar" style="display:none;align-items:center;gap:0.75rem;padding:0.6rem 1rem;background:#fff3cd;border:1px solid #ffc107;border-radius:8px;margin-bottom:0.75rem;font-size:0.85rem;">
|
|
<span id="bulk-count" style="font-weight:600;">0 valittu</span>
|
|
<button class="btn-secondary" onclick="bulkCloseSelected()" style="padding:5px 14px;font-size:0.82rem;color:#555;border-color:#ddd;">Sulje valitut</button>
|
|
<button class="btn-danger" onclick="bulkDeleteSelected()" style="padding:5px 14px;font-size:0.82rem;">Poista valitut</button>
|
|
<button style="background:none;border:none;cursor:pointer;font-size:0.82rem;color:#888;margin-left:auto;" onclick="bulkSelectedIds.clear();document.querySelectorAll('.ticket-checkbox,#bulk-select-all').forEach(c=>c.checked=false);updateBulkToolbar();">Tyhjennä valinta</button>
|
|
</div>
|
|
<div class="table-card">
|
|
<table id="tickets-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:30px;"><input type="checkbox" id="bulk-select-all" title="Valitse kaikki"></th>
|
|
<th>Tila</th>
|
|
<th>Tyyppi</th>
|
|
<th>Aihe</th>
|
|
<th>Postilaatikko</th>
|
|
<th>Asiakas</th>
|
|
<th>Viestejä</th>
|
|
<th>Päivitetty</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tickets-tbody"></tbody>
|
|
</table>
|
|
<div id="no-tickets" class="empty-state" style="display:none">
|
|
<div class="empty-icon">📧</div>
|
|
<p>Ei tikettejä.</p>
|
|
<p class="empty-hint">Klikkaa "Hae postit" hakeaksesi sähköpostit.</p>
|
|
</div>
|
|
</div>
|
|
<div class="summary-bar">
|
|
<span id="ticket-count">0 tikettiä</span>
|
|
<span id="ticket-status-summary"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Yksittäisen tiketin näkymä -->
|
|
<div id="ticket-detail-view" style="display:none;">
|
|
<button class="btn-secondary" id="btn-ticket-back" style="color:#555;border-color:#ddd;margin-bottom:1rem;">← Takaisin listaan</button>
|
|
<div class="table-card" style="padding:1.5rem;">
|
|
<div id="ticket-detail-header"></div>
|
|
<div id="ticket-thread" class="ticket-thread"></div>
|
|
<!-- Vastauslomake -->
|
|
<div class="ticket-reply-form">
|
|
<div style="display:flex;gap:0.5rem;margin-bottom:0.75rem;">
|
|
<button class="btn-reply-tab active" data-reply-type="reply">✉ Vastaa</button>
|
|
<button class="btn-reply-tab" data-reply-type="note">📝 Muistiinpano</button>
|
|
</div>
|
|
<textarea id="ticket-reply-body" rows="5" placeholder="Kirjoita vastaus..."></textarea>
|
|
<div id="signature-preview" style="display:none;padding:0.5rem 0.75rem;margin-top:0.25rem;border-left:3px solid #d0d5dd;color:#888;font-size:0.82rem;white-space:pre-line;"></div>
|
|
<div style="display:flex;justify-content:flex-end;gap:0.5rem;margin-top:0.5rem;">
|
|
<button class="btn-primary" id="btn-send-reply">Lähetä vastaus</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sääntönäkymä -->
|
|
<div id="ticket-rules-view" style="display:none;">
|
|
<button class="btn-secondary" id="btn-rules-back" style="color:#555;border-color:#ddd;margin-bottom:1rem;">← Takaisin tiketteihin</button>
|
|
<div class="table-card" style="padding:1.5rem;">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
|
|
<h3 style="color:#0f3460;margin:0;">Automaattisäännöt</h3>
|
|
<button class="btn-primary" id="btn-add-rule" style="font-size:0.85rem;">+ Lisää sääntö</button>
|
|
</div>
|
|
<p style="color:#888;font-size:0.85rem;margin-bottom:1rem;">Säännöt soveltuvat automaattisesti uusiin tiketteihin haettaessa sähköposteja. Ensimmäinen täsmäävä sääntö voittaa.</p>
|
|
<div id="rules-list"></div>
|
|
</div>
|
|
<!-- Sääntölomake -->
|
|
<div id="rule-form-container" class="table-card" style="padding:1.5rem;margin-top:1rem;display:none;">
|
|
<h4 style="color:#0f3460;margin-bottom:1rem;" id="rule-form-title">Uusi sääntö</h4>
|
|
<input type="hidden" id="rule-form-id">
|
|
<div class="form-grid" style="max-width:600px;">
|
|
<div class="form-group full-width">
|
|
<label>Säännön nimi *</label>
|
|
<input type="text" id="rule-form-name" placeholder="esim. Sulje notifikaatiot">
|
|
</div>
|
|
<div class="form-group full-width" style="margin-top:0.5rem;">
|
|
<label style="font-weight:600;color:#0f3460;">Ehdot (molemmat pitää täsmätä jos täytetty)</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Lähettäjä sisältää</label>
|
|
<input type="text" id="rule-form-from" placeholder="esim. noreply@">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Otsikko sisältää</label>
|
|
<input type="text" id="rule-form-subject" placeholder="esim. saatavuuskysely">
|
|
</div>
|
|
<div class="form-group full-width" style="margin-top:0.5rem;">
|
|
<label style="font-weight:600;color:#0f3460;">Toimenpiteet</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Aseta tila</label>
|
|
<select id="rule-form-status">
|
|
<option value="">Ei muuteta</option>
|
|
<option value="suljettu">Suljettu</option>
|
|
<option value="kasittelyssa">Käsittelyssä</option>
|
|
<option value="ratkaistu">Ratkaistu</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Aseta tyyppi</label>
|
|
<select id="rule-form-type">
|
|
<option value="">Ei muuteta</option>
|
|
<option value="laskutus">Laskutus</option>
|
|
<option value="tekniikka">Tekniikka</option>
|
|
<option value="vika">Vika</option>
|
|
<option value="muu">Muu</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Aseta tagit (pilkulla eroteltuna)</label>
|
|
<input type="text" id="rule-form-tags" placeholder="esim. notification, automaatti">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Auto-close (päivää)</label>
|
|
<input type="number" id="rule-form-autoclose" min="0" max="365" placeholder="esim. 7" style="max-width:120px;">
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;gap:0.5rem;margin-top:1rem;">
|
|
<button class="btn-primary" id="btn-save-rule">Tallenna</button>
|
|
<button class="btn-secondary" id="btn-cancel-rule">Peruuta</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Käyttäjät (vain admin) -->
|
|
<div class="tab-content" id="tab-content-users">
|
|
<div class="main-container">
|
|
<div style="margin-bottom:1rem;">
|
|
<button class="btn-primary" id="btn-add-user">+ Lisää käyttäjä</button>
|
|
</div>
|
|
<div class="table-card">
|
|
<table id="users-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Käyttäjätunnus</th>
|
|
<th>Nimi</th>
|
|
<th>Sähköposti</th>
|
|
<th>Rooli</th>
|
|
<th>Luotu</th>
|
|
<th>Toiminnot</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="users-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
</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;"><span id="api-company-name"></span>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 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>
|
|
<p style="color:#888;font-size:0.85rem;margin-top:1rem;">Sähköpostiasetukset (IMAP/postilaatikot) hallitaan Yritykset-välilehdellä.</p>
|
|
<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>
|
|
• <code>key</code> = API-avain (pakollinen)<br>
|
|
• <code>osoite</code> = Katuosoite ja numero (esim. "Kauppakatu 5")<br>
|
|
• <code>postinumero</code> = Postinumero (esim. "20100")<br>
|
|
• <code>kaupunki</code> = Kaupunki (esim. "Turku")<br>
|
|
Kaikki kolme pakollisia.</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&postinumero=20100&kaupunki=Turku</code></div>
|
|
<div><strong>Vastaus:</strong><br>
|
|
<code>{"saatavilla":true}</code> tai <code>{"saatavilla":false}</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:grid;grid-template-columns:1fr;gap:0.5rem;max-width:500px;">
|
|
<input type="text" id="test-api-address" placeholder="Osoite (esim. Kauppakatu 5)">
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
|
|
<input type="text" id="test-api-zip" placeholder="Postinumero" maxlength="5">
|
|
<input type="text" id="test-api-city" placeholder="Kaupunki">
|
|
</div>
|
|
<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>
|
|
|
|
<!-- Tab: Yritykset (vain admin) -->
|
|
<div class="tab-content" id="tab-content-companies">
|
|
<div class="main-container">
|
|
<!-- Yrityslistanäkymä -->
|
|
<div id="companies-list-view">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
|
|
<h3 style="color:#0f3460;margin:0;">Yritykset</h3>
|
|
<button class="btn-primary" id="btn-add-company">+ Lisää yritys</button>
|
|
</div>
|
|
<div class="table-card">
|
|
<table id="companies-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Nimi</th>
|
|
<th>Postilaatikot</th>
|
|
<th>Luotu</th>
|
|
<th>Tila</th>
|
|
<th>Toiminnot</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="companies-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- Yrityksen asetukset -->
|
|
<div id="company-detail-view" style="display:none;">
|
|
<button class="btn-secondary" id="btn-company-back" style="color:#555;border-color:#ddd;margin-bottom:1rem;">← Takaisin yrityslistaan</button>
|
|
<div class="table-card" style="padding:1.5rem;">
|
|
<h3 style="margin-bottom:0.5rem;" id="company-detail-title">Yrityksen asetukset</h3>
|
|
<div class="form-grid" style="max-width:600px;margin-bottom:1.5rem;">
|
|
<div class="form-group">
|
|
<label>Yrityksen nimi</label>
|
|
<input type="text" id="company-edit-nimi">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Alaotsikko</label>
|
|
<input type="text" id="company-edit-subtitle" placeholder="esim. Asiakashallinta">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Pääväri</label>
|
|
<div style="display:flex;align-items:center;gap:0.5rem;">
|
|
<input type="color" id="company-edit-color" value="#0f3460" style="width:50px;height:36px;border:none;cursor:pointer;">
|
|
<input type="text" id="company-edit-color-text" placeholder="#0f3460" style="width:100px;font-family:monospace;font-size:0.85rem;">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Logo</label>
|
|
<div style="display:flex;align-items:center;gap:0.75rem;">
|
|
<img id="company-logo-preview" src="" style="height:36px;display:none;border-radius:4px;">
|
|
<input type="file" id="company-logo-upload" accept="image/png,image/jpeg,image/svg+xml,image/webp" style="font-size:0.82rem;">
|
|
</div>
|
|
</div>
|
|
<div class="form-group full-width">
|
|
<label>Domainit (yksi per rivi)</label>
|
|
<textarea id="company-edit-domains" rows="3" placeholder="intra.yritys.fi intra.toinen.fi" style="font-family:monospace;font-size:0.85rem;"></textarea>
|
|
</div>
|
|
</div>
|
|
<button class="btn-primary" id="btn-save-company-settings" style="font-size:0.85rem;">Tallenna asetukset</button>
|
|
</div>
|
|
<!-- Postilaatikot -->
|
|
<div class="table-card" style="padding:1.5rem;margin-top:1rem;">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
|
|
<h3 style="color:#0f3460;margin:0;">Postilaatikot (IMAP)</h3>
|
|
<button class="btn-primary" id="btn-add-mailbox" style="font-size:0.85rem;">+ Lisää postilaatikko</button>
|
|
</div>
|
|
<p style="color:#888;font-size:0.85rem;margin-bottom:1rem;">Sähköpostilaatikot joista asiakaspalvelutiketit haetaan.</p>
|
|
<div id="mailboxes-list"></div>
|
|
<!-- Postilaatikkolom -->
|
|
<div id="mailbox-form-container" style="display:none;margin-top:1rem;padding:1rem;background:#f8f9fb;border-radius:8px;">
|
|
<h4 style="color:#0f3460;margin-bottom:0.75rem;" id="mailbox-form-title">Uusi postilaatikko</h4>
|
|
<input type="hidden" id="mailbox-form-id">
|
|
<div class="form-grid" style="max-width:600px;">
|
|
<div class="form-group full-width">
|
|
<label>Nimi (näkyy tikettilistassa) *</label>
|
|
<input type="text" id="mailbox-form-nimi" placeholder="esim. Cuitunet-asiakaspalvelu">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>IMAP-palvelin</label>
|
|
<input type="text" id="mailbox-form-host" placeholder="mail.example.com">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Portti</label>
|
|
<input type="number" id="mailbox-form-port" value="993" placeholder="993">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Käyttäjätunnus</label>
|
|
<input type="text" id="mailbox-form-user" placeholder="asiakaspalvelu@cuitunet.fi">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Salasana</label>
|
|
<input type="password" id="mailbox-form-password" placeholder="••••••••">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Salaus</label>
|
|
<select id="mailbox-form-encryption">
|
|
<option value="ssl">SSL</option>
|
|
<option value="tls">TLS</option>
|
|
<option value="notls">Ei salausta</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Lähettäjän sähköposti</label>
|
|
<input type="text" id="mailbox-form-smtp-email" placeholder="asiakaspalvelu@cuitunet.fi">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Lähettäjän nimi</label>
|
|
<input type="text" id="mailbox-form-smtp-name" placeholder="CuituNet Asiakaspalvelu">
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;gap:0.5rem;margin-top:0.75rem;">
|
|
<button class="btn-primary" id="btn-save-mailbox">Tallenna</button>
|
|
<button class="btn-secondary" id="btn-cancel-mailbox">Peruuta</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Käyttäjäoikeudet -->
|
|
<div class="table-card" style="padding:1.5rem;margin-top:1rem;">
|
|
<h3 style="color:#0f3460;margin-bottom:0.5rem;">Käyttäjäoikeudet</h3>
|
|
<p style="color:#888;font-size:0.85rem;margin-bottom:1rem;">Käyttäjät joilla on pääsy tähän yritykseen.</p>
|
|
<div id="company-users-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p id="footer-text">Noxus Intra © 2026</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Asiakas-modal -->
|
|
<div id="customer-modal" class="modal" style="display:none">
|
|
<div class="modal-content modal-wide">
|
|
<div class="modal-header">
|
|
<h2 id="modal-title">Lisää asiakas</h2>
|
|
<button class="modal-close" id="modal-close">×</button>
|
|
</div>
|
|
<form id="customer-form">
|
|
<input type="hidden" id="form-id">
|
|
<h3>Perustiedot</h3>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label for="form-yritys">Yritys *</label>
|
|
<input type="text" id="form-yritys" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="form-ytunnus">Y-tunnus</label>
|
|
<input type="text" id="form-ytunnus" placeholder="1234567-8">
|
|
</div>
|
|
</div>
|
|
<h3>Liittymät <button type="button" class="btn-add-row" id="btn-add-liittyma">+ Lisää liittymä</button></h3>
|
|
<div id="liittymat-container"></div>
|
|
<h3>Yhteystiedot</h3>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label for="form-yhteyshenkilo">Yhteyshenkilö</label>
|
|
<input type="text" id="form-yhteyshenkilo">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="form-puhelin">Puhelin</label>
|
|
<input type="text" id="form-puhelin">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="form-sahkoposti">Sähköposti</label>
|
|
<input type="email" id="form-sahkoposti">
|
|
</div>
|
|
</div>
|
|
<h3>Laskutustiedot</h3>
|
|
<div class="form-group" style="margin-bottom:0.75rem;">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="form-billing-same">
|
|
Käytä samoja kuin ensimmäisen liittymän asennusosoite
|
|
</label>
|
|
</div>
|
|
<div id="billing-fields">
|
|
<div class="form-grid">
|
|
<div class="form-group full-width">
|
|
<label for="form-laskutusosoite">Laskutusosoite</label>
|
|
<input type="text" id="form-laskutusosoite">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="form-laskutuspostinumero">Postinumero</label>
|
|
<input type="text" id="form-laskutuspostinumero" placeholder="20100">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="form-laskutuskaupunki">Kaupunki</label>
|
|
<input type="text" id="form-laskutuskaupunki">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-grid" style="margin-top:0.75rem;">
|
|
<div class="form-group">
|
|
<label for="form-laskutussahkoposti">Laskutussähköposti</label>
|
|
<input type="email" id="form-laskutussahkoposti">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="form-elaskuosoite">E-laskuosoite</label>
|
|
<input type="text" id="form-elaskuosoite" placeholder="esim. 003712345678">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="form-elaskuvalittaja">E-laskuvälittäjä</label>
|
|
<input type="text" id="form-elaskuvalittaja" placeholder="esim. DABAFIHH">
|
|
</div>
|
|
</div>
|
|
<h3>Lisätiedot</h3>
|
|
<div class="form-group full-width">
|
|
<textarea id="form-lisatiedot" rows="3" placeholder="Vapaamuotoiset muistiinpanot..."></textarea>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn-primary" id="form-submit">Tallenna</button>
|
|
<button type="button" class="btn-secondary" id="form-cancel">Peruuta</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tiedot-modal -->
|
|
<div id="detail-modal" class="modal" style="display:none">
|
|
<div class="modal-content modal-wide">
|
|
<div class="modal-header">
|
|
<h2 id="detail-title">Asiakkaan tiedot</h2>
|
|
<button class="modal-close" id="detail-close">×</button>
|
|
</div>
|
|
<div id="detail-body"></div>
|
|
<div class="form-actions">
|
|
<button class="btn-primary" id="detail-edit">Muokkaa</button>
|
|
<button class="btn-danger" id="detail-delete">Arkistoi</button>
|
|
<button class="btn-secondary" id="detail-cancel">Sulje</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Käyttäjä-modal -->
|
|
<div id="user-modal" class="modal" style="display:none">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="user-modal-title">Lisää käyttäjä</h2>
|
|
<button class="modal-close" id="user-modal-close">×</button>
|
|
</div>
|
|
<form id="user-form">
|
|
<input type="hidden" id="user-form-id">
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label for="user-form-username">Käyttäjätunnus *</label>
|
|
<input type="text" id="user-form-username" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="user-form-nimi">Nimi</label>
|
|
<input type="text" id="user-form-nimi">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="user-form-email">Sähköposti</label>
|
|
<input type="email" id="user-form-email" placeholder="nimi@esimerkki.fi">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="user-form-password">Salasana <span id="user-pw-hint"></span></label>
|
|
<input type="password" id="user-form-password">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="user-form-role">Rooli</label>
|
|
<select id="user-form-role">
|
|
<option value="user">Käyttäjä</option>
|
|
<option value="admin">Ylläpitäjä</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group full-width">
|
|
<label>Yritysoikeudet</label>
|
|
<div id="user-company-checkboxes" style="display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:0.25rem;"></div>
|
|
</div>
|
|
</div>
|
|
<div id="user-signatures-section" style="display:none;margin-top:1rem;border-top:1px solid #e5e7eb;padding-top:1rem;">
|
|
<h3 style="color:#0f3460;font-size:1rem;margin-bottom:0.75rem;">Sähköpostiallekirjoitukset</h3>
|
|
<p style="color:#888;font-size:0.82rem;margin-bottom:0.75rem;">Allekirjoitus liitetään automaattisesti sähköpostivastausten loppuun.</p>
|
|
<div id="user-signatures-list"></div>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn-primary">Tallenna</button>
|
|
<button type="button" class="btn-secondary" id="user-form-cancel">Peruuta</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Liidi-modal -->
|
|
<div id="lead-modal" class="modal" style="display:none">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="lead-modal-title">Lisää liidi</h2>
|
|
<button class="modal-close" id="lead-modal-close">×</button>
|
|
</div>
|
|
<form id="lead-form">
|
|
<input type="hidden" id="lead-form-id">
|
|
<div class="form-grid">
|
|
<div class="form-group full-width">
|
|
<label for="lead-form-yritys">Yritys *</label>
|
|
<input type="text" id="lead-form-yritys" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="lead-form-yhteyshenkilo">Yhteyshenkilö</label>
|
|
<input type="text" id="lead-form-yhteyshenkilo">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="lead-form-puhelin">Puhelin</label>
|
|
<input type="text" id="lead-form-puhelin">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="lead-form-sahkoposti">Sähköposti</label>
|
|
<input type="email" id="lead-form-sahkoposti">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="lead-form-osoite">Osoite</label>
|
|
<input type="text" id="lead-form-osoite">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="lead-form-kaupunki">Kaupunki</label>
|
|
<input type="text" id="lead-form-kaupunki">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="lead-form-tila">Tila</label>
|
|
<select id="lead-form-tila">
|
|
<option value="uusi">Uusi</option>
|
|
<option value="kontaktoitu">Kontaktoitu</option>
|
|
<option value="kiinnostunut">Kiinnostunut</option>
|
|
<option value="odottaa">Odottaa toimitusta</option>
|
|
<option value="ei_kiinnosta">Ei kiinnosta</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group full-width">
|
|
<label for="lead-form-muistiinpanot">Muistiinpanot</label>
|
|
<textarea id="lead-form-muistiinpanot" rows="5" placeholder="Mitä on puhuttu, milloin otettu yhteyttä, jne..."></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn-primary" id="lead-form-submit">Tallenna</button>
|
|
<button type="button" class="btn-secondary" id="lead-form-cancel">Peruuta</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Liidi-tiedot-modal -->
|
|
<div id="lead-detail-modal" class="modal" style="display:none">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="lead-detail-title">Liidin tiedot</h2>
|
|
<button class="modal-close" id="lead-detail-close">×</button>
|
|
</div>
|
|
<div id="lead-detail-body"></div>
|
|
<div class="form-actions">
|
|
<button class="btn-primary" id="lead-detail-edit">Muokkaa</button>
|
|
<button class="btn-add-row" id="lead-detail-convert" style="padding:8px 16px;font-size:0.85rem;">Muuta asiakkaaksi</button>
|
|
<button class="btn-danger" id="lead-detail-delete">Poista</button>
|
|
<button class="btn-secondary" id="lead-detail-cancel">Sulje</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|