> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shared-desk.pedda.digital/llms.txt
> Use this file to discover all available pages before exploring further.

# Karte erstellen

> Auf dieser Karte können Tische ausgewählt werden.

# 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](/map/dynamic-example).

# Erstellung

<Steps>
  <Step>Lade die Vorlage herunter.</Step>

  <Step>
    Öffne die Vorlage in einem SVG Editor.

    * [Inkscape](https://inkscape.org/) - Kostenloser Download
    * [Figma](https://www.figma.com/) - kostenloser Online Editor
  </Step>

  <Step>Passe die Vorlage an.</Step>
  <Step>Exportiere die Datei.</Step>
  <Step>Importiere die Datei.</Step>
</Steps>

## Anpassungen

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

<Frame>
    <img src="https://mintcdn.com/psh/2DfPLtr8nISLejLA/images/map/edit-id.png?fit=max&auto=format&n=2DfPLtr8nISLejLA&q=85&s=8709809b05b4bb333a227143e949f998" alt="Vorlage" width="1679" height="897" data-path="images/map/edit-id.png" />
</Frame>

Wie bekomme ich die IDs?

1. Gehe auf die [Department Übersicht Seite](https://production.shared-desk.cloud/admin/departments).
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.

<Tabs>
  <Tab title="Department">
    <img src="https://mintcdn.com/psh/2DfPLtr8nISLejLA/images/map/department-id.png?fit=max&auto=format&n=2DfPLtr8nISLejLA&q=85&s=625b0fa8731413efa7aa32057dbeba6f" alt="Department ID" width="1920" height="945" data-path="images/map/department-id.png" />
    Department Seite
  </Tab>

  <Tab title="Raum">
    <img src="https://mintcdn.com/psh/2DfPLtr8nISLejLA/images/map/room-id.png?fit=max&auto=format&n=2DfPLtr8nISLejLA&q=85&s=e0dc503b1db8dafff0109f59d6b92d7c" alt="Raum ID" width="1920" height="945" data-path="images/map/room-id.png" />
    Raum Seite
  </Tab>

  <Tab title="Tisch">
    <img src="https://mintcdn.com/psh/2DfPLtr8nISLejLA/images/map/desk-id.png?fit=max&auto=format&n=2DfPLtr8nISLejLA&q=85&s=4a85a47001e69e3b55ad7c7112d7bf81" alt="Tisch ID" width="1920" height="945" data-path="images/map/desk-id.png" />
    Tisch Seite
  </Tab>
</Tabs>

## Exportieren der Datei aus dem Editor

<Warning>
  Wichtig ist beim exportieren der Datei, auch die IDs zu exportieren. Dazu sollte die Option `ID Attribute` aktiviert
  sein.
</Warning>

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

<Frame>
    <img src="https://mintcdn.com/psh/2DfPLtr8nISLejLA/images/map/export.png?fit=max&auto=format&n=2DfPLtr8nISLejLA&q=85&s=4f4653bc5832527bab179fc07b22091c" alt="Exportieren" width="1678" height="894" data-path="images/map/export.png" />
</Frame>

## Importieren der Datei

<Steps>
  <Step>Gehe auf die [Department-Seite](https://production.shared-desk.cloud/admin/departments).</Step>
  <Step>Klicke auf den Button *Karte bearbeiten*.</Step>
  <Step>Klicke auf *Auswählen* und wähle die exportierte Datei aus. <img src="https://mintcdn.com/psh/2DfPLtr8nISLejLA/images/map/import.png?fit=max&auto=format&n=2DfPLtr8nISLejLA&q=85&s=efa519eedd7c1191c771be6e55f0d622" alt="Karte
  bearbeiten" width="1920" height="993" data-path="images/map/import.png" /></Step>
  <Step>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*.
  <img src="https://mintcdn.com/psh/2DfPLtr8nISLejLA/images/map/validate.png?fit=max&auto=format&n=2DfPLtr8nISLejLA&q=85&s=aaa25ac07e56028414d14d4bb22e207d" alt="Validieren" width="1920" height="945" data-path="images/map/validate.png" /></Step>
</Steps>

# Anzeige

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

<Frame>
    <img src="https://mintcdn.com/psh/2DfPLtr8nISLejLA/images/map/preview.gif?s=3256971fe159ac25921dd530c278a7e5" alt="Anzeige" width="1920" height="993" data-path="images/map/preview.gif" />
</Frame>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.