Simulation für Handfach-Prozess.
Wie schon zuvor in Artikelinfo wird hier auf einer Ebene gearbeitet. Tabs sind hier nicht nötig. Das Eingabe/Scanfeld muss stets aktiv bleiben, jeder neue Scan erfolgt in diesem Feld. Die größte Änderung im Vergleich zur jetzigen Version in Datenfunk wird sein, dass man neben der EAN/Bestellnummer/Transport-Barcode auch den Barcode der Zugangsliste des Wareneingangs scannen kann. Im Idle-Zustand – wo keine Auswahl/Scan getroffen wurde – soll der Button unten ein Zurück-Button sein, der wieder ins Datenfunk-Hauptmenü führt. Wie auch in allen anderen Modulen soll auch eine Texteingabe möglich sein, wobei keine Unterscheidung zwischen Groß/Kleinschreibung erfolgt und entweder die EAN oder die Bestellnummer in Form von VERLAG/1234 eingegeben werden kann.
Beispiele: 5119615375 oder 6000057435
In beiden Beispielen werden ausschließlich die noch offenen Lageraufträge (NE/TP) gelistet, bereits abgeschlossene mit Status AB werden ausgeblendet. Innerhalb der Liste
sind die einzelnen Artikel auswählbar. Die Liste erscheint im Card-Layout, um Fehlklicks auf dem Touchscreen zu vermeiden. Falls die Liste länger wird, ist sie scrollbar.
Der Abbrechen-Button soll in seiner Position fixiert sein. Das Abbrechen führt im Gegensatz
zu Zurück nur wieder in den Ausgangszustand von Handfach-Einlagerung zurück und neue Scans werden erwartet.
Beispiel: CLAUDI/87604
Folgt hier ein Scan/Eingabe, dann soll die Darstellung wie auch in allen anderen Modulen der .css Definition folgen. Zusätzlich soll die Herkunft darunter noch dargestellt werden.
Die Information ist minimalistisch gewählt, jedoch wird direkt vor dem Ziel-Balken ein kompaktes Raster eingeblendet, das die Kennzahlen Vormerker, Verkauf und Silo-Auftrag anzeigt. Dieses Raster ist oben und unten durch horizontale Linien sauber abgetrennt.
Ein Ziel-Eingabefeld erscheint, das den Barcode des zum Artikel gehörenden Lagerplatzes erwartet.
Dies kann mit den in Schritt 2 gezeigten Lagerorten der Test-Sidebar simuliert werden – was dann auch zur akustischen und optischen Signalisierung des Erfolgs / Fehlers führt. Dabei ändert
sich die Farbe des angezeigten Ziel-Lagerorts von Schwarz auf Grün, der Text innerhalb dieser Anzeige springt von Ziel-Lagerort auf VERBUCHT – dazu gibt es auch noch ein
akustisches Positivsignal.
Timeouts: Die Verzögerung zur erneuten Freigabe beträgt 0,8 Sekunden (Positiv). Bei falscher Zielverbuchung wird die Anzeige rot und es wird das erneute Scannen des richtigen Lagerplatzes erwartet. Die Verzögerung hier beträgt 1 Sekunde.
Beispiel: RAND/34123
Hier wird eine Liste mehrerer Lageraufträge angezeigt (z.B. bei Teilübernahmen). Es ist entscheidend, dass die Herkunft (z.B. NA 9920) deutlich fett dargestellt wird,
um Fehlverbuchungen zu vermeiden. In diesem speziellen Multi-Fall wird das Card-Layout um die Herkunfts-Info ergänzt, während es bei Standard-Listen für maximale Übersichtlichkeit reduziert bleibt.
Beispiel: RECL/1
RECL/1 stellt einen Artikel ohne Lagerauftrag dar. In diesem Fall soll das optisch durch ein rotes Warnfeld deutlich dargestellt werden. Zusätzlich erfolgt eine chronologische Auflistung der letzten abgeschlossenen Lageraufträge (AB).
Dies ermöglicht dem Mitarbeiter sofort zu sehen, ob der Auftrag bereits erledigt wurde.
Reihung: Datum/Uhrzeit, Menge, Herkunft-ID (H-ID), Lagerplatz und Mitarbeiter-ID. Die Anzeige setzt sich nach 5 Sekunden automatisch zurück.
Dieses CSS definiert ausschließlich das Hauptfenster (die interaktive Applikation ohne Sidebars). Es beinhaltet die ergonomischen Card-Listen, das Daten-Raster, die Eingabefelder und die Feedback-Zustände (Green/Red Flash).
/* ==========================================================================
Handfach Einlagerung - Core UI Blueprint (Hauptfenster)
Konzept: Touch-Ergonomie & Akustik-Visuelles Feedback
========================================================================== */
/* --- APP WRAPPER --- */
/* Der Hauptcontainer für die Applikation, im Produktivbetrieb match_parent / 100% */
.ef-container {
width: 450px; height: 850px;
background-color: #f4f4f4;
display: flex; flex-direction: column;
border: 1px solid #ccc; border-radius: 8px; overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
/* --- SEARCH & SCAN FIELD --- */
/* Das oberste Scanfeld bleibt stets sichtbar und aktiv */
.ef-search-container {
padding: 12px 15px; background: white; border-bottom: 1px solid #ddd;
}
.ef-search-container input {
width: 100%; padding: 12px 15px; font-size: 16px;
border: 2px solid #1a5b8e; border-radius: 6px; box-sizing: border-box;
outline: none;
}
/* --- CONTENT AREA --- */
/* Scrollbarer Bereich für Listen und Detailansichten. Flex: 1 drückt den Button nach unten */
.ef-content-area {
flex: 1; padding: 15px; display: flex; flex-direction: column; overflow-y: auto;
}
.ef-dynamic-content { flex: 1; }
/* --- TOUCH-CARDS (LISTEN-ANSICHT) --- */
/* Ergonomische, große Klickflächen für Touchscreens */
.ef-list-container { display: flex; flex-direction: column; gap: 12px; }
.ef-list-item {
padding: 15px 12px; background: #fff; cursor: pointer;
border: 1px solid #ccc; border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
transition: all 0.2s ease;
}
/* Visuelles Feedback beim Antippen einer Card */
.ef-list-item:active { transform: scale(0.98); background: #e0e0e0; }
.ef-list-header { display: flex; justify-content: space-between; font-weight: 700; color: #1a5b8e; font-size: 16px; }
.ef-list-sub { font-size: 15px; color: #333; font-weight: 700; line-height: 1.3; margin-top: 4px; }
/* --- DATEN-RASTER (VORMERKER, VERKAUF, SILO-AUFTRAG) --- */
/* Kompaktes 3-Spalten-Layout über der Ziel-Box */
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; font-size: 15px; gap: 5px; margin-bottom: 5px; }
.grid-3 div { margin-bottom: 8px; }
hr { border: 0; border-top: 1px solid #ccc; margin: 15px 0; }
/* --- TARGET SCAN BOX (EINLAGERUNGS-PROZESS) --- */
/* Zeigt das zu scannende Zielregal an und fungiert als Statusanzeige */
.ef-target-box {
background-color: #0b1d2e; color: white; text-align: center;
padding: 20px; font-size: 28px; font-weight: 700; border-radius: 8px;
margin: 15px 0; transition: background-color 0.2s;
}
.ef-target-label { font-size: 12px; font-weight: 700; color: #ccc; text-transform: uppercase; margin-bottom: 5px; }
/* Das Scanfeld für den Regalbarcode */
.ef-input-active {
width: 100%; padding: 12px; font-size: 18px; text-align: center;
border: 2px solid #ffca28; border-radius: 6px; box-sizing: border-box;
}
/* --- ERROR & HISTORY (KEIN OFFENER AUFTRAG) --- */
.ef-error-box {
background-color: #c62828; color: white; padding: 15px; border-radius: 8px;
text-align: center; margin-bottom: 15px;
}
/* Kompakte Tabelle für die Anzeige der letzten 5 Einlagerungen */
.ef-history-table {
width: 100%; border-collapse: collapse; font-size: 11px;
background: white; color: #333; border: 1px solid #ddd;
}
.ef-history-table th { background: #eee; padding: 8px 4px; border-bottom: 2px solid #ccc; text-align: left; }
.ef-history-table td { padding: 8px 4px; border-bottom: 1px solid #eee; }
/* --- BUTTONS --- */
/* Fixierter Button am unteren Rand (Zurück / Abbrechen) */
.btn-yellow {
background-color: #ffca28; color: #000; font-weight: 700; font-size: 18px;
width: 100%; padding: 18px; border: none; border-radius: 6px;
cursor: pointer; margin-top: auto;
}
/* --- FEEDBACK STATES (Timeouts gesteuert via JavaScript) --- */
.state-success { background-color: #2e7d32 !important; } /* Timeout: 0.8s -> Reload */
.state-error { background-color: #c62828 !important; } /* Timeout: 1.0s -> Flash -> Reset Input */
/* --- TYPOGRAFIE & HILFSKLASSEN --- */
.text-bold { font-weight: 700; }
.text-xl { font-size: 24px; text-align: center; margin-bottom: 5px; }
.text-lg { font-size: 18px; text-align: center; color: #555; }
.badge-green { background: #43a047; color: white; padding: 2px 10px; border-radius: 12px; }
.menge-row { font-size: 22px; font-weight: 700; text-align: center; margin: 10px 0; }