From ffd55641317ebd6344e92eb8a3204981846b5e05 Mon Sep 17 00:00:00 2001
From: 135e2 <135e2@135e2.tk>
Date: Tue, 9 Aug 2022 00:34:26 +0800
Subject: feat(SettingsPage): add backgroundImage customization

---
 src/App.vue                     |  6 +++++-
 src/components/SettingsPage.vue | 39 +++++++++++++++++++++++++++++++++++++--
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 67915be..f121977 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-url="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",
     },
   }),
@@ -124,6 +125,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 da10500..b25a377 100644
--- a/src/components/SettingsPage.vue
+++ b/src/components/SettingsPage.vue
@@ -31,7 +31,18 @@
       </v-window-item>
       <v-window-item :value="2">
         <v-card-text>
-          <span class="text-h2">Card {{ n }}</span>
+          <v-text-field
+            label="Background Image URL"
+            prepend-icon="mdi-image"
+            variant="outlined"
+            shaped
+            v-model="backgroundImageURL"
+          ></v-text-field>
+        </v-card-text>
+      </v-window-item>
+      <v-window-item :value="3">
+        <v-card-text>
+          <span class="text-h2">Card</span>
         </v-card-text>
       </v-window-item>
     </v-window>
@@ -42,13 +53,15 @@
 export default {
   name: "SettingsPage",
   props: ["realTitleSize", "realContentSize"],
-  emits: ["updateTitleSize", "updateContentSize"],
+  emits: ["updateTitleSize", "updateContentSize", "updateBackgroundImageURL"],
 
   computed: {
     currentTitle() {
       switch (this.location) {
         case 1:
           return "MainPage Settings";
+        case 2:
+          return "Background Settings";
         default:
           return "About Otonashi";
       }
@@ -64,9 +77,15 @@ export default {
     contentSize(s, _) {
       this.$emit("updateContentSize", s);
     },
+    // eslint-disable-next-line no-unused-vars
+    backgroundImageURL(s, _) {
+      this.$emit("updateBackgroundImageURL", s);
+      this.writeToLS();
+    },
   },
 
   mounted() {
+    this.loadFromLS();
     // Sync titleSize with realTitleSize
     this.titleSize = this.realTitleSize;
     // Same
@@ -74,9 +93,25 @@ export default {
   },
 
   data: () => ({
+    backgroundImageURL: "",
     titleSize: 35,
     contentSize: "text-h5",
     location: 1,
   }),
+
+  methods: {
+    // LocalStorage
+    loadFromLS() {
+      this.backgroundImageURL =
+        JSON.parse(localStorage.getItem("BackgroundImageURL")) ||
+        this.backgroundImageURL;
+    },
+    writeToLS() {
+      localStorage.setItem(
+        "backgroundImageURL",
+        JSON.stringify(this.backgroundImageURL)
+      );
+    },
+  },
 };
 </script>
-- 
cgit v1.2.3