From a63344dfe1279b0316379a98a85259d71a92ab25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sat, 11 Nov 2023 01:44:13 +0000
Subject: [PATCH] add calendar_background_image into store

---
 ui/src/components/Calendar.vue           | 2 +-
 ui/src/components/editor/DoorChooser.vue | 4 +++-
 ui/src/components/editor/DoorPlacer.vue  | 4 +++-
 ui/src/plugins/store.ts                  | 7 ++++++-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/Calendar.vue b/ui/src/components/Calendar.vue
index a9e9fef..b3006ff 100644
--- a/ui/src/components/Calendar.vue
+++ b/ui/src/components/Calendar.vue
@@ -29,7 +29,7 @@
 
   <figure>
     <div class="image is-unselectable">
-      <img :src="$advent22.api_url('user/background_image')" />
+      <img :src="store.calendar_background_image" />
       <ThouCanvas>
         <CalendarDoor
           v-for="(door, index) in doors"
diff --git a/ui/src/components/editor/DoorChooser.vue b/ui/src/components/editor/DoorChooser.vue
index 23f5df9..2e67ede 100644
--- a/ui/src/components/editor/DoorChooser.vue
+++ b/ui/src/components/editor/DoorChooser.vue
@@ -11,7 +11,7 @@
       </ul>
     </div>
     <figure class="image is-unselectable">
-      <img :src="$advent22.api_url('user/background_image')" />
+      <img :src="store.calendar_background_image" />
       <ThouCanvas>
         <PreviewDoor
           v-for="(door, index) in doors"
@@ -25,6 +25,7 @@
 
 <script lang="ts">
 import { Door } from "@/lib/door";
+import { advent22Store } from "@/plugins/store";
 import { Options, Vue } from "vue-class-component";
 
 import ThouCanvas from "../calendar/ThouCanvas.vue";
@@ -41,5 +42,6 @@ import PreviewDoor from "./PreviewDoor.vue";
 })
 export default class extends Vue {
   public doors!: Door[];
+  public readonly store = advent22Store();
 }
 </script>
diff --git a/ui/src/components/editor/DoorPlacer.vue b/ui/src/components/editor/DoorPlacer.vue
index 5935d1e..faf86ea 100644
--- a/ui/src/components/editor/DoorPlacer.vue
+++ b/ui/src/components/editor/DoorPlacer.vue
@@ -9,7 +9,7 @@
       </ul>
     </div>
     <figure class="image is-unselectable">
-      <img :src="$advent22.api_url('user/background_image')" />
+      <img :src="store.calendar_background_image" />
       <DoorCanvas :doors="doors" />
     </figure>
   </div>
@@ -17,6 +17,7 @@
 
 <script lang="ts">
 import { Door } from "@/lib/door";
+import { advent22Store } from "@/plugins/store";
 import { Options, Vue } from "vue-class-component";
 
 import DoorCanvas from "./DoorCanvas.vue";
@@ -31,5 +32,6 @@ import DoorCanvas from "./DoorCanvas.vue";
 })
 export default class extends Vue {
   public doors!: Door[];
+  public readonly store = advent22Store();
 }
 </script>
diff --git a/ui/src/plugins/store.ts b/ui/src/plugins/store.ts
index 5fdad5d..8460713 100644
--- a/ui/src/plugins/store.ts
+++ b/ui/src/plugins/store.ts
@@ -17,6 +17,7 @@ type State = {
   is_touch_device: boolean;
   is_admin: boolean;
   site_config: SiteConfigModel;
+  calendar_background_image: string | undefined;
   calendar_aspect_ratio: number;
   user_doors: Door[];
   next_door_target: number | null;
@@ -40,6 +41,7 @@ export const advent22Store = defineStore({
       content: "",
       footer: "",
     },
+    calendar_background_image: undefined,
     calendar_aspect_ratio: 1,
     user_doors: [],
     next_door_target: null,
@@ -73,10 +75,11 @@ export const advent22Store = defineStore({
 
       Promise.all([
         this.advent22.api_get<SiteConfigModel>("user/site_config"),
+        this.advent22.api_get_blob("user/background_image"),
         this.advent22.api_get<DoorSaved[]>("user/doors"),
         this.advent22.api_get<number | null>("user/next_door"),
       ])
-        .then(([site_config, user_doors, next_door]) => {
+        .then(([site_config, background_image, user_doors, next_door]) => {
           document.title = site_config.title;
 
           if (site_config.subtitle !== "")
@@ -84,6 +87,8 @@ export const advent22Store = defineStore({
 
           this.site_config = site_config;
 
+          this.calendar_background_image = background_image;
+
           this.user_doors.length = 0;
           for (const door_saved of user_doors) {
             this.user_doors.push(Door.load(door_saved));