Voraussetzungen

Zuerst sollen die Räume und Tische des Departments erstellt werden, von welchem eine Karte angefertigt werden soll.

Aufbau

Die Tische und Räume werden nach einem Muster geladen und angezeigt. Dazu verwenden wir Scalable Vector Graphics (SVG).

Dazu müssen sie einem genauem Muster folgen:

SVG Hirarchie

department:<id>
|- room:<id>
|  |- table:<id>
|  |- table:<id>
|  |- table:<id>
|- room:<id>
|  |- table:<id>
|  |- table:<id>

Departments, Räume und Tische werden in einer Hierarchie dargestellt. Ein Department kann mehrere Räume enthalten, ein Raum mehrere Tische.

Vorlage

Eine SVG Vorlage findest du auf der Vorlagen Seite.

Erstellung

1

Lade die Vorlage herunter.
2

Öffne die Vorlage in einem SVG Editor.

  • Inkscape - Kostenloser Download
  • Figma - kostenloser Online Editor
3

Passe die Vorlage an.
4

Exportiere die Datei.
5

Importiere die Datei.

Anpassungen

Bearbeite dazu die Vorlage und ersetze die XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX durch die wirklichen Department, Raum und Tisch IDs.

Wie bekomme ich die IDs?

  1. Gehe auf die Department Übersicht Seite.
  2. Wähle im Dropdown die Spalte ID aus.
  3. Kopiere die ID des Departments.
  4. Wiederhole die Schritte 1-3 für die Räume und Tische.

Department Seite

Exportieren der Datei aus dem Editor

Wichtig ist beim exportieren der Datei, auch die IDs zu exportieren. Dazu sollte die Option ID Attribute aktiviert sein.

Wie du die Datei exportierst, hängt von deinem Editor ab. Hier ein Beispiel für Figma:

Importieren der Datei

1

Gehe auf die Department-Seite.
2

Klicke auf den Button Karte bearbeiten.
3

Klicke auf Auswählen und wähle die exportierte Datei aus.
4

Anschließend siehst du alle erkannten Räume und Tische. Außerdem siehst du auch alle Räume und Tische die noch nicht erkannt wurden. Wenn du mit dem Ergebnis zufrieden bist, klicke auf Hochladen.

Anzeige

Wenn alles korrekt importiert wurde, wird beim Buchen der Tisch auf der Karte angezeigt.