TyleoDvDelaware3217/Kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-07-19 07:44:02 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

multiple fixes

Browse source
This commit is contained in:
Doruk 2025-06-19 19:32:30 +02:00
parent 77e82156fd
commit 61ea7d21e8
2 changed files with 30 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/HeartbeatBar.vue
View file

@ -17,7 +17,7 @@
> >
<div <div
class="beat" class="beat"
:class="{ 'empty': (beat === 0 || beat === null || beat.status === null), 'down': (beat.status === 0), 'pending': (beat.status === 2), 'maintenance': (beat.status === 3) }" :class="{ 'empty': (beat === 0 || beat === null || beat.status === null), 'down': (beat.status === DOWN), 'pending': (beat.status === PENDING), 'maintenance': (beat.status === MAINTENANCE) }"
:style="beatStyle" :style="beatStyle"
/> />
</div> </div>
@ -44,6 +44,7 @@
<script> <script>
import dayjs from "dayjs"; import dayjs from "dayjs";
import { DOWN, UP, PENDING, MAINTENANCE } from "../util.ts";
import Tooltip from "./Tooltip.vue"; import Tooltip from "./Tooltip.vue";
export default { export default {
@ -362,18 +363,18 @@ export default {
* @returns {string} Aria label * @returns {string} Aria label
*/ */
getBeatAriaLabel(beat) { getBeatAriaLabel(beat) {
if (beat === 0 || !beat) { switch (beat?.status) {
return "No data"; case DOWN:
return `Down at ${this.$root.datetime(beat.time)}`;
case UP:
return `Up at ${this.$root.datetime(beat.time)}`;
case PENDING:
return `Pending at ${this.$root.datetime(beat.time)}`;
case MAINTENANCE:
return `Maintenance at ${this.$root.datetime(beat.time)}`;
default:
return "No data";
} }
const statusText = {
0: "Down",
1: "Up",
2: "Pending",
3: "Maintenance"
}[beat.status] || "Unknown";
return `${statusText} at ${this.$root.datetime(beat.time)}`;
}, },
/** /**

27
src/components/Tooltip.vue
View file

@ -66,13 +66,18 @@ export default {
return this.$t("Unknown"); return this.$t("Unknown");
} }
const statusMap = { switch (this.content.status) {
0: this.$t("Down"), case 0:
1: this.$t("Up"), return this.$t("Down");
2: this.$t("Pending"), case 1:
3: this.$t("Maintenance") return this.$t("Up");
}; case 2:
return statusMap[this.content.status] || this.$t("Unknown"); return this.$t("Pending");
case 3:
return this.$t("Maintenance");
default:
return this.$t("Unknown");
}
}, },
statusClass() { statusClass() {
@ -119,7 +124,7 @@ export default {
text-align: center; text-align: center;
.tooltip-status { .tooltip-status {
font-size: 12px; font-size: 16px;
font-weight: 600; font-weight: 600;
margin-bottom: 4px; margin-bottom: 4px;
text-transform: uppercase; text-transform: uppercase;
@ -172,12 +177,12 @@ export default {
// Default: tooltip below element, arrow points up // Default: tooltip below element, arrow points up
border-bottom: 6px solid rgba(17, 24, 39, 0.95); border-bottom: 6px solid rgba(17, 24, 39, 0.95);
top: -6px; top: -5px;
&.arrow-above { &.arrow-above {
// Tooltip above element, arrow points down // Tooltip above element, arrow points down
top: auto; top: auto;
bottom: -6px; bottom: -5px;
border-bottom: none; border-bottom: none;
border-top: 6px solid rgba(17, 24, 39, 0.95); border-top: 6px solid rgba(17, 24, 39, 0.95);
} }
@ -200,9 +205,11 @@ export default {
.tooltip-arrow { .tooltip-arrow {
border-bottom-color: rgba(31, 41, 55, 0.95); border-bottom-color: rgba(31, 41, 55, 0.95);
top: -5px;
&.arrow-above { &.arrow-above {
border-top-color: rgba(31, 41, 55, 0.95); border-top-color: rgba(31, 41, 55, 0.95);
bottom: -5px;
} }
} }
} }