Add description to monitor

* Add description to monitor model
* Add description field to database
* Add english and spanish translation for description
* Closes: #482

src/components/MonitorList.vue

@@ -23,6 +23,9 @@
                         <div class="info">
                             <Uptime :monitor="item" type="24" :pill="true" />
                             {{ item.name }}
+                            <span :title="item.description">
+                                <font-awesome-icon icon="info-circle" />
+                            </span>
                         </div>
                         <div class="tags">
                             <Tag v-for="tag in item.tags" :key="tag" :item="tag" :size="'sm'" />

src/icon.js

@@ -33,6 +33,7 @@ import {
     faFile,
     faAward,
     faLink,
+    faInfoCircle,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -65,6 +66,7 @@ library.add(
     faFile,
     faAward,
     faLink,
+    faInfoCircle,
 );
 
 export { FontAwesomeIcon };

src/languages/en.js

@@ -46,6 +46,7 @@ export default {
     Unknown: "Unknown",
     Pause: "Pause",
     Name: "Name",
+    Description: "Description",
     Status: "Status",
     DateTime: "DateTime",
     Message: "Message",

src/languages/es-ES.js

@@ -34,6 +34,7 @@ export default {
     Unknown: "Desconocido",
     Pause: "Pausar",
     Name: "Nombre",
+    Description: "Descripción",
     Status: "Estado",
     DateTime: "Fecha y Hora",
     Message: "Mensaje",

src/pages/Details.vue

@@ -2,6 +2,7 @@
     <transition name="slide-fade" appear>
         <div v-if="monitor">
             <h1> {{ monitor.name }}</h1>
+            <p>{{ monitor.description }}</p>
             <div class="tags">
                 <Tag v-for="tag in monitor.tags" :key="tag.id" :item="tag" :size="'sm'" />
             </div>

src/pages/EditMonitor.vue

@@ -41,6 +41,12 @@
                                 <input id="name" v-model="monitor.name" type="text" class="form-control" required>
                             </div>
 
+                            <!-- Description -->
+                            <div class="my-3">
+                                <label for="description" class="form-label">{{ $t("Description") }}</label>
+                                <input id="description" v-model="monitor.description" type="text" class="form-control">
+                            </div>
+
                             <!-- URL -->
                             <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
                                 <label for="url" class="form-label">{{ $t("URL") }}</label>