Director hiring added

frontend/src/views/falukant/OverviewView.vue

@@ -27,16 +27,56 @@
             </div>
             <div>
                 <h3>{{ $t('falukant.overview.productions.title') }}</h3>
+                <table v-if="productions.length > 0">
+                    <thead>
+                        <tr>
+                            <th>{{ $t('falukant.branch.sale.region') }}</th>
+                            <th>{{ $t('falukant.branch.production.product') }}</th>
+                            <th>{{ $t('falukant.branch.production.quantity') }}</th>
+                            <th>{{ $t('falukant.branch.production.ending') }}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(production, index) in productions" :key="index">
+                            <td>{{ production.cityName }}</td>
+                            <td>{{ $t(`falukant.product.${production.productName}`) }}</td>
+                            <td>{{ production.quantity }}</td>
+                            <td>{{ formatDate(production.endTimestamp) }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <p v-else>{{ $t('falukant.branch.production.noProductions') }}</p>
             </div>
             <div>
                 <h3>{{ $t('falukant.overview.stock.title') }}</h3>
+                <table v-if="allStock.length > 0">
+                    <thead>
+                        <tr>
+                            <th>{{ $t('falukant.branch.sale.region') }}</th>
+                            <th>{{ $t('falukant.branch.sale.product') }}</th>
+                            <th>{{ $t('falukant.branch.sale.quantity') }}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(item, index) in allStock" :key="index">
+                            <td>{{ item.regionName }}</td>
+                            <td>{{ $t(`falukant.product.${item.productLabelTr}`) }}</td>
+                            <td>{{ item.quantity }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <p v-else>{{ $t('falukant.branch.sale.noInventory') }}</p>
             </div>
             <div>
                 <h3>{{ $t('falukant.overview.branches.title') }}</h3>
                 <table>
-                    <tr v-for="branch in falukantUser?.branches">
-                        <td><span @click="openBranch(branch.id)" class="link">{{ branch.region.name }}</span></td>
-                        <td>{{ $t(`falukant.overview.branches.level.${branch.branchType.labelTr}`) }}</td>
+                    <tr v-for="branch in falukantUser?.branches" :key="branch.id">
+                        <td>
+                            <span @click="openBranch(branch.id)" class="link">{{ branch.region.name }}</span>
+                        </td>
+                        <td>
+                            {{ $t(`falukant.overview.branches.level.${branch.branchType.labelTr}`) }}
+                        </td>
                     </tr>
                 </table>
             </div>
@@ -48,8 +88,9 @@
 </template>
 
 <script>
-import apiClient from '@/utils/axios.js';
 import StatusBar from '@/components/falukant/StatusBar.vue';
+import apiClient from '@/utils/axios.js';
+import { mapState } from 'vuex';
 
 const AVATAR_POSITIONS = {
     male: {
@@ -90,26 +131,18 @@ const AVATAR_POSITIONS = {
 
 export default {
     name: 'FalukantOverviewView',
-    data() {
-        return {
-            falukantUser: null,
-        };
-    },
     components: {
         StatusBar,
     },
-    async mounted() {
-        await this.fetchFalukantUser();
-        if (this.socket) {
-            this.socket.on("falukantUserUpdated", this.fetchFalukantUser);
-        }
-    },
-    beforeUnmount() {
-        if (this.socket) {
-            this.socket.off("falukantUserUpdated", this.fetchFalukantUser);
-        }
+    data() {
+        return {
+            falukantUser: null,
+            allStock: [],
+            productions: [],
+        };
     },
     computed: {
+        ...mapState(['daemonSocket']),
         getAvatarStyle() {
             if (!this.falukantUser) return {};
             const { gender, age } = this.falukantUser.character;
@@ -128,6 +161,38 @@ export default {
             };
         },
     },
+    async mounted() {
+        await this.fetchFalukantUser();
+        await this.fetchAllStock();
+        await this.fetchProductions();
+        if (this.socket) {
+            this.socket.on("falukantUserUpdated", this.fetchFalukantUser);
+            this.socket.on("production_ready", this.handleProductionReadyEvent);
+        }
+        if (this.daemonSocket) {
+            this.daemonSocket.addEventListener('message', (event) => {
+                console.log('incoming event', event);
+                try {
+                    if (event.data === "ping") return;
+                    const message = JSON.parse(event.data);
+                    if (message.event === 'production_ready') {
+                        this.handleProductionReadyEvent(message);
+                    }
+                } catch (error) {
+                    console.error('Error processing WebSocket message in FalukantOverviewView:', error);
+                }
+            });
+        }
+    },
+    beforeUnmount() {
+        if (this.socket) {
+            this.socket.off("falukantUserUpdated", this.fetchFalukantUser);
+            this.socket.off("production_ready", this.handleProductionReadyEvent);
+        }
+        if (this.daemonSocket) {
+            this.daemonSocket.onmessage = null;
+        }
+    },
     methods: {
         getAgeGroup(age) {
             if (age <= 1) return "0-1";
@@ -150,9 +215,41 @@ export default {
             }
             this.falukantUser = falukantUser.data;
         },
+        async fetchAllStock() {
+            const response = await apiClient.get('/api/falukant/stockoverview');
+            const rawData = response.data;
+            const aggregated = {};
+            for (const item of rawData) {
+                const key = `${item.regionName}__${item.productLabelTr}`;
+                if (!aggregated[key]) {
+                    aggregated[key] = {
+                        regionName: item.regionName,
+                        productLabelTr: item.productLabelTr,
+                        quantity: 0,
+                    };
+                }
+                aggregated[key].quantity += item.quantity;
+            }
+            this.allStock = Object.values(aggregated);
+        },
+        handleProductionReadyEvent() {
+            this.fetchAllStock();
+            this.fetchProductions();
+        },
         openBranch(branchId) {
-            this.$router.push({ name: 'BranchView', params: { branchId: branchId } });
-        }
+            this.$router.push({ name: 'BranchView', params: { branchId } });
+        },
+        async fetchProductions() {
+            try {
+                const response = await apiClient.get('/api/falukant/productions');
+                this.productions = response.data;
+            } catch (error) {
+                console.error('Error fetching productions:', error);
+            }
+        },
+        formatDate(timestamp) {
+            return new Date(timestamp).toLocaleString();
+        },
     },
 };
 </script>