From 624a047d29f80eb800b35c03e83b9320c70de89f Mon Sep 17 00:00:00 2001 From: "Andreas H. Kelch" <> Date: Thu, 26 Sep 2024 08:18:57 +0200 Subject: [PATCH] feat: added vi settings usage --- sources/app/src/App.vue | 45 +++++++++++++++++++++++ sources/app/src/stores/app.js | 43 +++++++++++++++++++++- sources/app/src/stores/color.js | 57 +++++++++++++++++++++++++++++ sources/app/src/views/LoginView.vue | 7 +++- 4 files changed, 148 insertions(+), 4 deletions(-) create mode 100644 sources/app/src/stores/color.js diff --git a/sources/app/src/App.vue b/sources/app/src/App.vue index 6d7b603..d8b42de 100644 --- a/sources/app/src/App.vue +++ b/sources/app/src/App.vue @@ -6,15 +6,60 @@ import { onBeforeMount } from 'vue' import { RouterLink, RouterView } from 'vue-router' import { useAppStore } from './stores/app' +import { useColorStore } from './stores/color' const appStore = useAppStore() +const colorStore = useColorStore() onBeforeMount(() => { appStore.init() }) + +function getPrimaryColor(lightness) { + return colorStore.getPrimaryColor(lightness) +} + +function getSecondaryColor(lightness) { + return colorStore.getSecondaryColor(lightness) +} + +function getPrimaryAlphaColor(lightness,alpha) { + return colorStore.getAlphaColor("primaryColor", lightness, alpha) +} + + + diff --git a/sources/app/src/stores/app.js b/sources/app/src/stores/app.js index cb1d1c1..4b95582 100644 --- a/sources/app/src/stores/app.js +++ b/sources/app/src/stores/app.js @@ -3,14 +3,21 @@ import { useRouter } from 'vue-router' import { defineStore } from 'pinia' import { Request } from '@viur/vue-utils' import { useUserStore } from '@viur/vue-utils/login/stores/user' +import { useColorStore } from '@/stores/color.js' + + export const useAppStore = defineStore('app', () => { const userStore = useUserStore() + const colorStore = useColorStore() const router = useRouter() const state = reactive({ init: false, - name: 'TODO' + "admin.login.background": publicAsset("login-background.jpg"), + "admin.login.logo": publicAsset("logo.svg"), + "admin.color.primary": "", + "admin.color.secondary": "" }) async function init() { @@ -18,6 +25,25 @@ export const useAppStore = defineStore('app', () => { .then(async (resp) => { let data = await resp.json() + for (const key in data) { + if (data[key] !== undefined || data[key] !== null) { + if (data[key].length > 0) { + if ((key.endsWith(".logo") || key.endsWith(".background")) && !key.startsWith("/")) { + state[key] = publicAsset(data[key]) + continue + } + state[key] = data[key] + } + if (key === "admin.color.primary") { + colorStore.state.primaryColor = state[key] + } + if (key === "admin.color.secondary") { + colorStore.state.secondaryColor = state[key] + } + } + } + + if (data['admin.user.google.clientID']) { userStore.googleInit(data['admin.user.google.clientID']).catch(() => { throw new Error('clientId is required since the plugin is not initialized with a Client Id') @@ -44,8 +70,21 @@ export const useAppStore = defineStore('app', () => { } ) + function publicAsset(path, prefix = "app") { + if (import.meta.env.DEV) { + if(path.startsWith("/")){ + return `${import.meta.env.VITE_API_URL}${path}` + }else{ + return `${prefix}/${path}` + } + + } + return path +} + return { state, - init + init, + publicAsset } }) diff --git a/sources/app/src/stores/color.js b/sources/app/src/stores/color.js new file mode 100644 index 0000000..90e91d7 --- /dev/null +++ b/sources/app/src/stores/color.js @@ -0,0 +1,57 @@ +// @ts-nocheck +import { reactive } from "vue" +import { defineStore } from "pinia" + +export const useColorStore = defineStore("colorStore", () => { + const state = reactive({ + primaryColor: "#d00f1c", + secondaryColor: "#333333" + }) + + function getPrimaryColor(lightness = 0) { + const [h,s,l] = colorConvert(state.primaryColor, lightness) + return "hsl(" + h + "," + s + "%," + l + "%)" + } + function getSecondaryColor(lightness = 0) { + const [h,s,l] = colorConvert(state.secondaryColor, lightness) + return "hsl(" + h + "," + s + "%," + l + "%)" + } + function colorConvert(hexColor, lightness) { + const r = parseInt("0x" + hexColor[1] + hexColor[2]) / 255 + const g = parseInt("0x" + hexColor[3] + hexColor[4]) / 255 + const b = parseInt("0x" + hexColor[5] + hexColor[6]) / 255 + + const cmin = Math.min(r, g, b) + const cmax = Math.max(r, g, b) + const delta = cmax - cmin + let h + let s + let l + + if (delta == 0) h = 0 + else if (cmax == r) h = ((g - b) / delta) % 6 + else if (cmax == g) h = (b - r) / delta + 2 + else h = (r - g) / delta + 4 + + h = Math.round(h * 60) + + if (h < 0) h += 360 + + l = (cmax + cmin) / 2 + s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)) + s = +(s * 100).toFixed(1) + l = +(l * 100).toFixed(1) + if (lightness) { + l = lightness + } + return [h,s,l] + + } + + function getAlphaColor(color, lightness, alpha){ + const [h,s,l] = colorConvert(state[color], lightness) + return "hsla(" + h + "," + s + "%," + l + "% , "+ alpha +"%)" + } + + return { state, getPrimaryColor, getSecondaryColor, getAlphaColor } +}) diff --git a/sources/app/src/views/LoginView.vue b/sources/app/src/views/LoginView.vue index a2e2641..f2e0ffa 100644 --- a/sources/app/src/views/LoginView.vue +++ b/sources/app/src/views/LoginView.vue @@ -1,10 +1,13 @@