Checks can now be disabled

README.md

@@ -43,8 +43,6 @@ I rewrote a couple of things today to make sure the script still works.
  * clone this repo
  * install Perl dependencies
  * install PHP composer dependencies: `cd ./web && composer install`
- * install Javascript dependencies: `cd ./web && npm install`
- * compile the Javascript sources: `cd ./web && npx mix --production`
  * create a Database and import the schema from `sql/create.sql`
  * create your own `.env` file: `cp env.example .env` and adapt it to your needs
  * create a webserver vhost with document root to the `public` directory

app/Http/Controllers/ApiController.php

@@ -40,19 +40,9 @@ class ApiController extends Controller
 				$group_id = $t->group_id;
 				$group_name = $t->group_name;
 			}
+			$tasks[$group_id]['tasks'][$t->id] = $t;
+		}
 
-
-			if (isset($tasks[$group_id])) {
-				array_push($tasks[$group_id]['tasks'], $t);
-			}
-			else {
-				$tasks[$group_id] = [
-					'id'			=> $group_id,
-					'name'			=> $group_name,
-					'tasks'			=> [ $t ]
-				];
-			}
-		}
 		return response()->json($tasks);
 	}
 

public/css/app.css

@@ -85,6 +85,9 @@ html body table td {
   text-align: center;
   vertical-align: middle;
 }
+html body table td img {
+  vertical-align: middle;
+}
 html body table td.right {
   text-align: right;
 }

public/img/off.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M6 12C4.89543 12 4 11.1046 4 10C4 8.89543 4.89543 8 6 8C7.10457 8 8 8.89543 8 10C8 11.1046 7.10457 12 6 12Z" fill="#212121"/><path d="M18 10C18 7.79086 16.2091 6 14 6H6C3.79086 6 2 7.79086 2 10C2 12.2091 3.79086 14 6 14H14C16.2091 14 18 12.2091 18 10ZM14 7C15.6569 7 17 8.34315 17 10C17 11.6569 15.6569 13 14 13H6C4.34315 13 3 11.6569 3 10C3 8.34315 4.34315 7 6 7H14Z" fill="#212121"/></svg>

public/img/on.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 7C4.23858 7 2 9.23858 2 12C2 14.7614 4.23858 17 7 17H17C19.7614 17 22 14.7614 22 12C22 9.23858 19.7614 7 17 7H7ZM16.75 14.5C15.3693 14.5 14.25 13.3807 14.25 12C14.25 10.6193 15.3693 9.5 16.75 9.5C18.1307 9.5 19.25 10.6193 19.25 12C19.25 13.3807 18.1307 14.5 16.75 14.5Z" fill="#212121"/></svg>

resources/js/app.js

@@ -40,20 +40,18 @@ const store = new Vuex.Store({
     mutations: {
         setTasks(state, tasks) {
             state.tasks = tasks
-        }
         },
-    actions: {
         updateTask(state, update) {
-            //let tasks = state.tasks
+            let tasks = state.tasks
 
-            for (let i in state.tasks[update.group_id]['tasks']) {
+            if (
-                if (state.tasks[update.group_id]['tasks'][i].id == update.id) {
+                tasks.hasOwnProperty(update.group_id) &&
-                    //tasks[update.group_id]['tasks'][i] = update
+                tasks[update.group_id].hasOwnProperty('tasks') &&
-                    state.tasks[update.group_id]['tasks'][i] = Object.assign({}, state.tasks[update.group_id]['tasks'][i], update)
+                tasks[update.group_id]['tasks'].hasOwnProperty(update.id)
+            ) {
+                tasks[update.group_id]['tasks'][update.id] = update;
             }
         }
-            console.log(state.tasks)
-        }
     }
 })
 

resources/sass/app.scss

@@ -105,6 +105,10 @@ html {
           text-align: center;
           vertical-align: middle;
 
+          img {
+            vertical-align: middle;
+          }
+
           &.right {
             text-align: right;
           }

resources/views/app.vue

@@ -3,19 +3,19 @@
         <h1>MonitoLite Dashboard</h1>
         <p class="refreshed-time">Data refreshed: {{ refreshedTime }}</p>
         <quick-view></quick-view>
-        <group-list></group-list>
+        <task-list></task-list>
     </div>
 </template>
 
 <script>
 
-    import GroupList from './components/grouplist.vue'
+    import TaskList from './components/tasklist.vue'
     import QuickView from './components/quickview.vue'
 
     export default{
         components: {
             QuickView,
-            GroupList
+            TaskList
         },
         data: function() {
             return {

resources/views/components/grouplist.vue

@@ -1,106 +0,0 @@
-<template>
-	<div class="tasks">
-		<div
-			v-for="group in tasks"
-			v-bind:key="group.id"
-			class="task"
-		>
-			<a :name="'group-'+group.id"></a>
-			<h3>
-				Tasks for group <span class="highlight">{{ group.name }} <small>(#{{ group.id }})</small></span>
-				<!-- <p class="context-menu"><img src="img/menu.svg" width="40" /></p> -->
-			</h3>
-
-			<div class="block-content">
-				<table id="tasks_tbl">
-					<thead>
-						<tr>
-							<th width="5%">Up?</th>
-							<th width="*">Host</th>
-							<th width="5%">Type</th>
-							<th width="20%">Last checked</th>
-							<th width="13%">Frequency (min)</th>
-							<th width="5%">Active</th>
-							<th width="5%">Actions</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr
-							v-for="task in group.tasks"
-							v-bind:key="task.id"
-						>
-							<td :class="statusText(task.status)">
-								<img :src="'img/'+statusText(task.status)+'.svg'" width="16" alt="Status" />
-							</td>
-							<td>
-								<a :href="task.host" target="_blank">{{ task.host }}</a>
-							</td>
-							<td>
-								<img :src="task.type == 'http' ? 'img/http.svg' : 'img/ping.svg'" width="16" alt="Type of check" :title="'Type: '+task.type" />
-							</td>
-							<td>
-								<span
-									v-if="task.last_execution"
-								>
-									{{ moment(task.last_execution).fromNow() }}
-									<img src="img/info.svg" alt="Infos" width="16" :title="'Result: '+task.output" />
-								</span>
-								<span
-									v-else
-								>
-									Never
-								</span>
-							<td>{{ task.frequency / 60 }}</td>
-							<td>{{ task.active == 1 ? 'Yes' : 'No' }}</td>
-							<td>
-								<router-link :to="{ name: 'taskdetails', params: { id: task.id }}">
-									<img src="img/see.svg" alt="Details" width="16" />
-								</router-link>
-								<a
-									v-on:click.prevent="disableTask(task.id, task.active)"
-									href="#"
-								>
-									<img src="img/disable.svg" alt="Disable" width="16" />
-								</a>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-
-export default {
-	components: {
-	},
-	computed: {
-		tasks: function() {
-			return this.$store.state.tasks
-		}
-	},
-	methods: {
-		statusText: function (status) {
-			switch (status) {
-				case 1:
-					return 'up';
-				break;
-				case 0:
-					return 'down';
-				break;
-				default:
-					return 'unknown';
-			}
-		},
-		disableTask: function(task_id, current_status) {
-			this.$http.post('/api/toggleTaskStatus/'+task_id, {
-				active: + !current_status
-			})
-			.then(response => this.$store.dispatch('updateTask', response.data))
-		}
-	}
-}
-</script>
-

resources/views/components/tasklist.vue

@@ -1,5 +1,17 @@
 <template>
-	<div>
+	<div class="tasks">
+		<div
+			v-for="group in tasks"
+			v-bind:key="group.id"
+			class="task"
+		>
+			<a :name="'group-'+group.id"></a>
+			<h3>
+				Tasks for group <span class="highlight">{{ group.name }} <small>(#{{ group.id }})</small></span>
+				<!-- <p class="context-menu"><img src="img/menu.svg" width="40" /></p> -->
+			</h3>
+
+			<div class="block-content">
 				<table id="tasks_tbl">
 					<thead>
 						<tr>
@@ -14,7 +26,7 @@
 					</thead>
 					<tbody>
 						<tr
-					v-for="task in tasks"
+							v-for="task in group.tasks"
 							v-bind:key="task.id"
 						>
 							<td :class="statusText(task.status)">
@@ -42,27 +54,34 @@
 							<td>{{ task.active == 1 ? 'Yes' : 'No' }}</td>
 							<td>
 								<router-link :to="{ name: 'taskdetails', params: { id: task.id }}">
-							<img src="img/see.svg" alt="Details" width="16" />
+									<img src="img/see.svg" alt="Details" width="20" />
 								</router-link>
 								<a
 									v-on:click.prevent="disableTask(task.id, task.active)"
 									href="#"
+									:title="task.active == 1 ? 'Disable task' : 'Enable task'"
 								>
-							<img src="img/disable.svg" alt="Disable" width="16" />
+									<img :src="task.active == 1 ? '/img/on.svg' : '/img/off.svg'" alt="Disable" width="24" />
 								</a>
 							</td>
 						</tr>
 					</tbody>
 				</table>
 			</div>
+		</div>
+	</div>
 </template>
 
 <script>
 
 export default {
-	props: [
+	components: {
-		'tasks'
+	},
-	],
+	computed: {
+		tasks: function() {
+			return this.$store.state.tasks
+		}
+	},
 	methods: {
 		statusText: function (status) {
 			switch (status) {