From 4c326c71a693f4fb6547c33a672cc36a18b8a1c4 Mon Sep 17 00:00:00 2001
From: Jan Holomek <jahhoo@gmail.com>
Date: Thu, 27 Jul 2023 01:01:59 +0200
Subject: [PATCH] =?UTF-8?q?v1.2=20-=20mo=C5=BEnost=20se=C5=99azen=C3=AD=20?=
 =?UTF-8?q?dat?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/api/index.php                 | 12 +++++++++++-
 ui/src/App.svelte                    | 19 +++++++++++++------
 ui/src/components/OrderStatus.svelte | 28 ++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 ui/src/components/OrderStatus.svelte

diff --git a/server/api/index.php b/server/api/index.php
index ccdbcc6..21c9703 100644
--- a/server/api/index.php
+++ b/server/api/index.php
@@ -144,7 +144,17 @@
 	$where.=" url_group.groupname='".sqlInject($_GET['kat'])."'"; 
 }
 
-$api->loadData($db, $where, '', $from, $limit, $join);
+
+if($_GET['order']=="url") { $order="url.url"; }
+elseif($_GET['order']=="checkTime") { $order="status.date"; }
+elseif($_GET['order']=="deadTime") { $order="exticint.exticintDate"; }
+elseif($_GET['order']=="index") { $order="status.metadata_match"; }
+else { $order="url.id"; }
+
+if(!empty($_GET['orderReverse'])) { $order.=" DESC"; }
+else { $order.=" ASC"; }
+
+$api->loadData($db, $where, $order, $from, $limit, $join);
 $import=$api->import($db);	
 if($import) { 
 	$data=$import; 
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index 06da904..764ee7b 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -21,6 +21,7 @@
   	import Pagination from "./components/Pagination.svelte";
   	import LimitSelect from "./components/LimitSelect.svelte";
   	import Notify from "./components/Notify.svelte";
+  	import OrderStatus from "./components/OrderStatus.svelte";
   	import { api, db } from "./ConfigService.js";
 
   export let urlPath = "";
@@ -34,6 +35,8 @@
   export let checkbox=[];
   export let filterDateFrom=false;
   export let filterDateTo=false;
+  export let order="id";
+  export let orderReverse=false;
   
   export let page=1;
   export let limit=15;
@@ -55,6 +58,10 @@
   	if(filterType && filterType!="") { param+='&filter='+filterType; }
   	if(filterDateFrom && filterDateFrom!="") { param+='&dateFrom='+filterDateFrom; }
   	if(filterDateTo && filterDateTo!="") { param+='&dateTo='+filterDateTo; }
+  	if(order) {
+  		param+='&order='+order;
+  		if(orderReverse) { param+='&orderReverse=1'; }
+  	} 
   	return param;
   }
 
@@ -92,7 +99,7 @@
  });
  
  $: {
- 	if(active) { loadData(filterUrl, filterType, page, limit, filterDateFrom, filterDateTo); }
+ 	if(active) { loadData(filterUrl, filterType, page, limit, filterDateFrom, filterDateTo, order, orderReverse); }
  	if(needsUpdate) { 
  		checkbox=[];
  		loadData(needsUpdate); 
@@ -220,13 +227,13 @@
 				<table class="table data-table m-0">
 				    <thead>
 					<tr>
-					    <th></th>
-					    <th>URL</th>
+					    <th><OrderStatus id="id" bind:order bind:orderReverse /></th>
+					    <th>URL <OrderStatus id="url" bind:order bind:orderReverse /></th>
 					    <th style="min-width:205px;">Info</th>
-					    <th>Poslední kontrola</th>
-					    <th>Index úmrtí</th>
+					    <th>Poslední kontrola <OrderStatus id="checkTime" bind:order bind:orderReverse /></th>
+					    <th>Index úmrtí <OrderStatus id="index" bind:order bind:orderReverse /></th>
 					    <th>Stav</th>
-					    <th>Datum úmrtí</th>
+					    <th>Datum úmrtí <OrderStatus id="deadTime" bind:order bind:orderReverse /></th>
 					    <!--<th>Kategorie</th>-->
 					    <th style="min-width:80px;">Kontrola</th>
 					</tr>
diff --git a/ui/src/components/OrderStatus.svelte b/ui/src/components/OrderStatus.svelte
new file mode 100644
index 0000000..f3f7be0
--- /dev/null
+++ b/ui/src/components/OrderStatus.svelte
@@ -0,0 +1,28 @@
+<script>
+  import IoIosArrowDown from 'svelte-icons/io/IoIosArrowDown.svelte'
+  import IoIosArrowUp from 'svelte-icons/io/IoIosArrowUp.svelte'
+
+  export let id="";
+  export let order;
+  export let orderReverse;
+  
+  function setOrder(o, r) {
+  console.log(id);
+  	order=o;
+  	orderReverse=r;
+  }
+  
+  function getActiveClass(o, r, v) {
+  	if(o==id && r==v) { return "orderIconActive"; }
+  	return "";
+  }
+</script>
+
+ <div class="orderIcon {getActiveClass(order, orderReverse, 1)}" on:click="{()=>setOrder(id, 1)}"><IoIosArrowDown /></div>
+ <div class="orderIcon {getActiveClass(order, orderReverse, 0)}" on:click="{()=>setOrder(id, 0)}"><IoIosArrowUp /></div>
+
+
+<style>
+.orderIcon { width:13px; float:right; color:silver; cursor:pointer; }
+.orderIconActive { color:black; }
+</style>