ngn/safetwitch
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Activity

Add types for settings, make new settings format, migration, and export/import #67 #69

Browse Source
This commit is contained in:
dragongoose
2023-11-04 19:34:22 -04:00
parent 947cc56ba4
commit 7d361da167
2 changed files with 139 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/views/SettingsView.vue
View File

@ -1,12 +1,11 @@
<script lang="ts">
import { ref } from 'vue'
import { getDefaultSettings, syncUserSettings, setLanguage, themeList } from '@/settingsManager'
import type { Settings } from '@/settingsManager'
export default {
setup() {
let settings
syncUserSettings()
let settings: Settings
let storedSettings = localStorage.getItem('settings')
if (storedSettings === null) {
settings = getDefaultSettings()
@ -14,6 +13,11 @@ export default {
settings = JSON.parse(storedSettings)
}
const syncResp = syncUserSettings(settings)
if (syncResp.changed) {
settings = syncResp.settings
}
let selectedTheme = localStorage.getItem('theme') || "light"
return {
@ -26,7 +30,8 @@ export default {
save() {
const settings = JSON.stringify(this.settings)
localStorage.setItem('settings', settings)
setLanguage(this.settings.language.selected, this.$i18n)
console.log(this.settings)
setLanguage(this.settings.settings.language.selected, this.$i18n)
this.setTheme()
// Reload needed
@ -40,26 +45,30 @@ export default {
return 'border-purple'
}
return "border-none"
}
// download() {
// var hiddenElement = document.createElement('a');
},
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)
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)
let settings: Settings
// if (parsed.audioOnly == undefined) {
// return
// }
if (parsed.version !== getDefaultSettings().version && parsed.version !== undefined) {
const syncResp = syncUserSettings(parsed)
settings = syncResp.settings
} else {
settings = parsed
}
// this.settings = file
// this.save()
// },
this.settings = settings
this.save()
},
}
}
</script>
@ -69,7 +78,7 @@ export default {
<h1 class="font-bold text-3xl">{{ $t("nav.settings") }}</h1>
<hr class="my-2" />
<ul class="w-full space-y-1">
<li v-for="setting in settings" :key="setting.type">
<li v-for="setting in settings.settings" :key="setting.type">
<div v-if="setting.type == 'checkbox'" class="justify-between items-center flex">
<label :for="setting.name">{{ $t(`settings.${setting.name}`) }}</label>
<input :name="setting.name" type="checkbox" v-model="setting.selected" />
@ -93,8 +102,10 @@ export default {
<!--
Use theme colors for preview
-->
<li v-for="theme in themeList" :key="theme.name" class="hover:scale-110 border-2 rounded-md transition-transform" :class="highlight(theme.name)">
<button @click="selectedTheme = theme.name" class="p-5 py-1.5 border-4 rounded-md" :style="`border-color: ${theme.extend.colors.primary}; background:${theme.extend.colors.crust}; color:${theme.extend.colors.contrast};`">
<li v-for="theme in themeList" :key="theme.name" class="hover:scale-110 border-2 rounded-md transition-transform"
:class="highlight(theme.name)">
<button @click="selectedTheme = theme.name" class="p-5 py-1.5 border-4 rounded-md"
:style="`border-color: ${theme.extend.colors.primary}; background:${theme.extend.colors.crust}; color:${theme.extend.colors.contrast};`">
<p>{{ theme.name }}</p>
</button>
</li>
@ -102,9 +113,8 @@ export default {
<div class="space-x-2 mt-3">
<button @click="save" class="bg-surface0 p-4 py-2 rounded-md">{{ $t('settings.saveButton') }}</button>
<!-- <button @click="download" class="bg-surface0 p-4 py-2 rounded-md">Export</button>
<input type="file" @change="handleImport" name="fileinput" ref="fileinput"
class="bg-surface0 p-4 py-2 rounded-md"> -->
<button @click="download" class="bg-surface0 p-4 py-2 rounded-md">Export</button>
<input type="file" @change="handleImport" name="fileinput" ref="fileinput" class="bg-surface0 p-4 py-2 rounded-md">
</div>
</div>
</template>