Add settings save and reset buttons

1 files changed, 26 insertions, 1 deletions

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>