82 lines
2.6 KiB
Vue
82 lines
2.6 KiB
Vue
<script lang="ts">
|
|
import { getDefaultSettings } from '@/mixins'
|
|
|
|
export default {
|
|
setup() {
|
|
let settings
|
|
|
|
let storedSettings = localStorage.getItem('settings')
|
|
if (storedSettings === null) {
|
|
settings = getDefaultSettings()
|
|
} else {
|
|
settings = JSON.parse(storedSettings)
|
|
}
|
|
|
|
return {
|
|
settings
|
|
}
|
|
},
|
|
methods: {
|
|
save() {
|
|
const settings = JSON.stringify(this.settings)
|
|
localStorage.setItem('settings', settings)
|
|
}
|
|
// download() {
|
|
// var hiddenElement = document.createElement('a');
|
|
|
|
// hiddenElement.href = 'data:attachment/text,' + encodeURI(JSON.stringify(this.settings));
|
|
// hiddenElement.target = '_blank';
|
|
// hiddenElement.download = 'safetwitch_prefs.json';
|
|
// hiddenElement.click();
|
|
// },
|
|
// async handleImport(event: any) {
|
|
// const file = await event.target.files[0].text()
|
|
// const parsed = JSON.parse(file)
|
|
|
|
// if (parsed.audioOnly == undefined) {
|
|
// return
|
|
// }
|
|
|
|
// this.settings = file
|
|
// this.save()
|
|
// },
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mx-auto w-[35rem] p-5 py-3 bg-ctp-crust rounded-md text-white">
|
|
<h1 class="font-bold text-3xl">Settings</h1>
|
|
<hr class="my-2" />
|
|
<ul class="w-full space-y-1">
|
|
<li v-for="setting in settings" :key="setting.type">
|
|
<div v-if="setting.type == 'checkbox'" class="justify-between items-center flex">
|
|
<label :for="setting.name">{{ setting.name }}</label>
|
|
<input :name="setting.name" type="checkbox" v-model="setting.selected" />
|
|
</div>
|
|
|
|
<div v-else-if="setting.type == 'option'" class="justify-between items-center flex">
|
|
<label :for="setting.name">{{ setting.name }}</label>
|
|
<select
|
|
:name="setting.name"
|
|
type="checkbox"
|
|
v-model="setting.selected"
|
|
class="text-black rounded-md h-8 p-0 pr-8 pl-2"
|
|
>
|
|
<option v-for="option of setting.options" :key="option" :value="option">
|
|
{{ option }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="space-x-2 mt-3">
|
|
<button @click="save" class="bg-ctp-surface0 p-4 py-2 rounded-md">Save</button>
|
|
<!-- <button @click="download" class="bg-ctp-surface0 p-4 py-2 rounded-md">Export</button>
|
|
<input type="file" @change="handleImport" name="fileinput" ref="fileinput"
|
|
class="bg-ctp-surface0 p-4 py-2 rounded-md"> -->
|
|
</div>
|
|
</div>
|
|
</template>
|