|  | @ -1,5 +1,5 @@ | 
			
		
	
		
		
			
				
					|  |  | <template> |  |  | <template> | 
			
		
	
		
		
			
				
					
					|  |  |     <h1 class="mb-3"> |  |  |     <h1 class="my-3"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |         {{ pageName }} |  |  |         {{ pageName }} | 
			
		
	
		
		
			
				
					|  |  |     </h1> |  |  |     </h1> | 
			
		
	
		
		
			
				
					|  |  |     <form @submit.prevent="submit"> |  |  |     <form @submit.prevent="submit"> | 
			
		
	
	
		
		
			
				
					|  | @ -8,7 +8,7 @@ | 
			
		
	
		
		
			
				
					|  |  |                 <div class="col-md-6"> |  |  |                 <div class="col-md-6"> | 
			
		
	
		
		
			
				
					|  |  |                     <h2>General</h2> |  |  |                     <h2>General</h2> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |                     <div class="mb-3"> |  |  |                     <div class="my-3"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                         <label for="type" class="form-label">Monitor Type</label> |  |  |                         <label for="type" class="form-label">Monitor Type</label> | 
			
		
	
		
		
			
				
					|  |  |                         <select id="type" v-model="monitor.type" class="form-select" aria-label="Default select example"> |  |  |                         <select id="type" v-model="monitor.type" class="form-select" aria-label="Default select example"> | 
			
		
	
		
		
			
				
					|  |  |                             <option value="http"> |  |  |                             <option value="http"> | 
			
		
	
	
		
		
			
				
					|  | @ -26,17 +26,17 @@ | 
			
		
	
		
		
			
				
					|  |  |                         </select> |  |  |                         </select> | 
			
		
	
		
		
			
				
					|  |  |                     </div> |  |  |                     </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |                     <div class="mb-3"> |  |  |                     <div class="my-3"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                         <label for="name" class="form-label">Friendly Name</label> |  |  |                         <label for="name" class="form-label">Friendly Name</label> | 
			
		
	
		
		
			
				
					|  |  |                         <input id="name" v-model="monitor.name" type="text" class="form-control" required> |  |  |                         <input id="name" v-model="monitor.name" type="text" class="form-control" required> | 
			
		
	
		
		
			
				
					|  |  |                     </div> |  |  |                     </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |                     <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="mb-3"> |  |  |                     <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                         <label for="url" class="form-label">URL</label> |  |  |                         <label for="url" class="form-label">URL</label> | 
			
		
	
		
		
			
				
					|  |  |                         <input id="url" v-model="monitor.url" type="url" class="form-control" pattern="https?://.+" required> |  |  |                         <input id="url" v-model="monitor.url" type="url" class="form-control" pattern="https?://.+" required> | 
			
		
	
		
		
			
				
					|  |  |                     </div> |  |  |                     </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |                     <div v-if="monitor.type === 'keyword' " class="mb-3"> |  |  |                     <div v-if="monitor.type === 'keyword' " class="my-3"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                         <label for="keyword" class="form-label">Keyword</label> |  |  |                         <label for="keyword" class="form-label">Keyword</label> | 
			
		
	
		
		
			
				
					|  |  |                         <input id="keyword" v-model="monitor.keyword" type="text" class="form-control" required> |  |  |                         <input id="keyword" v-model="monitor.keyword" type="text" class="form-control" required> | 
			
		
	
		
		
			
				
					|  |  |                         <div class="form-text"> |  |  |                         <div class="form-text"> | 
			
		
	
	
		
		
			
				
					|  | @ -44,22 +44,22 @@ | 
			
		
	
		
		
			
				
					|  |  |                         </div> |  |  |                         </div> | 
			
		
	
		
		
			
				
					|  |  |                     </div> |  |  |                     </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |                     <div v-if="monitor.type === 'port' || monitor.type === 'ping' " class="mb-3"> |  |  |                     <div v-if="monitor.type === 'port' || monitor.type === 'ping' " class="my-3"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                         <label for="hostname" class="form-label">Hostname</label> |  |  |                         <label for="hostname" class="form-label">Hostname</label> | 
			
		
	
		
		
			
				
					|  |  |                         <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" required> |  |  |                         <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" required> | 
			
		
	
		
		
			
				
					|  |  |                     </div> |  |  |                     </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |                     <div v-if="monitor.type === 'port' " class="mb-3"> |  |  |                     <div v-if="monitor.type === 'port' " class="my-3"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                         <label for="port" class="form-label">Port</label> |  |  |                         <label for="port" class="form-label">Port</label> | 
			
		
	
		
		
			
				
					|  |  |                         <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1"> |  |  |                         <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1"> | 
			
		
	
		
		
			
				
					|  |  |                     </div> |  |  |                     </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |                     <div class="mb-3"> |  |  |                     <div class="my-3"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                         <label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label> |  |  |                         <label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label> | 
			
		
	
		
		
			
				
					|  |  |                         <input id="interval" v-model="monitor.interval" type="number" class="form-control" required min="20" step="1"> |  |  |                         <input id="interval" v-model="monitor.interval" type="number" class="form-control" required min="20" step="1"> | 
			
		
	
		
		
			
				
					|  |  |                     </div> |  |  |                     </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |                     <div class="mb-3"> |  |  |                     <div class="my-3"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                         <label for="maxRetries" class="form-label">Retries</label> |  |  |                         <label for="maxRetries" class="form-label">Retries</label> | 
			
		
	
		
		
			
				
					|  |  |                         <input id="maxRetries" v-model="monitor.maxretries" type="number" class="form-control" required min="0" step="1"> |  |  |                         <input id="maxRetries" v-model="monitor.maxretries" type="number" class="form-control" required min="0" step="1"> | 
			
		
	
		
		
			
				
					|  |  |                         <div class="form-text"> |  |  |                         <div class="form-text"> | 
			
		
	
	
		
		
			
				
					|  | @ -67,16 +67,16 @@ | 
			
		
	
		
		
			
				
					|  |  |                         </div> |  |  |                         </div> | 
			
		
	
		
		
			
				
					|  |  |                     </div> |  |  |                     </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |                     <h2>Advanced</h2> |  |  |                     <h2 class="my-3">Advanced</h2> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |                     <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="mb-3 form-check"> |  |  |                     <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3 form-check"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                         <input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value=""> |  |  |                         <input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value=""> | 
			
		
	
		
		
			
				
					|  |  |                         <label class="form-check-label" for="ignore-tls"> |  |  |                         <label class="form-check-label" for="ignore-tls"> | 
			
		
	
		
		
			
				
					|  |  |                             Ignore TLS/SSL error for HTTPS websites |  |  |                             Ignore TLS/SSL error for HTTPS websites | 
			
		
	
		
		
			
				
					|  |  |                         </label> |  |  |                         </label> | 
			
		
	
		
		
			
				
					|  |  |                     </div> |  |  |                     </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |                     <div class="mb-3 form-check"> |  |  |                     <div class="my-3 form-check"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                         <input id="upside-down" v-model="monitor.upsideDown" class="form-check-input" type="checkbox"> |  |  |                         <input id="upside-down" v-model="monitor.upsideDown" class="form-check-input" type="checkbox"> | 
			
		
	
		
		
			
				
					|  |  |                         <label class="form-check-label" for="upside-down"> |  |  |                         <label class="form-check-label" for="upside-down"> | 
			
		
	
		
		
			
				
					|  |  |                             Upside Down Mode |  |  |                             Upside Down Mode | 
			
		
	
	
		
		
			
				
					|  | @ -86,6 +86,24 @@ | 
			
		
	
		
		
			
				
					|  |  |                         </div> |  |  |                         </div> | 
			
		
	
		
		
			
				
					|  |  |                     </div> |  |  |                     </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                     <div class="my-3"> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                         <label for="maxRedirects" class="form-label">Max. Redirects</label> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                         <input id="maxRedirects" v-model="monitor.maxredirects" type="number" class="form-control" required min="0" step="1"> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                         <div class="form-text"> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                             Maximum number of redirects to follow. Set to 0 to disable redirects. | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                         </div> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                     </div> | 
			
		
	
		
		
			
				
					|  |  |  |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                     <div class="my-3"> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                         <label for="acceptedStatusCodes" class="form-label">Accepted Status Codes</label> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                         <VueMultiselect id="acceptedStatusCodes" v-model="monitor.accepted_statuscodes" :options="acceptedStatusCodeOptions" :multiple="true" :close-on-select="false" :clear-on-select="false" :preserve-search="true" placeholder="Pick Accepted Status Codes..." :preselect-first="false"> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                             <template #selection="{ values, isOpen }"><span v-if="values.length && !isOpen" class="multiselect__single">{{ values.length }} options selected</span></template> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                         </VueMultiselect> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                         <div class="form-text"> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                             Select status codes which are considered as a successful response. | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                         </div> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                     </div> | 
			
		
	
		
		
			
				
					|  |  |  |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  |                     <div> |  |  |                     <div> | 
			
		
	
		
		
			
				
					|  |  |                         <button class="btn btn-primary" type="submit" :disabled="processing"> |  |  |                         <button class="btn btn-primary" type="submit" :disabled="processing"> | 
			
		
	
		
		
			
				
					|  |  |                             Save |  |  |                             Save | 
			
		
	
	
		
		
			
				
					|  | @ -101,7 +119,7 @@ | 
			
		
	
		
		
			
				
					|  |  |                         Not available, please setup. |  |  |                         Not available, please setup. | 
			
		
	
		
		
			
				
					|  |  |                     </p> |  |  |                     </p> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |                     <div v-for="notification in $root.notificationList" :key="notification.id" class="form-check form-switch mb-3"> |  |  |                     <div v-for="notification in $root.notificationList" :key="notification.id" class="form-check form-switch my-3"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                         <input :id=" 'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]" class="form-check-input" type="checkbox"> |  |  |                         <input :id=" 'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]" class="form-check-input" type="checkbox"> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  |                         <label class="form-check-label" :for=" 'notification' + notification.id"> |  |  |                         <label class="form-check-label" :for=" 'notification' + notification.id"> | 
			
		
	
	
		
		
			
				
					|  | @ -124,18 +142,31 @@ | 
			
		
	
		
		
			
				
					|  |  | <script> |  |  | <script> | 
			
		
	
		
		
			
				
					|  |  | import NotificationDialog from "../components/NotificationDialog.vue"; |  |  | import NotificationDialog from "../components/NotificationDialog.vue"; | 
			
		
	
		
		
			
				
					|  |  | import { useToast } from "vue-toastification" |  |  | import { useToast } from "vue-toastification" | 
			
		
	
		
		
			
				
					|  |  |  |  |  | import VueMultiselect from "vue-multiselect" | 
			
		
	
		
		
			
				
					|  |  | const toast = useToast() |  |  | const toast = useToast() | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  | export default { |  |  | export default { | 
			
		
	
		
		
			
				
					|  |  |     components: { |  |  |     components: { | 
			
		
	
		
		
			
				
					|  |  |         NotificationDialog, |  |  |         NotificationDialog, | 
			
		
	
		
		
			
				
					|  |  |  |  |  |         VueMultiselect | 
			
		
	
		
		
			
				
					|  |  |     }, |  |  |     }, | 
			
		
	
		
		
			
				
					|  |  |     data() { |  |  |     data() { | 
			
		
	
		
		
			
				
					|  |  |  |  |  |         let acceptedStatusCodeOptions = [ | 
			
		
	
		
		
			
				
					|  |  |  |  |  |             "100-199", | 
			
		
	
		
		
			
				
					|  |  |  |  |  |             "200-299", | 
			
		
	
		
		
			
				
					|  |  |  |  |  |             "300-399", | 
			
		
	
		
		
			
				
					|  |  |  |  |  |             "400-499", | 
			
		
	
		
		
			
				
					|  |  |  |  |  |             "500-599", | 
			
		
	
		
		
			
				
					|  |  |  |  |  |         ]; | 
			
		
	
		
		
			
				
					|  |  |  |  |  |         for (let i = 100; i <= 999; i++) { | 
			
		
	
		
		
			
				
					|  |  |  |  |  |             acceptedStatusCodeOptions.push(i.toString()); | 
			
		
	
		
		
			
				
					|  |  |  |  |  |         } | 
			
		
	
		
		
			
				
					|  |  |         return { |  |  |         return { | 
			
		
	
		
		
			
				
					|  |  |             processing: false, |  |  |             processing: false, | 
			
		
	
		
		
			
				
					|  |  |             monitor: { |  |  |             monitor: { | 
			
		
	
		
		
			
				
					|  |  |                 notificationIDList: {}, |  |  |                 notificationIDList: {}, | 
			
		
	
		
		
			
				
					|  |  |             }, |  |  |             }, | 
			
		
	
		
		
			
				
					|  |  |  |  |  |             acceptedStatusCodeOptions, | 
			
		
	
		
		
			
				
					|  |  |         } |  |  |         } | 
			
		
	
		
		
			
				
					|  |  |     }, |  |  |     }, | 
			
		
	
		
		
			
				
					|  |  |     computed: { |  |  |     computed: { | 
			
		
	
	
		
		
			
				
					|  | @ -170,6 +201,8 @@ export default { | 
			
		
	
		
		
			
				
					|  |  |                     notificationIDList: {}, |  |  |                     notificationIDList: {}, | 
			
		
	
		
		
			
				
					|  |  |                     ignoreTls: false, |  |  |                     ignoreTls: false, | 
			
		
	
		
		
			
				
					|  |  |                     upsideDown: false, |  |  |                     upsideDown: false, | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                     maxredirects: 10, | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                     accepted_statuscodes: ["200-299"], | 
			
		
	
		
		
			
				
					|  |  |                 } |  |  |                 } | 
			
		
	
		
		
			
				
					|  |  |             } else if (this.isEdit) { |  |  |             } else if (this.isEdit) { | 
			
		
	
		
		
			
				
					|  |  |                 this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => { |  |  |                 this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => { | 
			
		
	
	
		
		
			
				
					|  | @ -209,6 +242,18 @@ export default { | 
			
		
	
		
		
			
				
					|  |  | } |  |  | } | 
			
		
	
		
		
			
				
					|  |  | </script> |  |  | </script> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  |  |  |  | <style src="vue-multiselect/dist/vue-multiselect.css"></style> | 
			
		
	
		
		
			
				
					|  |  |  |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  |  |  |  | <style> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |     .multiselect__tags { | 
			
		
	
		
		
			
				
					|  |  |  |  |  |         border-radius: 2rem; | 
			
		
	
		
		
			
				
					|  |  |  |  |  |         border: 1px solid #ced4da; | 
			
		
	
		
		
			
				
					|  |  |  |  |  |     } | 
			
		
	
		
		
			
				
					|  |  |  |  |  |     .multiselect--active .multiselect__tags { | 
			
		
	
		
		
			
				
					|  |  |  |  |  |         border-radius: 1rem; | 
			
		
	
		
		
			
				
					|  |  |  |  |  |     } | 
			
		
	
		
		
			
				
					|  |  |  |  |  | </style> | 
			
		
	
		
		
			
				
					|  |  |  |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  | <style scoped> |  |  | <style scoped> | 
			
		
	
		
		
			
				
					|  |  |     .shadow-box { |  |  |     .shadow-box { | 
			
		
	
		
		
			
				
					|  |  |         padding: 20px; |  |  |         padding: 20px; | 
			
		
	
	
		
		
			
				
					|  | 
 |