Websockets support

components/analytics/pie.vue

@@ -63,7 +63,7 @@ const props = defineProps({
   }
 })
 
-const { $transactionsTagsApi, $analyticsApi, $currenciesApi } = useNuxtApp();
+const { $transactionsTagsApi, $analyticsApi, $transactionsApi, $currenciesApi } = useNuxtApp();
 const { t, locale } = useI18n();
 
 const mode = computed(() => props.mode === "month")
@@ -136,6 +136,12 @@ const reloadAnalytics = async () => {
   ));
 }
 
+$transactionsApi.registerUpdateListener(() => {
+  reloadAnalytics().then(() => {
+    buildChart();
+  })
+})
+
 const formatAmount = (delta) => {
   const currencyObject = currenciesMap.value.get(currency.value);
 

components/analytics/tagsByMonths.vue

@@ -24,7 +24,7 @@ import ApexChart from "vue3-apexcharts";
 import TransactionsFilterDiv from "~/components/transactions/filter.vue";
 import {useColor} from "~/composables/useColor";
 
-const { $analyticsApi, $transactionsTagsApi, $currenciesApi, $serverConfigs } = useNuxtApp();
+const { $analyticsApi, $transactionsApi, $transactionsTagsApi, $currenciesApi, $serverConfigs } = useNuxtApp();
 const { t, locale } = useI18n();
 
 const tagsMap = $transactionsTagsApi.getTagsMap();
@@ -46,6 +46,8 @@ const fetch = async () => {
   analytics.value = new Map(Array.from(analyticsRaw).sort(([a], [b]) => a.localeCompare(b)));
 }
 
+$transactionsApi.registerUpdateListener(fetch)
+
 const buildChart = async () => {
   const xaxis = [];
   const series = [];

components/analytics/totalByPeriod.vue

@@ -12,7 +12,7 @@
 import ApexChart from "vue3-apexcharts";
 import {TransactionsFilter} from "~/libs/api/transactions/TransactionsFilter";
 
-const { $analyticsApi, $transactionsTagsApi, $currenciesApi, $serverConfigs } = useNuxtApp();
+const { $analyticsApi, $transactionsApi, $transactionsTagsApi, $currenciesApi, $serverConfigs } = useNuxtApp();
 const { t, locale } = useI18n();
 
 const props = defineProps({
@@ -122,6 +122,8 @@ watch([() => props.currencyId,() =>  props.period], () => {
   buildChart();
 });
 
+$transactionsApi.registerUpdateListener(buildChart)
+
 buildChart();
 
 </script>

composables/useApiLoader.ts

@@ -16,6 +16,7 @@ import {ConfigManager} from "~/libs/config/ConfigManager";
 import {ServerConfigs} from "~/libs/config/ServerConfigs";
 import {AccumulationsApi} from "~/libs/api/accumulations/AccumulationsApi";
 import {ReportsApi} from "~/libs/api/reports/ReportsApi";
+import {ca} from "date-fns/locale";
 
 export const useApiLoader = new class ApiLoader {
     private readonly serverConfigs: ConfigManager;
@@ -38,6 +39,8 @@ export const useApiLoader = new class ApiLoader {
     private readonly accumulationsApi: AccumulationsApi;
     private readonly reportsApi: ReportsApi;
 
+    private websocketClient : WebSocket | null = null;
+
     constructor() {
         this.serverConfigs = new ConfigManager();
         this.userApi = new UserApi();
@@ -93,6 +96,70 @@ export const useApiLoader = new class ApiLoader {
         });
     }
 
+    public connectWebsocket() : void {
+        const config = useRuntimeConfig()
+        const auth = useNuxtApp().$auth.state();
+
+        this.websocketClient = new WebSocket(config.public.apiURL
+            .replace("https://", "wss://")
+            .replace("http://", "ws://") +
+            "websockets/events"
+        );
+
+        this.websocketClient.onmessage = (event) => {
+            this.parseMessage(JSON.parse(event.data))
+
+            console.log(event.data);
+        };
+
+        this.websocketClient.addEventListener("open", e =>{
+            this.websocketClient.send(JSON.stringify({
+                type: "auth",
+                body: {
+                    token: auth.token
+                }
+            }))
+        })
+    }
+
+    protected parseMessage(message : any) {
+        if (message.type !== "update")
+            return;
+
+        const body = message.body;
+
+        switch (body.updated) {
+            case "accounts":
+                this.accountsApi.reloadAccounts();
+                break;
+            case "accountTags":
+                this.accountsTagsApi.fetch();
+                break;
+            case "accumulation":
+                this.accumulationsApi.fetchMap();
+                break;
+            case "currencies":
+                this.currenciesApi.fetch();
+                break;
+            case "notes":
+                this.notesApi.updateNotify();
+                break;
+            case "transactions":
+                this.accountsApi.reloadAccounts();
+                this.transactionsApi.updateNotify();
+                break;
+            case "reports":
+                this.reportsApi.updateNotify();
+                break;
+            case "recurringTransactions":
+                this.recurringTransactionsApi.fetch();
+                break;
+            case "transactionTags":
+                this.accountsTagsApi.fetch();
+                break;
+        }
+    }
+
     public getProvider() : any {
         return {
             provide: {

libs/api/accounts/tags/AccountsTagsApi.ts

@@ -5,6 +5,14 @@ export class AccountsTagsApi extends AbstractApi {
     private tags: Ref<Array<any>> = ref([]);
 
     async init(): Promise<void | boolean> {
+        await this.fetch();
+    }
+
+    public getTags(): Ref<Array<any> | null> {
+        return this.tags;
+    }
+
+    public async fetch(): Promise<void> {
         const {data} = await useApi<any>("/user/accounts/tags/getList");
 
         if (data.value === null)
@@ -13,10 +21,6 @@ export class AccountsTagsApi extends AbstractApi {
         this.tags.value = data.value.tags || [];
     }
 
-    public getTags(): Ref<Array<any> | null> {
-        return this.tags;
-    }
-
     public async newTag(name: string, description: string | null) : Promise<number> {
         const opts = {
             method: "POST",

libs/api/accumulations/AccumulationsApi.ts

@@ -8,7 +8,7 @@ export class AccumulationsApi extends AbstractApi {
         await this.fetchMap();
     }
 
-    protected async fetchMap() : Promise<void> {
+    public async fetchMap() : Promise<void> {
         const {data} = await useApi<any>("/user/accumulations/getList");
 
         if (data.value === null)

libs/api/currencies/CurrenciesApi.ts

@@ -6,6 +6,10 @@ export class CurrenciesApi extends AbstractApi {
     private currenciesMap: Ref<Map<number, any>> = ref(new Map<number, any>);
 
     async init(): Promise<void | boolean> {
+        await this.fetch();
+    }
+
+    public async fetch() : Promise<void> {
         const {data} = await useApi<any>("/user/currencies/getList");
 
         if (data.value === null)

libs/api/notes/NotesApi.ts

@@ -2,10 +2,20 @@ import {Ref} from "vue";
 import {AbstractApi} from "~/libs/api/AbstractApi";
 
 export class NotesApi extends AbstractApi {
+    private notifyListeners : Array<Function> = new Array<Function>();
+
     async init(): Promise<void | boolean> {
 
     }
 
+    public updateNotify() {
+        this.notifyListeners.forEach(func => func());
+    }
+
+    public registerUpdateListener(func : Function) : void {
+        this.notifyListeners.push(func);
+    }
+
     public async newNote(text: string, notificationTime: Date | null): Promise<boolean> {
         const opts = {
             method: "POST",

libs/api/reports/ReportsApi.ts

@@ -3,6 +3,15 @@ import {Ref} from "vue";
 import {TransactionsFilter} from "~/libs/api/transactions/TransactionsFilter";
 
 export class ReportsApi extends AbstractApi {
+    private notifyListeners : Array<Function> = new Array<Function>();
+
+    public updateNotify() {
+        this.notifyListeners.forEach(func => func());
+    }
+
+    public registerUpdateListener(func : Function) : void {
+        this.notifyListeners.push(func);
+    }
 
     async init(): Promise<void | boolean> {
     }

libs/api/transactions/TransactionsApi.ts

@@ -2,10 +2,20 @@ import {TransactionsFilter} from "~/libs/api/transactions/TransactionsFilter";
 import {AbstractApi} from "~/libs/api/AbstractApi";
 
 export class TransactionsApi extends AbstractApi {
+    private notifyListeners : Array<Function> = new Array<Function>();
+
     async init(): Promise<void | boolean> {
 
     }
 
+    public updateNotify() {
+        this.notifyListeners.forEach(func => func());
+    }
+
+    public registerUpdateListener(func : Function) : void {
+        this.notifyListeners.push(func);
+    }
+
     public async newBulkTransaction(transactions : any) : Promise<boolean> {
         const opts = {
             method: "POST",

libs/api/transactions/recurring/RecurringTransactionsApi.ts

@@ -14,6 +14,10 @@ export class RecurringTransactionsApi extends AbstractApi {
     }
 
     async init(): Promise<void | boolean> {
+        await this.fetch();
+    }
+
+    public async fetch(): Promise<void> {
         const {data} = await useApi<any>("/user/transactions/recurring/getList");
 
         if (data.value === null)

libs/api/transactions/tag/TransactionsTagsApi.ts

@@ -8,18 +8,20 @@ export class TransactionsTagsApi extends AbstractApi {
     private tagsTree: Ref<Array<any>> = ref([]);
 
     async init(): Promise<void | boolean> {
+        watch(this.tags, (old, newV) => {
+            this.buildTree()
+        }, { deep: true })
+
+        await this.fetch();
+    }
+
+    public async fetch() : Promise<void> {
         const {data} = await useApi<any>("/user/transactions/tags/getList");
 
         if (data.value === null)
             return;
 
         this.tags.value = data.value.tags || [];
-
-        watch(this.tags, (old, newV) => {
-            this.buildTree()
-        }, { deep: true })
-
-        this.buildTree();
     }
 
     private rebuildMap() {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "finwave",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "private": true,
   "scripts": {
     "build": "nuxt build",

pages/transactions.vue

@@ -115,6 +115,8 @@ const fetchData = async () => {
       .catch(console.log);
 }
 
+$transactionsApi.registerUpdateListener(fetchData)
+
 const changePage = async (pageNeed) => {
   if (pageNeed < 1 || pageNeed > maxPages.value || pageNeed === page.value)
     return;

plugins/2.api.ts

@@ -3,5 +3,7 @@ import {useApiLoader} from "#imports";
 export default defineNuxtPlugin(async nuxtApp => {
     await useApiLoader.fetch();
 
+    useApiLoader.connectWebsocket();
+
     return useApiLoader.getProvider();
 })