Planboard für Frachtlogistik

Der Kunde: TransportMaster
Sektor: Landwirtschaftliche Verkehrsmittel
Typ: Spezifische Webanwendung
Stack: Vanilla JavaScript, HTML5, CSS3

Eine maßgeschneiderte Logistikplanungsanwendung für ein niederländisches Agrarverkehrsunternehmen, die es Planern ermöglicht, Fahrerrouten zu planen, Frachtbestellungen zu verwalten und Anweisungen direkt an Bordflottencomputer zu drücken alles aus einer einzigen browserbasierten Schnittstelle.

Die Herausforderung

Das Unternehmen ist spezialisiert auf Tierfutter und Massenfrachttransport. Ihre Planer verwalteten den wöchentlichen Fahrerplan wer wohin fährt, was mit sich bringt, an welchem Tag mit einer Mischung aus Tabellenblättern und handschriftlichen Notizen. Bestellungen wurden getrennt vom Zeitplan verfolgt, und Änderungen mussten den Fahrern manuell mitgeteilt werden.

Das Ziel war es, alles in einem speziell gebauten Planungsbrett zu konsolidieren: eine Live-Übersicht über die gesamte Woche, in der Bestellungen dem richtigen Fahrer und dem richtigen Tag zugeordnet werden können, und Fahreranweisungen direkt mit einem einzigen Klick an die Kabinenflottencomputer gesendet werden können.

Entwurf

Die Schnittstelle ist um ein Wochennetz strukturiert: Fahrer auf der vertikalen Achse, Montag bis Samstag auf der horizontalen Achse.

Ein einheitliches, farbcodiertes Statussystem gibt sofortiges visuelles Feedback auf jede Bestellkarte:

• GL Geladen (geladen) Gelb
• OL Unbelastet (unladen) Rot
• Alt Dubbelset Blau
• NEW Neue Ordnung Grau
• GETRAGEN Verhaftet Grün

Das Design-System ist vollständig mit CSS benutzerdefinierten Eigenschaften gebaut ein strukturiertes Set von Design-Token, die Abstand, Farbe, Typografie, Schatten und Animationszeit abdecken. Dies gewährleistet visuelle Konsistenz über alle Komponenten, ohne sich auf ein externes Framework zu verlassen. Zwei Bilddichte-Modus (kompakte und erweiterte) ermöglichen Planern den Wechsel zwischen einem hochrangigen Überblick und einem detaillierteren Kartenlayout, je nach Bildschirmgröße und Aufgabe.

Eigenschaften

• Zieh- und Dropplanung Bestellungen werden von der Seitenleiste direkt in jede Fahrer-/Tag-Zelle des Platzes gezogen.
• Nächste Woche-Navigation Die Planer bewegen sich über Wochen hin und her. Die Tagessumme Kilometer pro Fahrer pro Tag wird automatisch aktualisiert.
• Bestell-Detail-Panel Wenn Sie auf eine Bestellung klicken, öffnet sich ein Slide-In-Panel mit Kundendaten, Adressen, Gewicht, Preisgestaltung, Palettenverwaltung und Fahrernotizen.
• Webfleet-Integration Fahreranweisungen können über die Webfleet API mit einem Klick pro Bestellung direkt an Bord-Flotte-Computer angezeigt und gesendet werden.
• Ordnungsmanagement Vollständige Erstellung, Bearbeitung und Löschung für Frachtbestellungen.
• Fahrerverwaltung Fügen Sie Treiber hinzu, bearbeiten und entfernen. Jeder Treiber hat eine einzigartige Farbe zur einfachen Identifizierung auf dem Schild.
• Durchsuchen und Filtern Die Seitenleiste unterstützt Echtzeitsuche nach Kundennamen, Auftragsnummer oder Artikel, mit Filtern, um die Liste nach Statusgruppe zu verengt.
• Mitteilungen zu Toast Nicht-Blocking-Feedback-Nachrichten bestätigen jede Aktion (Speichern, Senden, Löschen) ohne den Planungs-Workflow zu unterbrechen.

Entwicklung

Die Anwendung ist in reiner Vanille-JavaScript mit nativen ES6-Modulen geschrieben keine Build-Tools, keine Bündler, keine Drittanbieterbibliotheken. Dies war eine bewusste Wahl: Das Ergebnis ist eine leichte, pflegbare Codebase mit null Abhängigkeitsrisiko und kein Upgrade-Laufband.

Die Architektur trennt die Anliegen in fokussierte Module, die jeweils eine einzige Verantwortung haben:

• Staatsmodul Alle Mutationen fließen an einem Ort durch, mit automatischer LocalStorage-Persistenz über Sitzungen hinweg.
• Veranstaltungsbus Ein leichtes Publish/Subscribe-System, mit dem Module kommunizieren können, ohne sich untereinander direkt zu importieren, wodurch jede Datei unabhängig getestet werden kann.
• API-Schicht Eine dünne Abstraktionsschicht wickelt alle Datenoperationen als Versprechen ein. Das Austausch der Scheindaten für echte Serveranrufe erfordert, dass nur diese eine Datei geändert wird.
• Anzeige-Module Separate Module behandeln das Bordnetz, die Seitenleiste, Modale, Karten, Ziehen und Ablegen, die Bestellansicht und die Treiberansicht ein Problem pro Datei.
• Design-Token Alle visuellen Werte (Farbe, Abstand, Radius, Schatten, Übergang) werden als CSS-Anpassungseigenschaften in einer einzelnen Variablendatei definiert, wodurch die Benutzeroberfläche konsistent und einfach zu aktualisieren ist.

Das Projekt wurde von Grund auf neu gebaut Ersetzen eines monolytischen 2.800-Zeilen-Ein-Datei-Prototypen in eine strukturierte, mehrfach-Datei-Architektur, die einfach zu erweitern und zu übergeben ist. Vollständige Entwickler-Dokumentation, einschließlich einer API-Referenz, wird neben der Anwendung versandt.

Technologie

HTML5, CSS3 benutzerdefinierte Eigenschaften, CSS Grid, Flexbox, Vanilla JavaScript ES6, Native ES Modules, Web Drag & Drop API, localStorage, Promises / asyncwait, Pub/Sub-Event Bus, Webfleet API.

Keine Frameworks, keine Bündler, keine externen Bibliotheken, die gesamte Anwendung läuft direkt im Browser, sodass sie einfach gehostet, bereitgestellt und gepflegt werden kann.

Das Ergebnis

Die Planer verfügen nun über ein Werkzeug, das den gesamten täglichen Workflow abdeckt: Neue Bestellungen einzuziehen, den Fahrern zuzuordnen, die Woche auf einen Blick zu überprüfen und Routenanweisungen an die Kabine zu senden, ohne zwischen Anwendungen oder Systemen zu wechseln.

Da die Codebase modular ist und die API-Schicht vollständig abstrahiert ist, ist die Anbindung der Anwendung an eine Backend-Datenbank oder die Erweiterung mit neuen Funktionen ein einfacher nächster Schritt, der nicht die bestehende Logik neu schreiben muss.