ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-17 18:37:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Feat: Impl. server default appearance by injected JSON

Browse source
This commit is contained in:
Nelson Chan 2024-02-12 06:22:41 +08:00
parent 56aa81e337
commit 63add0376e
No known key found for this signature in database
7 changed files with 391 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
server/server.js
View file

@ -282,6 +282,9 @@ let needSetup = false;
const statusPageRouter = require("./routers/status-page-router"); const statusPageRouter = require("./routers/status-page-router");
app.use(statusPageRouter); app.use(statusPageRouter);
const { injectDefaultAppearance } = require("./utils/inject-default-appearance");
app.use(injectDefaultAppearance);
// Universal Route Handler, must be at the end of all express routes. // Universal Route Handler, must be at the end of all express routes.
app.get("*", async (_request, response) => { app.get("*", async (_request, response) => {
if (_request.originalUrl.startsWith("/upload/")) { if (_request.originalUrl.startsWith("/upload/")) {

50
server/utils/inject-default-appearance.js Normal file
View file

@ -0,0 +1,50 @@
const { Settings } = require("../settings");
const cheerio = require("cheerio");
const jsesc = require("jsesc");
const { log } = require("../../src/util");
const injectDefaultAppearance = (req, res, next) => {
try {
// Intercept send() calls and inject Default Appearance
// https://stackoverflow.com/a/60817116
const oldSend = res.send;
res.send = async (data) => {
if (typeof data === "string") {
log.debug("inject-default-appearance", req.method + " " + req.url);
const $ = cheerio.load(data);
const defaultAppearance = await Settings.get("defaultAppearance");
if (defaultAppearance) {
const head = $("head");
const escapedJSONObject = jsesc(defaultAppearance, { isScriptContext: true });
const script = $(`
<script id="default-appearance" data-json="{}">
window.defaultAppearance = ${escapedJSONObject};
</script>
`);
head.append(script);
data = $.root().html();
}
}
res.send = oldSend; // set function back to avoid 'double-send'
return res.send(data);
};
next();
} catch (e) {
next(e);
}
};
module.exports = {
injectDefaultAppearance
};

66
src/components/HorizontalTabHeader.vue Normal file
View file

@ -0,0 +1,66 @@
<template>
<div>
<ul class="nav nav-tabs">
<li v-for="(tab, index) in tabs" :key="index" class="nav-item">
<a class="nav-link" :class="{ active: index == selected }" href="#" @click="$emit('update:selected', index)">
{{ tab }}
</a>
</li>
</ul>
</div>
</template>
<script lang="js">
export default {
props: {
tabs: {
type: Array[String],
required: true,
},
selected: {
type: Number,
required: true,
},
},
emits: [ "update:selected" ],
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.nav-tabs {
border-bottom: 1px solid $primary;
.nav-item {
flex-grow: 1;
.nav-link {
text-align: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
&.active {
background-color: $highlight-white;
.dark & {
color: $dark-font-color;
background-color: $dark-header-bg;
}
border-color: transparent transparent $primary transparent;
border-width: 1px 1px 6px 1px;
}
&:hover {
.dark & {
background-color: $dark-header-bg;
}
border-color: $primary;
border-width: 1px 1px 6px 1px;
}
}
}
}
</style>

245
src/components/settings/Appearance.vue
View file

@ -1,186 +1,97 @@
<template> <template>
<div> <div>
<div class="my-4"> <HorizontalTabHeader
<label for="language" class="form-label"> v-model:selected="storageLoc"
{{ $t("Language") }} class="mt-4"
</label> :tabs="['Browser', 'Server']"
<select id="language" v-model="$root.language" class="form-select">
<option
v-for="(lang, i) in $i18n.availableLocales"
:key="`Lang${i}`"
:value="lang"
>
{{ $i18n.messages[lang].languageName }}
</option>
</select>
</div>
<div class="my-4">
<label for="timezone" class="form-label">{{ $t("Theme") }}</label>
<div>
<div
class="btn-group"
role="group"
aria-label="Basic checkbox toggle button group"
>
<input
id="btncheck1"
v-model="$root.userTheme"
type="radio"
class="btn-check"
name="theme"
autocomplete="off"
value="light"
/> />
<label class="btn btn-outline-primary" for="btncheck1"> <AppearanceSettings
{{ $t("Light") }} v-if="storageLoc == 0"
</label> v-model:language="$root.language"
v-model:userTheme="$root.userTheme"
<input v-model:userHeartbeatBar="$root.userHeartbeatBar"
id="btncheck2" v-model:styleElapsedTime="$root.styleElapsedTime"
v-model="$root.userTheme" :languages="languagesList"
type="radio"
class="btn-check"
name="theme"
autocomplete="off"
value="dark"
/> />
<label class="btn btn-outline-primary" for="btncheck2"> <AppearanceSettings
{{ $t("Dark") }} v-if="storageLoc == 1"
</label> :language="settings.defaultAppearance.language || ''"
:userTheme="settings.defaultAppearance.theme || ''"
<input :userHeartbeatBar="settings.defaultAppearance.heartbeatBarTheme || ''"
id="btncheck3" :styleElapsedTime="settings.defaultAppearance.styleElapsedTime || ''"
v-model="$root.userTheme" :languages="languagesList"
type="radio" @update:language="updateDefaultLanguage"
class="btn-check" @update:user-theme="updateDefaultTheme"
name="theme" @update:user-heartbeat-bar="updateDefaultHeartbeatBarTheme"
autocomplete="off" @update:style-elapsed-time="updateDefaultStyleElapsedTime"
value="auto"
/> />
<label class="btn btn-outline-primary" for="btncheck3">
{{ $t("Auto") }}
</label>
</div>
</div>
</div>
<div class="my-4">
<label class="form-label">{{ $t("Theme - Heartbeat Bar") }}</label>
<div>
<div
class="btn-group"
role="group"
aria-label="Basic checkbox toggle button group"
>
<input
id="btncheck4"
v-model="$root.userHeartbeatBar"
type="radio"
class="btn-check"
name="heartbeatBarTheme"
autocomplete="off"
value="normal"
/>
<label class="btn btn-outline-primary" for="btncheck4">
{{ $t("Normal") }}
</label>
<input
id="btncheck5"
v-model="$root.userHeartbeatBar"
type="radio"
class="btn-check"
name="heartbeatBarTheme"
autocomplete="off"
value="bottom"
/>
<label class="btn btn-outline-primary" for="btncheck5">
{{ $t("Bottom") }}
</label>
<input
id="btncheck6"
v-model="$root.userHeartbeatBar"
type="radio"
class="btn-check"
name="heartbeatBarTheme"
autocomplete="off"
value="none"
/>
<label class="btn btn-outline-primary" for="btncheck6">
{{ $t("None") }}
</label>
</div>
</div>
</div>
<!-- Timeline -->
<div class="my-4">
<label class="form-label">{{ $t("styleElapsedTime") }}</label>
<div>
<div class="btn-group" role="group">
<input
id="styleElapsedTimeShowNoLine"
v-model="$root.styleElapsedTime"
type="radio"
class="btn-check"
name="styleElapsedTime"
autocomplete="off"
value="no-line"
/>
<label class="btn btn-outline-primary" for="styleElapsedTimeShowNoLine">
{{ $t("styleElapsedTimeShowNoLine") }}
</label>
<input
id="styleElapsedTimeShowWithLine"
v-model="$root.styleElapsedTime"
type="radio"
class="btn-check"
name="styleElapsedTime"
autocomplete="off"
value="with-line"
/>
<label class="btn btn-outline-primary" for="styleElapsedTimeShowWithLine">
{{ $t("styleElapsedTimeShowWithLine") }}
</label>
<input
id="styleElapsedTimeNone"
v-model="$root.styleElapsedTime"
type="radio"
class="btn-check"
name="styleElapsedTime"
autocomplete="off"
value="none"
/>
<label class="btn btn-outline-primary" for="styleElapsedTimeNone">
{{ $t("None") }}
</label>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { import HorizontalTabHeader from "../HorizontalTabHeader.vue";
import AppearanceSettings from "./AppearanceSettings.vue";
export default {
components: {
HorizontalTabHeader,
AppearanceSettings
},
data() {
return {
storageLoc: 0,
languagesList: this.$i18n.availableLocales.map(lang => {
return {
value: lang,
label: this.$i18n.messages[lang].languageName,
};
})
};
},
computed: {
settings() {
return this.$parent.$parent.$parent.settings;
},
saveSettings() {
return this.$parent.$parent.$parent.saveSettings;
}
},
methods: {
updateDefaultLanguage(language) {
this.updateDefaultAppearance({
...this.settings.defaultAppearance,
language
});
},
updateDefaultTheme(theme) {
this.updateDefaultAppearance({
...this.settings.defaultAppearance,
theme: theme
});
},
updateDefaultHeartbeatBarTheme(theme) {
this.updateDefaultAppearance({
...this.settings.defaultAppearance,
heartbeatBarTheme: theme
});
},
updateDefaultStyleElapsedTime(styleElapsedTime) {
this.updateDefaultAppearance({
...this.settings.defaultAppearance,
styleElapsedTime
});
},
updateDefaultAppearance(appearance) {
this.$parent.$parent.$parent.settings.defaultAppearance = appearance;
this.saveSettings();
}
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../assets/vars.scss"; @import "../../assets/vars.scss";
.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary,
.btn-check:hover + .btn-outline-primary {
color: #fff;
.dark & {
color: #000;
}
}
.dark { .dark {
.list-group-item { .list-group-item {
background-color: $dark-bg2; background-color: $dark-bg2;

164
src/components/settings/AppearanceSettings.vue Normal file
View file

@ -0,0 +1,164 @@
<template>
<div>
<div class="my-4">
<label for="language" class="form-label">
{{ $t("Language") }}
</label>
<select
id="language" :value="language" class="form-select"
@input="$emit('update:language', $event.target.value)"
>
<option v-for="(lang, i) in languages" :key="`Lang${i}`" :value="lang.value">
{{ lang.label }}
</option>
</select>
</div>
<div class="my-4">
<label for="timezone" class="form-label">{{ $t("Theme") }}</label>
<div>
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input
id="btncheck1" :checked="userTheme == 'light'" type="radio" class="btn-check" name="theme"
autocomplete="off" value="light" @input="$emit('update:userTheme', 'light')"
/>
<label class="btn btn-outline-primary" for="btncheck1">
{{ $t("Light") }}
</label>
<input
id="btncheck2" :checked="userTheme == 'dark'" type="radio" class="btn-check" name="theme"
autocomplete="off" value="dark" @input="$emit('update:userTheme', 'dark')"
/>
<label class="btn btn-outline-primary" for="btncheck2">
{{ $t("Dark") }}
</label>
<input
id="btncheck3" :checked="userTheme == 'auto'" type="radio" class="btn-check" name="theme"
autocomplete="off" value="auto" @input="$emit('update:userTheme', 'auto')"
/>
<label class="btn btn-outline-primary" for="btncheck3">
{{ $t("Auto") }}
</label>
</div>
</div>
</div>
<div class="my-4">
<label class="form-label">{{ $t("Theme - Heartbeat Bar") }}</label>
<div>
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input
id="btncheck4" :checked="userHeartbeatBar == 'normal'" type="radio" class="btn-check"
name="heartbeatBarTheme" autocomplete="off" value="normal"
@input="$emit('update:userHeartbeatBar', 'normal')"
/>
<label class="btn btn-outline-primary" for="btncheck4">
{{ $t("Normal") }}
</label>
<input
id="btncheck5" :checked="userHeartbeatBar == 'bottom'" type="radio" class="btn-check"
name="heartbeatBarTheme" autocomplete="off" value="bottom"
@input="$emit('update:userHeartbeatBar', 'bottom')"
/>
<label class="btn btn-outline-primary" for="btncheck5">
{{ $t("Bottom") }}
</label>
<input
id="btncheck6" :checked="userHeartbeatBar == 'none'" type="radio" class="btn-check"
name="heartbeatBarTheme" autocomplete="off" value="none"
@input="$emit('update:userHeartbeatBar', 'none')"
/>
<label class="btn btn-outline-primary" for="btncheck6">
{{ $t("None") }}
</label>
</div>
</div>
</div>
<!-- Timeline -->
<div class="my-4">
<label class="form-label">{{ $t("styleElapsedTime") }}</label>
<div>
<div class="btn-group" role="group">
<input
id="styleElapsedTimeShowNoLine" :checked="styleElapsedTime == 'no-line'" type="radio"
class="btn-check" name="styleElapsedTime" autocomplete="off" value="no-line"
@input="$emit('update:styleElapsedTime', 'no-line')"
/>
<label class="btn btn-outline-primary" for="styleElapsedTimeShowNoLine">
{{ $t("styleElapsedTimeShowNoLine") }}
</label>
<input
id="styleElapsedTimeShowWithLine" :checked="styleElapsedTime == 'with-line'" type="radio"
class="btn-check" name="styleElapsedTime" autocomplete="off" value="with-line"
@input="$emit('update:styleElapsedTime', 'with-line')"
/>
<label class="btn btn-outline-primary" for="styleElapsedTimeShowWithLine">
{{ $t("styleElapsedTimeShowWithLine") }}
</label>
<input
id="styleElapsedTimeNone" :checked="styleElapsedTime == 'none'" type="radio" class="btn-check"
name="styleElapsedTime" autocomplete="off" value="none"
@input="$emit('update:styleElapsedTime', 'none')"
/>
<label class="btn btn-outline-primary" for="styleElapsedTimeNone">
{{ $t("None") }}
</label>
</div>
</div>
</div>
</div>
</template>
<script lang="js">
export default {
props: {
languages: {
type: Array,
required: true,
},
language: {
type: String,
required: true,
},
userTheme: {
type: String,
required: true,
},
userHeartbeatBar: {
type: String,
required: true,
},
styleElapsedTime: {
type: String,
required: true,
},
},
emits: [
"update:language",
"update:userTheme",
"update:userHeartbeatBar",
"update:styleElapsedTime",
],
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.btn-check:active+.btn-outline-primary,
.btn-check:checked+.btn-outline-primary,
.btn-check:hover+.btn-outline-primary {
color: #fff;
.dark & {
color: #000;
}
}
</style>

18
src/mixins/theme.js
View file

@ -13,6 +13,24 @@ export default {
}, },
mounted() { mounted() {
if (window.defaultAppearance) {
if (window.defaultAppearance.language) {
localStorage.locale = window.defaultAppearance.language;
}
if (window.defaultAppearance.theme) {
this.userTheme = window.defaultAppearance.theme;
}
if (window.defaultAppearance.heartbeatBarTheme) {
this.userHeartbeatBar = window.defaultAppearance.heartbeatBarTheme;
}
if (window.defaultAppearance.styleElapsedTime) {
this.styleElapsedTime = window.defaultAppearance.styleElapsedTime;
}
}
// Default Light // Default Light
if (! this.userTheme) { if (! this.userTheme) {
this.userTheme = "auto"; this.userTheme = "auto";

9
src/pages/Settings.vue
View file

@ -183,6 +183,15 @@ export default {
this.settings.trustProxy = false; this.settings.trustProxy = false;
} }
if (this.settings.defaultAppearance === undefined) {
this.settings.defaultAppearance = {
theme: null,
language: null,
heartbeatBarTheme: null,
styleElapsedTime: null,
};
}
this.settingsLoaded = true; this.settingsLoaded = true;
}); });
}, },