UserView and AdminView components

ui/src/App.vue

@@ -6,9 +6,11 @@
     </section>
 
     <section v-if="is_admin" class="section">
-      <ConfigView />
-      <CalendarAssistant />
-      <DoorMapEditor />
+      <AdminView />
+    </section>
+
+    <section v-else class="section">
+      <UserView />
     </section>
 
     <section class="section">
@@ -20,17 +22,15 @@
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
 
-import CalendarAssistant from "./components/admin/CalendarAssistant.vue";
-import ConfigView from "./components/admin/ConfigView.vue";
-import DoorMapEditor from "./components/admin/DoorMapEditor.vue";
+import AdminView from "./components/admin/AdminView.vue";
 import AdminButton from "./components/AdminButton.vue";
+import UserView from "./components/UserView.vue";
 
 @Options({
   components: {
-    ConfigView,
-    CalendarAssistant,
-    DoorMapEditor,
+    AdminView,
     AdminButton,
+    UserView,
   },
 })
 export default class extends Vue {

ui/src/components/UserView.vue

@@ -0,0 +1,33 @@
+<template>
+  <Calendar :doors="doors" />
+</template>
+
+<script lang="ts">
+import { DoorsSaved } from "@/lib/api";
+import { Door } from "@/lib/door";
+import { Options, Vue } from "vue-class-component";
+
+import Calendar from "./Calendar.vue";
+
+@Options({
+  components: {
+    Calendar,
+  },
+})
+export default class extends Vue {
+  public doors: Door[] = [];
+
+  public mounted(): void {
+    this.$advent22
+      .api_get<DoorsSaved>("user/doors")
+      .then((data) => {
+        this.doors.length = 0;
+
+        for (const value of data) {
+          this.doors.push(Door.load(value));
+        }
+      })
+      .catch((error) => alert(this.$advent22.format_user_error(error)));
+  }
+}
+</script>

ui/src/components/admin/AdminView.vue

@@ -0,0 +1,24 @@
+<template>
+  <ConfigView />
+  <CalendarAssistant />
+  <DoorMapEditor />
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+import CalendarAssistant from "./CalendarAssistant.vue";
+import ConfigView from "./ConfigView.vue";
+import DoorMapEditor from "./DoorMapEditor.vue";
+
+@Options({
+  components: {
+    ConfigView,
+    CalendarAssistant,
+    DoorMapEditor,
+  },
+})
+export default class extends Vue {}
+</script>
+
+<style scoped></style>