Improving quickview

web/DB.php

@@ -41,7 +41,7 @@ class DB {
 	public function get_all_tasks($status = null) {
 		if (is_null($status)) {
 			$query = '
-				SELECT DISTINCT t.id, t.host, t.type, t.params, t.frequency, t.creation_date, t.last_execution, t.active, t.group_id, h.status, g.name as group_name
+				SELECT DISTINCT t.id, t.host, t.type, t.params, t.frequency, t.creation_date, t.last_execution, t.active, t.group_id, h.status, h.output, g.name as group_name
 				FROM `tasks` as t
 				LEFT JOIN `tasks_history` as h ON (h.task_id = t.id)
 				LEFT JOIN `groups` as g ON (g.id = t.group_id)

web/css/styles.css

@@ -92,24 +92,25 @@ td {
 
 
 .new-group {
-  margin: .2rem;
+  margin: .1rem;
   display: inline-block;
-  border: 1px solid rgba(7, 7, 7, 0.432);
-  padding: 1px;
-
+  border-radius: .4rem;
+  overflow: hidden;
+  cursor: pointer;
 }
 
 .quick-view .square {
-  width: 1rem;
-  min-width: 1rem;
-  max-width: 1rem;
-  height: 1rem;
-  min-height: 1rem;
-  max-height: 1rem;
-  margin: 0.1rem;
+  height: 100%;
+  margin: 0;
   text-align: center;
   vertical-align: middle;
   float: left;
+  line-height: 1.2rem;
+  min-width: 1.4rem;
+}
+
+.quick-view .square:not(:first-of-type) {
+  border-left: 1px solid white;
 }
 
 .spacer {
@@ -132,7 +133,6 @@ td {
 }
 
 
-
 .highlight {
   background-color: #000;
   padding: 0px 1rem;

web/index.php

@@ -7,7 +7,7 @@
 		<title>MonitoLite - Network monitoring tool</title>
 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-		<script type="text/javascript" src="js/scripts.js"></script>
+		<script type="text/javascript" type="module" src="js/scripts.js"></script>
 		<link type="text/css" rel="stylesheet" href="css/styles.css" />
 	</head>
 
@@ -21,22 +21,23 @@
 					v-for="group in tasks"
 					v-bind:key="group.id"
 					class="new-group"
-					:title="group.name"
+					:title="'Group: '+group.name"
 				>
-					<a
+					<p
 						v-for="task in group.tasks"
 						v-bind:key="task.id"
 						:href="'#task-'+task.id"
+						:class="statusText(task.status)"
+						class="square"
 					>
-						<p :class="statusText(task.status)" class="square">
-							<!--<img :src="'/img/'+statusText(task.status)+'.png'" width="16" alt="">-->
+						&nbsp;
 					</p>
-					</a>
 				</div>
 				<p class="spacer">&nbsp;</p>
 			</div>
 
 
+			<div class="tasks">
 				<div
 					v-for="group in tasks"
 					v-bind:key="group.group_id"
@@ -69,7 +70,18 @@
 								<td>
 									<img :src="task.type == 'http' ? 'img/http.png' : 'img/ping.png'" width="16" alt="Type of check" :title="'Type: '+task.type" />
 								</td>
-							<td>{{ task.last_execution ?? 'never' }}</td>
+								<td>
+									<span
+										v-if="task.last_execution"
+									>
+										{{ task.last_execution }}
+										<img src="img/info.png" alt="Infos" width="16" :title="'Result: '+task.output" />
+									</span>
+									<span
+										v-else
+									>
+										Never
+									</span>
 								<td>{{ task.frequency }}</td>
 								<td>{{ task.active == 1 ? 'Yes' : 'No' }}</td>
 							</tr>
@@ -77,6 +89,7 @@
 					</table>
 				</div>
 			</div>
+		</div>
 
 		<script>
 			var vm = new Vue({