Refactor navigation and enhance director information display

- Removed the directors section from the navigation menu for a cleaner interface. - Updated the FalukantService to include additional attributes for directors, such as knowledges and region. - Enhanced the DirectorInfo component to display detailed information, including knowledge and income management features. - Implemented tab navigation in BranchView for better organization of director, inventory, production, and storage sections. - Updated localization files to reflect changes in navigation and tab labels.
2025-11-24 16:38:36 +01:00
parent 23725c20ee
commit 5ed27e5a6a
10 changed files with 298 additions and 64 deletions
--- a/backend/controllers/navigationController.js
+++ b/backend/controllers/navigationController.js
@@ -117,10 +117,6 @@ const menuStructure = {
                visible: ["hasfalukantaccount"],
                path: "/falukant/branch"
            },
-            directors: {
-                visible: ["hasfalukantaccount"],
-                path: "/falukant/directors"
-            },
            family: {
                visible: ["hasfalukantaccount"],
                path: "/falukant/family"
--- a/backend/services/falukantService.js
+++ b/backend/services/falukantService.js
@@ -1160,23 +1160,45 @@ class FalukantService extends BaseService {
                {
                    model: FalukantCharacter,
                    as: 'character',
-                    attributes: ['firstName', 'lastName', 'birthdate', 'titleOfNobility', 'gender'],
+                    // Wichtige Felder explizit auswählen, damit die Joins auf Titel,
+                    // Namen und Region im äußeren Select funktionieren.
+                    attributes: ['id', 'birthdate', 'gender', 'titleOfNobility', 'firstName', 'lastName', 'regionId'],
                    where: {
                        regionId: branch.regionId,
                    },
                    include: [
                        {
                            model: TitleOfNobility,
-                            as: 'nobleTitle'
+                            as: 'nobleTitle',
+                            attributes: ['labelTr', 'level']
                        },
                        {
                            model: FalukantPredefineFirstname,
-                            as: 'definedFirstName'
+                            as: 'definedFirstName',
+                            attributes: ['name']
                        },
                        {
                            model: FalukantPredefineLastname,
-                            as: 'definedLastName'
+                            as: 'definedLastName',
+                            attributes: ['name']
                        },
+                        {
+                            model: Knowledge,
+                            as: 'knowledges',
+                            attributes: ['productId', 'knowledge'],
+                            include: [
+                                {
+                                    model: ProductType,
+                                    as: 'productType',
+                                    attributes: ['labelTr'],
+                                },
+                            ],
+                        },
+                        {
+                            model: RegionData,
+                            as: 'region',
+                            attributes: ['name']
+                        }
                    ]
                },
            ],
@@ -1185,6 +1207,16 @@ class FalukantService extends BaseService {
            return null;
        }
        const age = Math.floor((Date.now() - new Date(director.character.birthdate)) / (24 * 60 * 60 * 1000));
+
+        // wishedIncome analog zu getAllDirectors() berechnen
+        const knowledges = director.character.knowledges || [];
+        const avgKnowledge = knowledges.length
+            ? knowledges.reduce((sum, k) => sum + k.knowledge, 0) / knowledges.length
+            : 0;
+        const wishedIncome = Math.round(
+            director.character.nobleTitle.level * Math.pow(1.231, avgKnowledge / 1.5)
+        );
+
        return {
            director: {
                id: director.id,
@@ -1193,12 +1225,18 @@ class FalukantService extends BaseService {
                    title: director.character.nobleTitle.labelTr,
                    age,
                    gender: director.character.gender,
+                    nobleTitle: director.character.nobleTitle,
+                    definedFirstName: director.character.definedFirstName,
+                    definedLastName: director.character.definedLastName,
+                    knowledges: director.character.knowledges,
                },
                income: director.income,
                satisfaction: director.satisfaction,
                mayProduce: director.mayProduce,
                maySell: director.maySell,
                mayStartTransport: director.mayStartTransport,
+                region: director.character.region?.name || null,
+                wishedIncome,
            },
        };
    }
--- a/frontend/src/components/falukant/DirectorInfo.vue
+++ b/frontend/src/components/falukant/DirectorInfo.vue
@@ -1,48 +1,119 @@
 <template>
  <div class="director-info">
-    <h3>{{ $t('falukant.branch.director.title') }}</h3>
    <div v-if="!director || director === null">
-      <button @click="openNewDirectorDialog">{{ $t('falukant.branch.director.actions.new') }}</button>
+      <button @click="openNewDirectorDialog">
+        {{ $t('falukant.branch.director.actions.new') }}
+      </button>
    </div>
+
    <div v-else class="director-info-container">
-      <div>
-        <table>
-          <tr>
-            <td>{{ $t('falukant.branch.director.name') }}</td>
-            <td>
-              {{ $t('falukant.titles.' + director.character.gender + '.' + director.character.title) }}
-              {{ director.character.name }}
-            </td>
-          </tr>
-          <tr>
-            <td>{{ $t('falukant.branch.director.salary') }}</td>
-            <td>{{ director.income }}</td>
-          </tr>
-          <tr>
-            <td>{{ $t('falukant.branch.director.satisfaction') }}</td>
-            <td>{{ director.satisfaction }} %</td>
-          </tr>
-        </table>
+      <!-- Linke Seite: Stammdaten & Wissen (aus /falukant/directors) -->
+      <div class="director-main">
+        <h3 class="director-name">
+          {{ $t('falukant.titles.' + director.character.gender + '.' + director.character.nobleTitle.labelTr) }}
+          {{ director.character.definedFirstName.name }} {{ director.character.definedLastName.name }}
+        </h3>
+        <p class="director-meta">
+          {{ $t('falukant.director.age') }}:
+          {{ director.character.age }}
+          <span v-if="director.region"> — {{ director.region }}</span>
+        </p>
+
+        <div
+          v-if="director.character.knowledges && director.character.knowledges.length"
+          class="knowledge-panel"
+        >
+          <h4>{{ $t('falukant.director.knowledge.title') }}</h4>
+          <div class="table-container">
+            <table class="knowledge-table">
+              <thead>
+                <tr>
+                  <th>{{ $t('falukant.director.product') }}</th>
+                  <th>{{ $t('falukant.director.knowledge.knowledge') }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="item in director.character.knowledges"
+                  :key="item.productId"
+                >
+                  <td>{{ $t(`falukant.product.${item.productType.labelTr}`) }}</td>
+                  <td>{{ item.knowledge }} %</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
      </div>
-      <div>
-        <table>
-          <tr>
-            <td><button @click="fireDirector">{{ $t('falukant.branch.director.fire') }}</button></td>
-          </tr>
-          <tr>
-            <td><button @click="teachDirector">{{ $t('falukant.branch.director.teach') }}</button></td>
-          </tr>
-          <tr>
-            <td>
-              <label>
-                <input type="checkbox" v-model="director.mayProduce"
-                  @change="saveSetting('mayProduce', director.mayProduce)">
-                {{ $t('falukant.branch.director.produce') }}
-              </label>
-            </td>
-          </tr>
-          <!-- Ähnliche Checkboxen für maySell und mayStartTransport -->
-        </table>
+
+      <!-- Rechte Seite: Aktionen, Einkommen, Rechte -->
+      <div class="director-actions">
+        <div class="field">
+          <label>
+            {{ $t('falukant.branch.director.satisfaction') }}:
+            <span>{{ director.satisfaction }} %</span>
+          </label>
+        </div>
+
+        <div class="field">
+          <label>
+            {{ $t('falukant.branch.director.income') }}:
+            <input type="number" v-model.number="editIncome" />
+          </label>
+          <span
+            v-if="director.wishedIncome != null"
+            class="link"
+            @click="setWishedIncome"
+          >
+            ({{ $t('falukant.director.wishedIncome') }}:
+            {{ director.wishedIncome }})
+          </span>
+        </div>
+
+        <div class="field">
+          <button @click="updateDirector">
+            {{ $t('falukant.director.updateButton') }}
+          </button>
+        </div>
+
+        <div class="field toggles">
+          <label>
+            <input
+              type="checkbox"
+              v-model="director.mayProduce"
+              @change="saveSetting('mayProduce', director.mayProduce)"
+            />
+            {{ $t('falukant.branch.director.produce') }}
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              v-model="director.maySell"
+              @change="saveSetting('maySell', director.maySell)"
+            />
+            {{ $t('falukant.branch.director.sell') }}
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              v-model="director.mayStartTransport"
+              @change="saveSetting('mayStartTransport', director.mayStartTransport)"
+            />
+            {{ $t('falukant.branch.director.starttransport') }}
+          </label>
+        </div>
+
+        <div class="field">
+          <button @click="fireDirector">
+            {{ $t('falukant.branch.director.fire') }}
+          </button>
+        </div>
+
+        <div class="field">
+          <button @click="teachDirector">
+            {{ $t('falukant.branch.director.teach') }}
+          </button>
+        </div>
      </div>
    </div>
  </div>
@@ -63,6 +134,7 @@ export default {
    return {
      director: null,
      showNewDirectorDialog: false,
+      editIncome: null,
    };
  },
  async mounted() {
@@ -84,12 +156,15 @@ export default {
          data.director === null
        ) {
          this.director = null;
+          this.editIncome = null;
        } else {
          this.director = data.director;
+          this.editIncome = this.director.income;
        }
      } catch (error) {
        console.error('Error loading director:', error);
        this.director = null;
+        this.editIncome = null;
      }
    },

@@ -112,6 +187,24 @@ export default {
      this.$refs.newDirectorDialog.open(this.branchId);
    },

+    async updateDirector() {
+      if (!this.director || this.editIncome == null) return;
+      try {
+        await apiClient.post(`/api/falukant/directors`, {
+          directorId: this.director.id,
+          income: this.editIncome,
+        });
+        await this.loadDirector();
+      } catch (error) {
+        console.error('Error updating director:', error);
+      }
+    },
+
+    setWishedIncome() {
+      if (!this.director || this.director.wishedIncome == null) return;
+      this.editIncome = this.director.wishedIncome;
+    },
+
    fireDirector() {
      alert(this.$t('falukant.branch.director.fireAlert'));
    },
@@ -133,9 +226,62 @@ export default {

 .director-info-container {
  display: flex;
+  gap: 1rem;
 }

-.director-info-container>div {
+.director-main {
+  flex: 2;
+}
+
+.director-actions {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.director-name {
+  margin: 0 0 0.25rem 0;
+}
+
+.director-meta {
+  margin: 0 0 0.75rem 0;
+  font-style: italic;
+}
+
+.field {
+  margin-bottom: 0.5rem;
+}
+
+.field label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.toggles label {
+  display: block;
+}
+
+.link {
+  color: #007bff;
+  cursor: pointer;
+  margin-left: 0.5rem;
+}
+
+.table-container {
+  max-height: 40vh;
+  overflow-y: auto;
+}
+
+.knowledge-table {
  width: 100%;
+  border-collapse: collapse;
+}
+
+.knowledge-table th,
+.knowledge-table td {
+  border: 1px solid #ddd;
+  padding: 4px 6px;
 }
 </style>
--- a/frontend/src/components/falukant/ProductionSection.vue
+++ b/frontend/src/components/falukant/ProductionSection.vue
@@ -1,6 +1,5 @@
 <template>
    <div class="production-section">
-      <h3>{{ $t('falukant.branch.production.title') }}</h3>
      <div v-if="productions && productions.length > 0">
        <h4>{{ $t('falukant.branch.production.current') }}</h4>
        <table>
--- a/frontend/src/components/falukant/SaleSection.vue
+++ b/frontend/src/components/falukant/SaleSection.vue
@@ -1,6 +1,5 @@
 <template>
    <div class="sale-section">
-      <h3>{{ $t('falukant.branch.sale.title') }}</h3>
      <!-- Beispielhafte Inventar-Tabelle -->
      <div v-if="inventory.length > 0" class="inventory-table">
        <table>
--- a/frontend/src/components/falukant/StorageSection.vue
+++ b/frontend/src/components/falukant/StorageSection.vue
@@ -1,6 +1,5 @@
 <template>
    <div class="storage-section">
-      <h3>{{ $t('falukant.branch.storage.title') }}</h3>
      <div class="storage-info">
        <p>
          {{ $t('falukant.branch.storage.currentCapacity') }}:
--- a/frontend/src/i18n/locales/de/falukant.json
+++ b/frontend/src/i18n/locales/de/falukant.json
@@ -102,6 +102,12 @@
        },
        "branch": {
            "title": "Filiale",
+            "tabs": {
+                "director": "Direktor",
+                "inventory": "Inventar",
+                "production": "Produktion",
+                "storage": "Lager"
+            },
            "selection": {
                "title": "Niederlassungsauswahl",
                "selected": "Ausgewählte Niederlassung",
--- a/frontend/src/i18n/locales/de/navigation.json
+++ b/frontend/src/i18n/locales/de/navigation.json
@@ -76,7 +76,6 @@
            "create": "Erstellen",
            "overview": "Übersicht",
            "towns": "Niederlassungen",
-            "directors": "Direktoren",
            "factory": "Produktion",
            "family": "Familie",
            "house": "Haus",
--- a/frontend/src/i18n/locales/en/navigation.json
+++ b/frontend/src/i18n/locales/en/navigation.json
@@ -76,7 +76,6 @@
            "create": "Create",
            "overview": "Overview",
            "towns": "Towns",
-            "directors": "Directors",
            "factory": "Factory",
            "family": "Family",
            "house": "House",
--- a/frontend/src/views/falukant/BranchView.vue
+++ b/frontend/src/views/falukant/BranchView.vue
@@ -4,21 +4,54 @@
        <div class="contentscroll">
            <h2>{{ $t('falukant.branch.title') }}</h2>

-            <BranchSelection :branches="branches" :selectedBranch="selectedBranch" @branchSelected="onBranchSelected"
-                @createBranch="createBranch" @upgradeBranch="upgradeBranch" ref="branchSelection" />
+            <BranchSelection
+                :branches="branches"
+                :selectedBranch="selectedBranch"
+                @branchSelected="onBranchSelected"
+                @createBranch="createBranch"
+                @upgradeBranch="upgradeBranch"
+                ref="branchSelection"
+            />

-            <DirectorInfo v-if="selectedBranch" :branchId="selectedBranch.id" ref="directorInfo" />
+            <!-- Tab-Navigation für Inhalte der ausgewählten Niederlassung -->
+            <SimpleTabs
+                v-if="selectedBranch"
+                v-model="activeTab"
+                :tabs="tabs"
+            />

-            <SaleSection v-if="selectedBranch" :branchId="selectedBranch.id" ref="saleSection" />
+            <!-- Tab-Inhalte -->
+            <div v-if="selectedBranch" class="branch-tab-content">
+                <!-- Direktor -->
+                <div v-if="activeTab === 'director'" class="branch-tab-pane">
+                    <DirectorInfo :branchId="selectedBranch.id" ref="directorInfo" />
+                </div>

-            <ProductionSection v-if="selectedBranch" :branchId="selectedBranch.id" :products="products"
-                ref="productionSection" />
+                <!-- Inventar / Verkauf -->
+                <div v-else-if="activeTab === 'inventory'" class="branch-tab-pane">
+                    <SaleSection :branchId="selectedBranch.id" ref="saleSection" />
+                </div>

-            <StorageSection v-if="selectedBranch" :branchId="selectedBranch.id" ref="storageSection" />
+                <!-- Produktion + Produkt-Erträge -->
+                <div v-else-if="activeTab === 'production'" class="branch-tab-pane">
+                    <ProductionSection
+                        :branchId="selectedBranch.id"
+                        :products="products"
+                        ref="productionSection"
+                    />
+                    <RevenueSection
+                        :products="products"
+                        :calculateProductRevenue="calculateProductRevenue"
+                        :calculateProductProfit="calculateProductProfit"
+                        ref="revenueSection"
+                    />
+                </div>

-            <RevenueSection v-if="selectedBranch" :products="products"
-                :calculateProductRevenue="calculateProductRevenue" :calculateProductProfit="calculateProductProfit"
-                ref="revenueSection" />
+                <!-- Lager -->
+                <div v-else-if="activeTab === 'storage'" class="branch-tab-pane">
+                    <StorageSection :branchId="selectedBranch.id" ref="storageSection" />
+                </div>
+            </div>
        </div>
    </div>
 </template>
@@ -26,6 +59,7 @@
 <script>
 import StatusBar from '@/components/falukant/StatusBar.vue';
 import BranchSelection from '@/components/falukant/BranchSelection.vue';
+import SimpleTabs from '@/components/SimpleTabs.vue';
 import DirectorInfo from '@/components/falukant/DirectorInfo.vue';
 import SaleSection from '@/components/falukant/SaleSection.vue';
 import ProductionSection from '@/components/falukant/ProductionSection.vue';
@@ -39,6 +73,7 @@ export default {
    components: {
        StatusBar,
        BranchSelection,
+        SimpleTabs,
        DirectorInfo,
        SaleSection,
        ProductionSection,
@@ -51,6 +86,13 @@ export default {
            branches: [],
            selectedBranch: null,
            products: [],
+            activeTab: 'production',
+            tabs: [
+                { value: 'production', label: 'falukant.branch.tabs.production' },
+                { value: 'inventory', label: 'falukant.branch.tabs.inventory' },
+                { value: 'director', label: 'falukant.branch.tabs.director' },
+                { value: 'storage', label: 'falukant.branch.tabs.storage' },
+            ],
        };
    },

@@ -144,6 +186,11 @@ export default {
                this.$refs.storageSection?.loadStorageData();
                this.$refs.revenueSection?.refresh && this.$refs.revenueSection.refresh();
            });
+
+            // Beim Initial-Laden sicherstellen, dass ein Tab-Inhalt sichtbar ist
+            if (this.selectedBranch && !this.activeTab) {
+                this.activeTab = 'director';
+            }
        },

        async createBranch() {
@@ -177,6 +224,9 @@ export default {
            if (main && main !== this.selectedBranch) {
                this.selectedBranch = main;
            }
+            if (this.selectedBranch && !this.activeTab) {
+                this.activeTab = 'director';
+            }
        },

        calculateProductRevenue(product) {
@@ -256,7 +306,10 @@ export default {
                    break;
                case 'knowledge_update':
                    this.loadProducts();
-                    this.$refs.revenueSection.products = this.products;
+                    if (this.$refs.revenueSection) {
+                        this.$refs.revenueSection.products = this.products;
+                        this.$refs.revenueSection.refresh && this.$refs.revenueSection.refresh();
+                    }
                    break;
                default:
                    console.log('Unhandled event:', eventData);