Initial commit: Redmine ticket portal
This commit is contained in:
@@ -0,0 +1,321 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ticket anlegen - Service-Portal</title>
|
||||
<style>
|
||||
:root {
|
||||
--ink: #1B2430;
|
||||
--ink-soft: #5C6B7A;
|
||||
--surface: #FFFFFF;
|
||||
--canvas: #F5F7F8;
|
||||
--line: #D7DEE3;
|
||||
--accent: #0E7C7B;
|
||||
--accent-dark: #0B6362;
|
||||
--ok: #1D7A3E;
|
||||
--bad: #B3261E;
|
||||
--mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; }
|
||||
body {
|
||||
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
background: var(--canvas);
|
||||
color: var(--ink);
|
||||
min-height: 100vh;
|
||||
padding: 48px 16px;
|
||||
}
|
||||
main { max-width: 560px; margin: 0 auto; }
|
||||
header { margin-bottom: 28px; }
|
||||
header h1 { font-size: 1.45rem; font-weight: 650; letter-spacing: -0.01em; }
|
||||
header p { color: var(--ink-soft); margin-top: 6px; font-size: 0.95rem; }
|
||||
|
||||
.step {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.step[data-disabled="true"] { opacity: 0.45; pointer-events: none; }
|
||||
.step-label {
|
||||
display: flex; align-items: baseline; gap: 8px;
|
||||
font-size: 0.8rem; font-weight: 650; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 12px;
|
||||
}
|
||||
.step-label .num { font-family: var(--mono); color: var(--accent); }
|
||||
|
||||
label { display: block; font-size: 0.9rem; font-weight: 600; margin: 14px 0 6px; }
|
||||
label:first-of-type { margin-top: 0; }
|
||||
input[type="text"], textarea {
|
||||
width: 100%; font: inherit; color: inherit;
|
||||
padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
|
||||
background: var(--surface);
|
||||
}
|
||||
input[type="text"]:focus-visible, textarea:focus-visible, button:focus-visible {
|
||||
outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
|
||||
}
|
||||
textarea { min-height: 110px; resize: vertical; }
|
||||
|
||||
/* Autocomplete */
|
||||
.search-wrap { position: relative; }
|
||||
#customerSearch { font-size: 1.05rem; padding: 13px 14px; }
|
||||
.suggestions {
|
||||
position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10;
|
||||
background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(27, 36, 48, 0.12);
|
||||
max-height: 320px; overflow-y: auto; display: none;
|
||||
}
|
||||
.suggestions.open { display: block; }
|
||||
.suggestion {
|
||||
display: flex; gap: 12px; align-items: baseline;
|
||||
padding: 10px 14px; cursor: pointer; border: 0; width: 100%;
|
||||
background: transparent; font: inherit; text-align: left;
|
||||
}
|
||||
.suggestion + .suggestion { border-top: 1px solid var(--canvas); }
|
||||
.suggestion.active, .suggestion:hover { background: #E9F3F3; }
|
||||
.suggestion .cnum { font-family: var(--mono); font-size: 0.85rem; color: var(--accent); white-space: nowrap; }
|
||||
.suggestion-empty { padding: 12px 14px; color: var(--ink-soft); font-size: 0.9rem; }
|
||||
|
||||
/* Gewaehlter Kunde als Chip */
|
||||
.customer-chip {
|
||||
display: none; align-items: center; gap: 12px;
|
||||
background: #E9F3F3; border: 1px solid var(--accent);
|
||||
border-radius: 8px; padding: 12px 14px;
|
||||
}
|
||||
.customer-chip.visible { display: flex; }
|
||||
.customer-chip .cnum { font-family: var(--mono); font-weight: 600; color: var(--accent); }
|
||||
.customer-chip .cname { flex: 1; font-weight: 600; }
|
||||
.customer-chip button {
|
||||
border: 0; background: transparent; color: var(--ink-soft);
|
||||
font: inherit; font-size: 0.85rem; cursor: pointer; text-decoration: underline;
|
||||
}
|
||||
|
||||
.actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
|
||||
.submit {
|
||||
font: inherit; font-weight: 650; color: #fff; background: var(--accent);
|
||||
border: 0; border-radius: 8px; padding: 11px 22px; cursor: pointer;
|
||||
}
|
||||
.submit:hover { background: #0B6362; }
|
||||
.submit:disabled { background: var(--line); color: var(--ink-soft); cursor: not-allowed; }
|
||||
|
||||
.feedback { margin-top: 14px; padding: 12px 14px; border-radius: 8px; font-size: 0.92rem; display: none; }
|
||||
.feedback.error { display: block; background: #FBEAE9; color: var(--bad); border: 1px solid #EBC4C1; }
|
||||
.feedback.success { display: block; background: #E8F3EC; color: var(--ok); border: 1px solid #BFDEC9; }
|
||||
.feedback a { color: inherit; font-weight: 650; }
|
||||
.feedback .mono { font-family: var(--mono); }
|
||||
|
||||
footer { margin-top: 20px; font-size: 0.8rem; color: var(--ink-soft); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<header>
|
||||
<h1>Service-Ticket anlegen</h1>
|
||||
<p>Zuerst den Kunden waehlen, dann das Anliegen erfassen. Das Ticket landet direkt in Redmine.</p>
|
||||
</header>
|
||||
|
||||
<section class="step" id="stepCustomer">
|
||||
<div class="step-label"><span class="num">1</span> Kunde</div>
|
||||
|
||||
<div class="search-wrap" id="searchWrap">
|
||||
<label for="customerSearch">Kundennummer oder Firmenname</label>
|
||||
<input type="text" id="customerSearch" autocomplete="off" role="combobox"
|
||||
aria-expanded="false" aria-controls="suggestions"
|
||||
placeholder="z. B. K-10042 oder Mueller">
|
||||
<div class="suggestions" id="suggestions" role="listbox"></div>
|
||||
</div>
|
||||
|
||||
<div class="customer-chip" id="customerChip">
|
||||
<span class="cnum" id="chipNumber"></span>
|
||||
<span class="cname" id="chipName"></span>
|
||||
<button type="button" id="chipReset">Aendern</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="step" id="stepIssue" data-disabled="true">
|
||||
<div class="step-label"><span class="num">2</span> Anliegen</div>
|
||||
|
||||
<label for="subject">Betreff</label>
|
||||
<input type="text" id="subject" maxlength="200" placeholder="Kurze Zusammenfassung der Stoerung">
|
||||
|
||||
<label for="description">Beschreibung</label>
|
||||
<textarea id="description" placeholder="Was ist passiert? Fehlermeldungen, betroffene Systeme, Ansprechpartner ..."></textarea>
|
||||
|
||||
<div class="actions">
|
||||
<button type="button" class="submit" id="submitButton" disabled>Ticket anlegen</button>
|
||||
</div>
|
||||
<div class="feedback" id="feedback"></div>
|
||||
</section>
|
||||
|
||||
<footer>Der Kundenbezug wird serverseitig gegen die Stammdaten geprueft, bevor das Ticket erstellt wird.</footer>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
const searchInput = document.getElementById("customerSearch");
|
||||
const searchWrap = document.getElementById("searchWrap");
|
||||
const suggestionsBox = document.getElementById("suggestions");
|
||||
const customerChip = document.getElementById("customerChip");
|
||||
const chipNumber = document.getElementById("chipNumber");
|
||||
const chipName = document.getElementById("chipName");
|
||||
const chipReset = document.getElementById("chipReset");
|
||||
const stepIssue = document.getElementById("stepIssue");
|
||||
const subjectInput = document.getElementById("subject");
|
||||
const descriptionInput = document.getElementById("description");
|
||||
const submitButton = document.getElementById("submitButton");
|
||||
const feedback = document.getElementById("feedback");
|
||||
|
||||
let selectedCustomer = null;
|
||||
let currentResults = [];
|
||||
let activeIndex = -1;
|
||||
let debounceTimer = null;
|
||||
|
||||
function updateSubmitState() {
|
||||
const subjectOk = subjectInput.value.trim().length >= 5;
|
||||
submitButton.disabled = !(selectedCustomer && subjectOk);
|
||||
}
|
||||
|
||||
function closeSuggestions() {
|
||||
suggestionsBox.classList.remove("open");
|
||||
searchInput.setAttribute("aria-expanded", "false");
|
||||
activeIndex = -1;
|
||||
}
|
||||
|
||||
function renderSuggestions() {
|
||||
suggestionsBox.innerHTML = "";
|
||||
if (currentResults.length === 0) {
|
||||
const empty = document.createElement("div");
|
||||
empty.className = "suggestion-empty";
|
||||
empty.textContent = "Kein Kunde gefunden. Nummer und Schreibweise pruefen.";
|
||||
suggestionsBox.appendChild(empty);
|
||||
} else {
|
||||
currentResults.forEach((customer, index) => {
|
||||
const item = document.createElement("button");
|
||||
item.type = "button";
|
||||
item.className = index === activeIndex ? "suggestion active" : "suggestion";
|
||||
item.setAttribute("role", "option");
|
||||
item.innerHTML = "";
|
||||
const numberSpan = document.createElement("span");
|
||||
numberSpan.className = "cnum";
|
||||
numberSpan.textContent = customer.number;
|
||||
const nameSpan = document.createElement("span");
|
||||
nameSpan.textContent = customer.name;
|
||||
item.appendChild(numberSpan);
|
||||
item.appendChild(nameSpan);
|
||||
item.addEventListener("click", () => selectCustomer(customer));
|
||||
suggestionsBox.appendChild(item);
|
||||
});
|
||||
}
|
||||
suggestionsBox.classList.add("open");
|
||||
searchInput.setAttribute("aria-expanded", "true");
|
||||
}
|
||||
|
||||
async function runSearch(query) {
|
||||
try {
|
||||
const response = await fetch("/api/customers?search=" + encodeURIComponent(query));
|
||||
const payload = await response.json();
|
||||
currentResults = payload.results;
|
||||
activeIndex = currentResults.length > 0 ? 0 : -1;
|
||||
renderSuggestions();
|
||||
} catch (error) {
|
||||
currentResults = [];
|
||||
renderSuggestions();
|
||||
}
|
||||
}
|
||||
|
||||
function selectCustomer(customer) {
|
||||
selectedCustomer = customer;
|
||||
chipNumber.textContent = customer.number;
|
||||
chipName.textContent = customer.name;
|
||||
customerChip.classList.add("visible");
|
||||
searchWrap.style.display = "none";
|
||||
closeSuggestions();
|
||||
stepIssue.dataset.disabled = "false";
|
||||
updateSubmitState();
|
||||
subjectInput.focus();
|
||||
}
|
||||
|
||||
function resetCustomer() {
|
||||
selectedCustomer = null;
|
||||
customerChip.classList.remove("visible");
|
||||
searchWrap.style.display = "";
|
||||
searchInput.value = "";
|
||||
stepIssue.dataset.disabled = "true";
|
||||
updateSubmitState();
|
||||
searchInput.focus();
|
||||
}
|
||||
|
||||
searchInput.addEventListener("input", () => {
|
||||
const query = searchInput.value.trim();
|
||||
clearTimeout(debounceTimer);
|
||||
if (query.length < 2) { closeSuggestions(); return; }
|
||||
debounceTimer = setTimeout(() => runSearch(query), 200);
|
||||
});
|
||||
|
||||
searchInput.addEventListener("keydown", (event) => {
|
||||
const isOpen = suggestionsBox.classList.contains("open");
|
||||
if (event.key === "ArrowDown" && isOpen) {
|
||||
event.preventDefault();
|
||||
activeIndex = Math.min(activeIndex + 1, currentResults.length - 1);
|
||||
renderSuggestions();
|
||||
} else if (event.key === "ArrowUp" && isOpen) {
|
||||
event.preventDefault();
|
||||
activeIndex = Math.max(activeIndex - 1, 0);
|
||||
renderSuggestions();
|
||||
} else if (event.key === "Enter" && isOpen && activeIndex >= 0) {
|
||||
event.preventDefault();
|
||||
selectCustomer(currentResults[activeIndex]);
|
||||
} else if (event.key === "Escape") {
|
||||
closeSuggestions();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchWrap.contains(event.target)) { closeSuggestions(); }
|
||||
});
|
||||
|
||||
chipReset.addEventListener("click", resetCustomer);
|
||||
subjectInput.addEventListener("input", updateSubmitState);
|
||||
|
||||
submitButton.addEventListener("click", async () => {
|
||||
feedback.className = "feedback";
|
||||
submitButton.disabled = true;
|
||||
submitButton.textContent = "Wird angelegt ...";
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/tickets", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
customerNumber: selectedCustomer.number,
|
||||
subject: subjectInput.value,
|
||||
description: descriptionInput.value,
|
||||
}),
|
||||
});
|
||||
const payload = await response.json();
|
||||
|
||||
if (response.status === 201) {
|
||||
const dryRunHint = payload.dryRun ? " (Trockenlauf, nicht wirklich in Redmine angelegt)" : "";
|
||||
feedback.className = "feedback success";
|
||||
feedback.innerHTML = "Ticket <a class=\"mono\" href=\"" + payload.issueUrl + "\" target=\"_blank\" rel=\"noopener\">#" + payload.issueId + "</a> fuer <span class=\"mono\">" + payload.customer.number + "</span> angelegt." + dryRunHint;
|
||||
subjectInput.value = "";
|
||||
descriptionInput.value = "";
|
||||
} else {
|
||||
feedback.className = "feedback error";
|
||||
feedback.textContent = payload.error || "Unbekannter Fehler beim Anlegen des Tickets.";
|
||||
}
|
||||
} catch (error) {
|
||||
feedback.className = "feedback error";
|
||||
feedback.textContent = "Server nicht erreichbar. Bitte spaeter erneut versuchen.";
|
||||
} finally {
|
||||
submitButton.textContent = "Ticket anlegen";
|
||||
updateSubmitState();
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user