[status page] crop and resize logo

This commit is contained in:
LouisLam 2021-09-15 18:28:48 +08:00
parent 2ab06f87b8
commit e8f4fabcd0
4 changed files with 135 additions and 11 deletions

View File

@ -68,14 +68,15 @@
"socket.io-client": "^4.2.0", "socket.io-client": "^4.2.0",
"sqlite3": "github:mapbox/node-sqlite3#593c9d", "sqlite3": "github:mapbox/node-sqlite3#593c9d",
"tcp-ping": "^0.1.1", "tcp-ping": "^0.1.1",
"timezones-list": "^3.0.1",
"thirty-two": "^1.0.2", "thirty-two": "^1.0.2",
"timezones-list": "^3.0.1",
"v-pagination-3": "^0.1.6", "v-pagination-3": "^0.1.6",
"vue": "^3.2.8", "vue": "^3.2.8",
"vue-chart-3": "^0.5.8", "vue-chart-3": "^0.5.8",
"vue-confirm-dialog": "^1.0.2", "vue-confirm-dialog": "^1.0.2",
"vue-contenteditable": "^3.0.4", "vue-contenteditable": "^3.0.4",
"vue-i18n": "^9.1.7", "vue-i18n": "^9.1.7",
"vue-image-crop-upload": "^3.0.3",
"vue-multiselect": "^3.0.0-alpha.2", "vue-multiselect": "^3.0.0-alpha.2",
"vue-qrcode": "^1.0.0", "vue-qrcode": "^1.0.0",
"vue-router": "^4.0.11", "vue-router": "^4.0.11",

View File

@ -85,14 +85,32 @@ router.get("/api/status-page/heartbeat", async (_request, response) => {
} }
}); });
router.post("/api/status-page/upload-logo", async (request, response) => {
allowDevAllOrigin(response);
// TODO: Check Bearer token
console.log(request);
response.json({});
});
async function checkPublished() { async function checkPublished() {
if (! await isPublished()) { if (! await isPublished()) {
throw new Error("The status page is not published"); throw new Error("The status page is not published");
} }
} }
/**
* Default is published
* @returns {Promise<boolean>}
*/
async function isPublished() { async function isPublished() {
return await setting("statusPagePublished"); const value = await setting("statusPagePublished");
if (value === null) {
return true;
}
return value;
} }
function send403(res, msg = "") { function send403(res, msg = "") {

View File

@ -144,7 +144,9 @@ h2 {
} }
.shadow-box { .shadow-box {
background-color: $dark-bg; &:not(.alert) {
background-color: $dark-bg;
}
} }
.form-check-input { .form-check-input {
@ -376,12 +378,19 @@ h2 {
} }
[contenteditable=true] { [contenteditable=true] {
transition: all $easing-in 0.2s;
&:focus { &:focus {
outline: 0 solid #eee; outline: 0 solid #eee;
} }
&:hover, &:focus { &:hover, &:focus {
background-color: #efefef; background-color: rgb(239, 239, 239);
.dark & {
background-color: rgba(239, 239, 239, 0.2);
}
border-radius: 8px; border-radius: 8px;
} }
@ -401,3 +410,7 @@ h2 {
transform: scale(1.2); transform: scale(1.2);
} }
} }
.vue-image-crop-upload .vicp-wrap {
border-radius: 10px !important;
}

View File

@ -1,10 +1,31 @@
<template> <template>
<div class="container mt-3"> <div class="container mt-3">
<!-- Logo & Title -->
<h1> <h1>
<img src="/icon.svg" alt class="me-2" /> <!-- Logo -->
<img :src="imgDataUrl" alt class="logo me-2" :class="logoClass" @click="showImageCropUploadMethod" />
<!-- Uploader -->
<!-- url="/api/status-page/upload-logo" -->
<ImageCropUpload v-model="showImageCropUpload"
field="img"
:width="128"
:height="128"
:langType="$i18n.locale"
:headers="uploadHeader"
img-format="png"
:noCircle="true"
:noSquare="false"
@crop-success="cropSuccess"
@crop-upload-success="cropUploadSuccess"
@crop-upload-fail="cropUploadFail"
/>
<!-- Title -->
<Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" /> <Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
</h1> </h1>
<!-- Admin functions -->
<div v-if="hasToken" class="mt-3" style="height: 38px;"> <div v-if="hasToken" class="mt-3" style="height: 38px;">
<div v-if="!enableEditMode"> <div v-if="!enableEditMode">
<button class="btn btn-info me-2" @click="edit"> <button class="btn btn-info me-2" @click="edit">
@ -46,9 +67,19 @@
<!-- Set Default Language --> <!-- Set Default Language -->
<!-- Set theme --> <!-- Set theme -->
<button v-if="theme == 'dark'" class="btn btn-light me-2" @click="changeTheme('light')">
<font-awesome-icon icon="save" />
{{ $t("Switch to Light Theme") }}
</button>
<button v-if="theme == 'light'" class="btn btn-dark me-2" @click="changeTheme('dark')">
<font-awesome-icon icon="save" />
{{ $t("Switch to Dark Theme") }}
</button>
</div> </div>
</div> </div>
<!-- Overall Status -->
<div class="shadow-box list p-4 overall-status mt-4"> <div class="shadow-box list p-4 overall-status mt-4">
<div v-if="false"> <div v-if="false">
<font-awesome-icon icon="check-circle" class="ok" /> <font-awesome-icon icon="check-circle" class="ok" />
@ -64,10 +95,10 @@
</div> </div>
</div> </div>
<div class="mt-4"> <!-- Description -->
<Editable v-model="config.description" :contenteditable="editMode" tag="span" /> <Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mt-4 description" />
</div>
<!-- Incident -->
<div class="shadow-box alert alert-success mt-4 p-4" role="alert"> <div class="shadow-box alert alert-success mt-4 p-4" role="alert">
<h4 class="alert-heading">Well done!</h4> <h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
@ -117,6 +148,7 @@
import VueMultiselect from "vue-multiselect" import VueMultiselect from "vue-multiselect"
import axios from "axios"; import axios from "axios";
import GroupList from "../components/GroupList.vue"; import GroupList from "../components/GroupList.vue";
import ImageCropUpload from "vue-image-crop-upload";
const env = process.env.NODE_ENV || "production"; const env = process.env.NODE_ENV || "production";
@ -131,6 +163,7 @@ export default {
components: { components: {
GroupList, GroupList,
VueMultiselect, VueMultiselect,
ImageCropUpload
}, },
// Leave Page for vue route change // Leave Page for vue route change
@ -152,6 +185,9 @@ export default {
hasToken: false, hasToken: false,
config: {}, config: {},
selectedMonitor: null, selectedMonitor: null,
incident: null,
showImageCropUpload: false,
imgDataUrl: "/icon.svg",
} }
}, },
computed: { computed: {
@ -180,6 +216,25 @@ export default {
return this.config.statusPagePublished; return this.config.statusPagePublished;
}, },
theme() {
return this.config.statusPageTheme;
},
uploadHeader() {
return {
Authorization: "Bearer " + localStorage.token,
}
},
logoClass() {
if (this.editMode) {
return {
"edit-mode": true,
}
}
return {};
}
}, },
watch: { watch: {
@ -197,15 +252,18 @@ export default {
firstGroup.monitorList.push(monitor); firstGroup.monitorList.push(monitor);
this.selectedMonitor = null; this.selectedMonitor = null;
} }
},
// Set Theme
"config.statusPageTheme"() {
this.$root.statusPageTheme = this.config.statusPageTheme;
} }
}, },
async created() { async created() {
this.hasToken = ("token" in localStorage); this.hasToken = ("token" in localStorage);
this.config = (await axios.get("/api/status-page/config")).data; this.config = (await axios.get("/api/status-page/config")).data;
// Set Theme
this.$root.statusPageTheme = this.config.statusPageTheme;
// Browser change page // Browser change page
// https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes // https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes
window.addEventListener("beforeunload", (e) => { window.addEventListener("beforeunload", (e) => {
@ -250,6 +308,24 @@ export default {
discard() { discard() {
location.reload(); location.reload();
},
changeTheme(name) {
this.config.statusPageTheme = name;
},
/**
* Crop success
*/
cropSuccess(imgDataUrl, field) {
console.log("-------- crop success --------");
this.imgDataUrl = imgDataUrl;
},
showImageCropUploadMethod() {
if (this.editMode) {
this.showImageCropUpload = true;
}
} }
} }
} }
@ -290,4 +366,20 @@ footer {
font-size: 14px; font-size: 14px;
} }
.description span {
min-width: 50px;
}
.logo {
transition: all $easing-in 0.2s;
&.edit-mode {
cursor: pointer;
&:hover {
transform: scale(1.2);
}
}
}
</style> </style>