From 059652b3959c49dc92db47984dd5abbb263e0a78 Mon Sep 17 00:00:00 2001
From: Mike <michmzr@gmail.com>
Date: Thu, 8 Jun 2023 23:50:57 +0800
Subject: [PATCH]  #15 Auto refresh page when user authorized with pocket or
 resynced #15 (#18)

- Changed how tags stats look like, small fixes
 - Autorefresh stats components when sync was made
---
 .../src/components/DailyStatsChart.vue        | 18 ++++++-----
 src/frontend/src/components/LangStats.vue     |  8 +++--
 .../src/components/StatsPerPeriod.vue         |  8 +++--
 src/frontend/src/components/TopTags.vue       | 31 +++++++------------
 src/frontend/src/main.ts                      |  4 ++-
 src/main/docker/mongodb.yml                   |  6 +---
 6 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/src/frontend/src/components/DailyStatsChart.vue b/src/frontend/src/components/DailyStatsChart.vue
index fcb3a84..ac560b4 100644
--- a/src/frontend/src/components/DailyStatsChart.vue
+++ b/src/frontend/src/components/DailyStatsChart.vue
@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import {Options, Vue} from "vue-class-component";
-import {useSessionStore} from "@/store";
+import {useSessionStore, useSyncStore} from "@/store";
 import {StatsService} from "@/services/stats-service";
 import {DayStatsType, IDayStat} from "@/models/stats-models";
 import Datepicker from 'vue3-datepicker'
@@ -62,6 +62,7 @@ export default class DailyStatsChart extends Vue {
   authorized: Boolean = false
 
   sessionStore = useSessionStore()
+  syncStore = useSyncStore()
   statsService = new StatsService()
 
   formDayStart: Date = subDays(new Date(), 7)
@@ -72,15 +73,15 @@ export default class DailyStatsChart extends Vue {
     datasets: [
       {
         label: 'Read items in day',
-        backgroundColor: '#f87979',
-        borderColor: '#f87979',
+        backgroundColor: '#0a4687',
+        borderColor: '#0a4687',
         data: [] as number[],
         yAxisID: 'y',
       },
       {
         label: 'Added items in day',
-        backgroundColor: '#0a4687',
-        borderColor: '#0a4687',
+        backgroundColor: '#f87979',
+        borderColor: '#f87979',
         data: [] as number[],
         yAxisID: 'y1',
       }
@@ -116,12 +117,15 @@ export default class DailyStatsChart extends Vue {
   }
 
   mounted() {
-    this.onChangedDatePeriod();
-
     this.isAuthorized()
     this.sessionStore.$subscribe((mutation, state) => {
       this.authorized = state.authorized
     });
+
+    this.syncStore.$subscribe(() => {
+      console.debug(`Got sync store change - reloading component data`)
+      this.onChangedDatePeriod()
+    })
   }
 
   clearChart() {
diff --git a/src/frontend/src/components/LangStats.vue b/src/frontend/src/components/LangStats.vue
index 34e96c2..452ea6e 100644
--- a/src/frontend/src/components/LangStats.vue
+++ b/src/frontend/src/components/LangStats.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import {Options, Vue} from "vue-class-component";
-import {useSessionStore} from "@/store";
+import {useSessionStore, useSyncStore} from "@/store";
 import {Pie} from "vue-chartjs";
 import {ILangStats} from "@/models/stats-models";
 import {StatsService} from "@/services/stats-service";
@@ -26,6 +26,7 @@ ChartJS.register(ArcElement, Tooltip, Legend)
 export default class LangStats extends Vue {
   authorized: Boolean = false;
   sessionStore = useSessionStore();
+  syncStore = useSyncStore()
 
   loadedData: boolean = false;
 
@@ -60,7 +61,10 @@ export default class LangStats extends Vue {
       this.authorized = state.authorized;
     });
 
-    this.loadData();
+    this.syncStore.$subscribe(() => {
+      console.debug(`Got sync store change - reloading component data`)
+      this.loadData()
+    })
   }
 
   loadData() {
diff --git a/src/frontend/src/components/StatsPerPeriod.vue b/src/frontend/src/components/StatsPerPeriod.vue
index 16c0951..434e489 100644
--- a/src/frontend/src/components/StatsPerPeriod.vue
+++ b/src/frontend/src/components/StatsPerPeriod.vue
@@ -31,7 +31,7 @@
 
 <script lang="ts">
 import {Vue} from "vue-class-component";
-import {useSessionStore} from "@/store";
+import {useSessionStore, useSyncStore} from "@/store";
 import {StatsService} from "@/services/stats-service";
 import {ItemsStatsAggregated, ItemsStatsPerPeriod, TimePeriod} from "@/models/stats-models";
 import {format, parseISO} from "date-fns";
@@ -42,6 +42,7 @@ export default class StatsPerPeriod extends Vue {
 
   sessionStore = useSessionStore()
   statsService = new StatsService()
+  syncStore = useSyncStore()
 
   itemsStats: ItemsStatsPerPeriod[] = [];
 
@@ -58,7 +59,10 @@ export default class StatsPerPeriod extends Vue {
       this.authorized = state.authorized
     })
 
-    this.loadStats()
+    this.syncStore.$subscribe(() => {
+      console.debug(`Got sync store change - reloading component data`)
+      this.loadStats()
+    })
   }
 
   displayPeriod(period: TimePeriod): String {
diff --git a/src/frontend/src/components/TopTags.vue b/src/frontend/src/components/TopTags.vue
index 6f44f61..c53f07f 100644
--- a/src/frontend/src/components/TopTags.vue
+++ b/src/frontend/src/components/TopTags.vue
@@ -1,39 +1,29 @@
 <template>
-  <div class="card" v-if="authorized">
-    <div class="card-body" v-if="loadedData">
+  <div v-if="authorized" class="card">
+    <div v-if="loadedData" class="card-body">
       <h5 class="card-title">Top {{ limitTags }} the most popular tags.</h5>
-      <table class="table">
-        <thead>
-        <tr>
-          <th scope="col">Tag name</th>
-          <th scope="col">Occurs</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr v-for="item in topTags" v-bind:key="item.name">
-          <td>{{ item.name }}</td>
-          <td>{{ item.count }}</td>
-        </tr>
-        </tbody>
-      </table>
+      <span v-for="item in topTags" v-bind:key="item.name" class="badge ">
+              <b-badge variant="dark">{{ item.name }} <b-badge variant="light">{{ item.count }}</b-badge></b-badge>
+      </span>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import {Vue} from "vue-class-component";
-import {useSessionStore} from "@/store";
+import {useSessionStore, useSyncStore} from "@/store";
 import {StatsService} from "@/services/stats-service";
 import {ITopTag, ITopTags} from "@/models/stats-models";
 
 export default class TopTags extends Vue {
-  limitTags: number = 10
+  limitTags: number = 30
 
   authorized: Boolean = false
   loadedData: boolean = false
 
   sessionStore = useSessionStore()
   statsService = new StatsService()
+  syncStore = useSyncStore()
 
   topTags: ITopTag[] = [] as ITopTag[]
 
@@ -50,7 +40,10 @@ export default class TopTags extends Vue {
       this.authorized = state.authorized;
     });
 
-    this.loadTopTags();
+    this.syncStore.$subscribe(() => {
+      console.debug(`Got sync store change - reloading component data`)
+      this.loadTopTags()
+    })
   }
 
   loadTopTags() {
diff --git a/src/frontend/src/main.ts b/src/frontend/src/main.ts
index 0a97aa6..4f8f400 100644
--- a/src/frontend/src/main.ts
+++ b/src/frontend/src/main.ts
@@ -6,7 +6,6 @@ import router from "@/router";
 import {createPinia} from "pinia";
 import {BootstrapVue3, BToastPlugin} from "bootstrap-vue-3";
 
-// Import Bootstrap and BootstrapVue CSS files (order is important)
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
 
@@ -14,11 +13,13 @@ import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
 import {library} from "@fortawesome/fontawesome-svg-core";
 import {faSpinner, faUser} from "@fortawesome/free-solid-svg-icons";
 
+//font awesome
 library.add(faSpinner, faUser);
 
 const app = createApp(App)
 const pinia = createPinia()
 
+// @ts-ignore
 app
     .use(pinia)
     .use(VueAxios, axios)
@@ -27,3 +28,4 @@ app
     .use(BToastPlugin)
     .component("font-awesome-icon", FontAwesomeIcon)
     .mount('#app')
+
diff --git a/src/main/docker/mongodb.yml b/src/main/docker/mongodb.yml
index 47f55b1..aa730a7 100644
--- a/src/main/docker/mongodb.yml
+++ b/src/main/docker/mongodb.yml
@@ -10,8 +10,4 @@ services:
       - MONGO_INITDB_ROOT_USERNAME=admin
       - MONGO_INITDB_ROOT_PASSWORD=admin
     volumes:
-      #      # seeding scripts
-      - ./mongo-entrypoint:/docker-entrypoint-initdb.d
-      # named volumes
-#      - mongodb:/data/db
-#      - mongoconfig:/data/configdb
+      - ./mongo-entrypoint:/docker-entrypoint-initdb.d
\ No newline at end of file