cphipps/watchstate
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Initial WebUI code not exposed to public yet.

Browse Source
This commit is contained in:
Abdulmhsen B. A. A
2024-04-30 17:45:39 +03:00
parent 740578b9dc
commit 1a493e3892
23 changed files with 41638 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
frontend/layouts/default.vue Normal file
View File

@@ -0,0 +1,142 @@
<template>
<div class="container">
<nav class="navbar is-dark">
<div class="navbar-brand pl-5">
<NuxtLink class="navbar-item" href="/">
<span class="icon-text">
<span class="icon"><i class="fas fa-home"></i></span>
<span>Home</span>
</span>
</NuxtLink>
<button class="navbar-burger burger" @click="showMenu = !showMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</button>
</div>
<div class="navbar-menu" :class="{'is-active':showMenu}">
<div class="navbar-start">
<a class="navbar-item" href="/backends">
<span class="icon-text">
<span class="icon"><i class="fas fa-server"></i></span>
<span>Backends</span>
</span>
</a>
<a class="navbar-item" href="/history">
<span class="icon-text">
<span class="icon"><i class="fas fa-history"></i></span>
<span>History</span>
</span>
</a>
<a class="navbar-item" href="/logs">
<span class="icon-text">
<span class="icon"><i class="fas fa-globe"></i></span>
<span>Logs</span>
</span>
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<button class="button is-dark has-tooltip-bottom" @click="selectedTheme = 'light'"
v-if="'dark' === selectedTheme">
<span class="icon is-small is-left has-text-warning">
<i class="fas fa-sun"></i>
</span>
</button>
<button class="button is-dark has-tooltip-bottom" @click="selectedTheme = 'dark'"
v-if="'light' === selectedTheme">
<span class="icon is-small is-left">
<i class="fas fa-moon"></i>
</span>
</button>
</div>
</div>
</div>
</nav>
<div class="columns">
<div class="column is-12">
<slot/>
</div>
</div>
<div class="columns mt-3 is-mobile">
<div class="column is-8-mobile">
<div class="has-text-left">
© {{ Year }} - <a href="https://github.com/arabcoders/watchstate" target="_blank">WatchState</a>
</div>
</div>
</div>
</div>
</template>
<script setup>
import {ref} from 'vue'
import 'assets/css/bulma.css'
import 'assets/css/style.css'
import 'assets/css/all.css'
import {useStorage} from '@vueuse/core'
const selectedTheme = useStorage('theme', (() => window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')());
const Year = ref(new Date().getFullYear())
const showMenu = ref(false)
const applyPreferredColorScheme = (scheme) => {
for (let s = 0; s < document.styleSheets.length; s++) {
for (let i = 0; i < document.styleSheets[s].cssRules.length; i++) {
try {
const rule = document.styleSheets[s].cssRules[i];
if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) {
switch (scheme) {
case "light":
rule.media.appendMedium("original-prefers-color-scheme");
if (rule.media.mediaText.includes("light")) {
rule.media.deleteMedium("(prefers-color-scheme: light)");
}
if (rule.media.mediaText.includes("dark")) {
rule.media.deleteMedium("(prefers-color-scheme: dark)");
}
break;
case "dark":
rule.media.appendMedium("(prefers-color-scheme: light)");
rule.media.appendMedium("(prefers-color-scheme: dark)");
if (rule.media.mediaText.includes("original")) {
rule.media.deleteMedium("original-prefers-color-scheme");
}
break;
default:
rule.media.appendMedium("(prefers-color-scheme: dark)");
if (rule.media.mediaText.includes("light")) {
rule.media.deleteMedium("(prefers-color-scheme: light)");
}
if (rule.media.mediaText.includes("original")) {
rule.media.deleteMedium("original-prefers-color-scheme");
}
break;
}
}
} catch (e) {
console.debug(e);
}
}
}
}
onMounted(() => {
try {
applyPreferredColorScheme(selectedTheme.value);
} catch (e) {
}
})
watch(selectedTheme, (value) => {
try {
applyPreferredColorScheme(value);
} catch (e) {
}
})
</script>