1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
<template>
<v-card class="mx-auto" variant="outlined" max-height="500">
<v-card-title class="text-h5 font-weight-regular align-center">
<span>{{ currentTitle }}</span>
</v-card-title>
<v-window v-model="location" show-arrows="hover">
<v-window-item :value="1">
<v-card-text>
<v-container fluid>
<v-row>
<v-col>
<v-card-text>Title Size: {{ titleSize }}px</v-card-text>
<v-slider
v-model="titleSize"
:min="25"
:max="35"
step="1"
></v-slider>
</v-col>
<v-col>
<v-card-text>Content Size</v-card-text>
<v-radio-group v-model="contentSize" column>
<v-radio label="text-h4" value="text-h4"></v-radio>
<v-radio label="text-h5" value="text-h5"></v-radio>
<v-radio label="text-h6" value="text-h6"></v-radio>
</v-radio-group>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-window-item>
<v-window-item :value="2">
<v-textarea height="300" no-resize readonly :value="debugLog">
</v-textarea>
<v-card-actions class="d-flex justify-space-around">
<v-btn variant="outlined" @click="showLSDebug"
>Show LocalStorage Content</v-btn
>
<v-btn variant="outlined" @click="clearLS">Clear LocalStorage</v-btn>
<v-btn variant="outlined" @click="debugLog = ''">Clear Output</v-btn>
</v-card-actions>
</v-window-item>
<v-window-item :value="3">
<v-card-text>
<span class="text-h6"
>Otonashi is a simple, easy-to-use classboard app, built by 135e2
with Vue 3, Vuetify and ❤️.<br /><br />This project is libre, and
licensed under WTFPLv2, as published by San Hocevar on December
2004. See the COPYING file for more details.</span
>
</v-card-text>
</v-window-item>
</v-window>
</v-card>
</template>
<script>
export default {
name: "SettingsPage",
props: ["realTitleSize", "realContentSize"],
emits: ["updateTitleSize", "updateContentSize"],
computed: {
currentTitle() {
switch (this.location) {
case 1:
return "MainPage Settings";
case 2:
return "Developer Settings";
default:
return "About Otonashi";
}
},
},
watch: {
// eslint-disable-next-line no-unused-vars
titleSize(s, _) {
this.$emit("updateTitleSize", s);
},
// eslint-disable-next-line no-unused-vars
contentSize(s, _) {
this.$emit("updateContentSize", s);
},
},
mounted() {
// Sync titleSize with realTitleSize
this.titleSize = this.realTitleSize;
// Same
this.contentSize = this.realContentSize;
},
data: () => ({
titleSize: 35,
contentSize: "text-h5",
debugLog: "",
location: 1,
}),
methods: {
// LocalStorage
clearLS() {
localStorage.clear();
this.debugLog += "LocalStorage cleared.\n";
},
showLSDebug() {
this.debugLog += `LS in JSON format: ${JSON.stringify(localStorage)}\n`;
},
},
};
</script>
|
