From ea673e0083e3cd9229e11e14dfa3d2d0d87d94b1 Mon Sep 17 00:00:00 2001
From: Axel <1597611+axeloz@users.noreply.github.com>
Date: Sun, 19 Dec 2021 14:46:08 +0100
Subject: [PATCH] Improving quickview

---
 web/DB.php         |   2 +-
 web/css/styles.css |  24 +++++------
 web/img/info.png   | Bin 0 -> 448 bytes
 web/index.php      | 103 +++++++++++++++++++++++++--------------------
 4 files changed, 71 insertions(+), 58 deletions(-)
 create mode 100644 web/img/info.png

diff --git a/web/DB.php b/web/DB.php
index dd9b92a..6bfd4e1 100644
--- a/web/DB.php
+++ b/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)
diff --git a/web/css/styles.css b/web/css/styles.css
index 715a22a..b3a321a 100644
--- a/web/css/styles.css
+++ b/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;
diff --git a/web/img/info.png b/web/img/info.png
new file mode 100644
index 0000000000000000000000000000000000000000..39dc9ce233afd30f8567f3c82801dd278cb6aed4
GIT binary patch
literal 448
zcmV;x0YCnUP)<h;3K|Lk000e1NJLTq001xm001xu1ONa4{R=S+0004pNkl<Zc-rlk
zO-{m45P-iRu)v)^D}h@;0{1Y1#Ct$s59k&(g>VCc8<m)N3K0$<;zlTI+D#2HO-%aQ
zzP>)9Cd_Qx?@RlpGgH{de~1IhG#N2tjg8HkDI*$`IEW9=bHxXaPcG<?Q-`0@$M%K0
zX<=}pg1^8Fg}b?;8V#OiAPsl3M@kld$WvteHpgUS@F~Vh_-#Iu4i^lR@!K@QkJgEq
zl_2~v%h&=lsA&5kH@gvh)r}uMhowbelNSpvLmyvG;LsM~6TE8^EJSUv9Q$~GX3;BX
zY8BMIf;+8(p;s`|DtPq@WSX<=Av-L+0!yo4^9zEVzoMyD!9=Z0<pqK=ZD<wLyn>Qe
zL1DMe?u~?~pLVnfTH<+-)iiK6ocYZ(LyMrh+o8V--c+lx1?OR#Q7;z$T4r^8RK`D$
zl-W)*ii&%=<@ft34274IjP{REiBM6W;YTYj+FOY+w4uw9`hQxMHgjM2oR<GrD<27p
q)EP3t#KOYlg&{Qx;+D3LzZPFb$D-Ub$N+x;0000<MNUMnLSTX%B*zN?

literal 0
HcmV?d00001

diff --git a/web/index.php b/web/index.php
index 4164b27..1292b65 100644
--- a/web/index.php
+++ b/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,60 +21,73 @@
 					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="">-->
-						</p>
-					</a>
+						&nbsp;
+					</p>
 				</div>
 				<p class="spacer">&nbsp;</p>
 			</div>
 
 
-			<div
-				v-for="group in tasks"
-				v-bind:key="group.group_id"
-				class="task"
-			>
-				<h3>Tasks for group <span class="highlight">{{ group.name }}</span> <small>(#{{ group.id }})</small> </h3>
-				<table id="tasks_tbl">
-					<thead>
-						<tr>
-							<th width="5%">Up?</th>
-							<th width="*">Host</th>
-							<th width="5%">Type</th>
-							<th width="20%">Last execution</th>
-							<th width="20%">Frequency (min)</th>
-							<th width="5%">Active</th$query>
-						</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)+'.png'" width="16" alt="Status" />
-								<a :name="'task-'+task.id"></a>
-							</td>
-							<td :class="statusText(task.status)">
-								<a :href="task.host" target="_blank">{{ task.host }}</a>
-							</td>
-							<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>{{ task.frequency }}</td>
-							<td>{{ task.active == 1 ? 'Yes' : 'No' }}</td>
-						</tr>
-					</tbody>
-				</table>
+			<div class="tasks">
+				<div
+					v-for="group in tasks"
+					v-bind:key="group.group_id"
+					class="task"
+				>
+					<h3>Tasks for group <span class="highlight">{{ group.name }}</span> <small>(#{{ group.id }})</small> </h3>
+					<table id="tasks_tbl">
+						<thead>
+							<tr>
+								<th width="5%">Up?</th>
+								<th width="*">Host</th>
+								<th width="5%">Type</th>
+								<th width="20%">Last execution</th>
+								<th width="20%">Frequency (min)</th>
+								<th width="5%">Active</th$query>
+							</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)+'.png'" width="16" alt="Status" />
+									<a :name="'task-'+task.id"></a>
+								</td>
+								<td :class="statusText(task.status)">
+									<a :href="task.host" target="_blank">{{ task.host }}</a>
+								</td>
+								<td>
+									<img :src="task.type == 'http' ? 'img/http.png' : 'img/ping.png'" width="16" alt="Type of check" :title="'Type: '+task.type" />
+								</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>
+						</tbody>
+					</table>
+				</div>
 			</div>
 		</div>