JSON config files for settings page

Signed-off-by: Michael Mayer <michael@liquidbytes.net>

assets/config/settings.yml

@@ -1,2 +1,2 @@
-theme: dark
+theme: default
 language: en

frontend/src/app.js

@@ -11,9 +11,8 @@ import PhotoPrism from "photoprism.vue";
 import Router from "vue-router";
 import Routes from "routes";
 import Session from "session";
-import { Settings } from "luxon";
+import {Settings} from "luxon";
 import Socket from "common/websocket";
-import Translations from "./i18n/translations.json";
 import Viewer from "common/viewer";
 import Vue from "vue";
 import Vuetify from "vuetify";
@@ -22,6 +21,10 @@ import VueFilters from "vue2-filters";
 import VueFullscreen from "vue-fullscreen";
 import VueInfiniteScroll from "vue-infinite-scroll";
 
+// Resources
+import themes from "./resources/themes.json";
+import translations from "./resources/translations.json";
+
 // Initialize helpers
 const config = new Config(window.localStorage, window.clientConfig);
 const viewer = new Viewer();
@@ -38,26 +41,18 @@ Vue.prototype.$socket = Socket;
 Vue.prototype.$config = config;
 Vue.prototype.$clipboard = clipboard;
 
+// Theme config
+const themeSetting = config.getValue("settings").theme;
+const theme = themes[themeSetting] ? themes[themeSetting] : themes["default"];
+
 // Register Vuetify
-Vue.use(Vuetify, {
-    theme: {
-        primary: "#FFD600",
-        secondary: "#b0bec5",
-        accent: "#00B8D4",
-        error: "#E57373",
-        info: "#00B8D4",
-        success: "#00BFA5",
-        warning: "#FFD600",
-        delete: "#E57373",
-        love: "#EF5350",
-    },
-});
+Vue.use(Vuetify, { theme });
 
 Vue.config.language = "en";
 Settings.defaultLocale = Vue.config.language;
 
 // Register other VueJS plugins
-Vue.use(GetTextPlugin, {translations: Translations, silent: false, defaultLanguage: Vue.config.language});
+Vue.use(GetTextPlugin, {translations: translations, silent: false, defaultLanguage: Vue.config.language});
 Vue.use(VueLuxon);
 Vue.use(VueInfiniteScroll);
 Vue.use(VueFullscreen);
@@ -75,22 +70,22 @@ const router = new Router({
 });
 
 router.beforeEach((to, from, next) => {
-    if(to.matched.some(record => record.meta.admin)) {
+    if (to.matched.some(record => record.meta.admin)) {
         if (isPublic || Session.isAdmin()) {
             next();
         } else {
             next({
                 name: "login",
-                params: { nextUrl: to.fullPath },
+                params: {nextUrl: to.fullPath},
             });
         }
-    } else if(to.matched.some(record => record.meta.auth)) {
+    } else if (to.matched.some(record => record.meta.auth)) {
         if (isPublic || Session.isUser()) {
             next();
         } else {
             next({
                 name: "login",
-                params: { nextUrl: to.fullPath },
+                params: {nextUrl: to.fullPath},
             });
         }
     } else {
@@ -99,9 +94,7 @@ router.beforeEach((to, from, next) => {
 });
 
 // Run app
-/* eslint-disable no-unused-vars */
-const app = new Vue({
-    el: "#photoprism",
+new Vue({
     router,
     render: h => h(PhotoPrism),
-});
+}).$mount("#photoprism");

frontend/src/pages/settings/general.vue

@@ -5,7 +5,7 @@
                 <v-layout wrap align-center>
                     <v-flex xs12 sm6 class="pr-3">
                         <v-select
-                                :items="languages"
+                                :items="options.languages"
                                 label="Language"
                                 color="blue-grey"
                                 v-model="settings.language"
@@ -15,7 +15,7 @@
 
                     <v-flex xs12 sm6 class="pr-3">
                         <v-select
-                                :items="themes"
+                                :items="options.themes"
                                 label="Theme"
                                 color="blue-grey"
                                 v-model="settings.theme"
@@ -38,22 +38,20 @@
 
 <script>
     import Settings from "model/settings";
+    import options from "resources/options.json";
 
     export default {
         name: 'p-tab-general',
         data() {
             return {
                 readonly: this.$config.getValue("readonly"),
-                active: 0,
                 settings: new Settings(this.$config.values.settings),
-                list: {},
-                themes: [{text: "Dark", value: "dark"}, {text: "Light", value: "light"}],
-                languages: [{text: "English", value: "en"}],
+                options: options,
             };
         },
         methods: {
             load() {
-                this.settings.load().then((r) => { this.list = r.getValues(); });
+                this.settings.load();
             },
             save() {
                 this.settings.save().then(() => {

frontend/src/resources/options.json

@@ -0,0 +1,18 @@
+{
+  "languages": [
+    {
+      "text": "English",
+      "value": "en"
+    }
+  ],
+  "themes": [
+    {
+      "text": "Amber",
+      "value": "default"
+    },
+    {
+      "text": "Pink",
+      "value": "pink"
+    }
+  ]
+}

frontend/src/resources/themes.json

@@ -0,0 +1,24 @@
+{
+  "default": {
+    "primary": "#FFD600",
+    "secondary": "#b0bec5",
+    "accent": "#00B8D4",
+    "error": "#E57373",
+    "info": "#00B8D4",
+    "success": "#00BFA5",
+    "warning": "#FFD600",
+    "delete": "#E57373",
+    "love": "#EF5350"
+  },
+  "pink": {
+    "primary": "#ff4081",
+    "secondary": "#b0bec5",
+    "accent": "#00B8D4",
+    "error": "#E57373",
+    "info": "#00B8D4",
+    "success": "#00BFA5",
+    "warning": "#FFD600",
+    "delete": "#E57373",
+    "love": "#EF5350"
+  }
+}