Save local presets

2025-03-09 22:42:08 -05:00
parent afdf713263
commit d9b376815f
6 changed files with 156 additions and 19 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
      "dependencies": {
        "axios": "^1.8.1",
        "bootstrap": "^5.3.3",
+        "bootstrap-icons": "^1.11.3",
        "bps": "^2.0.1",
        "center-align": "^1.0.1",
        "crc-32": "^1.2.2",
@@ -1554,6 +1555,22 @@
        "@popperjs/core": "^2.11.8"
      }
    },
+    "node_modules/bootstrap-icons": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
+      "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT"
+    },
    "node_modules/bps": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/bps/-/bps-2.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
  "dependencies": {
    "axios": "^1.8.1",
    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
    "bps": "^2.0.1",
    "center-align": "^1.0.1",
    "crc-32": "^1.2.2",
--- a/src/components/PresetPicker.vue
+++ b/src/components/PresetPicker.vue
@@ -10,14 +10,19 @@ export default defineComponent({
  data() {
    return {
      selected: "custom",
+      localPresets: [],
    };
  },
  emits: [
-    'selected'
+    "selected",
+    "save",
  ],
  props: {
    generator: null,
  },
+  async mounted() {
+    this.localPresets = await localforage.getItem("local_presets") ?? [];
+  },
  computed: {
    settings() {
      const settings = {};
@@ -54,26 +59,60 @@ export default defineComponent({
  methods: {
    change() {
      if (this.selected && this.selected != "custom") {
-        this.$emit("selected", this.presets[this.selected]);
+        if (this.selected.startsWith("local_")) {
+          this.$emit("selected", this.localPresets[this.selected.substring(6)]);
+        } else {
+          this.$emit("selected", this.presets[this.selected]);
+        }
      }
    },
+    settingsMatch(newSettings, preset) {
+      for (const settingName of Object.keys(newSettings)) {
+        if (preset[settingName] != newSettings[settingName]) {
+          return false;
+        }
+      }
+      return true
+    },
    settingChanged(newSettings) {
      for (const presetName of Object.keys(this.presets)) {
        const preset = this.presets[presetName];
-        var matches = true;
-        for (const settingName of Object.keys(newSettings)) {
-          if (preset[settingName] != newSettings[settingName]) {
-            matches = false;
-            break;
-          }
-        }
-        if (matches) {
+        if (this.settingsMatch(newSettings, preset)) {
          this.selected = presetName;
          return;
        }
      }
+      for (const [idx, preset] of this.localPresets.entries()) {
+        if (this.settingsMatch(newSettings, preset)) {
+          this.selected = `local_${idx}`;
+          return;
+        }
+      }
      this.selected = "custom";
    },
+    saveClicked() {
+      this.$emit("save", this.localPresets.map(s => s.display));
+    },
+    async deleteClicked() {
+      const idx = this.selected.substring(6);
+      this.localPresets.splice(idx, 1);
+      this.selected = "custom";
+      await this.updateLocalPresets();
+    },
+    async savePreset(idx, settings) {
+      if (idx == null) {
+        idx = this.localPresets.length;
+        this.localPresets.push(settings);
+      } else {
+        this.localPresets[idx] = settings;
+      }
+      this.selected = `local_${idx}`;
+      await this.updateLocalPresets();
+    },
+    async updateLocalPresets() {
+      const copy = JSON.parse(JSON.stringify(this.localPresets));
+      await localforage.setItem("local_presets", copy);
+    },
  },
 });
 </script>
@@ -84,12 +123,29 @@ export default defineComponent({
      Preset:
    </label>
    <select v-model="selected" class="form-select" id="presetSelector" @change="change">
-      <option value="custom" selected>Custom</option>
-      <template v-for="name of Object.keys(presets)">
-        <option :value="name">
-          {{ presets[name].display }}
-        </option>
-      </template>
+      <option disabled="true" value="custom">Custom</option>
+      <optgroup label="Global Presets">
+        <template v-for="name of Object.keys(presets)">
+          <option :value="name">
+            {{ presets[name].display }}
+          </option>
+        </template>
+      </optgroup>
+      <optgroup v-if="localPresets.length" label="Local Presets">
+        <template v-for="(preset, idx) of localPresets">
+          <option :value="`local_${idx}`">
+            {{ preset.display }}
+          </option>
+        </template>
+      </optgroup>
    </select>
+    <button class="btn btn-outline-secondary" type="button" @click="saveClicked"
+        :disabled="selected != 'custom'">
+      Save Preset
+    </button>
+    <button class="btn btn-outline-danger" type="button" @click="deleteClicked"
+        :disabled="!selected.startsWith('local_')">
+      <i class="bi bi-trash"></i>
+    </button>
  </div>
 </template>
--- a/src/components/Seed.vue
+++ b/src/components/Seed.vue
@@ -89,7 +89,7 @@ export default defineComponent({
          }
        })
        .catch(error => {
-          if (error.response.status == 409) {
+          if (error.response?.status == 409) {
            // still generating, try again
            setTimeout(this.fetchSeed.bind(this), 2000);
          } else {
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,8 @@ import App from "./App.vue";
 import router from "./router";

 import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap/dist/js/bootstrap.min.js";
+import "bootstrap-icons/font/bootstrap-icons.css";
 import "bootstrap";

 import "./assets/main.css";
--- a/src/views/GenerateView.vue
+++ b/src/views/GenerateView.vue
@@ -2,6 +2,7 @@
 import { defineComponent } from "vue";

 import axios from "axios";
+import { Modal } from "bootstrap";

 import PresetPicker from "@/components/PresetPicker.vue";
 import SettingPicker from "@/components/SettingPicker.vue";
@@ -14,10 +15,15 @@ export default defineComponent({
  data() {
    return {
      set: {},
+      existingLocalPresets: [],
+      newPresetName: "",
+      replacePreset: null,
+      modal: null,
    };
  },
  mounted() {
-    document.title = "ALttPRandomizer";
+    document.title = "ALttPRandomizer"
+    this.modal = new Modal(document.getElementById("savePresetModal"), {});
  },
  watch: {
    set: {
@@ -52,11 +58,65 @@ export default defineComponent({
        }
      }
    },
+    savePreset(names) {
+      this.newPresetName = "";
+      this.existingLocalPresets = names;
+      this.modal.show();
+    },
+    async modalSavePreset() {
+      const preset = JSON.parse(JSON.stringify(this.set));
+      preset.display = this.newPresetName;
+      if (this.replacePreset != null) {
+        preset.display = this.existingLocalPresets[this.replacePreset];
+      }
+      await this.$refs.preset.savePreset(this.replacePreset, preset);
+      this.modal.hide();
+    },
  },
 });
 </script>

 <template>
+  <div class="modal" tabindex="-1" id="savePresetModal">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Save Preset</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="input-group mb-3">
+            <select v-model="replacePreset" class="form-select">
+              <option :value="null" selected>New</option>
+              <optgroup v-if="existingLocalPresets.length" label="Overwrite Preset:">
+                <template v-for="(preset, idx) of existingLocalPresets">
+                  <option :value="idx">
+                    {{ preset }}
+                  </option>
+                </template>
+              </optgroup>
+            </select>
+          </div>
+          <div class="input-group mb-3" v-if="replacePreset == null">
+            <label class="input-group-text" for="new-preset-name">
+              Name
+            </label>
+            <input type="text" class="form-control" placeholder="Display Name"
+                id="new-preset-name" v-model="newPresetName" autocomplete="off" />
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+            Cancel
+          </button>
+          <button :disabled="replacePreset == null && newPresetName.length == 0" type="button"
+              class="btn btn-primary" @click="modalSavePreset">
+            Save Preset
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
  <div class="card content-div m-3">
    <div class="card-header">
      Generate Seed
@@ -64,7 +124,8 @@ export default defineComponent({
    <ul class="list-group list-group-flush">
      <li class="list-group-item">
        <div class="mb-2 mt-2">
-          <PresetPicker ref="preset" generator="base" @selected="presetSelected" />
+          <PresetPicker ref="preset" generator="base" @selected="presetSelected"
+              @save="savePreset" />
        </div>
      </li>
      <li class="list-group-item">