Raumplan-Element bearbeiten
Das Raumplan-Element zeigt dir die visuelle Darstellung von Tischen und Dekoration in deinem Raumplan. Jedes Element wird entsprechend seinem Typ und seinen Eigenschaften dargestellt. Tische zeigen Sitzplätze, Tischnummer und können individuell gestaltet werden.
Tisch-Darstellung verstehen
Tisch-Grundform:
- Rechteckige Grundfläche repräsentiert die Tischplatte
- Die Größe entspricht der konfigurierten Tischgröße
- Verschiedene Größen für unterschiedliche Sitzplatzanzahlen
- Automatische Anpassung an die Sitzplatz-Konfiguration
Sitzplatz-Anordnung:
- Kleine Rechtecke um den Tisch zeigen die Sitzplätze
- Obere Seite: Hauptsitzplätze, berechnet aus Gesamtanzahl
- Untere Seite: Restliche Sitzplätze nach Berechnung
- Seitlich: Bei 3+ Sitzplätzen werden Seitenplätze hinzugefügt
Sitzplatz-Berechnung:
- Bei 1-2 Sitzplätzen: Alle oben angeordnet
- Bei 3+ Sitzplätzen: 1 Sitzplatz rechts, Rest aufgeteilt
- Obere Reihe erhält mehr Plätze bei ungerader Anzahl
- Realistische Darstellung der Tischbelegung
Tisch-Informationen
Tischnummer:
- Wird zentral auf der Tischplatte angezeigt
- Format: "#" gefolgt von der Tischnummer
- Beispiel: "#5" für Tisch Nummer 5
- Eindeutige Identifikation jedes Tisches
Tischname (optional):
- Individueller Name kann zusätzlich angezeigt werden
- Erscheint anstelle oder zusätzlich zur Nummer
- Beispiele: "Fensterplatz", "Stammtisch", "Terrasse 1"
- Hilft bei der Identifikation besonderer Tische
Status-Informationen:
- Zusätzliche Informationen können eingeblendet werden
- Beispiel: Anzahl der Sitzplätze als Badge
- Umsatz-Informationen bei belegten Tischen
- Farbkodierung für verschiedene Status
Farbgestaltung
Individuelle Tischfarben:
- Jeder Tisch kann eine eigene Hintergrundfarbe haben
- Die Farbe wird als CSS-Variable gesetzt
- Automatische Berechnung der Schriftfarbe für optimale Lesbarkeit
- Ohne eigene Farbe wird die Standard-Darstellung verwendet
Auswahlzustand:
- Nicht ausgewählte Tische erhalten die CSS-Klasse "notSelected"
- Ermöglicht visuelle Hervorhebung des aktiven Tisches
- Bessere Orientierung bei der Bearbeitung
- Klare Unterscheidung zwischen aktiven und inaktiven Elementen
Rotation:
- Tische können um beliebige Winkel gedreht werden
- CSS-Transform wird für die Rotation verwendet
- Sitzplätze rotieren mit dem Tisch
- Realistische Darstellung der Tischausrichtung
Dekoration-Objekte
Objekt-Typen:
- Bilder: Verschiedene Dekoration-Objekte als PNG-Dateien
- Text: Frei editierbare Textfelder
- Linien: Einfache Striche für Raumaufteilung
- Jeder Typ hat eigene Darstellungsregeln
Text-Elemente:
- Zeigen den konfigurierten Text an
- Fallback "T e x t" wenn kein Text eingegeben wurde
- CSS-Klasse "gastroItemText" für Styling
- Mehrzeilige Texte sind möglich
Linie-Elemente:
- Einfache horizontale Striche
- Länge wird durch die Size-Eigenschaft bestimmt
- CSS-Klasse "gastroItemLine" für Styling
- Nützlich für Raumaufteilungen oder Markierungen
Bild-Objekte:
- PNG-Dateien aus dem Ressourcen-Ordner
- Dateiname entspricht dem Objekt-Typ
- Automatische Pfad-Generierung
- Verschiedene Dekoration-Objekte verfügbar
Rotation und Transformation
Rotations-System:
- Alle Elemente können rotiert werden
- Rotation erfolgt um den Mittelpunkt des Elements
- CSS-Transform mit Grad-Angabe
- Stufenlose Rotation möglich
Tisch-Rotation:
- Tisch und alle Sitzplätze rotieren gemeinsam
- Sitzplatz-Anordnung bleibt relativ zum Tisch erhalten
- Realistische Darstellung gedrehter Tische
- Optimale Raumausnutzung möglich
Objekt-Rotation:
- Dekoration-Objekte können individuell gedreht werden
- Text-Elemente können schräg gestellt werden
- Linien können in alle Richtungen zeigen
- Flexible Raumgestaltung möglich
Responsive Darstellung
Skalierung:
- Alle Elemente skalieren proportional
- Zoom-Funktion beeinflusst die Darstellungsgröße
- Verhältnisse bleiben bei allen Zoom-Stufen erhalten
- Optimale Darstellung auf verschiedenen Bildschirmgrößen
Layout-Anpassung:
- Sitzplatz-Anordnung passt sich an Tischgröße an
- Text-Größe skaliert mit dem Element
- Objekte behalten ihre Proportionen
- Konsistente Darstellung bei allen Größen
Interaktive Elemente
Auswahl-Feedback:
- Ausgewählte Elemente werden visuell hervorgehoben
- Hover-Effekte zeigen Interaktionsmöglichkeiten
- Cursor ändert sich bei interaktiven Elementen
- Klare Rückmeldung über mögliche Aktionen
Drag & Drop:
- Elemente können per Maus verschoben werden
- Visuelle Rückmeldung während des Ziehens
- Snap-to-Grid für präzise Positionierung
- Einfache Neuanordnung der Raumelemente
Tipps für optimale Darstellung
Tisch-Design:
- Wähle Farben, die gut lesbar sind
- Berücksichtige den Kontrast zur Schrift
- Nutze einheitliche Farbschemata
- Teste die Darstellung bei verschiedenen Zoom-Stufen
Objekt-Platzierung:
- Achte auf realistische Proportionen
- Vermeide Überlappungen wichtiger Elemente
- Nutze Rotation für optimale Raumausnutzung
- Halte Laufwege frei von Dekoration
Text-Gestaltung:
- Verwende kurze, prägnante Texte
- Achte auf gute Lesbarkeit
- Positioniere Texte an logischen Stellen
- Nutze einheitliche Schriftgrößen