fix showing "30 day" instead of "30 days" and giving our translators the chance to differentiate between them

src/components/Uptime.vue

@@ -85,12 +85,12 @@ export default {
 
         title() {
             if (this.type === "1y") {
-                return `1${this.$t("-year")}`;
+                return `1 ${this.$tc("year", 1)}`;
             }
             if (this.type === "720") {
-                return `30${this.$t("-day")}`;
+                return `30 ${this.$tc("day", 30)}`;
             }
-            return `24${this.$t("-hour")}`;
+            return `24 ${this.$tc("hour", 24)}`;
         }
     },
 };

src/lang/en.json

@@ -52,10 +52,8 @@
     "now": "now",
     "time ago": "{0} ago",
     "day": "day | days",
-    "-day": "-day",
-    "hour": "hour",
-    "-hour": "-hour",
-    "-year": "-year",
+    "hour": "hour | hours",
+    "year": "year | years",
     "Response": "Response",
     "Ping": "Ping",
     "Monitor Type": "Monitor Type",

src/pages/Details.vue

@@ -237,7 +237,7 @@
                     >
                         <h4 class="col-4 col-sm-12">{{ pingTitle(true) }}</h4>
                         <p class="col-4 col-sm-12 mb-0 mb-sm-2">
-                            (24{{ $t("-hour") }})
+                            ({{ 24 }} {{ $tc("hour", 24) }})
                         </p>
                         <span class="col-4 col-sm-12 num">
                             <CountUp :value="avgPing" />
@@ -250,7 +250,7 @@
                     >
                         <h4 class="col-4 col-sm-12">{{ $t("Uptime") }}</h4>
                         <p class="col-4 col-sm-12 mb-0 mb-sm-2">
-                            (24{{ $t("-hour") }})
+                            ({{ 24 }} {{ $tc("hour", 24) }})
                         </p>
                         <span class="col-4 col-sm-12 num">
                             <Uptime :monitor="monitor" type="24" />
@@ -263,7 +263,7 @@
                     >
                         <h4 class="col-4 col-sm-12">{{ $t("Uptime") }}</h4>
                         <p class="col-4 col-sm-12 mb-0 mb-sm-2">
-                            (30{{ $t("-day") }})
+                            ({{ 30 }} {{ $tc("day", 30) }})
                         </p>
                         <span class="col-4 col-sm-12 num">
                             <Uptime :monitor="monitor" type="720" />
@@ -276,7 +276,7 @@
                     >
                         <h4 class="col-4 col-sm-12">{{ $t("Uptime") }}</h4>
                         <p class="col-4 col-sm-12 mb-0 mb-sm-2">
-                            (1{{ $t("-year") }})
+                            ({{ 1 }} {{ $tc("year", 1) }})
                         </p>
                         <span class="col-4 col-sm-12 num">
                             <Uptime :monitor="monitor" type="1y" />