aboutsummaryrefslogtreecommitdiff
path: root/src/components/SettingsPage.vue
blob: 8dc35b1278bd86075e1c18860ab5bd0aa3573335 (plain)
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>