Planboard: Planung für die Frachtlogistik

Kunde: TransportMaster
Branche: Agrartransport / Futtermittel
Typ: individuelle Webanwendung
Technologien: JavaScript ohne Framework, HTML5, CSS3

Eine individuell entwickelte Logistikplanungsanwendung für ein niederländisches Agrartransportunternehmen. Disponenten planen Fahrertouren, verwalten Frachtaufträge und senden Anweisungen direkt an die Bordcomputer der Fahrzeuge — über eine einzige browserbasierte Oberfläche.

Die Herausforderung

Das Unternehmen ist auf Futtermittel- und Schüttguttransporte spezialisiert. Seine Disponenten verwalteten den wöchentlichen Fahrerplan — wer an welchem Tag wohin fährt und was transportiert — mit Tabellen und handschriftlichen Notizen. Aufträge wurden getrennt vom Plan geführt, und Änderungen mussten den Fahrern manuell mitgeteilt werden.

Ziel war, alles auf einer eigenen digitalen Plantafel zusammenzuführen: eine aktuelle Wochenübersicht, in der Aufträge dem passenden Fahrer und Tag zugewiesen und Anweisungen mit einem Klick direkt an die Bordcomputer im Fahrerhaus gesendet werden können.

Design

Die Oberfläche basiert auf einem Wochenraster: Fahrer auf der vertikalen Achse, Montag bis Samstag auf der horizontalen. Disponenten sehen die ganze Woche auf einen Blick — welcher Fahrer wo eingeplant ist, wie viele Kilometer er an diesem Tag zurücklegt und welche Aufträge in der Seitenleiste noch nicht zugewiesen sind.

Ein einheitliches System farblich gekennzeichneter Status zeigt den Zustand jeder Auftragskarte unmittelbar an:

• GL — Geladen (beladen) — gelb
• OL — Ongeladen (unbeladen) — rot
• OLD — Dubbelset — blau
• NEW — Nieuwe order (neuer Auftrag) — grau
• DONE — Gereed (erledigt) — grün

Das Designsystem basiert vollständig auf CSS Custom Properties: einem strukturierten Satz von Designtokens für Abstände, Farben, Typografie, Schatten und Animationsdauer. Das schafft einheitliche Komponenten ohne externes Framework. Zwei Darstellungsdichten — kompakt und erweitert — ermöglichen je nach Bildschirmgröße und Aufgabe den Wechsel zwischen Gesamtüberblick und detaillierten Auftragskarten.

Funktionen

• Planung per Drag-and-Drop — Aufträge werden aus der Seitenleiste direkt in eine beliebige Fahrer-/Tageszelle gezogen. Durch Zurückziehen in die Seitenleiste wird die Zuordnung aufgehoben.
• Direkte Wochennavigation — Disponenten wechseln zwischen vorherigen und folgenden Wochen. Die Tageskilometer je Fahrer werden automatisch aktualisiert.
• Auftragsdetails — Ein Klick auf einen Auftrag öffnet einen seitlich eingeblendeten Bereich mit Kundendaten, Adressen, Gewicht, Preisen, Palettenverwaltung und Fahrerhinweisen.
• Webfleet-Anbindung — Fahrerhinweise lassen sich vorab prüfen und über die Webfleet-API direkt an die Bordcomputer senden, mit einem Klick je Auftrag.
• Auftragsverwaltung — Frachtaufträge können vollständig angelegt, bearbeitet und gelöscht werden. Eine Tabellenansicht zeigt alle offenen Aufträge.
• Fahrerverwaltung — Fahrer hinzufügen, bearbeiten und entfernen. Jeder Fahrer erhält eine eigene Farbe zur schnellen Erkennung auf der Plantafel.
• Suche und Filter — Die Seitenleiste unterstützt eine unmittelbare Suche nach Kundenname, Auftragsnummer oder Artikel. Statusgruppenfilter grenzen die Liste weiter ein.
• Kurze Benachrichtigungen — Nicht blockierende Meldungen bestätigen Aktionen wie Speichern, Senden und Löschen, ohne die Planung zu unterbrechen.

Entwicklung

Die Anwendung ist vollständig in JavaScript mit nativen ES6-Modulen geschrieben — ohne Build-Werkzeuge, Bundler oder Drittanbieterbibliotheken. Das war eine bewusste Entscheidung: eine schlanke, wartbare Codebasis ohne Risiken durch externe Abhängigkeiten und ohne ständigen Aktualisierungsdruck.

Die Architektur verteilt die Aufgaben auf klar abgegrenzte Module mit jeweils einer Verantwortung:

• Zustandsmodul — Zentrale maßgebliche Quelle für alle Anwendungsdaten. Sämtliche Änderungen laufen hier zusammen und werden automatisch über localStorage sitzungsübergreifend gespeichert.
• Ereignisbus — Ein schlankes Publish-/Subscribe-System ermöglicht die Kommunikation zwischen Modulen ohne direkte gegenseitige Importe. Jede Datei bleibt dadurch unabhängig testbar.
• API-Schicht — Eine dünne Abstraktionsschicht kapselt sämtliche Datenoperationen als Promises. Um Testdaten durch echte Serveraufrufe zu ersetzen, muss nur diese Datei geändert werden.
• Ansichtsmodule — Eigene Module steuern Planraster, Seitenleiste, Dialoge, Karten, Drag-and-Drop, Auftragsansicht und Fahreransicht — eine Aufgabe je Datei.
• Designtokens — Alle visuellen Werte für Farben, Abstände, Radien, Schatten und Übergänge stehen als CSS Custom Properties in einer einzigen Variablendatei. So bleibt die Oberfläche einheitlich und leicht anpassbar.

Das Projekt wurde von Grund auf neu aufgebaut: Ein monolithischer Prototyp mit 2.800 Zeilen in einer Datei wich einer strukturierten Architektur aus mehreren Dateien, die sich leicht erweitern und übergeben lässt. Eine vollständige Entwicklerdokumentation einschließlich API-Referenz gehört zur Anwendung.

Technologie

HTML5, CSS3 Custom Properties, CSS Grid, Flexbox, JavaScript ES6 ohne Framework, native ES-Module, Web Drag & Drop API, localStorage, Promises / async–await, Pub-/Sub-Ereignisbus und Webfleet API.

Keine Frameworks, keine Bundler und keine externen Bibliotheken. Die gesamte Anwendung läuft direkt im Browser und lässt sich dadurch unkompliziert hosten, bereitstellen und warten.

Das Ergebnis

Disponenten verfügen nun über ein Werkzeug für den gesamten täglichen Ablauf: neue Aufträge aufnehmen, Fahrern zuweisen, die Woche überblicken und Tourenanweisungen ins Fahrerhaus senden — ohne zwischen Anwendungen oder Systemen zu wechseln.

Durch die modulare Codebasis und die vollständig abstrahierte API-Schicht lässt sich die Anwendung im nächsten Schritt unkompliziert an eine Backend-Datenbank anbinden oder um neue Funktionen erweitern, ohne vorhandene Logik neu schreiben zu müssen.