This commit is contained in:
Doruk 2025-06-15 18:13:50 +02:00
parent b1bf26289e
commit 89fc5f1665
2 changed files with 67 additions and 60 deletions

View file

@ -31,7 +31,6 @@
<div>{{ timeSinceLastBeat }}</div> <div>{{ timeSinceLastBeat }}</div>
</div> </div>
<!-- Custom Tooltip --> <!-- Custom Tooltip -->
<Tooltip <Tooltip
:visible="tooltipVisible" :visible="tooltipVisible"
@ -86,7 +85,7 @@ export default {
tooltipContent: null, tooltipContent: null,
tooltipX: 0, tooltipX: 0,
tooltipY: 0, tooltipY: 0,
tooltipPosition: 'below', tooltipPosition: "below",
tooltipTimeoutId: null, tooltipTimeoutId: null,
}; };
}, },
@ -412,11 +411,11 @@ export default {
if (spaceAbove > tooltipHeight && spaceBelow < tooltipHeight) { if (spaceAbove > tooltipHeight && spaceBelow < tooltipHeight) {
// Show above - arrow points down // Show above - arrow points down
this.tooltipPosition = 'above'; this.tooltipPosition = "above";
this.tooltipY = y - 10; this.tooltipY = y - 10;
} else { } else {
// Show below - arrow points up // Show below - arrow points up
this.tooltipPosition = 'below'; this.tooltipPosition = "below";
this.tooltipY = y + rect.height + 10; this.tooltipY = y + rect.height + 10;
} }

View file

@ -49,50 +49,58 @@ export default {
/** Position relative to target element */ /** Position relative to target element */
position: { position: {
type: String, type: String,
default: 'below', default: "below",
validator: (value) => ['above', 'below'].includes(value) validator: (value) => [ "above", "below" ].includes(value)
} }
}, },
computed: { computed: {
tooltipStyle() { tooltipStyle() {
return { return {
left: this.x + 'px', left: this.x + "px",
top: this.y + 'px', top: this.y + "px",
}; };
}, },
statusText() { statusText() {
if (!this.content || this.content === 0) return this.$t('Unknown'); if (!this.content || this.content === 0) {
return this.$t("Unknown");
}
const statusMap = { const statusMap = {
0: this.$t('Down'), 0: this.$t("Down"),
1: this.$t('Up'), 1: this.$t("Up"),
2: this.$t('Pending'), 2: this.$t("Pending"),
3: this.$t('Maintenance') 3: this.$t("Maintenance")
}; };
return statusMap[this.content.status] || this.$t('Unknown'); return statusMap[this.content.status] || this.$t("Unknown");
}, },
statusClass() { statusClass() {
if (!this.content || this.content === 0) return 'status-empty'; if (!this.content || this.content === 0) {
return "status-empty";
}
const classMap = { const classMap = {
0: 'status-down', 0: "status-down",
1: 'status-up', 1: "status-up",
2: 'status-pending', 2: "status-pending",
3: 'status-maintenance' 3: "status-maintenance"
}; };
return classMap[this.content.status] || 'status-unknown'; return classMap[this.content.status] || "status-unknown";
}, },
timeText() { timeText() {
if (!this.content || this.content === 0) return ''; if (!this.content || this.content === 0) {
return "";
}
return this.$root.datetime(this.content.time); return this.$root.datetime(this.content.time);
}, },
message() { message() {
if (!this.content || this.content === 0) return ''; if (!this.content || this.content === 0) {
return this.content.msg || ''; return "";
}
return this.content.msg || "";
} }
} }
}; };