#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
michmzr · Jun 8, 2023 · 059652b · 059652b
1 parent 40780f9
commit 059652b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -6,19 +6,20 @@ 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'
 
 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
@@ -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