From b3195bcd82d6a255c5f80993b9f583a9d5dbe07f Mon Sep 17 00:00:00 2001
From: inportb <inportb@gmail.com>
Date: Wed, 28 Sep 2022 02:03:21 -0400
Subject: [PATCH] Data row filtering

---
 htdocs/ViewData.vue | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/htdocs/ViewData.vue b/htdocs/ViewData.vue
index 4895410..821e52f 100644
--- a/htdocs/ViewData.vue
+++ b/htdocs/ViewData.vue
@@ -6,16 +6,16 @@
 			</thead>
 			<tbody v-for="report in reports">
 				<template v-for="name in report">
-					<tr v-if="names[name]">
-						<th>{{name}}</th>
+					<tr v-if="names[name]" @dblclick="toggle_filter_name(name)">
+						<th :class="{ filtered: name == filter_name }">{{name}}</th>
 						<td v-for="(group, idx) in groups" :class="{ first: (idx == 0) || (group.datehdr.datestr != groups[idx - 1].datehdr.datestr), abnormal_ref: abnormal_ref(group.values[name]), abnormal_ref_low: abnormal_ref_low(group.values[name]), abnormal_ref_high: abnormal_ref_high(group.values[name]), abnormal_iqr: abnormal_iqr(group.values[name]), abnormal_iqr_low: abnormal_iqr_low(group.values[name]), abnormal_iqr_high: abnormal_iqr_high(group.values[name]) }" :title="tooltip(group.values[name])">{{group.values[name] ? group.values[name].value : ''}}</td>
 					</tr>
 				</template>
 			</tbody>
 			<tbody>
 				<template v-for="name in names">
-					<tr v-if="!names_excluded[name]">
-						<th>{{name}}</th>
+					<tr v-if="!names_excluded[name]" @dblclick="toggle_filter_name(name)">
+						<th :class="{ filtered: name == filter_name }">{{name}}</th>
 						<td v-for="(group, idx) in groups" :class="{ first: (idx == 0) || (group.datehdr.datestr != groups[idx - 1].datehdr.datestr), abnormal_ref: abnormal_ref(group.values[name]), abnormal_ref_low: abnormal_ref_low(group.values[name]), abnormal_ref_high: abnormal_ref_high(group.values[name]), abnormal_iqr: abnormal_iqr(group.values[name]), abnormal_iqr_low: abnormal_iqr_low(group.values[name]), abnormal_iqr_high: abnormal_iqr_high(group.values[name]) }" :title="tooltip(group.values[name])">{{group.values[name] ? group.values[name].value : ''}}</td>
 					</tr>
 				</template>
@@ -37,16 +37,25 @@
 	table.table-sticky tbody tr {
 		border-top: 1px dashed #dee2e6;
 	}
+	table.table-sticky tbody tr:hover {
+		border: 1px solid #6c757d;
+	}
 	td:nth-of-type(odd) {
 		background-color: rgba(0, 0, 0, 0.05);
 	}
 	table.table-sticky tbody th, table.table-sticky th.name {
+		cursor: default;
 		font-weight: bold;
 		text-align: center;
 		padding-left: 1rem;
 		padding-right: 1rem;
 	}
+	table.table-sticky th.filtered {
+		background-color: #6c757d;
+		color: #fff;
+	}
 	table.table-sticky th.date {
+		cursor: default;
 		font-size: 80%;
 		font-weight: normal;
 		text-align: center;
@@ -147,11 +156,14 @@
 			}
 		},
 		data() {
-			return {};
+			return {
+				filter_name: null
+			};
 		},
 		computed: {
 			resultset_all() {
-				return this.resultset_calculated.length > 0 ? this.resultset.concat(this.resultset_calculated) : this.resultset;
+				var res = this.resultset_calculated.length > 0 ? this.resultset.concat(this.resultset_calculated) : this.resultset;
+				return this.filter_name ? res.filter(x => x.name == this.filter_name) : res;
 			},
 			resultset_calculated() {
 				var self = this, snapshots = [], results = [], history, update, item;
@@ -230,6 +242,9 @@
 					return res.join('\n');
 				}
 			},
+			toggle_filter_name(name) {
+				this.filter_name = this.filter_name != name ? name : null;
+			},
 			abnormal_ref(item) {
 				return (item) && (item.flag);
 			},