Add Asiakaspalvelu email ticketing system
IMAP client for fetching emails from asiakaspalvelu@cuitunet.fi, Freshdesk-style ticket management with status tracking, message threading, reply/note functionality, and IMAP settings in API tab. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
98
index.html
98
index.html
@@ -76,6 +76,7 @@
|
||||
<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="support">Asiakaspalvelu</button>
|
||||
<button class="tab" data-tab="settings" id="tab-settings" style="display:none">API</button>
|
||||
</div>
|
||||
|
||||
@@ -235,6 +236,75 @@
|
||||
</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:1rem;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-status-filter" style="padding:9px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;">
|
||||
<option value="">Kaikki tilat</option>
|
||||
<option value="uusi">Uusi</option>
|
||||
<option value="kasittelyssa">Käsittelyssä</option>
|
||||
<option value="odottaa">Odottaa vastausta</option>
|
||||
<option value="ratkaistu">Ratkaistu</option>
|
||||
<option value="suljettu">Suljettu</option>
|
||||
</select>
|
||||
</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 class="table-card">
|
||||
<table id="tickets-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tila</th>
|
||||
<th>Aihe</th>
|
||||
<th>Lähettäjä</th>
|
||||
<th>Viestejä</th>
|
||||
<th>Osoitettu</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 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Käyttäjät (vain admin) -->
|
||||
<div class="tab-content" id="tab-content-users">
|
||||
<div class="main-container">
|
||||
@@ -281,6 +351,34 @@
|
||||
<button class="btn-primary" id="btn-save-settings">Tallenna asetukset</button>
|
||||
</div>
|
||||
</div>
|
||||
<h3 style="color:#0f3460;margin:1.5rem 0 1rem;border-bottom:2px solid #f0f2f5;padding-bottom:0.5rem;">Sähköposti (IMAP)</h3>
|
||||
<p style="color:#666;font-size:0.85rem;margin-bottom:1rem;">Asiakaspalvelu-sähköpostin IMAP-asetukset. Käytetään tikettien hakuun.</p>
|
||||
<div class="form-grid" style="max-width:600px;">
|
||||
<div class="form-group">
|
||||
<label>IMAP-palvelin</label>
|
||||
<input type="text" id="settings-imap-host" placeholder="mail.example.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Portti</label>
|
||||
<input type="number" id="settings-imap-port" value="993" placeholder="993">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Käyttäjätunnus</label>
|
||||
<input type="text" id="settings-imap-user" placeholder="asiakaspalvelu@cuitunet.fi">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Salasana</label>
|
||||
<input type="password" id="settings-imap-password" placeholder="••••••••">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Salaus</label>
|
||||
<select id="settings-imap-encryption">
|
||||
<option value="ssl">SSL</option>
|
||||
<option value="tls">TLS</option>
|
||||
<option value="notls">Ei salausta</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<h3 style="color:#0f3460;margin:1.5rem 0 1rem;border-bottom:2px solid #f0f2f5;padding-bottom:0.5rem;">API-ohjeet</h3>
|
||||
<div style="background:#f8f9fb;padding:1rem;border-radius:8px;font-size:0.85rem;font-family:monospace;overflow-x:auto;">
|
||||
<div style="margin-bottom:0.75rem;"><strong>Endpoint:</strong><br>GET https://intra.cuitunet.fi/api.php?action=saatavuus</div>
|
||||
|
||||
Reference in New Issue
Block a user