[status page] crop and resize logo
This commit is contained in:
LouisLam
parent
2ab06f87b8
commit
e8f4fabcd0
|
|
@ -68,14 +68,15 @@
|
|||
"socket.io-client": "^4.2.0",
|
||||
"sqlite3": "github:mapbox/node-sqlite3#593c9d",
|
||||
"tcp-ping": "^0.1.1",
|
||||
"timezones-list": "^3.0.1",
|
||||
"thirty-two": "^1.0.2",
|
||||
"timezones-list": "^3.0.1",
|
||||
"v-pagination-3": "^0.1.6",
|
||||
"vue": "^3.2.8",
|
||||
"vue-chart-3": "^0.5.8",
|
||||
"vue-confirm-dialog": "^1.0.2",
|
||||
"vue-contenteditable": "^3.0.4",
|
||||
"vue-i18n": "^9.1.7",
|
||||
"vue-image-crop-upload": "^3.0.3",
|
||||
"vue-multiselect": "^3.0.0-alpha.2",
|
||||
"vue-qrcode": "^1.0.0",
|
||||
"vue-router": "^4.0.11",
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
if (! await isPublished()) {
|
||||
throw new Error("The status page is not published");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Default is published
|
||||
* @returns {Promise<boolean>}
|
||||
*/
|
||||
async function isPublished() {
|
||||
return await setting("statusPagePublished");
|
||||
const value = await setting("statusPagePublished");
|
||||
if (value === null) {
|
||||
return true;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function send403(res, msg = "") {
|
||||
|
|
|
|||
|
|
@ -144,7 +144,9 @@ h2 {
|
|||
}
|
||||
|
||||
.shadow-box {
|
||||
background-color: $dark-bg;
|
||||
&:not(.alert) {
|
||||
background-color: $dark-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
|
|
@ -376,12 +378,19 @@ h2 {
|
|||
}
|
||||
|
||||
[contenteditable=true] {
|
||||
transition: all $easing-in 0.2s;
|
||||
|
||||
&:focus {
|
||||
outline: 0 solid #eee;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: #efefef;
|
||||
background-color: rgb(239, 239, 239);
|
||||
|
||||
.dark & {
|
||||
background-color: rgba(239, 239, 239, 0.2);
|
||||
}
|
||||
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -401,3 +410,7 @@ h2 {
|
|||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,31 @@
|
|||
<template>
|
||||
<div class="container mt-3">
|
||||
<!-- Logo & Title -->
|
||||
<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" />
|
||||
</h1>
|
||||
|
||||
<!-- Admin functions -->
|
||||
<div v-if="hasToken" class="mt-3" style="height: 38px;">
|
||||
<div v-if="!enableEditMode">
|
||||
<button class="btn btn-info me-2" @click="edit">
|
||||
|
|
@ -46,9 +67,19 @@
|
|||
|
||||
<!-- Set Default Language -->
|
||||
<!-- 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>
|
||||
|
||||
<!-- Overall Status -->
|
||||
<div class="shadow-box list p-4 overall-status mt-4">
|
||||
<div v-if="false">
|
||||
<font-awesome-icon icon="check-circle" class="ok" />
|
||||
|
|
@ -64,10 +95,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<Editable v-model="config.description" :contenteditable="editMode" tag="span" />
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mt-4 description" />
|
||||
|
||||
<!-- Incident -->
|
||||
<div class="shadow-box alert alert-success mt-4 p-4" role="alert">
|
||||
<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>
|
||||
|
|
@ -117,6 +148,7 @@
|
|||
import VueMultiselect from "vue-multiselect"
|
||||
import axios from "axios";
|
||||
import GroupList from "../components/GroupList.vue";
|
||||
import ImageCropUpload from "vue-image-crop-upload";
|
||||
|
||||
const env = process.env.NODE_ENV || "production";
|
||||
|
||||
|
|
@ -131,6 +163,7 @@ export default {
|
|||
components: {
|
||||
GroupList,
|
||||
VueMultiselect,
|
||||
ImageCropUpload
|
||||
},
|
||||
|
||||
// Leave Page for vue route change
|
||||
|
|
@ -152,6 +185,9 @@ export default {
|
|||
hasToken: false,
|
||||
config: {},
|
||||
selectedMonitor: null,
|
||||
incident: null,
|
||||
showImageCropUpload: false,
|
||||
imgDataUrl: "/icon.svg",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -180,6 +216,25 @@ export default {
|
|||
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: {
|
||||
|
||||
|
|
@ -197,15 +252,18 @@ export default {
|
|||
firstGroup.monitorList.push(monitor);
|
||||
this.selectedMonitor = null;
|
||||
}
|
||||
},
|
||||
|
||||
// Set Theme
|
||||
"config.statusPageTheme"() {
|
||||
this.$root.statusPageTheme = this.config.statusPageTheme;
|
||||
}
|
||||
|
||||
},
|
||||
async created() {
|
||||
this.hasToken = ("token" in localStorage);
|
||||
this.config = (await axios.get("/api/status-page/config")).data;
|
||||
|
||||
// Set Theme
|
||||
this.$root.statusPageTheme = this.config.statusPageTheme;
|
||||
|
||||
// Browser change page
|
||||
// https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes
|
||||
window.addEventListener("beforeunload", (e) => {
|
||||
|
|
@ -250,6 +308,24 @@ export default {
|
|||
|
||||
discard() {
|
||||
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;
|
||||
}
|
||||
|
||||
.description span {
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
transition: all $easing-in 0.2s;
|
||||
|
||||
&.edit-mode {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue