diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 44 | ||||
| -rw-r--r-- | src/components/SettingsModal.vue | 27 |
2 files changed, 67 insertions, 4 deletions
diff --git a/src/App.vue b/src/App.vue index da99068..23bd866 100644 --- a/src/App.vue +++ b/src/App.vue @@ -121,8 +121,8 @@ export default defineComponent({ autoPrevAction: null as AutoAction | null, // Used to help prevent action cycles autoPrevActionFail: false, // Used to avoid re-trying a failed expand/collapse // Options - lytOpts: {...defaultLytOpts}, - uiOpts: {...defaultUiOpts}, + lytOpts: this.getLytOpts(), + uiOpts: this.getUiOpts(), // For window-resize handling width: document.documentElement.clientWidth, height: document.documentElement.clientHeight, @@ -604,6 +604,14 @@ export default defineComponent({ // Re-initialise tree this.initTreeFromServer(); }, + onResetSettings(){ + if (this.uiOpts.useReducedTree != defaultUiOpts.useReducedTree){ + this.onTreeChange(); + } + Object.assign(this.lytOpts, defaultLytOpts); + Object.assign(this.uiOpts, defaultUiOpts); + this.onLayoutOptionChange(); + }, // For help events onHelpIconClick(){ if (!this.handleActionForTutorial('help')){ @@ -691,6 +699,36 @@ export default defineComponent({ console.log('ERROR loading initial tolnode data', error); }); }, + getLytOpts(){ + let opts: {[x: string]: boolean|number|string} = {...defaultLytOpts}; + for (let prop of Object.getOwnPropertyNames(opts)){ + let item = localStorage.getItem('lyt ' + prop); + if (item != null){ + switch (typeof(opts[prop])){ + case 'boolean': opts[prop] = Boolean(item); break; + case 'number': opts[prop] = Number(item); break; + case 'string': opts[prop] = item; break; + default: console.log(`WARNING: Found saved layout setting "${prop}" with unexpected type`); + } + } + } + return opts; + }, + getUiOpts(){ + let opts: {[x: string]: boolean|number|string|string[]|(string|number)[][]} = {...defaultUiOpts}; + for (let prop of Object.getOwnPropertyNames(opts)){ + let item = localStorage.getItem('ui ' + prop); + if (item != null){ + switch (typeof(opts[prop])){ + case 'boolean': opts[prop] = item == 'true'; break; + case 'number': opts[prop] = Number(item); break; + case 'string': opts[prop] = item; break; + default: console.log(`WARNING: Found saved UI setting "${prop}" with unexpected type`); + } + } + } + return opts; + }, resetMode(){ this.infoModalNodeName = null; this.searchOpen = false; @@ -771,7 +809,7 @@ export default defineComponent({ @help-modal-close="helpOpen = false" @start-tutorial="onStartTutorial"/> </transition> <settings-modal v-if="settingsOpen" :lytOpts="lytOpts" :uiOpts="uiOpts" - @settings-close="settingsOpen = false" + @settings-close="settingsOpen = false" @reset-settings="onResetSettings" @layout-option-change="onLayoutOptionChange" @tree-change="onTreeChange"/> <!-- Overlay used to prevent interaction and capture clicks --> <div :style="{visibility: modeRunning ? 'visible' : 'hidden'}" diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue index e9f76c8..dc9b4a5 100644 --- a/src/components/SettingsModal.vue +++ b/src/components/SettingsModal.vue @@ -37,9 +37,25 @@ export default defineComponent({ onTreeChg(){ this.$emit('tree-change'); }, + onSave(){ + const savedLytOpts = ['tileSpacing', 'minTileSz', 'maxTileSz', 'layoutType', 'sweepMode', ]; + for (let prop of savedLytOpts){ + localStorage.setItem('lyt ' + prop, String(this.lytOpts[prop as keyof LayoutOptions])); + } + const savedUiOpts = ['tileChgDuration', 'jumpToSearchedNode', 'useReducedTree', ]; + for (let prop of savedUiOpts){ + localStorage.setItem('ui ' + prop, String(this.uiOpts[prop])); + } + console.log('Settings saved'); + }, + onReset(){ + localStorage.clear(); + this.$emit('reset-settings'); + console.log('Settings reset'); + }, }, components: {CloseIcon, }, - emits: ['settings-close', 'layout-option-change', 'tree-change', ], + emits: ['settings-close', 'layout-option-change', 'tree-change', 'reset-settings', ], }); </script> @@ -138,6 +154,15 @@ export default defineComponent({ </li> </ul> </div> + <hr class="border-stone-400"/> + <div class="flex justify-around mt-2"> + <button class="block rounded px-4 py-2 bg-stone-800 text-white" @click="onSave"> + Save + </button> + <button class="block rounded px-4 py-2 bg-stone-800 text-white" @click="onReset"> + Reset + </button> + </div> </div> </div> </template> |