yourpart3/frontend/src/views/falukant/NobilityView.vue

<template>
    <div class="contenthidden">
      <StatusBar />
      <div class="contentscroll">
        <h2>{{ $t('falukant.nobility.title') }}</h2>
        <SimpleTabs v-model="activeTab" :tabs="tabs" />
  
        <!-- OVERVIEW -->
        <div v-if="activeTab === 'overview'">
          <div class="nobility-section">
            <p>
              <strong>
                {{ $t(`falukant.titles.${gender}.${current.labelTr}`) }}
              </strong>
            </p>
          </div>
        </div>
  
        <!-- ADVANCE -->
        <div v-else-if="activeTab === 'advance'">
          <div class="advance-section">
            <p>
              {{ $t('falukant.nobility.nextTitle') }}:
              <strong>{{ $t(`falukant.titles.${gender}.${next.labelTr}`) }}</strong>
            </p>
            <ul class="prerequisites">
              <li v-for="req in next.requirements" :key="req.titleId">
                  {{ $t(`falukant.nobility.requirement.${req.requirementType}`, { amount: formatCost(req.requirementValue) }) }}
              </li>
            </ul>
            <button @click="applyAdvance" class="button" :disabled="!canAdvance || isAdvancing">
              <span v-if="!isAdvancing">{{ $t('falukant.nobility.advance.confirm') }}</span>
              <span v-else>{{ $t('falukant.nobility.advance.processing') }}</span>
            </button>
            <span>-&gt;{{ canAdvance }}, {{ isAdvancing }}&lt;-</span>
          </div>
        </div>
  
      </div>
    </div>
  </template>
  
  <script>
  import StatusBar from '@/components/falukant/StatusBar.vue';
  import SimpleTabs from '@/components/SimpleTabs.vue';
  import apiClient from '@/utils/axios.js';
  import { mapState } from 'vuex';
  
  export default {
    name: 'NobilityView',
    components: { StatusBar, SimpleTabs },
    data() {
      return {
        activeTab: 'overview',
        tabs: [
          { value: 'overview', label: 'falukant.nobility.tabs.overview' },
          { value: 'advance', label: 'falukant.nobility.tabs.advance' }
        ],
        current: { labelTr: '', requirements: [], charactersWithNobleTitle: [] },
        next: { labelTr: '', requirements: [] },
        isAdvancing: false
      };
    },
    computed: {
      ...mapState(['socket', 'falukantData']),
      gender() {
        return this.current.charactersWithNobleTitle[0]?.gender || 'male';
      },
      canAdvance() {
        return true;
      }
    },
    async mounted() {
      await this.loadNobility();
      this.setupSocketEvents();
    },
    beforeUnmount() {
      if (this.socket) {
        this.socket.off('falukantUpdateStatus', this.loadNobility);
      }
    },
    methods: {
      setupSocketEvents() {
        if (this.socket) {
          this.socket.on('falukantUpdateStatus', this.loadNobility);
          console.log('✅ NobilityView: Socket.io Events registriert');
        } else {
          console.log('⚠️ NobilityView: Socket.io noch nicht verfügbar');
          setTimeout(() => this.setupSocketEvents(), 1000);
        }
      },
      async loadNobility() {
        try {
          const { data } = await apiClient.get('/api/falukant/nobility');
          this.current = data.current;
          this.next = data.next;
        } catch (err) {
          console.error('Error loading nobility:', err);
        }
      },
      async applyAdvance() {
        if (!this.canAdvance || this.isAdvancing) return;
        this.isAdvancing = true;
        try {
          await apiClient.post('/api/falukant/nobility/advance');
          await this.loadNobility();
        } catch (err) {
          console.error('Error advancing nobility:', err);
        } finally {
          this.isAdvancing = false;
        }
      },
      handleDaemonMessage(evt) {
        if (evt.data === 'ping') return;
        const msg = JSON.parse(evt.data);
        if (['nobilityChange', 'moneyChange'].includes(msg.event)) this.loadNobility();
      },
      formatCost(val) {
        return new Intl.NumberFormat(navigator.language, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(val);
      },
      async applyAdvance() {
        await apiClient.post('/api/falukant/nobility');
      }
    }
  };
  </script>
  
  <style scoped lang="scss">
  h2 { padding-top: 20px; }
  .nobility-section,
  .advance-section {
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 10px 0;
    padding: 10px;
  }
  .prerequisites {
    list-style: disc inside;
    margin-bottom: 1rem;
  }
  </style>