Leopoldadmin/hms-licht-ton
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e5606c64c56fa3a3698a08ad4d9db20660347357
hms-licht-ton/docs/component_inventory.md
T

11 KiB
Raw Blame History

HMS Licht & Ton – Component Inventory

Overview

All components are built as Vue 3 single-file components (template + setup). In production (Nuxt 3), these map to .vue files in components/ and pages/ directories.

Shared Components

  • Purpose: SVG logo with white HMS text + orange (#EC6925) rectangular border
  • Props: size (Number, default: 40)
  • States: Default only (static SVG)
  • Accessibility: aria-label, role="img"

SpeakerIcon

  • Purpose: SVG loudspeaker/light icon for equipment grid
  • Props: type (String: linearray, subwoofer, monitor, pointsource, column, movinghead)
  • States: Default (gray), Hover (orange via parent CSS)
  • Accessibility: aria-hidden="true"

AppHeader

  • Purpose: Sticky navigation header with logo, desktop nav, mobile hamburger menu
  • States: Default, Active nav item (aria-current="page"), Mobile menu open/closed
  • Accessibility: role="banner", aria-label, aria-expanded, aria-controls

AppFooter

  • Purpose: 4-column footer with company info, navigation, contact, legal links
  • States: Default only
  • Accessibility: role="contentinfo"

ServiceCard

  • Purpose: Service offering card with icon, title, description
  • Props: icon, title, description
  • States: Default, Hover (border highlight)

EquipmentCard

  • Purpose: Equipment listing card with image, badge, name, description, add-to-cart button
  • Props: item (Object: id, code, name, category, description, brand, image)
  • Emits: click, add-to-cart
  • States: Default, Hover (border + shadow + lift), Focus (keyboard), No image (placeholder)
  • Accessibility: role="article", tabindex="0", aria-label on add button

LoadingSkeleton

  • Purpose: Shimmer animation skeleton cards for loading states
  • Props: count (Number, default: 6)
  • States: Shimmer animation (infinite)
  • Accessibility: aria-live="polite", aria-busy="true"

EmptyState

  • Purpose: Empty state with icon, title, message, optional CTA button
  • Props: icon, title, message, actionLabel
  • Emits: action
  • States: Default
  • Accessibility: role="status"

ErrorState

  • Purpose: Error state with alert icon, title, message, retry button
  • Props: title, message
  • Emits: retry
  • States: Default
  • Accessibility: role="alert"

LegalContentPage

  • Purpose: Reusable layout for static legal content pages (Impressum, Datenschutz, AGB)
  • Props: title (String), content (String/HTML)
  • States: loading (skeleton), content (rendered)
  • Accessibility: role="article", semantic heading structure h1 > h2 > h3

Page Components

HomePage (#/)

  • Sections: Hero (bg image + overlay), Speaker Grid (6 types), Über uns (stats + image), 8 Service Cards, Mietkatalog CTA
  • States: Default (all content static)

ReferenzenPage (#/referenzen)

  • States: Loading (skeleton), Loaded (gallery grid), Error (retry), Empty (no category results)
  • Features: Category filter chips (Alle, Open-Air, Indoor, Rigging, Event), 9 real HMS photos

KontaktPage (#/kontakt)

  • Sections: Büro/Lager/Öffnungszeiten cards, 2 Ansprechpartner cards, Contact form
  • Form States: Default, Validation errors (inline), Submitting (spinner), Submitted (success message)
  • Validation: Name*, Email* (regex), Message*, Privacy checkbox*

MietkatalogPage (#/mietkatalog)

  • States: Loading (skeleton), Loaded (equipment grid), Error (retry), Empty (no search results)
  • Features: Search input, Category filter chips (7 categories), Sort dropdown (name/brand/code), Result count

EquipmentDetailPage (#/mietkatalog/:id)

  • States: Loading (skeleton), Loaded (detail view), Error (not found)
  • Sections: Image/placeholder, Specs table, Rental form (date range + quantity), Related items grid
  • Form: Mietbeginn, Mietende, Anzahl (stepper), Add to cart button

WarenkorbPage (#/warenkorb)

  • States: Empty (no items), Cart with items
  • Features: Item list with quantity steppers, remove buttons, rental dates display, CTA button → /mietanfrage
  • Note: Warenkorb verwaltet nur Items (anzeigen, Mengen steuern, entfernen). Kein Formular für Kontaktdaten hier.
  • Accessibility: Cart summary with live-updating totals, aria-live="polite"

MietanfragePage (#/mietanfrage)

  • Purpose: Mietanfrage-Formular mit Veranstaltungsdaten + Kontaktdaten + Nachricht. Submit sendet an Rentman via POST /projectrequests + POST /projectrequests/{id}/projectrequestequipment.
  • Sections:
    1. Warenkorb-Übersicht: Zeigt ausgewählte Artikel mit Mengen (read-only), Link zurück zum Warenkorb
    2. Veranstaltungsdaten: Name*, Datum von*, Datum bis*, Ort*, Anzahl Personen
    3. Kontaktdaten: Name*, Firma, E-Mail*, Telefon, Adresse (Straße, PLZ, Ort)
    4. Nachricht: Freitext-Nachrichtfeld
    5. Submit: "Mietanfrage absenden" Button
  • States:
    • form – Default, Formular leer oder mit Validierungs-Hinweisen
    • validation-error – Inline-Validierungsfehler (Pflichtfelder markiert, Fehlermeldungen unter den Feldern)
    • submitting – Spinner im Submit-Button, Felder disabled
    • success – Erfolgsmeldung mit Referenz-Nummer, Weiter-Button ("Zurück zur Startseite")
    • error – Fehlermeldung mit Retry-Button ("Erneut versuchen")
  • Empty Cart Handling: Wenn Warenkorb leer → Hinweis "Keine Artikel ausgewählt" + Link zum Mietkatalog
  • Validation:
    • Veranstaltungsname: Pflicht, min 3 Zeichen
    • Datum von/bis: Pflicht, von ≤ bis
    • Ort: Pflicht
    • Name: Pflicht, min 2 Zeichen
    • E-Mail: Pflicht, Regex-Validierung
    • Telefon: Optional, Format-Validierung
    • Adresse: Optional (aber wenn PLZ angegeben, auch Ort erforderlich)
  • Accessibility: role="form", aria-invalid on error fields, aria-describedby for error messages, fieldset/legend for grouped sections

AdminPage (#/admin)

  • Purpose: Admin-Login und post-login Dashboard mit Equipment-Sync-Trigger
  • States:
    • login – Login-Form (Username + Password), Fehler bei falschen Daten
    • idle – Post-Login Dashboard, Sync-Status sichtbar, Sync-Button bereit
    • syncing – Sync läuft, Progress-Indicator, Sync-Log live aktualisiert
    • sync-complete – Sync abgeschlossen, Status aktualisiert (last sync date, article count), Erfolgsmeldung
    • sync-error – Sync fehlgeschlagen, Fehlermeldung + Retry-Button, Sync-Log zeigt Fehlerdetails
  • Elements:
    • Sync-Trigger Button: "Equipment-Sync starten" (Primary, disabled während syncing)
    • Sync-Status: Last sync date, article count, Sync-Status-Badge (idle/syncing/complete/error)
    • Sync-Log Viewer: Scrollbarer Log-Bereich mit Zeitstempeln, kollabierbar
  • Login-Form States: Default, Validation error (invalid credentials), Loading (spinner)
  • Accessibility: role="main", aria-live="polite" für Sync-Status, aria-busy während syncing

ImpressumPage (#/impressum)

  • Purpose: Statische Impressum-Seite mit rechtlichen Angaben gemäß §5 TMG
  • Route: /impressum
  • Content: Firmenname, Vertretungsberechtigte, Anschrift, Kontakt, USt-IdNr., Verantwortlich für Inhalte
  • States: loading (skeleton), content (rendered)
  • Component: Verwendet LegalContentPage Layout
  • Accessibility: Semantic heading structure h1 > h2

DatenschutzPage (#/datenschutz)

  • Purpose: Statische Datenschutz-Seite mit DSGVO-konformer Datenschutzerklärung
  • Route: /datenschutz
  • Content: Server-Logfiles, Cookies, Kontaktformular-Datenverarbeitung, Rentman-Datenverarbeitung, Nutzerrechte
  • States: loading (skeleton), content (rendered)
  • Component: Verwendet LegalContentPage Layout
  • Accessibility: Semantic heading structure h1 > h2 > h3

AGBVermietungPage (#/agb-vermietung)

  • Purpose: Statische AGB-Seite für Vermietung
  • Route: /agb-vermietung
  • Content: Allgemeine Geschäftsbedingungen für Vermietung (vom User bereitgestellter Text)
  • States: loading (skeleton), content (rendered)
  • Component: Verwendet LegalContentPage Layout
  • Accessibility: Semantic heading structure h1 > h2

NotFoundPage (#/404)

  • States: Default (404 message + home link)

UX State Coverage Summary

Page Loading Empty Error Partial Success Additional States
Home – – – – – –
Referenzen Skeleton No category Retry Filtered – –
Kontakt – – – – Form sent validation-error
Mietkatalog Skeleton No results Retry Filtered – –
Detail Skeleton – Not found – – –
Warenkorb – Empty cart – – – –
Mietanfrage – Empty cart Retry – Request sent form, submitting, validation-error
Admin Spinner – Login error – Logged in idle, syncing, sync-complete, sync-error
Impressum Skeleton – – – – content
Datenschutz Skeleton – – – – content
AGB Vermietung Skeleton – – – – content
404 – – – – – –

Component States Documentation

Button States

  • Default: background: var(--color-accent); color: white
  • Hover: background: var(--color-accent-hover)
  • Active: transform: translateY(0)
  • Disabled: background: var(--secondary); cursor: not-allowed
  • Focus-visible: outline: 2px solid var(--color-accent); outline-offset: 2px

Input States

  • Default: border: 1px solid var(--border-strong); background: var(--surface)
  • Focus: border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(236,105,37,0.1)
  • Error: border-color: var(--color-error)
  • Disabled: background: var(--row); color: var(--secondary); cursor: not-allowed

Card States

  • Default: border: 1px solid var(--border); box-shadow: var(--shadow-sm)
  • Hover: border-color: var(--secondary); box-shadow: var(--shadow-lg)

Chip States

  • Default: border: 1px solid var(--border-strong); background: var(--surface)
  • Hover: border-color: var(--secondary)
  • Active: background: var(--color-accent); color: white; border-color: var(--color-accent)

Sync-Status Badge States (AdminPage)

  • Idle: background: var(--surface); color: var(--text-muted)
  • Syncing: background: rgba(96, 165, 250, 0.08); color: var(--color-info); animation: pulse
  • Complete: background: var(--color-success-bg); color: var(--color-success)
  • Error: background: var(--color-error-bg); color: var(--color-error)
Reference in New Issue View Git Blame Copy Permalink