feat: publish unlisted GTIN tool
This commit is contained in:
desfoto automation
998
site/gtin/js/app.js
Normal file
998
site/gtin/js/app.js
Normal file
@@ -0,0 +1,998 @@
|
||||
/**
|
||||
* Oberflaeche, Scanmodus, Zwischenablage, Verlauf, Wake Lock und PWA.
|
||||
*
|
||||
* Die fachliche Logik liegt in gtin.js, die Codierung in barcode.js. Diese
|
||||
* Datei verdrahtet beides mit dem DOM.
|
||||
*/
|
||||
|
||||
import { eingabeStatus, erzeugeGtin, FEHLERTEXT, nurZiffern } from './gtin.js';
|
||||
import { barcodeGroesse, erzeugeSvgMarkup, kodiereEan } from './barcode.js';
|
||||
import { schritt, istBestaetigungstaste, zaehlerText, zerlegeEingabe } from './liste.js';
|
||||
|
||||
/** @typedef {import('./gtin.js').GtinErgebnis} GtinErgebnis */
|
||||
|
||||
/** @typedef {{ artikel: string, gtin: string, typ: string }} VerlaufEintrag */
|
||||
/** @typedef {{ released: boolean, release: () => Promise<void>, addEventListener: (typ: 'release', hoerer: () => void) => void }} WakeLockLike */
|
||||
|
||||
const VERLAUF_SCHLUESSEL = 'desfoto.gtin.verlauf.v1';
|
||||
const VERLAUF_MAX = 20;
|
||||
const EINGABE_VERZOEGERUNG_MS = 450;
|
||||
const VERLAUF_VERZOEGERUNG_MS = 2500;
|
||||
const SCAN_HINWEIS_MS = 7000;
|
||||
const TOAST_MS = 1800;
|
||||
/** Anteil der Bildschirmhoehe, den der Barcode in der Normalansicht nutzen darf. */
|
||||
const BALKENHOEHE_ANTEIL = 0.45;
|
||||
/** Untergrenze, damit der Barcode auch auf kurzen Anzeigen scanbar bleibt. */
|
||||
const BALKENHOEHE_MIN_PX = 180;
|
||||
|
||||
/**
|
||||
* @param {string} auswahl
|
||||
* @returns {HTMLElement}
|
||||
*/
|
||||
function element(auswahl) {
|
||||
const gefunden = document.querySelector(auswahl);
|
||||
if (!gefunden) throw new Error(`Pflichtelement fehlt: ${auswahl}`);
|
||||
return /** @type {HTMLElement} */ (gefunden);
|
||||
}
|
||||
|
||||
const input = /** @type {HTMLInputElement} */ (element('#artikelnummer'));
|
||||
const fehlerText = element('#fehler');
|
||||
const ergebnisBereich = element('#ergebnis');
|
||||
const gtinTyp = element('#gtin-typ');
|
||||
const gtinKnopf = element('#gtin');
|
||||
const barcodeBehaelter = element('#barcode');
|
||||
const grossKnopf = element('#gross');
|
||||
const kopierenKnopf = element('#kopieren');
|
||||
const neuKnopf = element('#neu');
|
||||
const verlaufBereich = element('#verlauf');
|
||||
const verlaufListe = element('#verlauf-liste');
|
||||
const verlaufLoeschenKnopf = element('#verlauf-loeschen');
|
||||
const installierenKnopf = element('#installieren');
|
||||
const iosHinweis = element('#ios-hinweis');
|
||||
const offlineHinweis = element('#offline-hinweis');
|
||||
const scanBereich = element('#scan');
|
||||
const scanInnen = element('#scan-innen');
|
||||
const scanBarcodeBehaelter = element('#scan-barcode');
|
||||
const scanGtin = element('#scan-gtin');
|
||||
const scanHinweis = element('#scan-hinweis');
|
||||
const scanZurueckKnopf = element('#scan-zurueck');
|
||||
const toast = element('#toast');
|
||||
const appBereich = element('.app');
|
||||
const listeOeffnenKnopf = element('#liste-oeffnen');
|
||||
const listeBereich = element('#liste');
|
||||
const listeForm = /** @type {HTMLFormElement} */ (element('#liste-form'));
|
||||
const listeErfassen = element('#liste-erfassen');
|
||||
const listeAnzeige = element('#liste-anzeige');
|
||||
const listeEingabe = /** @type {HTMLInputElement} */ (element('#liste-eingabe'));
|
||||
const listeHinzufuegenKnopf = /** @type {HTMLButtonElement} */ (element('#liste-hinzufuegen'));
|
||||
const listeFehler = element('#liste-fehler');
|
||||
const listeEintraege = element('#liste-eintraege');
|
||||
const listeLeer = element('#liste-leer');
|
||||
const listeAnzahl = element('#liste-anzahl');
|
||||
const listeWeiterKnopf = /** @type {HTMLButtonElement} */ (element('#liste-weiter'));
|
||||
const listeSchliessenKnopf = element('#liste-schliessen');
|
||||
const listeZaehler = element('#liste-zaehler');
|
||||
const listeBuehne = element('#liste-buehne');
|
||||
const listeMitte = element('#liste-mitte');
|
||||
const listeBarcodeBehaelter = element('#liste-barcode');
|
||||
const listeGtin = element('#liste-gtin');
|
||||
const listeArtikel = element('#liste-artikel');
|
||||
const listeZurueckKnopf = element('#liste-zurueck');
|
||||
const listeVorKnopf = element('#liste-vor');
|
||||
const listeAendernKnopf = element('#liste-aendern');
|
||||
const listeBeendenKnopf = element('#liste-beenden');
|
||||
|
||||
/** @type {GtinErgebnis | null} */
|
||||
let aktuell = null;
|
||||
/** @type {GtinErgebnis[]} */
|
||||
const liste = [];
|
||||
let listeAktiv = false;
|
||||
let listeAnzeigeAktiv = false;
|
||||
let listeIndex = 0;
|
||||
/** @type {number | undefined} */
|
||||
let eingabeTimer;
|
||||
/** @type {number | undefined} */
|
||||
let verlaufTimer;
|
||||
/** @type {number | undefined} */
|
||||
let toastTimer;
|
||||
/** @type {number | undefined} */
|
||||
let scanHinweisTimer;
|
||||
/** @type {number | undefined} */
|
||||
let groessenTimer;
|
||||
/** @type {WakeLockLike | null} */
|
||||
let wakeLock = null;
|
||||
let scanAktiv = false;
|
||||
/** @type {any} */
|
||||
let installationsAnfrage = null;
|
||||
|
||||
/* ---------------------------------------------------------------- Verlauf -- */
|
||||
|
||||
/**
|
||||
* @param {unknown} eintrag
|
||||
* @returns {eintrag is VerlaufEintrag}
|
||||
*/
|
||||
function istVerlaufEintrag(eintrag) {
|
||||
if (typeof eintrag !== 'object' || eintrag === null) return false;
|
||||
const kandidat = /** @type {Record<string, unknown>} */ (eintrag);
|
||||
return (
|
||||
typeof kandidat.artikel === 'string' &&
|
||||
typeof kandidat.gtin === 'string' &&
|
||||
typeof kandidat.typ === 'string'
|
||||
);
|
||||
}
|
||||
|
||||
/** @returns {VerlaufEintrag[]} */
|
||||
function ladeVerlauf() {
|
||||
try {
|
||||
const roh = window.localStorage.getItem(VERLAUF_SCHLUESSEL);
|
||||
if (!roh) return [];
|
||||
const daten = /** @type {unknown} */ (JSON.parse(roh));
|
||||
if (!Array.isArray(daten)) return [];
|
||||
return daten.filter(istVerlaufEintrag).slice(0, VERLAUF_MAX);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/** @param {VerlaufEintrag[]} eintraege */
|
||||
function speichereVerlaufListe(eintraege) {
|
||||
try {
|
||||
window.localStorage.setItem(VERLAUF_SCHLUESSEL, JSON.stringify(eintraege));
|
||||
} catch {
|
||||
/* Speicher gesperrt oder voll: der Verlauf ist optional. */
|
||||
}
|
||||
}
|
||||
|
||||
/** @param {GtinErgebnis} ergebnis */
|
||||
function merkeImVerlauf(ergebnis) {
|
||||
const eintrag = { artikel: ergebnis.eingabe, gtin: ergebnis.gtin, typ: ergebnis.typ };
|
||||
const bisher = ladeVerlauf().filter((vorhanden) => vorhanden.gtin !== eintrag.gtin);
|
||||
speichereVerlaufListe([eintrag, ...bisher].slice(0, VERLAUF_MAX));
|
||||
rendereVerlauf();
|
||||
}
|
||||
|
||||
function rendereVerlauf() {
|
||||
const eintraege = ladeVerlauf();
|
||||
verlaufListe.replaceChildren();
|
||||
for (const eintrag of eintraege) {
|
||||
const punkt = document.createElement('li');
|
||||
const knopf = document.createElement('button');
|
||||
knopf.type = 'button';
|
||||
knopf.className = 'verlauf-eintrag';
|
||||
knopf.dataset.artikel = eintrag.artikel;
|
||||
knopf.dataset.gtin = eintrag.gtin;
|
||||
|
||||
const artikel = document.createElement('span');
|
||||
artikel.className = 'verlauf-artikel';
|
||||
artikel.textContent = eintrag.artikel;
|
||||
|
||||
const pfeil = document.createElement('span');
|
||||
pfeil.className = 'verlauf-pfeil';
|
||||
pfeil.setAttribute('aria-hidden', 'true');
|
||||
pfeil.textContent = '→';
|
||||
|
||||
const nummer = document.createElement('span');
|
||||
nummer.className = 'verlauf-gtin';
|
||||
nummer.textContent = eintrag.gtin;
|
||||
|
||||
knopf.append(artikel, pfeil, nummer);
|
||||
knopf.setAttribute(
|
||||
'aria-label',
|
||||
`Artikelnummer ${eintrag.artikel}, GTIN ${eintrag.gtin} erneut anzeigen`,
|
||||
);
|
||||
punkt.append(knopf);
|
||||
verlaufListe.append(punkt);
|
||||
}
|
||||
verlaufBereich.hidden = eintraege.length === 0;
|
||||
}
|
||||
|
||||
function leereVerlauf() {
|
||||
speichereVerlaufListe([]);
|
||||
rendereVerlauf();
|
||||
zeigeToast('Verlauf gelöscht');
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------- Anzeige -- */
|
||||
|
||||
function versteckeFehler() {
|
||||
fehlerText.hidden = true;
|
||||
fehlerText.textContent = '';
|
||||
}
|
||||
|
||||
function zeigeFehler() {
|
||||
fehlerText.textContent = FEHLERTEXT;
|
||||
fehlerText.hidden = false;
|
||||
}
|
||||
|
||||
function versteckeErgebnis() {
|
||||
aktuell = null;
|
||||
ergebnisBereich.hidden = true;
|
||||
barcodeBehaelter.replaceChildren();
|
||||
stoppeVerlaufTimer();
|
||||
}
|
||||
|
||||
/** Verfuegbare Hoehe fuer den Barcode in der Normalansicht. */
|
||||
function normalHoehe() {
|
||||
return Math.max(
|
||||
BALKENHOEHE_MIN_PX,
|
||||
Math.round(window.innerHeight * BALKENHOEHE_ANTEIL),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} behaelter
|
||||
* @param {GtinErgebnis} ergebnis
|
||||
* @param {'normal' | 'scan'} modus
|
||||
*/
|
||||
function rendereBarcode(behaelter, ergebnis, modus) {
|
||||
const symbol = kodiereEan(ergebnis.gtin);
|
||||
const gesamtModule =
|
||||
symbol.quietzone.links + symbol.module + symbol.quietzone.rechts;
|
||||
const gemessen = behaelter.getBoundingClientRect().width || behaelter.clientWidth;
|
||||
const verfuegbareBreite = Math.max(1, Math.round(gemessen || 320));
|
||||
// Im Scanmodus bestimmt die gemessene Flaeche die Groesse (Querformat: volle
|
||||
// Breite und Hoehe). In der Normalansicht deckelt ein Anteil der
|
||||
// Bildschirmhoehe den Barcode, damit die wichtigsten Bedienelemente ohne
|
||||
// Scrollen sichtbar bleiben.
|
||||
const verfuegbareHoehe =
|
||||
modus === 'scan'
|
||||
? Math.max(1, Math.round(behaelter.clientHeight || normalHoehe()))
|
||||
: normalHoehe();
|
||||
const { modulbreite: modulbreitePx, balkenhoeheModule } = barcodeGroesse(
|
||||
verfuegbareBreite,
|
||||
verfuegbareHoehe,
|
||||
gesamtModule,
|
||||
);
|
||||
const svg = erzeugeSvgMarkup(ergebnis.gtin, {
|
||||
modulbreite: modulbreitePx,
|
||||
balkenhoeheModule,
|
||||
});
|
||||
behaelter.innerHTML = svg.markup;
|
||||
}
|
||||
|
||||
function stoppeVerlaufTimer() {
|
||||
if (verlaufTimer !== undefined) {
|
||||
window.clearTimeout(verlaufTimer);
|
||||
verlaufTimer = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/** Uebernimmt das aktuelle Ergebnis in den Verlauf, sobald es bestaetigt wirkt. */
|
||||
function merkeAktuellesNachKurzerPause() {
|
||||
stoppeVerlaufTimer();
|
||||
verlaufTimer = window.setTimeout(() => {
|
||||
verlaufTimer = undefined;
|
||||
if (aktuell) merkeImVerlauf(aktuell);
|
||||
}, VERLAUF_VERZOEGERUNG_MS);
|
||||
}
|
||||
|
||||
/** @param {GtinErgebnis} ergebnis */
|
||||
function zeigeErgebnis(ergebnis) {
|
||||
aktuell = ergebnis;
|
||||
versteckeFehler();
|
||||
gtinTyp.textContent = ergebnis.typ === 'EAN-8' ? 'GTIN-8' : 'GTIN-13';
|
||||
gtinKnopf.textContent = ergebnis.gtin;
|
||||
ergebnisBereich.hidden = false;
|
||||
rendereBarcode(barcodeBehaelter, ergebnis, 'normal');
|
||||
merkeAktuellesNachKurzerPause();
|
||||
}
|
||||
|
||||
function pruefeUndZeige() {
|
||||
const status = eingabeStatus(input.value);
|
||||
if (status === 'leer') {
|
||||
versteckeFehler();
|
||||
versteckeErgebnis();
|
||||
return;
|
||||
}
|
||||
// Auch eine zu kurze Nummer ist am Ende ungueltig. Der Fehler erscheint erst
|
||||
// nach der Entprellung, waehrend des Tippens also nicht.
|
||||
if (status === 'unvollstaendig' || status === 'ungueltig') {
|
||||
versteckeErgebnis();
|
||||
zeigeFehler();
|
||||
return;
|
||||
}
|
||||
const ergebnis = erzeugeGtin(input.value);
|
||||
if (!ergebnis) {
|
||||
versteckeErgebnis();
|
||||
zeigeFehler();
|
||||
return;
|
||||
}
|
||||
zeigeErgebnis(ergebnis);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- Eingabe -- */
|
||||
|
||||
function stoppeEingabeTimer() {
|
||||
if (eingabeTimer !== undefined) {
|
||||
window.clearTimeout(eingabeTimer);
|
||||
eingabeTimer = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function beiEingabe() {
|
||||
const sauber = nurZiffern(input.value);
|
||||
if (sauber !== input.value) {
|
||||
input.value = sauber;
|
||||
input.setSelectionRange(sauber.length, sauber.length);
|
||||
}
|
||||
stoppeEingabeTimer();
|
||||
if (sauber.length === 0) {
|
||||
versteckeFehler();
|
||||
versteckeErgebnis();
|
||||
return;
|
||||
}
|
||||
if (sauber.length === 7) {
|
||||
pruefeUndZeige();
|
||||
return;
|
||||
}
|
||||
eingabeTimer = window.setTimeout(() => {
|
||||
eingabeTimer = undefined;
|
||||
pruefeUndZeige();
|
||||
}, EINGABE_VERZOEGERUNG_MS);
|
||||
}
|
||||
|
||||
/**
|
||||
* Uebernimmt eine Artikelnummer in das Eingabefeld.
|
||||
*
|
||||
* @param {string} artikel
|
||||
* @param {{ fokussieren?: boolean }} [optionen] `fokussieren: false` laesst den
|
||||
* Fokus, wo er ist: Ein Tipp auf den Verlauf soll den Barcode zeigen und auf
|
||||
* Mobilgeraeten nicht die Tastatur ueber das Ergebnis legen.
|
||||
*/
|
||||
function uebernimmArtikel(artikel, optionen = {}) {
|
||||
input.value = artikel;
|
||||
stoppeEingabeTimer();
|
||||
pruefeUndZeige();
|
||||
if (optionen.fokussieren ?? true) input.focus();
|
||||
// Der Verlauf steht unter dem Ergebnis: Nach dem Uebernehmen dorthin
|
||||
// scrollen, damit der erzeugte Barcode sichtbar ist.
|
||||
ergebnisBereich.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------- Feld -- */
|
||||
|
||||
/**
|
||||
* Markiert die komplette Artikelnummer.
|
||||
*
|
||||
* Ein Tipp auf das Feld waehlt damit die alte Nummer aus: Die naechste Ziffer
|
||||
* ueberschreibt sie direkt, ohne dass vorher geloescht werden muss.
|
||||
*/
|
||||
function markiereEingabe() {
|
||||
if (input.value === '') {
|
||||
versteckeFehler();
|
||||
return;
|
||||
}
|
||||
input.setSelectionRange(0, input.value.length);
|
||||
}
|
||||
|
||||
/** true, wenn das Feld beim letzten Zeigerdruck bereits den Fokus hatte. */
|
||||
let feldWarFokussiert = false;
|
||||
|
||||
function neueNummer() {
|
||||
stoppeEingabeTimer();
|
||||
input.value = '';
|
||||
versteckeFehler();
|
||||
versteckeErgebnis();
|
||||
input.focus();
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------ Scanmodus -- */
|
||||
|
||||
/** @returns {{ request: (typ: 'screen') => Promise<WakeLockLike> } | null} */
|
||||
function wakeLockApi() {
|
||||
const api = /** @type {any} */ (navigator).wakeLock;
|
||||
return api && typeof api.request === 'function' ? api : null;
|
||||
}
|
||||
|
||||
function starteWakeLock() {
|
||||
const api = wakeLockApi();
|
||||
if (!api || wakeLock) return;
|
||||
api
|
||||
.request('screen')
|
||||
.then((sentinel) => {
|
||||
wakeLock = sentinel;
|
||||
sentinel.addEventListener('release', () => {
|
||||
if (wakeLock === sentinel) wakeLock = null;
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
wakeLock = null;
|
||||
});
|
||||
}
|
||||
|
||||
function stoppeWakeLock() {
|
||||
const sentinel = wakeLock;
|
||||
wakeLock = null;
|
||||
if (sentinel) sentinel.release().catch(() => undefined);
|
||||
}
|
||||
|
||||
function oeffneScan() {
|
||||
if (!aktuell || scanAktiv) return;
|
||||
scanAktiv = true;
|
||||
scanGtin.textContent = aktuell.gtin;
|
||||
scanBereich.hidden = false;
|
||||
document.body.classList.add('scan-offen');
|
||||
// Der Rest der Oberflaeche wird unerreichbar: Tastatur und Hilfstechnik
|
||||
// bleiben im Scanmodus, weil nur noch der Dialog bedienbar ist.
|
||||
appBereich.toggleAttribute('inert', true);
|
||||
rendereBarcode(scanBarcodeBehaelter, aktuell, 'scan');
|
||||
scanInnen.focus();
|
||||
starteWakeLock();
|
||||
scanHinweisTimer = window.setTimeout(() => {
|
||||
scanHinweisTimer = undefined;
|
||||
if (scanAktiv) scanHinweis.hidden = false;
|
||||
}, SCAN_HINWEIS_MS);
|
||||
merkeImVerlauf(aktuell);
|
||||
stoppeVerlaufTimer();
|
||||
}
|
||||
|
||||
function schliesseScan() {
|
||||
if (!scanAktiv) return;
|
||||
scanAktiv = false;
|
||||
scanBereich.hidden = true;
|
||||
scanHinweis.hidden = true;
|
||||
appBereich.toggleAttribute('inert', false);
|
||||
document.body.classList.remove('scan-offen');
|
||||
if (scanHinweisTimer !== undefined) {
|
||||
window.clearTimeout(scanHinweisTimer);
|
||||
scanHinweisTimer = undefined;
|
||||
}
|
||||
stoppeWakeLock();
|
||||
grossKnopf.focus();
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------ Listenmodus -- */
|
||||
|
||||
/*
|
||||
* Optionaler Modus: Die Liste liegt als kleiner Link unter dem Werkzeug. Sie
|
||||
* wird in zwei Schritten bedient - Nummern bestaetigen, dann mit Pfeilen,
|
||||
* Pfeiltasten oder Wischen GTIN und Barcode nacheinander anzeigen. Beide
|
||||
* Schritte enden ueber die kleinen Links zurueck in die Einzelansicht.
|
||||
*
|
||||
* Bestaetigt wird ueber das Formular: Auf einem Telefon hat das Numpad keine
|
||||
* Eingabetaste, seine Bestaetigungstaste loest aber das submit-Ereignis aus.
|
||||
* Zusaetzlich liegt unmittelbar neben dem Feld eine sichtbare Schaltflaeche,
|
||||
* damit die Bestaetigung auf keinem Geraet von der Tastatur abhaengt.
|
||||
*/
|
||||
|
||||
function versteckeListenFehler() {
|
||||
listeFehler.hidden = true;
|
||||
listeFehler.textContent = '';
|
||||
}
|
||||
|
||||
function zeigeListenFehler() {
|
||||
listeFehler.textContent = FEHLERTEXT;
|
||||
listeFehler.hidden = false;
|
||||
}
|
||||
|
||||
function rendereListe() {
|
||||
listeEintraege.replaceChildren();
|
||||
liste.forEach((eintrag, index) => {
|
||||
const punkt = document.createElement('li');
|
||||
punkt.className = 'liste-eintrag';
|
||||
|
||||
const nummer = document.createElement('span');
|
||||
nummer.className = 'liste-nr';
|
||||
nummer.textContent = eintrag.eingabe;
|
||||
|
||||
const gtin = document.createElement('span');
|
||||
gtin.className = 'liste-gtin';
|
||||
gtin.textContent = eintrag.gtin;
|
||||
|
||||
const weg = document.createElement('button');
|
||||
weg.type = 'button';
|
||||
weg.className = 'liste-weg';
|
||||
weg.dataset.index = String(index);
|
||||
weg.setAttribute('aria-label', `Artikelnummer ${eintrag.eingabe} aus der Liste entfernen`);
|
||||
weg.textContent = '×';
|
||||
|
||||
punkt.append(nummer, gtin, weg);
|
||||
listeEintraege.append(punkt);
|
||||
});
|
||||
|
||||
listeAnzahl.textContent = String(liste.length);
|
||||
listeLeer.hidden = liste.length > 0;
|
||||
listeWeiterKnopf.disabled = liste.length === 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Uebernimmt die Eingabe in die Liste.
|
||||
*
|
||||
* Alles, was keine Ziffer ist, trennt Nummern: So laesst sich eine ganze Spalte
|
||||
* in einem Zug einfuegen. Die Bestaetigung im wirklich leeren Feld startet
|
||||
* direkt die Anzeige, damit die Erfassung ohne Klick auf "Weiter" endet. Steht
|
||||
* dagegen Text ohne eine einzige Ziffer im Feld, ist das ein Fehler und kein
|
||||
* Start.
|
||||
*/
|
||||
function uebernimmListeneingabe() {
|
||||
const roh = listeEingabe.value;
|
||||
const gruppen = zerlegeEingabe(roh);
|
||||
if (gruppen.length === 0) {
|
||||
if (roh.trim() !== '') {
|
||||
zeigeListenFehler();
|
||||
return;
|
||||
}
|
||||
versteckeListenFehler();
|
||||
if (liste.length > 0) starteListenAnzeige(0);
|
||||
return;
|
||||
}
|
||||
let uebernommen = 0;
|
||||
let verworfen = 0;
|
||||
for (const gruppe of gruppen) {
|
||||
const ergebnis = erzeugeGtin(gruppe);
|
||||
if (ergebnis) {
|
||||
liste.push(ergebnis);
|
||||
uebernommen += 1;
|
||||
} else {
|
||||
verworfen += 1;
|
||||
}
|
||||
}
|
||||
if (uebernommen > 0) {
|
||||
listeEingabe.value = '';
|
||||
rendereListe();
|
||||
listeEintraege.scrollTop = listeEintraege.scrollHeight;
|
||||
// Der Fokus bleibt im Feld: Die Bildschirmtastatur bleibt offen, und die
|
||||
// naechste Nummer laesst sich ohne einen weiteren Tipp eingeben.
|
||||
listeEingabe.focus();
|
||||
}
|
||||
if (verworfen > 0) zeigeListenFehler();
|
||||
else versteckeListenFehler();
|
||||
}
|
||||
|
||||
/**
|
||||
* Bestaetigt die Erfassung ueber das Formular.
|
||||
*
|
||||
* Ein Numpad auf dem Telefon bestaetigt mit seinem eigenen Schluessel
|
||||
* (Haekchen, "Fertig", "Los"); er loest das submit-Ereignis aus. Hier laufen
|
||||
* deshalb Bestaetigungstaste, eingefuegte Spalte und Klick auf "Hinzufuegen"
|
||||
* zusammen.
|
||||
*
|
||||
* @param {SubmitEvent} ereignis
|
||||
*/
|
||||
function beiListenAbsenden(ereignis) {
|
||||
ereignis.preventDefault();
|
||||
// Ein leerer Aufruf ueber die Schaltflaeche springt nicht in die Anzeige:
|
||||
// Wer "Hinzufuegen" tippt, will etwas hinzufuegen. Die Bestaetigungstaste im
|
||||
// leeren Feld bleibt dagegen der schnelle Weg nach vorn.
|
||||
if (ereignis.submitter === listeHinzufuegenKnopf && listeEingabe.value.trim() === '') {
|
||||
listeEingabe.focus();
|
||||
return;
|
||||
}
|
||||
uebernimmListeneingabe();
|
||||
}
|
||||
|
||||
/** Entfernt einen Eintrag; mit der Tastatur bleibt der Fokus in der Liste.
|
||||
*
|
||||
* @param {number} index
|
||||
* @param {boolean} ueberTastatur
|
||||
*/
|
||||
function entferneListenEintrag(index, ueberTastatur) {
|
||||
if (!Number.isInteger(index) || index < 0 || index >= liste.length) return;
|
||||
const [entfernt] = liste.splice(index, 1);
|
||||
rendereListe();
|
||||
zeigeToast(`Artikelnummer ${entfernt.eingabe} entfernt`);
|
||||
if (ueberTastatur) {
|
||||
const naechster = listeEintraege.querySelector(
|
||||
`.liste-weg[data-index="${String(Math.min(index, liste.length - 1))}"]`,
|
||||
);
|
||||
if (naechster instanceof HTMLElement) {
|
||||
naechster.focus();
|
||||
return;
|
||||
}
|
||||
}
|
||||
listeEingabe.focus();
|
||||
}
|
||||
|
||||
/** Zeigt die Richtung des Schritts: der neue Barcode kommt von der Seite.
|
||||
*
|
||||
* @param {number} richtung
|
||||
*/
|
||||
function animiereSchritt(richtung) {
|
||||
listeMitte.classList.remove('liste-schritt-vor', 'liste-schritt-zurueck');
|
||||
// Reflow erzwingt den Neustart der Animation beim schnellen Blaettern.
|
||||
void listeMitte.offsetWidth;
|
||||
listeMitte.classList.add(richtung < 0 ? 'liste-schritt-zurueck' : 'liste-schritt-vor');
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {boolean} animiert
|
||||
* @param {number} [richtung]
|
||||
*/
|
||||
function zeigeListenEintrag(animiert, richtung = 0) {
|
||||
const eintrag = liste[listeIndex];
|
||||
if (!eintrag) return;
|
||||
listeZaehler.textContent = zaehlerText(listeIndex, liste.length);
|
||||
listeGtin.textContent = eintrag.gtin;
|
||||
listeArtikel.textContent = `Artikelnummer ${eintrag.eingabe}`;
|
||||
rendereBarcode(listeBarcodeBehaelter, eintrag, 'scan');
|
||||
if (animiert) animiereSchritt(richtung);
|
||||
}
|
||||
|
||||
/** @param {number} index */
|
||||
function starteListenAnzeige(index) {
|
||||
if (listeAnzeigeAktiv || liste.length === 0) return;
|
||||
listeAnzeigeAktiv = true;
|
||||
listeIndex = schritt(index, 0, liste.length);
|
||||
listeErfassen.hidden = true;
|
||||
listeAnzeige.hidden = false;
|
||||
zeigeListenEintrag(false);
|
||||
listeMitte.focus();
|
||||
starteWakeLock();
|
||||
}
|
||||
|
||||
/** @param {number} richtung */
|
||||
function blaettere(richtung) {
|
||||
if (!listeAnzeigeAktiv || liste.length === 0) return;
|
||||
listeIndex = schritt(listeIndex, richtung, liste.length);
|
||||
zeigeListenEintrag(true, richtung);
|
||||
}
|
||||
|
||||
/** @param {number} index */
|
||||
function springeZu(index) {
|
||||
if (!listeAnzeigeAktiv || liste.length === 0) return;
|
||||
const neu = schritt(index, 0, liste.length);
|
||||
if (neu === listeIndex) return;
|
||||
const richtung = neu > listeIndex ? 1 : -1;
|
||||
listeIndex = neu;
|
||||
zeigeListenEintrag(true, richtung);
|
||||
}
|
||||
|
||||
/** Zurueck zum Erfassen: Die Liste bleibt erhalten und wird nur bearbeitet. */
|
||||
function zeigeListeErfassen() {
|
||||
listeAnzeigeAktiv = false;
|
||||
listeAnzeige.hidden = true;
|
||||
listeErfassen.hidden = false;
|
||||
stoppeWakeLock();
|
||||
versteckeListenFehler();
|
||||
listeEingabe.value = '';
|
||||
rendereListe();
|
||||
listeEingabe.focus();
|
||||
}
|
||||
|
||||
function oeffneListe() {
|
||||
if (listeAktiv) return;
|
||||
listeAktiv = true;
|
||||
listeBereich.hidden = false;
|
||||
document.body.classList.add('liste-offen');
|
||||
// Der Rest der Oberflaeche wird unerreichbar, solange die Liste offen ist.
|
||||
appBereich.toggleAttribute('inert', true);
|
||||
zeigeListeErfassen();
|
||||
}
|
||||
|
||||
function schliesseListe() {
|
||||
if (!listeAktiv) return;
|
||||
listeAktiv = false;
|
||||
listeAnzeigeAktiv = false;
|
||||
listeBereich.hidden = true;
|
||||
listeErfassen.hidden = false;
|
||||
listeAnzeige.hidden = true;
|
||||
document.body.classList.remove('liste-offen');
|
||||
appBereich.toggleAttribute('inert', false);
|
||||
stoppeWakeLock();
|
||||
listeOeffnenKnopf.focus();
|
||||
}
|
||||
|
||||
/** @type {{ id: number, x: number, y: number } | null} */
|
||||
let geste = null;
|
||||
|
||||
/** @param {PointerEvent} ereignis */
|
||||
function beendeGeste(ereignis) {
|
||||
window.removeEventListener('pointerup', beendeGeste);
|
||||
window.removeEventListener('pointercancel', beendeGeste);
|
||||
const start = geste;
|
||||
geste = null;
|
||||
if (!start || start.id !== ereignis.pointerId || ereignis.type !== 'pointerup') return;
|
||||
const dx = ereignis.clientX - start.x;
|
||||
const dy = ereignis.clientY - start.y;
|
||||
// Erst ab 40 px und nur bei klarer Richtung: sonst waere jeder Tipp ein Blatt.
|
||||
if (Math.abs(dx) < 40 || Math.abs(dx) <= Math.abs(dy)) return;
|
||||
blaettere(dx < 0 ? 1 : -1);
|
||||
}
|
||||
|
||||
/** @param {PointerEvent} ereignis */
|
||||
function starteGeste(ereignis) {
|
||||
if (!listeAnzeigeAktiv || !ereignis.isPrimary) return;
|
||||
// Ein Zug, der auf einem Pfeil beginnt, ist ein Klick auf den Pfeil.
|
||||
if (ereignis.target instanceof Element && ereignis.target.closest('button')) return;
|
||||
geste = { id: ereignis.pointerId, x: ereignis.clientX, y: ereignis.clientY };
|
||||
window.addEventListener('pointerup', beendeGeste);
|
||||
window.addEventListener('pointercancel', beendeGeste);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------ Zwischenablage -- */
|
||||
/** @param {string} text @returns {boolean} */
|
||||
function kopiereFallback(text) {
|
||||
const hilfe = document.createElement('textarea');
|
||||
hilfe.value = text;
|
||||
hilfe.setAttribute('readonly', '');
|
||||
hilfe.className = 'kopier-hilfe';
|
||||
document.body.append(hilfe);
|
||||
hilfe.select();
|
||||
let erfolgreich = false;
|
||||
try {
|
||||
erfolgreich = document.execCommand('copy');
|
||||
} catch {
|
||||
erfolgreich = false;
|
||||
}
|
||||
hilfe.remove();
|
||||
return erfolgreich;
|
||||
}
|
||||
|
||||
async function kopiereGtin() {
|
||||
if (!aktuell) return;
|
||||
const text = aktuell.gtin;
|
||||
let erfolgreich = false;
|
||||
try {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
erfolgreich = true;
|
||||
}
|
||||
} catch {
|
||||
erfolgreich = false;
|
||||
}
|
||||
if (!erfolgreich) erfolgreich = kopiereFallback(text);
|
||||
zeigeToast(erfolgreich ? 'GTIN kopiert' : 'Kopieren nicht möglich');
|
||||
merkeImVerlauf(aktuell);
|
||||
stoppeVerlaufTimer();
|
||||
}
|
||||
|
||||
/** @param {string} text */
|
||||
function zeigeToast(text) {
|
||||
toast.textContent = text;
|
||||
toast.hidden = false;
|
||||
if (toastTimer !== undefined) window.clearTimeout(toastTimer);
|
||||
toastTimer = window.setTimeout(() => {
|
||||
toastTimer = undefined;
|
||||
toast.hidden = true;
|
||||
}, TOAST_MS);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ PWA -- */
|
||||
|
||||
function registriereServiceWorker() {
|
||||
if (!('serviceWorker' in navigator)) return;
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker
|
||||
.register('./sw.js', { scope: './' })
|
||||
.catch((fehler) => window.console.warn('Service Worker nicht registriert.', fehler));
|
||||
});
|
||||
}
|
||||
|
||||
function aktualisiereOfflineHinweis() {
|
||||
offlineHinweis.hidden = navigator.onLine !== false;
|
||||
}
|
||||
|
||||
function zeigeInstallationsmoeglichkeit() {
|
||||
const standalone =
|
||||
window.matchMedia('(display-mode: standalone)').matches ||
|
||||
/** @type {any} */ (navigator).standalone === true;
|
||||
const istIos =
|
||||
/iPad|iPhone|iPod/.test(navigator.userAgent) ||
|
||||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
|
||||
iosHinweis.hidden = !istIos || standalone;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------- Ereignisse -- */
|
||||
|
||||
function verbindeEreignisse() {
|
||||
input.addEventListener('input', beiEingabe);
|
||||
// Fokussieren markiert den gesamten Inhalt (direktes Ueberschreiben), auch
|
||||
// wenn der Browser das Caret nach dem Tippen selbst setzt.
|
||||
input.addEventListener('pointerdown', () => {
|
||||
feldWarFokussiert = document.activeElement === input;
|
||||
});
|
||||
input.addEventListener('focus', markiereEingabe);
|
||||
input.addEventListener('click', () => {
|
||||
if (!feldWarFokussiert) markiereEingabe();
|
||||
});
|
||||
input.addEventListener('blur', () => {
|
||||
feldWarFokussiert = false;
|
||||
});
|
||||
|
||||
gtinKnopf.addEventListener('click', () => void kopiereGtin());
|
||||
kopierenKnopf.addEventListener('click', () => void kopiereGtin());
|
||||
grossKnopf.addEventListener('click', oeffneScan);
|
||||
neuKnopf.addEventListener('click', neueNummer);
|
||||
scanZurueckKnopf.addEventListener('click', schliesseScan);
|
||||
verlaufLoeschenKnopf.addEventListener('click', leereVerlauf);
|
||||
|
||||
listeOeffnenKnopf.addEventListener('click', oeffneListe);
|
||||
listeSchliessenKnopf.addEventListener('click', schliesseListe);
|
||||
listeBeendenKnopf.addEventListener('click', schliesseListe);
|
||||
listeAendernKnopf.addEventListener('click', zeigeListeErfassen);
|
||||
listeWeiterKnopf.addEventListener('click', () => {
|
||||
// Eine noch nicht bestaetigte Nummer wird beim Wechsel uebernommen.
|
||||
if (listeEingabe.value.trim() !== '') {
|
||||
uebernimmListeneingabe();
|
||||
// Eine abgelehnte Nummer haelt die Erfassung offen: Der Fehler muss
|
||||
// gelesen werden koennen, bevor es weitergeht.
|
||||
if (!listeFehler.hidden) return;
|
||||
}
|
||||
// Ein leerer Aufruf mit alter Meldung im Feld raeumt sie weg und startet.
|
||||
versteckeListenFehler();
|
||||
starteListenAnzeige(0);
|
||||
});
|
||||
listeZurueckKnopf.addEventListener('click', () => blaettere(-1));
|
||||
listeVorKnopf.addEventListener('click', () => blaettere(1));
|
||||
listeBuehne.addEventListener('pointerdown', starteGeste);
|
||||
listeMitte.addEventListener('animationend', () => {
|
||||
listeMitte.classList.remove('liste-schritt-vor', 'liste-schritt-zurueck');
|
||||
});
|
||||
listeEingabe.addEventListener('keydown', (ereignis) => {
|
||||
if (!istBestaetigungstaste(ereignis)) return;
|
||||
// Selbst bestaetigen und die Standardaktion unterdruecken: Sonst kaeme
|
||||
// dieselbe Nummer ueber Tastendruck und submit zweimal an.
|
||||
ereignis.preventDefault();
|
||||
uebernimmListeneingabe();
|
||||
});
|
||||
listeForm.addEventListener('submit', beiListenAbsenden);
|
||||
// Die Schaltflaeche darf den Fokus nicht aus dem Feld ziehen: So bleibt die
|
||||
// Bildschirmtastatur zwischen zwei Nummern offen.
|
||||
listeHinzufuegenKnopf.addEventListener('pointerdown', (ereignis) => {
|
||||
ereignis.preventDefault();
|
||||
});
|
||||
listeEingabe.addEventListener('input', () => {
|
||||
if (!listeFehler.hidden) versteckeListenFehler();
|
||||
});
|
||||
listeEintraege.addEventListener('click', (ereignis) => {
|
||||
const ziel = ereignis.target instanceof Element ? ereignis.target.closest('.liste-weg') : null;
|
||||
if (!(ziel instanceof HTMLElement)) return;
|
||||
entferneListenEintrag(Number(ziel.dataset.index), ereignis.detail === 0);
|
||||
});
|
||||
|
||||
verlaufListe.addEventListener('click', (ereignis) => {
|
||||
const ziel = ereignis.target instanceof Element ? ereignis.target.closest('.verlauf-eintrag') : null;
|
||||
if (!(ziel instanceof HTMLElement)) return;
|
||||
const artikel = ziel.dataset.artikel ?? '';
|
||||
if (artikel) {
|
||||
// Mit der Tastatur aktiviert (Enter/Leertaste): Fokus ins Feld, damit
|
||||
// direkt weitergetippt werden kann. Mit dem Finger bleibt der Fokus
|
||||
// ausserhalb, sonst verdeckt die Bildschirmtastatur den Barcode.
|
||||
uebernimmArtikel(artikel, { fokussieren: ereignis.detail === 0 });
|
||||
}
|
||||
});
|
||||
|
||||
installierenKnopf.addEventListener('click', () => {
|
||||
if (!installationsAnfrage) return;
|
||||
installationsAnfrage.prompt();
|
||||
Promise.resolve(installationsAnfrage.userChoice).catch(() => undefined);
|
||||
installationsAnfrage = null;
|
||||
installierenKnopf.hidden = true;
|
||||
});
|
||||
|
||||
window.addEventListener('beforeinstallprompt', (ereignis) => {
|
||||
ereignis.preventDefault();
|
||||
installationsAnfrage = ereignis;
|
||||
installierenKnopf.hidden = false;
|
||||
});
|
||||
window.addEventListener('appinstalled', () => {
|
||||
installationsAnfrage = null;
|
||||
installierenKnopf.hidden = true;
|
||||
iosHinweis.hidden = true;
|
||||
zeigeToast('App installiert');
|
||||
});
|
||||
|
||||
window.addEventListener('online', aktualisiereOfflineHinweis);
|
||||
window.addEventListener('offline', aktualisiereOfflineHinweis);
|
||||
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.visibilityState === 'visible' && (scanAktiv || listeAnzeigeAktiv)) {
|
||||
starteWakeLock();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if (groessenTimer !== undefined) window.clearTimeout(groessenTimer);
|
||||
groessenTimer = window.setTimeout(() => {
|
||||
groessenTimer = undefined;
|
||||
if (aktuell) {
|
||||
rendereBarcode(barcodeBehaelter, aktuell, 'normal');
|
||||
if (scanAktiv) rendereBarcode(scanBarcodeBehaelter, aktuell, 'scan');
|
||||
}
|
||||
if (listeAnzeigeAktiv) {
|
||||
const eintrag = liste[listeIndex];
|
||||
if (eintrag) rendereBarcode(listeBarcodeBehaelter, eintrag, 'scan');
|
||||
}
|
||||
}, 150);
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (ereignis) => {
|
||||
if (listeAktiv) {
|
||||
if (ereignis.key === 'Escape') {
|
||||
ereignis.preventDefault();
|
||||
schliesseListe();
|
||||
return;
|
||||
}
|
||||
if (!listeAnzeigeAktiv) return;
|
||||
switch (ereignis.key) {
|
||||
case 'ArrowRight':
|
||||
case 'ArrowDown':
|
||||
case 'PageDown':
|
||||
ereignis.preventDefault();
|
||||
blaettere(1);
|
||||
return;
|
||||
case 'ArrowLeft':
|
||||
case 'ArrowUp':
|
||||
case 'PageUp':
|
||||
ereignis.preventDefault();
|
||||
blaettere(-1);
|
||||
return;
|
||||
case 'Home':
|
||||
ereignis.preventDefault();
|
||||
springeZu(0);
|
||||
return;
|
||||
case 'End':
|
||||
ereignis.preventDefault();
|
||||
springeZu(liste.length - 1);
|
||||
return;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (scanAktiv) {
|
||||
if (ereignis.key === 'Escape') {
|
||||
ereignis.preventDefault();
|
||||
schliesseScan();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const ziel = ereignis.target;
|
||||
const imEingabefeld = ziel === input;
|
||||
// Auf Schaltflaechen und Links gilt die native Tastenaktivierung.
|
||||
const aufBedienelement =
|
||||
ziel instanceof HTMLElement &&
|
||||
!imEingabefeld &&
|
||||
(ziel.tagName === 'BUTTON' || ziel.tagName === 'A' || ziel.isContentEditable);
|
||||
|
||||
if (ereignis.key === 'Enter') {
|
||||
if (imEingabefeld) {
|
||||
ereignis.preventDefault();
|
||||
stoppeEingabeTimer();
|
||||
if (!aktuell || aktuell.eingabe !== nurZiffern(input.value)) pruefeUndZeige();
|
||||
if (aktuell) oeffneScan();
|
||||
} else if (!aufBedienelement && aktuell) {
|
||||
ereignis.preventDefault();
|
||||
oeffneScan();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (ereignis.key === 'Escape') {
|
||||
if (!aufBedienelement && aktuell) {
|
||||
ereignis.preventDefault();
|
||||
neueNummer();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (ereignis.key === 'Backspace' && !aufBedienelement && !imEingabefeld && aktuell) {
|
||||
ereignis.preventDefault();
|
||||
neueNummer();
|
||||
return;
|
||||
}
|
||||
|
||||
const kopiertastenkombination =
|
||||
(ereignis.ctrlKey || ereignis.metaKey) && ereignis.key.toLowerCase() === 'c';
|
||||
if (kopiertastenkombination && aktuell) {
|
||||
const auswahl = window.getSelection()?.toString() ?? '';
|
||||
const eingabeAuswahl =
|
||||
input.selectionStart !== null && input.selectionStart !== input.selectionEnd;
|
||||
if (auswahl === '' && !eingabeAuswahl) {
|
||||
ereignis.preventDefault();
|
||||
void kopiereGtin();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function starte() {
|
||||
verbindeEreignisse();
|
||||
rendereVerlauf();
|
||||
aktualisiereOfflineHinweis();
|
||||
zeigeInstallationsmoeglichkeit();
|
||||
registriereServiceWorker();
|
||||
}
|
||||
|
||||
starte();
|
||||
Reference in New Issue
Block a user