Add info.serverTimezoneOffset and improve some styles

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "uptime-kuma",
-    "version": "1.18.4",
+    "version": "1.18.5",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "uptime-kuma",
-            "version": "1.18.4",
+            "version": "1.18.5",
             "license": "MIT",
             "dependencies": {
                 "@louislam/sqlite3": "~15.0.6",

server/client.js

@@ -8,6 +8,7 @@ const server = UptimeKumaServer.getInstance();
 const io = server.io;
 const { setting } = require("./util-server");
 const checkVersion = require("./check-version");
+const dayjs = require("dayjs");
 
 /**
  * Send list of notification providers to client
@@ -124,6 +125,7 @@ async function sendInfo(socket) {
         latestVersion: checkVersion.latestVersion,
         primaryBaseURL: await setting("primaryBaseURL"),
         serverTimezone: await server.getTimezone(),
+        serverTimezoneOffset: dayjs().format("Z"),
     });
 }
 

src/assets/app.scss

@@ -101,6 +101,11 @@ optgroup {
     }
 }
 
+// Override Bootstrap
+.btn-group > .btn:hover {
+    z-index: initial;
+}
+
 .btn {
     padding-left: 20px;
     padding-right: 20px;

src/pages/EditMaintenance.vue

@@ -5,7 +5,7 @@
             <form @submit.prevent="submit">
                 <div class="shadow-box">
                     <div class="row">
-                        <div class="col-xl-7">
+                        <div class="col-xl-10">
                             <!-- Title -->
                             <div class="mb-3">
                                 <label for="name" class="form-label">{{ $t("Title") }}</label>
@@ -82,7 +82,7 @@
 
                             <h2 class="mt-5">{{ $t("Date and Time") }}</h2>
 
-                            <div>⚠️ {{ $t("warningTimezone") }}: {{ $root.info.serverTimezone }}</div>
+                            <div>⚠️ {{ $t("warningTimezone") }}: <mark>{{ $root.info.serverTimezone }} ({{ $root.info.serverTimezoneOffset }})</mark></div>
 
                             <!-- Strategy -->
                             <div class="my-3">

src/pages/ManageMaintenance.vue

@@ -35,21 +35,23 @@
                     <div class="buttons">
                         <router-link v-if="false" :to="maintenanceURL(item.id)" class="btn btn-light">{{ $t("Details") }}</router-link>
 
-                        <button v-if="item.active" class="btn btn-normal" @click="pauseDialog">
-                            <font-awesome-icon icon="pause" /> {{ $t("Pause") }}
-                        </button>
-
-                        <button v-if="!item.active" class="btn btn-primary" @click="resumeMaintenance">
-                            <font-awesome-icon icon="play" /> {{ $t("Resume") }}
-                        </button>
-
-                        <router-link :to="'/maintenance/edit/' + item.id" class="btn btn-normal">
-                            <font-awesome-icon icon="edit" /> {{ $t("Edit") }}
-                        </router-link>
-
-                        <button class="btn btn-danger" @click="deleteDialog(item.id)">
-                            <font-awesome-icon icon="trash" /> {{ $t("Delete") }}
-                        </button>
+                        <div class="btn-group" role="group">
+                            <button v-if="item.active" class="btn btn-normal" @click="pauseDialog">
+                                <font-awesome-icon icon="pause" /> {{ $t("Pause") }}
+                            </button>
+
+                            <button v-if="!item.active" class="btn btn-primary" @click="resumeMaintenance">
+                                <font-awesome-icon icon="play" /> {{ $t("Resume") }}
+                            </button>
+
+                            <router-link :to="'/maintenance/edit/' + item.id" class="btn btn-normal">
+                                <font-awesome-icon icon="edit" /> {{ $t("Edit") }}
+                            </router-link>
+
+                            <button class="btn btn-danger" @click="deleteDialog(item.id)">
+                                <font-awesome-icon icon="trash" /> {{ $t("Delete") }}
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>

src/util.js

@@ -363,7 +363,6 @@ function utcToISODateTime(input) {
     return dayjs.utc(input).toISOString();
 }
 exports.utcToISODateTime = utcToISODateTime;
-/**
 /**
  * For SQL_DATETIME_FORMAT
  */

src/util.ts

@@ -409,7 +409,6 @@ export function utcToISODateTime(input : string) {
     return dayjs.utc(input).toISOString();
 }
 
-/**
 /**
  * For SQL_DATETIME_FORMAT
  */