safetwitch/src/views/SettingsView.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">
                <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" :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>