Start implementation of branches, new form element tabledropdown, model improvements

frontend/src/components/AppNavigation.vue

@@ -70,6 +70,9 @@ export default {
         newValue.on('friendloginchanged', () => {
           this.fetchFriends();
         });
+        newValue.on('reloadmenu', () => {
+          this.loadMenu();
+        })
       }
     }
   },
@@ -84,12 +87,10 @@ export default {
   },
   mounted() {
     if (this.$store.getters.socket) {
-      console.log('connect sockets in navigation')
       this.$store.getters.socket.on('forumschanged', (data) => {
         this.fetchForums();
       });
       this.$store.getters.socket.on('friendloginchanged', () => {
-        console.log('update friends');
         this.fetchFriends();
       });
     }

frontend/src/components/falukant/StatusBar.vue

@@ -0,0 +1,94 @@
+<template>
+    <div class="statusbar">
+        <template v-for="item in statusItems" :key="item.key">
+            <div class="status-item" v-if="item.value !== null" :title="$t(`falukant.statusbar.${item.key}`)">
+                <span class="status-icon">{{ item.icon }}: {{ item.value }}</span>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import apiClient from "@/utils/axios.js";
+
+export default {
+    name: "StatusBar",
+    data() {
+        return {
+            statusItems: [
+                { key: "age", icon: "👶", value: 0 },
+                { key: "wealth", icon: "💰", value: 0 },
+                { key: "health", icon: "❤️", value: "Good" },
+                { key: "events", icon: "📰", value: null },
+            ],
+        };
+    },
+    computed: {
+        ...mapState(["socket"]),
+    },
+    async mounted() {
+        await this.fetchStatus();
+        if (this.socket) {
+            this.socket.on("falukantUpdateStatus", this.fetchStatus);
+        }
+    },
+    beforeUnmount() {
+        if (this.socket) {
+            this.socket.off("falukantUpdateStatus", this.fetchStatus);
+        }
+    },
+    methods: {
+        async fetchStatus() {
+            try {
+                const response = await apiClient.get("/api/falukant/info");
+                const { money, character, events } = response.data;
+                const { age, health } = character;
+                let healthStatus = '';
+                if (health > 90) {
+                    healthStatus = this.$t("falukant.health.amazing");
+                } else if (health > 75) {
+                    healthStatus = this.$t("falukant.health.good");
+                } else if (health > 50) {
+                    healthStatus = this.$t("falukant.health.normal");
+                } else if (health > 25) {
+                    healthStatus = this.$t("falukant.health.bad");
+                } else {
+                    healthStatus = this.$t("falukant.health.very_bad");
+                }
+                this.statusItems = [
+                    { key: "age", icon: "👶", value: age },
+                    { key: "wealth", icon: "💰", value: money },
+                    { key: "health", icon: "❤️", value: healthStatus },
+                    { key: "events", icon: "📰", value: events || null },
+                ];
+            } catch (error) {
+                console.error("Error fetching status:", error);
+            }
+        },
+    },
+};
+</script>
+
+<style scoped>
+.statusbar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f4f4f4;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: calc(100% + 40px);
+    gap: 2em;
+    margin: -21px -20px 1.5em -20px;
+}
+
+.status-item {
+    text-align: center;
+    cursor: pointer;
+}
+
+.status-icon {
+    font-size: 14px;
+}
+</style>

frontend/src/components/form/FormattedDropdown.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="dropdown-container">
+        <div class="dropdown-header" @click="toggleDropdown">
+            <table>
+                <tr>
+                    <td v-for="(column, index) in columns" :key="column.field">
+                        {{ selected ? selected[column.field] : index === 0 ? placeholder : '' }}
+                    </td>
+                    <td>{{ isOpen ? '▲' : '▼' }}</td>
+                </tr>
+            </table>
+        </div>
+        <div v-if="isOpen" class="dropdown-list">
+            <table>
+                <thead>
+                    <tr>
+                        <th v-for="column in columns" :key="column.field">{{ column.label }}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="option in options" :key="option.id" @click="selectOption(option)"
+                        :class="{ selected: option.id === selected?.id }">
+                        <td v-for="column in columns" :key="column.field">{{ option[column.field] }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "FormattedDropdown",
+    props: {
+        options: {
+            type: Array,
+            required: true,
+        },
+        columns: {
+            type: Array,
+            required: true,
+        },
+        modelValue: {
+            type: Object,
+            default: null,
+        },
+        placeholder: {
+            type: String,
+            default: "Select an option",
+        },
+    },
+    emits: ['update:modelValue'],
+    data() {
+        return {
+            isOpen: false,
+            selected: this.modelValue,
+        };
+    },
+    watch: {
+        modelValue(newVal) {
+            this.selected = newVal;
+            console.log("FormattedDropdown modelValue changed:", newVal);
+        },
+    },
+    methods: {
+        toggleDropdown() {
+            this.isOpen = !this.isOpen;
+        },
+        selectOption(option) {
+            this.selected = option;
+            this.$emit("update:modelValue", option);
+            this.isOpen = false;
+        },
+    },
+};
+</script>
+
+<style scoped>
+.dropdown-container {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-header {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2px 3px;
+    background-color: #fff;
+}
+
+.dropdown-list {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    z-index: 50;
+    width: auto;
+    min-width: 100%;
+    max-width: 90vw;
+    max-height: 300px;
+    overflow-y: auto;
+    white-space: nowrap;
+    padding: 2px 3px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+th,
+td {
+    text-align: left;
+    padding: 4px;
+    white-space: nowrap;
+}
+
+tr.selected {
+    background-color: #f0f0f0;
+    font-weight: bold;
+}
+
+tr:hover {
+    background-color: #e0e0e0;
+    cursor: pointer;
+}
+</style>