From 9b788ccf13a2018a8ff0b6bed1607770bfec314d Mon Sep 17 00:00:00 2001
From: 135e2 <135e2@135e2.tk>
Date: Sat, 13 Aug 2022 21:35:54 +0800
Subject: feat(SettingsPage): reimplement backgroundImage customization

A pretty basic implementation to change bgImage dynamically, which was formerly reverted.

Ref: ffd55641317ebd6344e92eb8a3204981846b5e05
---
 src/App.vue                     | 12 ++++++++++-
 src/components/SettingsPage.vue | 45 +++++++++++++++++++++++++++++++++++++++--
 2 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 24f5b83..0641b2a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,6 +54,7 @@
           v-else-if="atSettings"
           @update-title-size="updateTitleSize"
           @update-content-size="updateContentSize"
+          @update-background-image-u-r-l="updateBackgroundImageURL"
           :realTitleSize="parseInt(titleSize)"
           :realContentSize="contentSize"
         />
@@ -93,7 +94,7 @@ export default {
     snackbarText: "Default snackbar text (End-user shouldn't see this)",
     bg: {
       // backgroundColor: "grey",
-      // backgroundImage: "url(https://wallpapercave.com/wp/wp9649930.jpg)",
+      backgroundImage: "",
       backgroundPosition: "center",
     },
   }),
@@ -110,6 +111,12 @@ export default {
     };
   },
 
+  mounted() {
+    let backgroundImageURL =
+      JSON.parse(localStorage.getItem("backgroundImageURL")) || "";
+    this.updateBackgroundImageURL(backgroundImageURL);
+  },
+
   methods: {
     toggleDrawer() {
       this.drawer = !this.drawer;
@@ -124,6 +131,9 @@ export default {
     updateContentSize(s) {
       this.contentSize = s;
     },
+    updateBackgroundImageURL(s) {
+      this.bg.backgroundImage = s ? `url(${s})` : "";
+    },
   },
 };
 </script>
diff --git a/src/components/SettingsPage.vue b/src/components/SettingsPage.vue
index 8dc35b1..79a92fe 100644
--- a/src/components/SettingsPage.vue
+++ b/src/components/SettingsPage.vue
@@ -30,6 +30,23 @@
         </v-card-text>
       </v-window-item>
       <v-window-item :value="2">
+        <v-card-text>
+          <v-text-field
+            label="Background Image URL"
+            prepend-icon="mdi-image"
+            variant="outlined"
+            shaped
+            v-model="backgroundImageURL"
+          ></v-text-field>
+        </v-card-text>
+        <v-card-actions class="d-flex justify-space-around">
+          <v-btn variant="outlined" @click="saveBackgroundImageURL">Save</v-btn>
+          <v-btn variant="outlined" @click="resetBackgroundImageURL"
+            >Reset</v-btn
+          >
+        </v-card-actions>
+      </v-window-item>
+      <v-window-item :value="3">
         <v-textarea height="300" no-resize readonly :value="debugLog">
         </v-textarea>
         <v-card-actions class="d-flex justify-space-around">
@@ -40,7 +57,7 @@
           <v-btn variant="outlined" @click="debugLog = ''">Clear Output</v-btn>
         </v-card-actions>
       </v-window-item>
-      <v-window-item :value="3">
+      <v-window-item :value="4">
         <v-card-text>
           <span class="text-h6"
             >Otonashi is a simple, easy-to-use classboard app, built by 135e2
@@ -58,7 +75,7 @@
 export default {
   name: "SettingsPage",
   props: ["realTitleSize", "realContentSize"],
-  emits: ["updateTitleSize", "updateContentSize"],
+  emits: ["updateTitleSize", "updateContentSize", "updateBackgroundImageURL"],
 
   computed: {
     currentTitle() {
@@ -66,6 +83,8 @@ export default {
         case 1:
           return "MainPage Settings";
         case 2:
+          return "Background Settings";
+        case 3:
           return "Developer Settings";
         default:
           return "About Otonashi";
@@ -85,6 +104,7 @@ export default {
   },
 
   mounted() {
+    this.loadFromLS();
     // Sync titleSize with realTitleSize
     this.titleSize = this.realTitleSize;
     // Same
@@ -92,6 +112,7 @@ export default {
   },
 
   data: () => ({
+    backgroundImageURL: "",
     titleSize: 35,
     contentSize: "text-h5",
     debugLog: "",
@@ -100,6 +121,17 @@ export default {
 
   methods: {
     // LocalStorage
+    loadFromLS() {
+      this.backgroundImageURL =
+        JSON.parse(localStorage.getItem("backgroundImageURL")) ||
+        this.backgroundImageURL;
+    },
+    writeToLS() {
+      localStorage.setItem(
+        "backgroundImageURL",
+        JSON.stringify(this.backgroundImageURL)
+      );
+    },
     clearLS() {
       localStorage.clear();
       this.debugLog += "LocalStorage cleared.\n";
@@ -107,6 +139,15 @@ export default {
     showLSDebug() {
       this.debugLog += `LS in JSON format: ${JSON.stringify(localStorage)}\n`;
     },
+    saveBackgroundImageURL() {
+      this.$emit("updateBackgroundImageURL", this.backgroundImageURL);
+      this.writeToLS();
+    },
+    resetBackgroundImageURL() {
+      // Reset URL and emit event.
+      this.backgroundImageURL = "";
+      this.saveBackgroundImageURL();
+    },
   },
 };
 </script>
-- 
cgit v1.2.3