From 3e5b3f256ae6d9e009735eacabbb15555c91245f Mon Sep 17 00:00:00 2001
From: ingalls <nick@ingalls.ca>
Date: Mon, 25 Mar 2024 11:46:43 -0600
Subject: [PATCH 1/4] Update frontpage Icons

---
 api/schema/collections.json               |  8 +--
 api/schema/job.json                       | 18 +++---
 api/schema/results.json                   | 10 +--
 api/schema/users.json                     | 18 +++---
 api/web/src/components/Data.vue           | 78 +++++++++++------------
 api/web/src/components/util/LayerIcon.vue | 20 +++---
 6 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/api/schema/collections.json b/api/schema/collections.json
index 7754027e..f51db705 100644
--- a/api/schema/collections.json
+++ b/api/schema/collections.json
@@ -5,9 +5,6 @@
         "id": {
             "$ref": "./collections/id.json"
         },
-        "size": {
-            "$ref": "./collections/size.json"
-        },
         "name": {
             "$ref": "./collections/name.json"
         },
@@ -17,16 +14,19 @@
         "created": {
             "$ref": "./collections/created.json"
         },
+        "size": {
+            "$ref": "./collections/size.json"
+        },
         "human": {
             "$ref": "./collections/human.json"
         }
     },
     "required": [
         "id",
-        "size",
         "name",
         "sources",
         "created",
+        "size",
         "human"
     ]
 }
\ No newline at end of file
diff --git a/api/schema/job.json b/api/schema/job.json
index f4d89652..e97ca055 100644
--- a/api/schema/job.json
+++ b/api/schema/job.json
@@ -5,12 +5,6 @@
         "id": {
             "$ref": "./job/id.json"
         },
-        "size": {
-            "$ref": "./job/size.json"
-        },
-        "license": {
-            "$ref": "./job/license.json"
-        },
         "run": {
             "$ref": "./job/run.json"
         },
@@ -52,12 +46,16 @@
         },
         "version": {
             "$ref": "./job/version.json"
+        },
+        "size": {
+            "$ref": "./job/size.json"
+        },
+        "license": {
+            "$ref": "./job/license.json"
         }
     },
     "required": [
         "id",
-        "size",
-        "license",
         "run",
         "map",
         "created",
@@ -71,6 +69,8 @@
         "stats",
         "count",
         "bounds",
-        "version"
+        "version",
+        "size",
+        "license"
     ]
 }
\ No newline at end of file
diff --git a/api/schema/results.json b/api/schema/results.json
index e70ac8da..5c63dfa9 100644
--- a/api/schema/results.json
+++ b/api/schema/results.json
@@ -5,9 +5,6 @@
         "id": {
             "$ref": "./results/id.json"
         },
-        "fabric": {
-            "$ref": "./results/fabric.json"
-        },
         "source": {
             "$ref": "./results/source.json"
         },
@@ -22,15 +19,18 @@
         },
         "job": {
             "$ref": "./results/job.json"
+        },
+        "fabric": {
+            "$ref": "./results/fabric.json"
         }
     },
     "required": [
         "id",
-        "fabric",
         "source",
         "updated",
         "layer",
         "name",
-        "job"
+        "job",
+        "fabric"
     ]
 }
\ No newline at end of file
diff --git a/api/schema/users.json b/api/schema/users.json
index 7e522956..93f18189 100644
--- a/api/schema/users.json
+++ b/api/schema/users.json
@@ -5,12 +5,6 @@
         "id": {
             "$ref": "./users/id.json"
         },
-        "created": {
-            "$ref": "./users/created.json"
-        },
-        "level": {
-            "$ref": "./users/level.json"
-        },
         "access": {
             "$ref": "./users/access.json"
         },
@@ -26,19 +20,25 @@
         "password": {
             "$ref": "./users/password.json"
         },
+        "created": {
+            "$ref": "./users/created.json"
+        },
         "validated": {
             "$ref": "./users/validated.json"
+        },
+        "level": {
+            "$ref": "./users/level.json"
         }
     },
     "required": [
         "id",
-        "created",
-        "level",
         "access",
         "flags",
         "username",
         "email",
         "password",
-        "validated"
+        "created",
+        "validated",
+        "level"
     ]
 }
\ No newline at end of file
diff --git a/api/web/src/components/Data.vue b/api/web/src/components/Data.vue
index 89295cf7..2b7309e6 100644
--- a/api/web/src/components/Data.vue
+++ b/api/web/src/components/Data.vue
@@ -8,16 +8,16 @@
                         <h3 class='card-title'>New Features</h3>
                     </div>
                     <div class='card-body row'>
-                        <div class='col-4 d-flex justify-content-center'>
-                            <LayerIcon layer='buildings'/>
+                        <div class='col-4 d-flex justify-content-center align-items-center'>
+                            <LayerIcon layer='buildings' size='32'/>
                             Buildings
                         </div>
-                        <div class='col-4 d-flex justify-content-center'>
-                            <LayerIcon layer='addresses'/>
+                        <div class='col-4 d-flex justify-content-center align-items-center'>
+                            <LayerIcon layer='addresses' size='32'/>
                             Addresses
                         </div>
-                        <div class='col-4 d-flex justify-content-center'>
-                            <LayerIcon layer='parcels'/>
+                        <div class='col-4 d-flex justify-content-center align-items-center'>
+                            <LayerIcon layer='parcels' size='32'/>
                             Parcels
                         </div>
                         <div class='col-12'>
@@ -36,7 +36,7 @@
                         <h2 class='card-title'>Data Collections</h2>
 
                         <div class='ms-auto btn-list'>
-                            <RefreshIcon @click='fetchCollections' class='cursor-pointer'/>
+                            <IconRefresh @click='fetchCollections' class='cursor-pointer' size='32'/>
                         </div>
                     </div>
 
@@ -56,7 +56,7 @@
                                 <td class='d-flex'>
                                     <span v-text='size(c.size)'/>
                                     <div class='ms-auto btn-list'>
-                                        <DownloadIcon v-on:click.stop.prevent='collectionpls(c)' class='cursor-pointer'/>
+                                        <IconDownload v-on:click.stop.prevent='collectionpls(c)' class='cursor-pointer' size='32'/>
                                     </div>
                                 </td>
 
@@ -72,13 +72,13 @@
                         <h2 class='card-title'>Individual Sources</h2>
 
                         <div class='ms-auto btn-list'>
-                            <ArrowsMaximizeIcon @click='fullscreen = true' v-if='!fullscreen' class='cursor-pointer'/>
-                            <ArrowsMinimizeIcon @click='fullscreen = false' v-else class='cursor-pointer'/>
+                            <IconArrowsMaximize @click='fullscreen = true' v-if='!fullscreen' class='cursor-pointer' size='32'/>
+                            <IconArrowsMinimize @click='fullscreen = false' v-else class='cursor-pointer' size='32'/>
 
-                            <SearchIcon @click='showFilter = !showFilter' v-if='!showFilter' class='cursor-pointer'/>
-                            <XIcon  @click='showFilter = !showFilter' v-else class='cursor-pointer'/>
+                            <IconSearch @click='showFilter = !showFilter' v-if='!showFilter' class='cursor-pointer' size='32'/>
+                            <IconX  @click='showFilter = !showFilter' v-else class='cursor-pointer' size='32'/>
 
-                            <RefreshIcon @click='fetchData' class='cursor-pointer'/>
+                            <IconRefresh @click='fetchData' class='cursor-pointer' size='32'/>
                         </div>
                     </div>
 
@@ -127,14 +127,14 @@
                                     <tr>
                                         <td @click='d._open = !d._open' v-text='d.source' class='cursor-pointer'></td>
                                         <td @click='d._open = !d._open' class='cursor-pointer'>
-                                            <LayerIcon v-if='d.has.buildings' layer='buildings'/>
-                                            <LayerIcon v-if='d.has.addresses' layer='addresses'/>
-                                            <LayerIcon v-if='d.has.parcels' layer='parcels'/>
+                                            <LayerIcon v-if='d.has.buildings' layer='buildings' size='32'/>
+                                            <LayerIcon v-if='d.has.addresses' layer='addresses' size='32'/>
+                                            <LayerIcon v-if='d.has.parcels' layer='parcels' size='32'/>
                                         </td>
                                         <td>
                                             <div class='d-flex'>
                                                 <div class='ms-auto btn-list'>
-                                                    <MapIcon v-if='d.map' @click='$router.push(`/location/${d.map}`)' class='cursor-pointer'/>
+                                                    <IconMap v-if='d.map' @click='$router.push(`/location/${d.map}`)' class='cursor-pointer' size='32'/>
                                                 </div>
                                             </div>
                                         </td>
@@ -156,7 +156,7 @@
                                                         <template v-if='auth && auth.access === "admin"'>
                                                             <TablerDropdown>
                                                                 <slot>
-                                                                    <SettingsIcon class='cursor-pointer'/>
+                                                                    <IconSettings class='cursor-pointer' size='32'/>
                                                                 </slot>
                                                                 <template #dropdown>
                                                                     <TablerToggle @change='updateData(job)' v-model='job.fabric' label='Fabric'/>
@@ -165,7 +165,7 @@
                                                             </TablerDropdown>
                                                         </template>
 
-                                                        <HistoryIcon @click='$router.push(`/data/${job.id}/history`)' class='cursor-pointer'/>
+                                                        <IconHistory @click='$router.push(`/data/${job.id}/history`)' class='cursor-pointer' size='32'/>
                                                     </div>
                                                 </div>
                                             </div>
@@ -185,17 +185,6 @@
 </template>
 
 <script>
-import {
-    ArrowsMaximizeIcon,
-    ArrowsMinimizeIcon,
-    SettingsIcon,
-    DownloadIcon,
-    HistoryIcon,
-    RefreshIcon,
-    SearchIcon,
-    MapIcon,
-    XIcon,
-} from 'vue-tabler-icons';
 import LayerIcon from './util/LayerIcon.vue';
 import MustLogin from './util/MustLogin.vue';
 import Download from './util/Download.vue';
@@ -203,6 +192,17 @@ import Coverage from './util/Coverage.vue';
 import QuerySource from './query/Source.vue';
 import QueryLayer from './query/Layer.vue';
 import moment from 'moment-timezone';
+import {
+    IconArrowsMaximize,
+    IconArrowsMinimize,
+    IconSettings,
+    IconDownload,
+    IconHistory,
+    IconRefresh,
+    IconSearch,
+    IconMap,
+    IconX,
+} from '@tabler/icons-vue';
 import {
     TablerLoading,
     TablerDropdown,
@@ -376,20 +376,20 @@ export default {
     },
     components: {
         MustLogin,
-        ArrowsMaximizeIcon,
-        ArrowsMinimizeIcon,
+        IconArrowsMaximize,
+        IconArrowsMinimize,
+        IconSettings,
+        IconDownload,
+        IconHistory,
+        IconRefresh,
+        IconSearch,
+        IconMap,
+        IconX,
         Coverage,
         QuerySource,
         QueryLayer,
         Download,
-        SettingsIcon,
-        DownloadIcon,
-        RefreshIcon,
-        HistoryIcon,
         TablerLoading,
-        SearchIcon,
-        XIcon,
-        MapIcon,
         TablerInput,
         TablerToggle,
         TablerDropdown,
diff --git a/api/web/src/components/util/LayerIcon.vue b/api/web/src/components/util/LayerIcon.vue
index 13644678..ae7453df 100644
--- a/api/web/src/components/util/LayerIcon.vue
+++ b/api/web/src/components/util/LayerIcon.vue
@@ -1,17 +1,17 @@
 <template>
 <span>
-    <BuildingCommunityIcon v-if='layer === "buildings"'/>
-    <MapPinIcon v-else-if='layer === "addresses"'/>
-    <ShapeIcon v-else-if='layer === "parcels"'/>
+    <IconBuildingCommunity v-if='layer === "buildings"' size='32'/>
+    <IconMapPin v-else-if='layer === "addresses"' size='32'/>
+    <IconShape v-else-if='layer === "parcels"' size='32'/>
 </span>
 </template>
 
 <script>
 import {
-    BuildingCommunityIcon,
-    MapPinIcon,
-    ShapeIcon,
-} from 'vue-tabler-icons';
+    IconBuildingCommunity,
+    IconMapPin,
+    IconShape,
+} from '@tabler/icons-vue';
 
 export default {
     name: 'OAType',
@@ -21,9 +21,9 @@ export default {
         }
     },
     components: {
-        BuildingCommunityIcon,
-        MapPinIcon,
-        ShapeIcon,
+        IconBuildingCommunity,
+        IconMapPin,
+        IconShape,
     }
 }
 </script>

From ec4f8ab6e6c4f613997f160651b53c7f82d92e7b Mon Sep 17 00:00:00 2001
From: ingalls <nick@ingalls.ca>
Date: Mon, 25 Mar 2024 11:48:13 -0600
Subject: [PATCH 2/4] Center Text in Div

---
 api/web/src/components/Data.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/api/web/src/components/Data.vue b/api/web/src/components/Data.vue
index 2b7309e6..c1a518e4 100644
--- a/api/web/src/components/Data.vue
+++ b/api/web/src/components/Data.vue
@@ -59,7 +59,6 @@
                                         <IconDownload v-on:click.stop.prevent='collectionpls(c)' class='cursor-pointer' size='32'/>
                                     </div>
                                 </td>
-
                             </tr>
                         </tbody>
                     </table>
@@ -142,11 +141,11 @@
                                     <template v-if='d._open' :key='job.id' v-for='job in d.sources'>
                                         <tr><td colspan='3' class='cursor-pointer'>
                                             <div class='row'>
-                                                <div @click='emitjob(job.job)' class='col-5'>
-                                                    <span v-text='job.layer'/> - <span v-text='job.name'/>
+                                                <div @click='emitjob(job.job)' class='col-5 d-flex align-items-center'>
+                                                    <span v-text='job.layer'/>&nbsp;-&nbsp;<span v-text='job.name'/>
 
                                                 </div>
-                                                <div @click='emitjob(job.job)' class='col-2'>
+                                                <div @click='emitjob(job.job)' class='col-2 d-flex align-items-center'>
                                                     <span v-text='fmt(job.updated)'/>
                                                 </div>
                                                 <div class='col-5 d-flex'>

From 54c2e782b30d93974d280006e92302b1dc2d8001 Mon Sep 17 00:00:00 2001
From: ingalls <nick@ingalls.ca>
Date: Mon, 25 Mar 2024 11:58:16 -0600
Subject: [PATCH 3/4] Add History

---
 api/web/src/components/History.vue | 41 ++++++++++++++----------------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/api/web/src/components/History.vue b/api/web/src/components/History.vue
index 854eafc0..4343761d 100644
--- a/api/web/src/components/History.vue
+++ b/api/web/src/components/History.vue
@@ -29,29 +29,26 @@
                         <template v-else>
                             <h2 class='subheader mx-3 my-3'>Stats History</h2>
 
-                            <template v-if='loading'>
-                                <div class='flex flex--center-main w-full py24'>
-                                    <div class='loading'></div>
-                                </div>
-                            </template>
+                            <TablerLoading v-if='loading.history' desc='Loading Stats'/>
                             <template v-else>
-                                <LineChart class='w-full mb24' style='height: 200px' :chart-data='chart' :chart-options='{
-                                    "maintainAspectRatio": false,
-                                    "scales": {
-                                        "xAxis": {
-                                            "type": "time",
-                                            "time": {
-                                                "unit": "day"
+                                <div class='card-body'>
+                                    <LineChart class='w-100' style='height: 200px' :data='chart' :options='{
+                                        "scales": {
+                                            "xAxis": {
+                                                "type": "time",
+                                                "time": {
+                                                    "unit": "day"
+                                                },
+                                                "distribution": "linear"
                                             },
-                                            "distribution": "linear"
-                                        },
-                                        "yAxis": {
-                                            "ticks": {
-                                                "beginAtZero": true
+                                            "yAxis": {
+                                                "ticks": {
+                                                    "beginAtZero": true
+                                                }
                                             }
                                         }
-                                    }
-                                }'/>
+                                    }'/>
+                                </div>
                             </template>
 
                             <h2 class='subheader mx-3 my-3'>Job History</h2>
@@ -104,10 +101,10 @@ import {
     DownloadIcon
 } from 'vue-tabler-icons';
 import { Line as LineChart } from 'vue-chartjs';
-import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, TimeScale, PointElement, LineElement } from 'chart.js'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, TimeScale, PointElement, LineElement, CategoryScale } from 'chart.js'
 import moment from 'moment-timezone';
 
-ChartJS.register(Title, Tooltip, Legend, BarElement, LinearScale, TimeScale, PointElement, LineElement)
+ChartJS.register(Title, Tooltip, Legend, BarElement, LinearScale, TimeScale, PointElement, LineElement, CategoryScale)
 
 import 'chartjs-adapter-date-fns';
 
@@ -118,7 +115,7 @@ export default {
         return {
             tz: moment.tz.guess(),
             loading: {
-
+                history: true
             },
             colours: [ /* Thanks for the colours! https://github.com/johannesbjork/LaCroixColoR */ ],
             chart: {

From bcae460a05baebdd94720474c4c95009c74dfac7 Mon Sep 17 00:00:00 2001
From: ingalls <nick@ingalls.ca>
Date: Mon, 25 Mar 2024 12:27:48 -0600
Subject: [PATCH 4/4] Fix chart & pager

---
 api/web/src/components/History.vue          | 28 +++++++++++++++------
 api/web/src/components/util/TableFooter.vue |  4 +--
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/api/web/src/components/History.vue b/api/web/src/components/History.vue
index 4343761d..c0c96a34 100644
--- a/api/web/src/components/History.vue
+++ b/api/web/src/components/History.vue
@@ -21,7 +21,7 @@
                             <h3 class='card-title' v-text='data.source + " - " + data.layer + " - " + data.name'/>
 
                             <div class='ms-auto btn-list'>
-                                <RefreshIcon @click='refresh' class='cursor-pointer'/>
+                                <IconRefresh @click='refresh' class='cursor-pointer' size='32'/>
                             </div>
                         </div>
 
@@ -63,7 +63,7 @@
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    <tr :key='job.id' v-for='job in history.jobs'>
+                                    <tr :key='job.id' v-for='job in computedPage'>
                                         <td>
                                             <Status :status='job.status'/>
                                         </td>
@@ -74,13 +74,14 @@
                                         <td>
                                             <div class='d-flex'>
                                                 <div class='ms-auto'>
-                                                    <DownloadIcon v-if='job.output.output' v-on:click.stop.prevent='datapls(job.id)' class='cursor-pointer'/>
+                                                    <IconDownload v-if='job.output.output' v-on:click.stop.prevent='datapls(job.id)' class='cursor-pointer' size='32'/>
                                                 </div>
                                             </div>
                                         </td>
                                     </tr>
                                 </tbody>
                             </table>
+                            <TableFooter :limit='paging.limit' :total='history.jobs.length' @page='paging.page = $event'/>
                         </template>
                     </div>
                 </div>
@@ -95,11 +96,12 @@ import {
     TablerBreadCrumb,
     TablerLoading,
 } from '@tak-ps/vue-tabler';
+import TableFooter from './util/TableFooter.vue';
 import Status from './util/Status.vue';
 import {
-    RefreshIcon,
-    DownloadIcon
-} from 'vue-tabler-icons';
+    IconRefresh,
+    IconDownload
+} from '@tabler/icons-vue';
 import { Line as LineChart } from 'vue-chartjs';
 import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, TimeScale, PointElement, LineElement, CategoryScale } from 'chart.js'
 import moment from 'moment-timezone';
@@ -117,6 +119,10 @@ export default {
             loading: {
                 history: true
             },
+            paging: {
+                limit: 10,
+                page: 0
+            },
             colours: [ /* Thanks for the colours! https://github.com/johannesbjork/LaCroixColoR */ ],
             chart: {
                 datasets: [{
@@ -136,6 +142,11 @@ export default {
         ]
         this.refresh();
     },
+    computed: {
+        computedPage: function() {
+            return this.history.jobs.slice(this.paging.limit * this.paging.page, this.paging.limit * (this.paging.page + 1))
+        }
+    },
     methods: {
         fmt: function(date) {
             return moment(date).tz(this.tz).format('YYYY-MM-DD');
@@ -222,11 +233,12 @@ export default {
     },
     components: {
         Status,
-        RefreshIcon,
+        IconRefresh,
+        IconDownload,
         TablerLoading,
+        TableFooter,
         LineChart,
         TablerBreadCrumb,
-        DownloadIcon
     },
 }
 </script>
diff --git a/api/web/src/components/util/TableFooter.vue b/api/web/src/components/util/TableFooter.vue
index ea157689..c6ca8bdf 100644
--- a/api/web/src/components/util/TableFooter.vue
+++ b/api/web/src/components/util/TableFooter.vue
@@ -1,11 +1,11 @@
 <template>
-<div class="card-footer">
+<div class="card-footer w-100">
     <div class='row'>
         <div class='col-sm-12 col-md-6'>
             <p v-if='total === 0' class='m-0 text-muted'>Showing 0 of 0 entries</p>
             <p v-else class="m-0 text-muted">Showing <span v-text='limit * page + 1'/> to <span v-text='total < limit ? total : (page * limit + limit > total ? total : page * limit + limit)'/> of <span v-text='total'/> entries</p>
         </div>
-        <div v-if='total > limit' class='col-sm-12 col-md-6 d-flex'>
+        <div v-if='total > limit' class='col-sm-12 col-6 d-flex'>
             <TablerPager @page='page = $event' :total='total' :limit='limit'/>
         </div>
     </div>