Man kennt das Problem: Man arbeitet, hat Hunger auf einen Snack oder könnte einen Energydrink gebrauchen. Der nächste Supermarkt ist aber zu weit entfernt, um mal eben auf die Schnelle was zu besorgen. Ein sehr geschätzter Kollege hatte da eine tolle Idee und seitdem gibt es bei uns einen kleinen „SB Kiosk“, bei dem die Kollegen sich Getränke und Snacks nehmen können. Die Sachen bekommt jeder zum Selbstkostenpreis. Das eingeworfene Geld wird wiederum dazu verwendet, den Warenbestand wieder aufzufüllen.
Jetzt kommt es aber vor, dass jemand kein, oder kein passendes, Kleingeld dabei hat. Um das zu lösen, haben wir eine Pinnwand angebracht, damit dort jeder buchstäblich an einen Zettel „anschreiben“ kann. Entweder Guthaben oder eben Schulden. Das funktioniert auch ganz prima, doch ist die Zettelwirtschaft auf die Dauer recht mühselig und manchmal auch fehleranfällig.
Hier soll „Kiosk SB“ aushelfen. Denn es ist im Prinzip genau das: Ein Tool, bei dem Kollegen Artikel kaufen, anschreiben oder Guthaben hinterlegen können.
Nach wie vor muss auf Firmen-Hardware mit sehr eingeschränkten Berechtigungen gearbeitet werden. Daher läuft das Tool, wie auch schon meine bisherigen Tools dieser Art, als lokales JavaScript in einer HTML-Datei, ohne Verbindung zu einem Server.
Für jeden Kollegen gibt es ein eigenes Profil, in dem eine ID, der Username, sein persönliches Kreditlimit (Just in Case 😉 ), der aktuelle Kontostand, sowie das Datum, seit dem das Konto im Minus ist, gespeichert ist. Für die Artikel ist eine EAN, die Artikelbezeichnung, sowie ein Preis hinterlegt.
Man kann sowohl die Benutzer als auch die Artikel bequem in Excel-Tabellen verwalten. Um sie in das Tool zu übertragen, muss man die Listen lediglich als CSV exportieren und dann in Kiosk SB importieren. Umgekehrt kann man die Listen auch aus Kiosk SB exportieren, um z.B. zu schauen, ob jemand schon längere Zeit einen offenen Zettel hat.
Die Benutzereingaben erfolgen alle über ein zentrales Eingabefeld, das die ganze Zeit im Fokus ist. Denn das Ganze hat einen Clou: Das Ganze funktioniert mit Strichcodes. Am Rechner angeschlossen ist ein Barcode-Leser. Die Artikel haben ohnehin alle Barcodes, und jeder Nutzer bekommt ebenfalls einen ausgehändigt.
Barcode-Leser an einem PC funktionieren sehr einfach: Sie simulieren eine angeschlossene Tastatur. Scannt man einen Barcode, interpretiert das Gerät die Striche als Zeichen und überträgt die gelesenen Zeichen als Tastatur-Eingabe an den Rechner, gefolgt von einem Return-Signal. Auf diese Weise sind Barcode-Leser ziemlich universell kompatibel und können ohne weitere Browser-API auch mit Webinterfaces interagieren.
Man kann die Nummer bei Bedarf natürlich auch händisch eingeben und danach die Enter-Taste drücken, oder den entsprechenden Button unter dem Eingabefeld antippen.
Will man einfach einen Preis prüfen, kann man schlicht den oder die Artikel scannen. Man bekommt die Einzelpreise und die Gesamtsumme angezeigt. Kann man passend zahlen, wirft man das Geld einfach in die Dose und klickt auf „Bezahlt“. Und fertig.
Möchte man Guthaben einzahlen oder möchte anschreiben, scannt man zusätzlich seinen Ausweis. Dadurch wird der Benutzer automatisch eingeloggt und alle Werte angezeigt. Hat man bereits Guthaben, wird dieses Guthaben vom Gesamtpreis abgezogen, sodass man nur noch die etwaige Differenz bezahlen muss. Oder gar nichts, falls das Guthaben ausreicht.
Hat man nicht genügend Geld dabei, um den verbleibenden Preis zu begleichen, kann man auf „Anschreiben“ klicken. Dadurch wird der Restbetrag vom Konto abgezogen und als Negativ-Guthaben gespeichert.
Um seine Schulden zu begleichen und / oder Guthaben anzulegen, muss man Guthaben einzahlen. Dazu gibt man in das Eingabefeld eine Zahl bis 50 ein und tippt auf „Guthaben einzahlen“. Der eingezahlte Betrag wird mit einem etwaigen Fehlbetrag auf dem Konto verrechnet, und der Überschuss als positives Guthaben gespeichert.
Da es keine Client-Server-Architektur gibt, werden alle Werte lokal im Local-Storage des Browsers in Form von Arrays gespeichert. Das funktioniert erfahrungsgemäß sehr zuverlässig. Aber um Unfällen mit dem Browsercache vorzubeugen, sollte man regelmäßig Backups anlegen. Dazu klickt man im Admin-Panel einfach auf „Download Benutzer .CSV“. Die Datei kann man sichern und ggf. auch wieder importieren, falls jemand doch mal versehentlich den Cache geleert hat.
Einzelne Transaktionen werden nicht gespeichert, das wäre für diesen Bedarfsfall ein Overkill (falls es das nicht jetzt schon ist 😀 ). Wollte man dieses Feature hinzufügen, müsste man lediglich ein zusätzliches Array anlegen, dem bei einer Transaktion jeweils ein Array mit den jeweiligen Werten übergeben und im localstorage gespeichert wird.
Technisch gibt es hier keine großen Besonderheiten. Das Tool ist funktional implementiert, mit einer zentralen Funktion zur Darstellungs-Aktualisierung. Die anderen Funktionen dienen zur Eingabeverarbeitung, oder sind Hilfsfunktionen zur Berechnung.
Das Tool eignet sich natürlich nicht als kommerzielles Shopsystem für irgendeine Art von Business, sondern rein für den Privatgebrauch unter Kollegen. Vielleicht hilft es ja auch dir und deinen Kollegen in der Firma oder dem Verein, oder es inspiriert dich für eigene Weiterentwicklungen.
Den Quellcode findest du hier. Du kannst das Tool herunterladen und einfach im Browser ausführen. Ich habe jeweils eine CSV-Datei beigefügt, mit einigen Beispieldaten für Artikel und Benutzer. Die Artikel, und insbesondere die EANs sind der Einfachheit halber vereinfacht (001, 002, etc.). So kannst du sie durch händische Eingaben testen, ohne einen Barcode-Leser. Hast du einen Barcode-Leser zur Hand, kannst du natürlich einfach eigene EANs scannen und in die CSV-Datei einfügen, und diese anschließend importieren.
Das Admin-Panel ist im Normalfall ausgeblendet und wird nur eingeblendet, wenn ein Admin eingeloggt ist. Der Einfachheit halber habe ich es standardmäßig jedoch eingeblendet. Um die normale Funktionalität herzustellen, musst du die Variable „adminPanelActive“ auf false setzen.
