summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/SettingsModule.vue
diff options
context:
space:
mode:
authorJannik Schönartz2018-07-02 22:39:23 +0200
committerJannik Schönartz2018-07-02 22:39:23 +0200
commit718f9b58331f4a9bee5eba3296329cc58b4364a6 (patch)
tree63e0048923f1a2a4f4fc44ef9aec0e7c51a967e1 /webapp/src/components/SettingsModule.vue
parent[server] Initial commit to add the node server stuff. (diff)
downloadbas-718f9b58331f4a9bee5eba3296329cc58b4364a6.tar.gz
bas-718f9b58331f4a9bee5eba3296329cc58b4364a6.tar.xz
bas-718f9b58331f4a9bee5eba3296329cc58b4364a6.zip
[webapp] Initial commit to add the node webapp stuff.
Diffstat (limited to 'webapp/src/components/SettingsModule.vue')
-rw-r--r--webapp/src/components/SettingsModule.vue86
1 files changed, 86 insertions, 0 deletions
diff --git a/webapp/src/components/SettingsModule.vue b/webapp/src/components/SettingsModule.vue
new file mode 100644
index 0000000..b7625ef
--- /dev/null
+++ b/webapp/src/components/SettingsModule.vue
@@ -0,0 +1,86 @@
+<i18n>
+{
+ "en": {
+ "darkTheme": "Dark Theme",
+ "clipped": "Show drawer under the top bar",
+ "mini": "Show icons in collapsed drawer"
+ },
+ "de": {
+ "darkTheme": "Dark Theme",
+ "clipped": "Zeige den Drawer unter der Hauptleiste",
+ "mini": "Zeige die Symbole im eingeklappten Drawer"
+ }
+}
+</i18n>
+
+<template>
+ <v-container>
+ <v-layout>
+ <v-flex md4 offset-md4 sm10 offset-sm1>
+ <v-select
+ class="lang-select"
+ :items="langChoices"
+ v-model="locale"
+ solo
+ ></v-select>
+ <v-switch
+ :label="$t('darkTheme')"
+ v-model="dark"
+ color="primary"
+ ></v-switch>
+ <v-switch
+ :label="$t('clipped')"
+ v-model="clipped"
+ color="primary"
+ class="hidden-md-and-down"
+ ></v-switch>
+ <v-switch
+ :label="$t('mini')"
+ v-model="mini"
+ color="primary"
+ class="hidden-md-and-down"
+ ></v-switch>
+ </v-flex>
+ </v-layout>
+ </v-container>
+</template>
+
+<script>
+
+export default {
+ name: 'SettingsPage',
+ data () {
+ return {
+ langChoices: [ { text: 'Deutsch', value: 'de' }, { text: 'English', value: 'en' } ]
+ }
+ },
+ computed: {
+ locale: {
+ get () { return this.$store.state.locale },
+ set (value) { this.$store.commit('setLocale', value) }
+ },
+ dark: {
+ get () { return this.$store.state.dark },
+ set (value) { this.$store.commit('setDark', value) }
+ },
+ clipped: {
+ get () { return this.$store.state.clipped },
+ set (value) { this.$store.commit('setClipped', value) }
+ },
+ mini: {
+ get () { return this.$store.state.mini },
+ set (value) { this.$store.commit('setMini', value) }
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+.lang-select {
+ margin-top: 40px;
+ margin-bottom: 40px;
+}
+
+</style>