75 lines
No EOL
2.8 KiB
Vue
75 lines
No EOL
2.8 KiB
Vue
<script setup lang="ts">
|
|
interface Settings {
|
|
hasFrontlight: boolean;
|
|
displayColors: string;
|
|
customize: boolean,
|
|
}
|
|
|
|
const emit = defineEmits(['update:settings']);
|
|
const localSettings = reactive<Settings>({
|
|
customize: false,
|
|
hasFrontlight: false,
|
|
displayColors: 'black-on-white'
|
|
});
|
|
|
|
const updateSettings = () => {
|
|
emit('update:settings', { ...toRaw(localSettings) });
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card bg-base-100 shadow-xl">
|
|
<div class="card-body">
|
|
<div class="">
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="card-title">Customize settings</h2>
|
|
<div class="form-control">
|
|
<label class="label cursor-pointer p-0">
|
|
<span class="label-text">Enable</span>
|
|
|
|
<input type="checkbox" v-model="localSettings.customize" class="checkbox" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div role="alert" class="alert alert-info">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<span class="text-xs">If you customize settings, all existing settings including WiFi credentials will be overwritten. This is only
|
|
recommended for initial flashing.</span>
|
|
</div>
|
|
<div class="space-y-4 mt-4">
|
|
<div class="form-control">
|
|
<label class="label cursor-pointer">
|
|
<span class="label-text">Has Frontlight <small>Only Rev. B</small></span>
|
|
<input type="checkbox" class="toggle toggle-primary" :disabled="!localSettings.customize"
|
|
v-model="localSettings.hasFrontlight" @change="updateSettings" />
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="label">
|
|
<span class="label-text">Display options</span>
|
|
</label>
|
|
<div class="space-y-2 ml-2">
|
|
<label class="label cursor-pointer">
|
|
<span class="label-text">White text on Black background</span>
|
|
<input type="radio" name="display-colors" class="radio radio-primary" value="white-on-black"
|
|
v-model="localSettings.displayColors" :disabled="!localSettings.customize" @change="updateSettings" />
|
|
</label>
|
|
<label class="label cursor-pointer">
|
|
<span class="label-text">Black text on White background</span>
|
|
<input type="radio" name="display-colors" class="radio radio-primary" value="black-on-white"
|
|
:disabled="!localSettings.customize" v-model="localSettings.displayColors" @change="updateSettings" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</template> |