V0.1
This commit is contained in:
182
public/ticket.html
Normal file
182
public/ticket.html
Normal file
@@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Ticket — SDS CRM</title>
|
||||
<link rel="stylesheet" href="/css/style.css" />
|
||||
<link rel="stylesheet" href="/css/pages/detail.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<h1><a href="/start.html">SDS CRM</a></h1>
|
||||
<nav id="main-nav" aria-label="Hauptnavigation"></nav>
|
||||
</header>
|
||||
<main id="app" class="main">
|
||||
<p id="page-loading" class="muted">Lade …</p>
|
||||
<div id="ticket-bad-id" hidden>
|
||||
<p class="error">Ungültige oder fehlende Ticket-ID.</p>
|
||||
<p><a href="/tickets.html">← Zur Übersicht</a></p>
|
||||
</div>
|
||||
<p id="page-error" class="error" hidden></p>
|
||||
<div id="page-main" class="stack" hidden>
|
||||
<p><a href="/tickets.html">← Zurück</a></p>
|
||||
<h2 id="ticket-title"></h2>
|
||||
|
||||
<div id="panel-ticket-view" class="card">
|
||||
<p>
|
||||
<strong>Status:</strong>
|
||||
<span id="t-status-badge" class="badge"></span>
|
||||
</p>
|
||||
<p><strong>Priorität:</strong> <span id="t-priority-label"></span></p>
|
||||
<p>
|
||||
<label for="t-sla-days"><strong>Fälligkeit (Bearbeitungszeit)</strong></label>
|
||||
<select id="t-sla-days" aria-label="Fälligkeit in Tagen">
|
||||
<option value="">Standard (2 Tage)</option>
|
||||
<option value="1">1 Tag</option>
|
||||
<option value="2">2 Tage</option>
|
||||
<option value="3">3 Tage</option>
|
||||
<option value="4">4 Tage</option>
|
||||
<option value="5">5 Tage</option>
|
||||
</select>
|
||||
</p>
|
||||
<p><strong>Beschreibung:</strong></p>
|
||||
<p id="t-description" style="white-space: pre-wrap"></p>
|
||||
<p id="t-machine-row" hidden>
|
||||
<strong>Maschine:</strong>
|
||||
<a id="t-machine-link" href="#"></a><span id="t-machine-suffix"></span>
|
||||
</p>
|
||||
<button type="button" id="btn-t-edit">Bearbeiten</button>
|
||||
</div>
|
||||
|
||||
<form id="panel-ticket-edit" class="card stack" hidden>
|
||||
<label>Titel <input name="title" id="tu-title" required /></label>
|
||||
<label
|
||||
>Beschreibung <textarea name="description" id="tu-desc" required></textarea></label
|
||||
>
|
||||
<div class="row">
|
||||
<label
|
||||
>Status
|
||||
<select name="status" id="tu-status">
|
||||
<option value="OPEN">Offen</option>
|
||||
<option value="WAITING">Warte auf Rückmeldung</option>
|
||||
<option value="DONE">Erledigt</option>
|
||||
</select>
|
||||
</label>
|
||||
<label
|
||||
>Priorität
|
||||
<select name="priority" id="tu-priority">
|
||||
<option value="LOW">Niedrig</option>
|
||||
<option value="MEDIUM">Mittel</option>
|
||||
<option value="HIGH">Hoch</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button type="submit">Speichern</button>
|
||||
<button type="button" class="secondary" id="tu-cancel">Abbrechen</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h3>Historie</h3>
|
||||
<div class="card">
|
||||
<h4>Event hinzufügen</h4>
|
||||
<form id="form-ev" class="stack">
|
||||
<label
|
||||
>Art
|
||||
<select id="ev-type-sel" name="type" required>
|
||||
<option value="NOTE">Notiz</option>
|
||||
<option value="CALL">Anruf</option>
|
||||
<option value="REMOTE">Remote</option>
|
||||
<option value="PART">Ersatzteil benötigt</option>
|
||||
<option value="ATTACHMENT">Anhang / Datei(en)</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="ev-field-group" data-ev-type="NOTE">
|
||||
<label>Beschreibung <textarea name="description_note" rows="3" required></textarea></label>
|
||||
</div>
|
||||
<div class="ev-field-group" data-ev-type="CALL" hidden>
|
||||
<label>Beschreibung <textarea name="description_call" rows="3"></textarea></label>
|
||||
<label>Rückrufnummer <span class="muted">(optional)</span>
|
||||
<input name="callbackNumber" type="tel" autocomplete="tel" /></label>
|
||||
</div>
|
||||
<div class="ev-field-group" data-ev-type="REMOTE" hidden>
|
||||
<label
|
||||
>Beschreibung
|
||||
<textarea
|
||||
name="description_remote"
|
||||
rows="3"
|
||||
placeholder="Was wurde remote erledigt?"
|
||||
></textarea>
|
||||
</label>
|
||||
<div class="tv-device-row">
|
||||
<label
|
||||
>Benutzer (TeamViewer)
|
||||
<select id="tv-user-select" aria-label="TeamViewer Benutzer">
|
||||
<option value="">— zuerst Art „Remote“ wählen —</option>
|
||||
</select>
|
||||
</label>
|
||||
<label
|
||||
>Gerät / Session
|
||||
<select name="teamviewerDevice" id="tv-conn-select" disabled aria-label="TeamViewer Gerät">
|
||||
<option value="">— zuerst Benutzer wählen —</option>
|
||||
</select>
|
||||
</label>
|
||||
<button type="button" class="secondary" id="btn-tv-reload">Liste aktualisieren</button>
|
||||
</div>
|
||||
<p class="muted tv-conn-hint" id="tv-conn-hint"></p>
|
||||
</div>
|
||||
<div class="ev-field-group" data-ev-type="PART" hidden>
|
||||
<label>Artikelnummer <input name="articleNumber" /></label>
|
||||
<label>Bemerkung <span class="muted">(optional)</span>
|
||||
<textarea name="description_part" rows="2"></textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="ev-field-group" data-ev-type="ATTACHMENT" hidden>
|
||||
<label>Beschreibung <span class="muted">(optional)</span>
|
||||
<textarea name="description_attachment" rows="2" placeholder="Kurzbeschreibung zu den Dateien"></textarea>
|
||||
</label>
|
||||
<label>Dateien
|
||||
<input
|
||||
type="file"
|
||||
id="ev-attachment-files"
|
||||
name="files"
|
||||
multiple
|
||||
accept="*/*"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit">Event speichern</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card table-wrap">
|
||||
<table class="events-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Zeitpunkt</th>
|
||||
<th scope="col">Art</th>
|
||||
<th scope="col">Inhalt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="events-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="sect-second-ticket" hidden>
|
||||
<h3>Weiteres Ticket für diese Maschine</h3>
|
||||
<p class="muted">Optional.</p>
|
||||
<div class="card">
|
||||
<form id="form-t2" class="stack">
|
||||
<div class="row">
|
||||
<label>Titel <input name="title" required /></label>
|
||||
<label>Beschreibung <textarea name="description" required></textarea></label>
|
||||
</div>
|
||||
<button type="submit">Ticket erstellen</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script type="module" src="/js/pages/ticket-detail.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user