1 files changed, 43 insertions, 2 deletions

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>