192 lines
7.9 KiB
HTML
192 lines
7.9 KiB
HTML
<!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-assign-user"><strong>Zugewiesen an</strong></label>
|
|
<select id="t-assign-user" aria-label="Benutzer zuweisen">
|
|
<option value="">— lädt … —</option>
|
|
</select>
|
|
</p>
|
|
<p id="t-assign-readonly" class="muted" hidden>
|
|
<strong>Zugewiesen an:</strong> <span id="t-assign-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>
|