add invert keyword feature

src/lang/en.json

@@ -48,6 +48,7 @@
     "Ping": "Ping",
     "Monitor Type": "Monitor Type",
     "Keyword": "Keyword",
+    "Invert Keyword": "Invert Keyword",
     "Friendly Name": "Friendly Name",
     "URL": "URL",
     "Hostname": "Hostname",
@@ -511,6 +512,7 @@
     "passwordNotMatchMsg": "The repeat password does not match.",
     "notificationDescription": "Notifications must be assigned to a monitor to function.",
     "keywordDescription": "Search keyword in plain HTML or JSON response. The search is case-sensitive.",
+    "invertKeywordDescription": "Look for the keyword to be absent rather than present.",
     "backupDescription": "You can backup all monitors and notifications into a JSON file.",
     "backupDescription2": "Note: history and event data is not included.",
     "backupDescription3": "Sensitive data such as notification tokens are included in the export file; please store export securely.",

src/pages/Details.vue

@@ -12,7 +12,9 @@
                 <span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
                 <span v-if="monitor.type === 'keyword'">
                     <br>
-                    <span>{{ $t("Keyword") }}:</span> <span class="keyword">{{ monitor.keyword }}</span>
+                    <span>{{ $t("Keyword") }}: </span>
+                    <span class="keyword">{{ monitor.keyword }}</span>
+                    <span v-if="monitor.invertKeyword" alt="Inverted keyword" class="keyword-inverted"> ↧</span>
                 </span>
                 <span v-if="monitor.type === 'dns'">[{{ monitor.dns_resolve_type }}] {{ monitor.hostname }}
                     <br>
@@ -490,6 +492,10 @@ table {
         color: $dark-font-color;
     }
 
+    .keyword-inverted {
+        color: $dark-font-color;
+    }
+
     .dropdown-clear-data {
         ul {
             background-color: $dark-bg;

src/pages/EditMonitor.vue

@@ -120,6 +120,17 @@
                                 </div>
                             </div>
 
+                            <!-- Invert keyword -->
+                            <div v-if="monitor.type === 'keyword' || monitor.type === 'grpc-keyword'" class="my-3 form-check">
+                                <input id="invert-keyword" v-model="monitor.invertKeyword" class="form-check-input" type="checkbox">
+                                <label class="form-check-label" for="invert-keyword">
+                                    {{ $t("Invert Keyword") }}
+                                </label>
+                                <div class="form-text">
+                                    {{ $t("invertKeywordDescription") }}
+                                </div>
+                            </div>
+
                             <!-- Game -->
                             <!-- GameDig only -->
                             <div v-if="monitor.type === 'gamedig'" class="my-3">