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/components/SettingsPage.vue | 39 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

(limited to 'src/components')

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