Elekosk

Elekosk ist ein selbstgehosteter Bürokiosk, mit dem Mitarbeiter Snacks und Getränke bequem über den Browser kaufen können – ohne Bargeld. Jeder Nutzer besitzt ein persönliches Geldkonto. Käufe werden direkt vom Kontostand abgezogen. Admins verwalten das Sortiment und behalten den Überblick über Verkaufsstatistiken.

---

Features

Shop (Nutzer)

• Produkte als ansprechendes Kachellayout
• Warenkorb mit Live-Update (kein Seiten-Reload)
• Checkout über Konto­auswahl mit sofortiger Saldenaktualisierung

Geldkonto-Modal (global)

• Accounts anlegen (mit zufällig generiertem Roboter-Avatar via DiceBear)
• Einzahlen und Auszahlen auf beliebige Konten
• Kontensuche mit Live-Filter und Treffer­hervorhebung
• Scrollbare Kontoübersicht – kompaktes Popup, auch bei vielen Nutzern übersichtlich

Admin-Bereich

• Passwortgeschützt – Zugang nur mit konfiguriertem Admin-Passwort (.env)
• Produkte anlegen, bearbeiten, löschen und als Ausverkauft markieren
• Kompakte Tabellendarstellung der Produkte mit Miniaturansicht
• Detailansicht pro Produkt (Klick auf Tabellenzeile):
  • Balkendiagramm: Verkäufe pro Monat (letzte 12 Monate)
  • Liniendiagramm: Verkäufe nach Uhrzeit (0–23 Uhr)
  • KPI-Karten: Gesamtverkäufe, Gesamtumsatz, Ø Verkäufe/Woche, beliebteste Kaufzeit

Dark Mode

• Manueller Toggle über den Header-Button
• Automatischer Zeitplan: zwischen 20:00 und 06:00 Uhr wird der Dark Mode automatisch aktiviert
• Einstellung wird im localStorage gespeichert (manuelle Überschreibung möglich)
• Smooth-Transition durch CSS-Custom-Properties (data-theme="dark")

---

Tech Stack

Bereich	Technologie
Backend	Laravel 11 (PHP)
Datenbank	SQLite (lokal) / kompatibel mit MySQL
Frontend	Vanilla JS, Custom CSS (kein Framework)
Charts	Chart.js 4 (CDN)
Avatare	DiceBear API (Bottts-Stil)
Schriftart	Inter (Google Fonts)

---

Installation

Voraussetzungen

• PHP 8.2+
• Composer
• Node.js & npm (optional, für Vite-Assets)

Schritte

# 1. Repository klonen
git clone <repo-url> elekosk
cd elekosk

# 2. Abhängigkeiten installieren
composer install

# 3. Umgebungsdatei anlegen
cp .env.example .env
php artisan key:generate

# 4. Datenbank einrichten
touch database/database.sqlite
php artisan migrate

# 5. Entwicklungsserver starten
php artisan serve

Die App ist dann unter http://localhost:8000 erreichbar.

---

Konfiguration

Alle Einstellungen werden in der .env-Datei vorgenommen:

APP_NAME=Elekosk          # Name der App (erscheint im Header)
APP_URL=http://localhost

DB_CONNECTION=sqlite      # Alternativ: mysql, pgsql

ADMIN_PASSWORD=dein_sicheres_passwort   # Passwort für den Adminbereich

Hinweis: Das Admin-Passwort sollte vor dem ersten Produktivbetrieb auf einen sicheren Wert geändert werden.

---

Projektstruktur

elekosk/
├── app/
│   ├── Http/Controllers/
│   │   ├── AdminController.php      # Admin-Auth, CRUD, Statistiken
│   │   ├── ShopController.php       # Shop, Warenkorb, Checkout
│   │   └── AccountController.php    # Konten, Einzahlen, Auszahlen
│   └── Models/
│       ├── Product.php
│       ├── Account.php
│       └── Purchase.php             # Kaufhistorie für Statistiken
├── database/
│   ├── migrations/                  # Datenbankschemata
│   └── database.sqlite
├── public/
│   └── assets/css/
│       ├── modules/
│       │   ├── module_theme.css     # Design-Tokens, Dark Mode
│       │   ├── module_header.css
│       │   ├── module_admin.css     # Admin-Layout, Tabelle, Stats-Modal
│       │   ├── module_shop.css
│       │   └── module_shopping_card.css
│       └── stylesheet_index.css
├── resources/views/
│   ├── layouts/
│   │   └── layout_default.blade.php  # Master-Layout inkl. Geldkonto-Modal
│   └── pages/
│       ├── admin/
│       │   ├── index.blade.php       # Admin-Dashboard
│       │   └── login.blade.php       # Admin-Login
│       └── users/
│           └── shop.blade.php        # Shop-Ansicht
└── routes/
    └── web.php

---

Routen-Übersicht

Methode	Pfad	Beschreibung
GET	/	Shop
GET	/cart	Warenkorb (JSON)
POST	/cart/add/{product}	Produkt in Warenkorb
POST	/cart/remove/{product}	Produkt entfernen
POST	/cart/update/{product}	Menge anpassen
POST	/checkout	Kauf abschließen
GET	/admin/login	Admin-Login
POST	/admin/login	Login verarbeiten
POST	/admin/logout	Abmelden
GET	/admin	Admin-Dashboard
POST	/admin/products	Produkt erstellen
POST	/admin/products/{id}/update	Produkt bearbeiten
POST	/admin/products/{id}/toggle	Verfügbarkeit umschalten
POST	/admin/products/{id}/delete	Produkt löschen
GET	/admin/products/{id}/stats	Statistik-Daten (JSON)
GET	/accounts	Alle Konten (JSON)
POST	/accounts	Konto erstellen
POST	/accounts/{id}/deposit	Einzahlen
POST	/accounts/{id}/withdraw	Auszahlen

---

Lizenz

Privates Projekt – Jonas Riemer © 2026