Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Falko
|
b89dd1be80 | ||
|
Falko
|
a4d857fcec | ||
|
Falko
|
6a4c576bde | ||
|
Falko
|
95b2f252d4 |
+3
-1
@@ -5,8 +5,10 @@
|
||||
"type": "module",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"dev": "node --env-file=.env server.js & sleep 1 && xdg-open http://localhost:3000",
|
||||
"dev:dry": "node server.js & sleep 1 && xdg-open http://localhost:3000",
|
||||
"start": "node --env-file=.env server.js",
|
||||
"start:dry": "node server.js"
|
||||
"prod": "NODE_ENV=production node --env-file=.env server.js"
|
||||
},
|
||||
"engines": { "node": ">=20" },
|
||||
"dependencies": {
|
||||
|
||||
+6
-273
@@ -4,115 +4,13 @@
|
||||
<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>
|
||||
<link href="styles.css" rel="stylesheet">
|
||||
</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>
|
||||
<p>Zuerst den Kunden wählen, dann das Anliegen erfassen. Das Ticket landet direkt in Redmine.</p>
|
||||
</header>
|
||||
|
||||
<section class="step" id="stepCustomer">
|
||||
@@ -129,7 +27,7 @@
|
||||
<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>
|
||||
<button type="button" id="chipReset">Ändern</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -137,7 +35,7 @@
|
||||
<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">
|
||||
<input type="text" id="subject" maxlength="200" placeholder="Kurze Zusammenfassung der Störung">
|
||||
|
||||
<label for="description">Beschreibung</label>
|
||||
<textarea id="description" placeholder="Was ist passiert? Fehlermeldungen, betroffene Systeme, Ansprechpartner ..."></textarea>
|
||||
@@ -148,174 +46,9 @@
|
||||
<div class="feedback" id="feedback"></div>
|
||||
</section>
|
||||
|
||||
<footer>Der Kundenbezug wird serverseitig gegen die Stammdaten geprueft, bevor das Ticket erstellt wird.</footer>
|
||||
<footer>Der Kundenbezug wird serverseitig gegen die Stammdaten geprüft, 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>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+164
@@ -0,0 +1,164 @@
|
||||
(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 prüfen.";
|
||||
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 später erneut versuchen.";
|
||||
} finally {
|
||||
submitButton.textContent = "Ticket anlegen";
|
||||
updateSubmitState();
|
||||
}
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,276 @@
|
||||
: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);
|
||||
}
|
||||
@@ -16,7 +16,7 @@ const config = {
|
||||
customersFile: process.env.CUSTOMERS_FILE || path.join(__dirname, "data", "customers.csv"),
|
||||
};
|
||||
|
||||
// Ohne API-Key laeuft der Server im Trockenlauf: Tickets werden nur simuliert.
|
||||
// Ohne API-Key läuft der Server im Trockenlauf: Tickets werden nur simuliert.
|
||||
const dryRun = config.redmineApiKey === "";
|
||||
|
||||
// --- Kundenstammdaten laden (CSV: Kundennummer;Firmenname) ---
|
||||
@@ -97,7 +97,7 @@ const app = express();
|
||||
app.use(express.json());
|
||||
app.use(express.static(path.join(__dirname, "public")));
|
||||
|
||||
// GET /api/customers?search=... -> Trefferliste fuer das Autocomplete
|
||||
// GET /api/customers?search=... -> Trefferliste für das Autocomplete
|
||||
app.get("/api/customers", (request, response) => {
|
||||
const query = String(request.query.search || "").trim();
|
||||
if (query.length < 2) {
|
||||
@@ -113,7 +113,7 @@ app.post("/api/tickets", async (request, response) => {
|
||||
|
||||
const customer = customersByNumber.get(String(customerNumber || "").trim());
|
||||
if (!customer) {
|
||||
return response.status(422).json({ error: "Unbekannte Kundennummer. Bitte einen Kunden aus der Vorschlagsliste waehlen." });
|
||||
return response.status(422).json({ error: "Unbekannte Kundennummer. Bitte einen Kunden aus der Vorschlagsliste wählen." });
|
||||
}
|
||||
if (!subject || String(subject).trim().length < 5) {
|
||||
return response.status(422).json({ error: "Der Betreff muss mindestens 5 Zeichen lang sein." });
|
||||
@@ -150,5 +150,5 @@ app.use((error, request, response, next) => {
|
||||
|
||||
app.listen(config.port, () => {
|
||||
const mode = dryRun ? "TROCKENLAUF (kein REDMINE_API_KEY gesetzt, Tickets werden simuliert)" : `verbunden mit ${config.redmineUrl}`;
|
||||
console.log(`Ticket-Portal laeuft auf http://localhost:${config.port} - Modus: ${mode}`);
|
||||
console.log(`Ticket-Portal läuft auf http://localhost:${config.port} - Modus: ${mode}`);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user