JSON config files for settings page
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
parent
50a3dab447
commit
696b1230a6
|
@ -1,2 +1,2 @@
|
||||||
theme: dark
|
theme: default
|
||||||
language: en
|
language: en
|
||||||
|
|
|
@ -11,9 +11,8 @@ import PhotoPrism from "photoprism.vue";
|
||||||
import Router from "vue-router";
|
import Router from "vue-router";
|
||||||
import Routes from "routes";
|
import Routes from "routes";
|
||||||
import Session from "session";
|
import Session from "session";
|
||||||
import { Settings } from "luxon";
|
import {Settings} from "luxon";
|
||||||
import Socket from "common/websocket";
|
import Socket from "common/websocket";
|
||||||
import Translations from "./i18n/translations.json";
|
|
||||||
import Viewer from "common/viewer";
|
import Viewer from "common/viewer";
|
||||||
import Vue from "vue";
|
import Vue from "vue";
|
||||||
import Vuetify from "vuetify";
|
import Vuetify from "vuetify";
|
||||||
|
@ -22,6 +21,10 @@ import VueFilters from "vue2-filters";
|
||||||
import VueFullscreen from "vue-fullscreen";
|
import VueFullscreen from "vue-fullscreen";
|
||||||
import VueInfiniteScroll from "vue-infinite-scroll";
|
import VueInfiniteScroll from "vue-infinite-scroll";
|
||||||
|
|
||||||
|
// Resources
|
||||||
|
import themes from "./resources/themes.json";
|
||||||
|
import translations from "./resources/translations.json";
|
||||||
|
|
||||||
// Initialize helpers
|
// Initialize helpers
|
||||||
const config = new Config(window.localStorage, window.clientConfig);
|
const config = new Config(window.localStorage, window.clientConfig);
|
||||||
const viewer = new Viewer();
|
const viewer = new Viewer();
|
||||||
|
@ -38,26 +41,18 @@ Vue.prototype.$socket = Socket;
|
||||||
Vue.prototype.$config = config;
|
Vue.prototype.$config = config;
|
||||||
Vue.prototype.$clipboard = clipboard;
|
Vue.prototype.$clipboard = clipboard;
|
||||||
|
|
||||||
|
// Theme config
|
||||||
|
const themeSetting = config.getValue("settings").theme;
|
||||||
|
const theme = themes[themeSetting] ? themes[themeSetting] : themes["default"];
|
||||||
|
|
||||||
// Register Vuetify
|
// Register Vuetify
|
||||||
Vue.use(Vuetify, {
|
Vue.use(Vuetify, { theme });
|
||||||
theme: {
|
|
||||||
primary: "#FFD600",
|
|
||||||
secondary: "#b0bec5",
|
|
||||||
accent: "#00B8D4",
|
|
||||||
error: "#E57373",
|
|
||||||
info: "#00B8D4",
|
|
||||||
success: "#00BFA5",
|
|
||||||
warning: "#FFD600",
|
|
||||||
delete: "#E57373",
|
|
||||||
love: "#EF5350",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
Vue.config.language = "en";
|
Vue.config.language = "en";
|
||||||
Settings.defaultLocale = Vue.config.language;
|
Settings.defaultLocale = Vue.config.language;
|
||||||
|
|
||||||
// Register other VueJS plugins
|
// 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(VueLuxon);
|
||||||
Vue.use(VueInfiniteScroll);
|
Vue.use(VueInfiniteScroll);
|
||||||
Vue.use(VueFullscreen);
|
Vue.use(VueFullscreen);
|
||||||
|
@ -75,22 +70,22 @@ const router = new Router({
|
||||||
});
|
});
|
||||||
|
|
||||||
router.beforeEach((to, from, next) => {
|
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()) {
|
if (isPublic || Session.isAdmin()) {
|
||||||
next();
|
next();
|
||||||
} else {
|
} else {
|
||||||
next({
|
next({
|
||||||
name: "login",
|
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()) {
|
if (isPublic || Session.isUser()) {
|
||||||
next();
|
next();
|
||||||
} else {
|
} else {
|
||||||
next({
|
next({
|
||||||
name: "login",
|
name: "login",
|
||||||
params: { nextUrl: to.fullPath },
|
params: {nextUrl: to.fullPath},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -99,9 +94,7 @@ router.beforeEach((to, from, next) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
// Run app
|
// Run app
|
||||||
/* eslint-disable no-unused-vars */
|
new Vue({
|
||||||
const app = new Vue({
|
|
||||||
el: "#photoprism",
|
|
||||||
router,
|
router,
|
||||||
render: h => h(PhotoPrism),
|
render: h => h(PhotoPrism),
|
||||||
});
|
}).$mount("#photoprism");
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<v-layout wrap align-center>
|
<v-layout wrap align-center>
|
||||||
<v-flex xs12 sm6 class="pr-3">
|
<v-flex xs12 sm6 class="pr-3">
|
||||||
<v-select
|
<v-select
|
||||||
:items="languages"
|
:items="options.languages"
|
||||||
label="Language"
|
label="Language"
|
||||||
color="blue-grey"
|
color="blue-grey"
|
||||||
v-model="settings.language"
|
v-model="settings.language"
|
||||||
|
@ -15,7 +15,7 @@
|
||||||
|
|
||||||
<v-flex xs12 sm6 class="pr-3">
|
<v-flex xs12 sm6 class="pr-3">
|
||||||
<v-select
|
<v-select
|
||||||
:items="themes"
|
:items="options.themes"
|
||||||
label="Theme"
|
label="Theme"
|
||||||
color="blue-grey"
|
color="blue-grey"
|
||||||
v-model="settings.theme"
|
v-model="settings.theme"
|
||||||
|
@ -38,22 +38,20 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Settings from "model/settings";
|
import Settings from "model/settings";
|
||||||
|
import options from "resources/options.json";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'p-tab-general',
|
name: 'p-tab-general',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
readonly: this.$config.getValue("readonly"),
|
readonly: this.$config.getValue("readonly"),
|
||||||
active: 0,
|
|
||||||
settings: new Settings(this.$config.values.settings),
|
settings: new Settings(this.$config.values.settings),
|
||||||
list: {},
|
options: options,
|
||||||
themes: [{text: "Dark", value: "dark"}, {text: "Light", value: "light"}],
|
|
||||||
languages: [{text: "English", value: "en"}],
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
load() {
|
load() {
|
||||||
this.settings.load().then((r) => { this.list = r.getValues(); });
|
this.settings.load();
|
||||||
},
|
},
|
||||||
save() {
|
save() {
|
||||||
this.settings.save().then(() => {
|
this.settings.save().then(() => {
|
||||||
|
|
18
frontend/src/resources/options.json
Normal file
18
frontend/src/resources/options.json
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"languages": [
|
||||||
|
{
|
||||||
|
"text": "English",
|
||||||
|
"value": "en"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"themes": [
|
||||||
|
{
|
||||||
|
"text": "Amber",
|
||||||
|
"value": "default"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Pink",
|
||||||
|
"value": "pink"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
24
frontend/src/resources/themes.json
Normal file
24
frontend/src/resources/themes.json
Normal file
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue