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>
<!-- Custom Tooltip -->
<Tooltip
:visible="tooltipVisible"
@ -86,7 +85,7 @@ export default {
tooltipContent: null,
tooltipX: 0,
tooltipY: 0,
tooltipPosition: 'below',
tooltipPosition: "below",
tooltipTimeoutId: null,
};
},
@ -412,11 +411,11 @@ export default {
if (spaceAbove > tooltipHeight && spaceBelow < tooltipHeight) {
// Show above - arrow points down
this.tooltipPosition = 'above';
this.tooltipPosition = "above";
this.tooltipY = y - 10;
} else {
// Show below - arrow points up
this.tooltipPosition = 'below';
this.tooltipPosition = "below";
this.tooltipY = y + rect.height + 10;
}
@ -424,10 +423,10 @@ export default {
const tooltipWidth = 120; // Approximate tooltip width
let adjustedX = x;
if (x - tooltipWidth/2 < 10) {
adjustedX = tooltipWidth/2 + 10;
} else if (x + tooltipWidth/2 > window.innerWidth - 10) {
adjustedX = window.innerWidth - tooltipWidth/2 - 10;
if (x - tooltipWidth / 2 < 10) {
adjustedX = tooltipWidth / 2 + 10;
} else if (x + tooltipWidth / 2 > window.innerWidth - 10) {
adjustedX = window.innerWidth - tooltipWidth / 2 - 10;
}
this.tooltipX = adjustedX;

View file

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