[Status Page] wip, upload logo and status page listing

This commit is contained in:
Louis Lam 2022-03-17 16:42:26 +08:00
parent bb1c951a96
commit e87cdf4d09
5 changed files with 82 additions and 60 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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;
}
}
}

View File

@ -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;

View File

@ -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 "";
}
}