wip

frontend/src/components/Uptime.vue

@@ -0,0 +1,58 @@
+<template>
+    <span :class="className" :title="title">{{ uptime }}</span>
+</template>
+
+<script>
+
+export default {
+    props: {
+        /** Monitor this represents */
+        monitor: {
+            type: Object,
+            default: null,
+        },
+        /** Type of monitor */
+        type: {
+            type: String,
+            default: null,
+        },
+        /** Is this a pill? */
+        pill: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    computed: {
+        uptime() {
+            return this.$t("notAvailableShort");
+        },
+
+        color() {
+            return "secondary";
+        },
+
+        className() {
+            if (this.pill) {
+                return `badge rounded-pill bg-${this.color}`;
+            }
+
+            return "";
+        },
+
+        title() {
+            if (this.type === "720") {
+                return `30${this.$t("-day")}`;
+            }
+
+            return `24${this.$t("-hour")}`;
+        }
+    },
+};
+</script>
+
+<style>
+.badge {
+    min-width: 62px;
+}
+</style>