This commit is contained in:
Doruk 2025-06-19 19:47:10 +02:00
parent 61ea7d21e8
commit 9b4e28b81f

View file

@ -23,6 +23,8 @@
</template> </template>
<script> <script>
import { DOWN, UP, PENDING, MAINTENANCE } from "../util.ts";
export default { export default {
name: "Tooltip", name: "Tooltip",
props: { props: {
@ -67,13 +69,13 @@ export default {
} }
switch (this.content.status) { switch (this.content.status) {
case 0: case DOWN:
return this.$t("Down"); return this.$t("Down");
case 1: case UP:
return this.$t("Up"); return this.$t("Up");
case 2: case PENDING:
return this.$t("Pending"); return this.$t("Pending");
case 3: case MAINTENANCE:
return this.$t("Maintenance"); return this.$t("Maintenance");
default: default:
return this.$t("Unknown"); return this.$t("Unknown");
@ -85,13 +87,18 @@ export default {
return "status-empty"; return "status-empty";
} }
const classMap = { switch (this.content.status) {
0: "status-down", case DOWN:
1: "status-up", return "status-down";
2: "status-pending", case UP:
3: "status-maintenance" return "status-up";
}; case PENDING:
return classMap[this.content.status] || "status-unknown"; return "status-pending";
case MAINTENANCE:
return "status-maintenance";
default:
return "status-unknown";
}
}, },
timeText() { timeText() {
@ -177,12 +184,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: -5px; top: -6px;
&.arrow-above { &.arrow-above {
// Tooltip above element, arrow points down // Tooltip above element, arrow points down
top: auto; top: auto;
bottom: -5px; bottom: -6px;
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);
} }
@ -205,11 +212,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; top: -6px;
&.arrow-above { &.arrow-above {
border-top-color: rgba(31, 41, 55, 0.95); border-top-color: rgba(31, 41, 55, 0.95);
bottom: -5px; bottom: -6px;
} }
} }
} }