mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-11-28 08:48:45 +02:00
[Status Page] wip, upload logo and status page listing
This commit is contained in:
Louis Lam
parent
bb1c951a96
commit
e87cdf4d09
@ -22,7 +22,7 @@ class StatusPage extends BeanModel {
|
||||
slug: this.slug,
|
||||
title: this.title,
|
||||
description: this.description,
|
||||
icon: this.icon,
|
||||
icon: this.getIcon(),
|
||||
theme: this.theme,
|
||||
published: !!this.published,
|
||||
showTags: !!this.show_tags,
|
||||
@ -34,7 +34,7 @@ class StatusPage extends BeanModel {
|
||||
slug: this.slug,
|
||||
title: this.title,
|
||||
description: this.description,
|
||||
icon: this.icon,
|
||||
icon: this.getIcon(),
|
||||
theme: this.theme,
|
||||
published: !!this.published,
|
||||
showTags: !!this.show_tags,
|
||||
@ -47,6 +47,14 @@ class StatusPage extends BeanModel {
|
||||
]);
|
||||
}
|
||||
|
||||
getIcon() {
|
||||
if (!this.icon) {
|
||||
return "/icon.svg";
|
||||
} else {
|
||||
return this.icon;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
module.exports = StatusPage;
|
||||
|
||||
@ -90,9 +90,17 @@ module.exports.statusPageSocketHandler = (socket) => {
|
||||
|
||||
try {
|
||||
checkLogin(socket);
|
||||
|
||||
apicache.clear();
|
||||
|
||||
// Save Config
|
||||
let statusPage = await R.findOne("status_page", " slug = ? ", [
|
||||
slug
|
||||
]);
|
||||
|
||||
if (!statusPage) {
|
||||
throw new Error("No slug?");
|
||||
}
|
||||
|
||||
const header = "data:image/png;base64,";
|
||||
|
||||
// Check logo format
|
||||
@ -103,23 +111,16 @@ module.exports.statusPageSocketHandler = (socket) => {
|
||||
throw new Error("Only allowed PNG logo.");
|
||||
}
|
||||
|
||||
const filename = `logo${statusPage.id}.png`;
|
||||
|
||||
// Convert to file
|
||||
await ImageDataURI.outputFile(imgDataUrl, Database.uploadDir + "logo.png");
|
||||
config.logo = "/upload/logo.png?t=" + Date.now();
|
||||
await ImageDataURI.outputFile(imgDataUrl, Database.uploadDir + filename);
|
||||
config.logo = `/upload/${filename}?t=` + Date.now();
|
||||
|
||||
} else {
|
||||
config.icon = imgDataUrl;
|
||||
}
|
||||
|
||||
// Save Config
|
||||
let statusPage = await R.findOne("status_page", " slug = ? ", [
|
||||
slug
|
||||
]);
|
||||
|
||||
if (!statusPage) {
|
||||
throw new Error("No slug?");
|
||||
}
|
||||
|
||||
statusPage.slug = config.slug;
|
||||
statusPage.title = config.title;
|
||||
statusPage.description = config.description;
|
||||
|
||||
@ -9,33 +9,14 @@
|
||||
<router-link to="/add-status-page" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("Add New Status Page") }}</router-link>
|
||||
</div>
|
||||
|
||||
<div class="shadow-box">
|
||||
<div v-for="statusPage in $root.statusPageList" class="item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="title">{{ statusPage.title }}</div>
|
||||
<div class="slug">/status/{{ statusPage.slug }}</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-xl-5">
|
||||
<div class="btn-group">
|
||||
<a :href="'/status/' + statusPage.slug" class="btn btn-dark">
|
||||
<font-awesome-icon icon="external-link-square-alt" /><br />
|
||||
{{ $t("View") }}
|
||||
</a>
|
||||
|
||||
<a :href="'/status/' + statusPage.slug +'?edit'" class="btn btn-dark">
|
||||
<font-awesome-icon icon="pen" /><br />
|
||||
{{ $t("Edit") }}
|
||||
</a>
|
||||
|
||||
<router-link to="/" class="btn btn-danger">
|
||||
<font-awesome-icon icon="trash" /><br />
|
||||
{{ $t("Delete") }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shadow-box" style="min-height: 110px;">
|
||||
<a v-for="statusPage in $root.statusPageList" :key="statusPage.slug" :href="'/status/' + statusPage.slug" class="item">
|
||||
<img :src="icon(statusPage.icon)" alt class="logo me-2" />
|
||||
<div class="info">
|
||||
<div class="title">{{ statusPage.title }}</div>
|
||||
<div class="slug">/status/{{ statusPage.slug }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
@ -43,6 +24,8 @@
|
||||
|
||||
<script>
|
||||
|
||||
import { getResBaseURL } from "../util-frontend";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@ -58,7 +41,13 @@ export default {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
icon(icon) {
|
||||
if (icon === "/icon.svg") {
|
||||
return icon;
|
||||
} else {
|
||||
return getResBaseURL() + icon;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -67,11 +56,13 @@ export default {
|
||||
@import "../assets/vars.scss";
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
padding: 13px 15px 10px 15px;
|
||||
border-radius: 10px;
|
||||
transition: all ease-in-out 0.15s;
|
||||
padding: 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: $highlight-white;
|
||||
@ -81,17 +72,22 @@ export default {
|
||||
background-color: #cdf8f4;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
$logo-width: 70px;
|
||||
|
||||
.logo {
|
||||
width: $logo-width;
|
||||
}
|
||||
|
||||
.slug {
|
||||
font-size: 14px;
|
||||
}
|
||||
.info {
|
||||
|
||||
.btn-group {
|
||||
//margin-top: 7px;
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.slug {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -40,6 +40,11 @@
|
||||
<textarea id="cname" v-model="config.domanNames" rows="3" disabled class="form-control" :placeholder="domainNamesPlaceholder"></textarea>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-danger me-2" @click="discard">
|
||||
<font-awesome-icon icon="trash" />
|
||||
{{ $t("Delete") }}
|
||||
</button>
|
||||
|
||||
<!-- Sidebar Footer -->
|
||||
<div class="sidebar-footer">
|
||||
<button class="btn btn-success me-2" @click="save">
|
||||
@ -53,6 +58,8 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Status Page -->
|
||||
<div :class="{ edit: enableEditMode}" class="main">
|
||||
<!-- Logo & Title -->
|
||||
<h1 class="mb-4">
|
||||
@ -232,6 +239,7 @@ import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_PARTIAL_DOWN, UP
|
||||
import { useToast } from "vue-toastification";
|
||||
import dayjs from "dayjs";
|
||||
import Favico from "favico.js";
|
||||
import { getResBaseURL } from "../util-frontend";
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
@ -427,10 +435,7 @@ export default {
|
||||
});
|
||||
|
||||
// Special handle for dev
|
||||
const env = process.env.NODE_ENV;
|
||||
if (env === "development" || localStorage.dev === "dev") {
|
||||
this.baseURL = location.protocol + "//" + location.hostname + ":3001";
|
||||
}
|
||||
this.baseURL = getResBaseURL();
|
||||
},
|
||||
async mounted() {
|
||||
this.slug = this.$route.params.slug;
|
||||
@ -442,8 +447,8 @@ export default {
|
||||
axios.get("/api/status-page/" + this.slug).then((res) => {
|
||||
this.config = res.data.config;
|
||||
|
||||
if (this.config.logo) {
|
||||
this.imgDataUrl = this.config.logo;
|
||||
if (this.config.icon) {
|
||||
this.imgDataUrl = this.config.icon;
|
||||
}
|
||||
|
||||
this.incident = res.data.incident;
|
||||
|
||||
@ -51,7 +51,19 @@ export function timezoneList() {
|
||||
}
|
||||
|
||||
export function setPageLocale() {
|
||||
const html = document.documentElement
|
||||
html.setAttribute('lang', currentLocale() )
|
||||
html.setAttribute('dir', localeDirection() )
|
||||
const html = document.documentElement;
|
||||
html.setAttribute("lang", currentLocale() );
|
||||
html.setAttribute("dir", localeDirection() );
|
||||
}
|
||||
|
||||
/**
|
||||
* Mainly used for dev, because the backend and the frontend are in different ports.
|
||||
*/
|
||||
export function getResBaseURL() {
|
||||
const env = process.env.NODE_ENV;
|
||||
if (env === "development" || localStorage.dev === "dev") {
|
||||
return location.protocol + "//" + location.hostname + ":3001";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user