Klicke auf einen Eintrag, um den Scan zu simulieren.
Bitte Artikel oder Lagerplatz scannen.
Keine Zusatzdaten verfügbar.
Kein Lagerort gescannt bzw. keinem Artikel zugeordnet.
Die gesamte Bedienung des Datenfunks findet in einer Ebene statt. Die Trennung erfolgt mittels Tabs -
dieses Konzept ist auch in vielen anderen Modulen sichtbar
Wichtig: Groß- und Kleinschreibung wird automatisch korrigiert.
Die relevante .css ist am Ende dieser Sidebar eingefügt, was die Realisierung des Layouts erleichtern sollte.
Die für diese Demo verwendeten Fontgrößen und vor allem die Skalierung der Hauptbox sind nur Richtwerte und sind abhängig vom tatsächlich verfügbaren Platz am Scanner.
Im bestehenden Datenfunk gibt es eine Trennung des Handlings nach Artikel (EAN) und Lagerplatz -
künftig soll beides über das stets fokusierte Eingabefeld geschehen.
Das Layout soll künftig Farben und Kontraste viel stärker nutzen und einem Konzept folgend so wenig wie möglich und so viel wie notwendig an Informationen
anzeigen. Aus jedem Tab heraus soll ein erneutes Scannen eines Lagerplatzes oder Artikels den neuen Artikel/Lagerplatz mit dem Tab ARTIKEL öffnen -
d.h. das Eingabefeld soll stets aktiv bleiben.
Dies wurde im aktuellen Datenfunk nachträglich realisiert - siehe Jira
Am Beispiel SV/47132 sieht man die wichtigsten Informationen im Tab Artikel dargestellt mit klarer farblicher Abtrennung. Dieser Artikel weist zumindest
einen fehlenden Wert in den Autopsiedaten auf.
In diesem Fall soll wie dargestellt ein farblich klar wahrnehmbarer Warnhinweis angezeigt werden, dass eine Abmessung/Gewicht fehlt. Im Gegensatz dazu soll bei
vollständigen Autopsiedaten keine Positivmeldung angezeigt werden.
Vormerker sollen aus der Summe von Vormerker+Terminaufträgen ermittelt werden, Silo-Menge alle Bestände in den Silos und Verkauf wie bereits realisiert
im derzeitigen Datenfunk unter Artikelinfo.
Der Zurück-Button soll wieder in das Hauptmenü führen.
Entgegen der Realisierung im derzeitigen Datenfunk soll nicht mehr die EAN, sondern zwecks Lesbarkeit bei der Anzeige immer die ISBN benutzt werden.
MNR: ist die Meldenumer und linksbündig, rechtsbündig davon soll nur der Sektor angezeigt werden, die Ermittlung erfolgt evtl. aus VAS_TAB_VERLAG_LAGERBEREICH anhand der Firmennummer.
Darunter folgt die Darstellung der für den Artikel bekannten, offenen Lageraufträge (NE,TP) in Summe angezeigt nach Herkunft NA (Nachschub), WE (Wareneingang), UML (Umlagerung).
Eine Liste der letzten 5 Einlagerungen des Artikels folgt darunter - das beinhaltet nur abgeschlossene (AB) Lageraufträge.
Hier wird bewußt auf eine Platzierung eines Buttons verzichtet, wie auch im Tab Lagerort.
Lagerplatz, Belegung, Lagerart und Belegungsplan ist selbsterklärend - Anz. Artikel: gibt die auf dem Lagerplatz befindlichen, unterschiedlichen Artikel wieder. Das ist vor allem bei Multi-Fächern
relevant.
Die Möglichkeit einen Lagerplatz mit Menge 0 mittels des Buttons Austragen soll wie im derzeiten Datenfunk unter Artikelinfo realisiert werden, wobei der Button
erst als aktiv und nicht ausgegraut angezeigt wird, wenn die Voraussetzungen zur Löschung erfüllt sind
Nach dem Austragen soll eine kurze Meldung wie in der Demonstration dargestellt werden.
Dieser Artikel hat noch keinen Lagerplatz, deswegen wird als Standort der Sektor ermittelt, welcher evtl. aus VAS_TAB_VERLAG_LAGERBEREICH anhand der Firmennummer ausgelesen werden kann.
Wie bereits erwähnt liegt bei neuen Scans der Fokus im Tab Artikel. Beim Scan eines titelreinen Lagerplatzes - am Beispiel von 061302B002 wird die dort
liegende Lagereinheit dargestellt.
Bei Multi-Plätzen - 056801P100 und 061302B100 wird im Tab Artikel zunächst jede Lagereinheit, die auf diesem Lagerplatz liegt,
in einer Card-Liste dargestellt. Diese wurde für die Touch-Bedienung optimiert (große Trefferflächen, Abstände zwischen den Kacheln).
Die genauere Layout-Definition findet sich in der anschließenden .css
Die scrollbare Liste soll wiederum einen Aufruf der beinhaltenden Artikel ermöglichen und diese entsprechend den Artikeln auf titelreinen Handfächern darstellen.
Die folgenden CSS-Klassen definieren das Kern-Layout inkl. der neuen Touch-optimierten Card-Listen.
/* ==========================================================================
Wareninfo Scanner App - Core UI Blueprint
Konzept: Touch-Ergonomie (Card-Layout) & Flexbox-Struktur
========================================================================== */
/* --- BASE & WRAPPER --- */
body { font-family: 'Roboto', sans-serif; background-color: #e0e0e0; margin: 0; padding: 20px; }
.app-container {
width: 450px; height: 850px; /* Prod: match_parent / 100vh */
background-color: #f4f4f4;
display: flex; flex-direction: column;
border: 1px solid #ccc; border-radius: 8px; overflow: hidden;
}
/* --- HEADER & NAVIGATION --- */
.header { background-color: #1a5b8e; color: white; padding: 12px 15px; display: flex; justify-content: space-between; font-weight: 700; font-size: 18px; }
.search-container { padding: 8px 10px; background: white; border-bottom: 1px solid #ddd; }
.search-container input { width: 100%; padding: 10px 15px; font-size: 16px; border: 1px solid #999; border-radius: 4px; box-sizing: border-box; }
.tabs { display: flex; background: white; border-bottom: 2px solid #ddd; }
.tab { flex: 1; text-align: center; padding: 12px 0; font-weight: 700; font-size: 13px; color: #888; cursor: pointer; text-transform: uppercase; }
.tab.active { color: #1a5b8e; border-bottom: 4px solid #1a5b8e; }
/* --- CONTENT AREAS --- */
.content-area { flex: 1; display: flex; flex-direction: column; padding: 15px; background: #fff; overflow: hidden; }
.tab-content { display: none; flex-direction: column; height: 100%; }
.tab-content.active { display: flex; }
.dynamic-content { flex: 1; overflow-y: auto; margin-bottom: 15px; padding-right: 5px; }
/* --- TOUCH-OPTIMIZED CARD LISTS --- */
/* Verhindert Fehlklicks durch Abstände (Pufferzonen) zwischen Einträgen */
.list-container { border: none; background: transparent; }
.list-item {
padding: 15px 12px; background: #fff; cursor: pointer;
border: 1px solid #ccc; border-radius: 10px;
margin-bottom: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.08);
transition: all 0.2s ease;
}
.list-item:active { background: #e0e0e0; transform: scale(0.98); } /* Haptisches Feedback */
.list-item-header { display: flex; justify-content: space-between; font-weight: 700; color: #1a5b8e; font-size: 16px; margin-bottom: 6px; }
.list-item-sub { font-size: 14px; color: #555; line-height: 1.4; }
/* --- TYPO & DATA BLOCKS --- */
.text-bold { font-weight: 700; }
.text-xl { font-size: 32px; margin-bottom: 2px; }
.text-lg { font-size: 20px; margin-bottom: 15px; }
.standort-box { background-color: #0b1d2e; color: white; text-align: center; padding: 15px; font-size: 26px; font-weight: 700; border-radius: 8px; margin: 10px 0 20px 0; }
.standort-box-label { font-size: 12px; font-weight: 700; color: #ccc; text-transform: uppercase; margin-bottom: 4px; }
.badge-green { background-color: #43a047; color: white; border-radius: 24px; padding: 4px 14px; font-size: 24px; margin-left: 10px; }
.menge-container { text-align: center; margin: 24px 0; }
.menge-row { font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* --- ALERTS & BUTTONS --- */
.alert-green { background-color: #2e7d32; color: white; font-weight: 700; text-align: center; padding: 12px; border-radius: 6px; font-size: 16px; }
.alert-red { background-color: #c62828; color: white; font-weight: 700; text-align: center; padding: 10px; border-radius: 6px; margin-bottom: 15px; }
.btn-yellow { background-color: #ffca28; color: #000; font-weight: 700; font-size: 18px; width: 100%; padding: 15px; border: none; border-radius: 6px; cursor: pointer; }
.btn-disabled { background-color: #cccccc; color: #888888; font-weight: 700; font-size: 18px; width: 100%; padding: 15px; border: none; border-radius: 6px; cursor: not-allowed; }
/* Definition für die Historie-Tabelle in Zusatzdaten */
.history-table {
width: 100%;
border-collapse: collapse;
font-size: 11px;
background: #f9f9f9;
border: 1px solid #ddd;
margin-top: 5px;
}