(de-)serializing of "Door" class

ui/src/components/DoorMapEditor.vue

@@ -6,12 +6,15 @@
 
     <DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
     <DoorChooser v-if="current_step === 1" v-model:doors="doors" />
-    <Calendar v-if="current_step === 2" :doors="doors" />
+    <template v-if="current_step === 2">
+      <Calendar :doors="doors" />
+      <button class="button is-success" @click.left="submit">Speichern</button>
+    </template>
   </div>
 </template>
 
 <script lang="ts">
-import { Door } from "@/lib/door";
+import { Door, DoorSerialized } from "@/lib/door";
 import { Options, Vue } from "vue-class-component";
 
 import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
@@ -35,5 +38,20 @@ export default class extends Vue {
   ];
   public current_step = 0;
   public doors: Door[] = [];
+
+  public submit() {
+    const data: DoorSerialized[] = [];
+
+    for (const door of this.doors) {
+      if (door.day === -1) {
+        continue;
+      }
+
+      data.push(door.serialized);
+    }
+
+    console.log(data);
+    console.log(Door.deserialize(data[0]));
+  }
 }
 </script>

ui/src/lib/door.ts

@@ -1,4 +1,13 @@
 import { Rectangle } from "./rectangle";
+import { Vector2D } from "./vector2d";
+
+export interface DoorSerialized {
+  day: number;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
 
 export class Door {
   private _day = -1;
@@ -25,4 +34,24 @@ export class Door {
       this._day = Math.max(Math.floor(result), -1);
     }
   }
+
+  public static deserialize(serialized: DoorSerialized): Door {
+    return new Door(
+      new Rectangle(
+        new Vector2D(serialized.x1, serialized.y1),
+        new Vector2D(serialized.x2, serialized.y2),
+      ),
+      serialized.day,
+    );
+  }
+
+  public get serialized(): DoorSerialized {
+    return {
+      day: this.day,
+      x1: this.position.origin.x,
+      y1: this.position.origin.y,
+      x2: this.position.corner.x,
+      y2: this.position.corner.y,
+    };
+  }
 }