harheimertc/pages/mitgliederbereich/qttr.vue

<template>
  <div class="min-h-full py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
      <div>
        <h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-4">
          TTR- und QTTR-Werte
        </h1>
        <div class="w-24 h-1 bg-primary-600 mb-6" />
        <p class="text-lg text-gray-700 max-w-3xl">
          Aktuelle TTR- und QTTR-Werte des Harheimer TC. Der Abruf erfolgt über die geschützte Vereinsverbindung.
        </p>
      </div>

      <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
        <div class="flex flex-wrap items-center gap-4 justify-between mb-4">
          <div class="flex flex-wrap items-end gap-x-4 gap-y-3">
            <div>
              <h2 class="text-xl font-semibold text-gray-900">
                Harheimer TC Rangliste
              </h2>
              <p class="text-sm text-gray-600">
                {{ data?.title || 'Andro-Rangliste' }} · {{ data?.rowCount || 0 }} Einträge
              </p>
            </div>
            <div
              class="inline-flex rounded-md border border-gray-200 bg-gray-50 p-0.5 shadow-sm"
              role="group"
              aria-label="Rangliste sortieren nach"
            >
              <button
                type="button"
                class="rounded px-3 py-1.5 text-sm font-semibold transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2"
                :class="sortBy === 'qttr' ? 'bg-primary-600 text-white shadow-sm' : 'text-gray-700 hover:bg-white hover:text-primary-700'"
                :aria-pressed="sortBy === 'qttr'"
                @click="sortBy = 'qttr'"
              >
                QTTR
              </button>
              <button
                type="button"
                class="rounded px-3 py-1.5 text-sm font-semibold transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2"
                :class="sortBy === 'ttr' ? 'bg-primary-600 text-white shadow-sm' : 'text-gray-700 hover:bg-white hover:text-primary-700'"
                :aria-pressed="sortBy === 'ttr'"
                @click="sortBy = 'ttr'"
              >
                TTR
              </button>
            </div>
          </div>
          <div class="text-sm text-gray-500">
            Aktualisiert: {{ formatDate(data?.importedAt) }}
          </div>
        </div>

        <div
          v-if="pending"
          class="py-12 text-center text-gray-500"
        >
          Lade TTR- und QTTR-Werte...
        </div>
        <div
          v-else-if="error"
          class="rounded-lg border border-red-200 bg-red-50 p-4 text-red-800"
        >
          {{ error.statusMessage || error.message || 'TTR- und QTTR-Werte konnten nicht geladen werden.' }}
        </div>
        <div
          v-else
          class="overflow-x-auto"
        >
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
                  Vereinsrang<br>{{ sortBy === 'qttr' ? '(QTTR / TTR)' : '(TTR / QTTR)' }}
                </th>
                <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
                  Spieler
                </th>
                <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
                  Verein
                </th>
                <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-gray-500">
                  TTR
                </th>
                <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-gray-500">
                  QTTR
                </th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 bg-white">
              <tr
                v-for="row in sortedRows"
                :key="row.playerNumber || row.playerName"
                :class="isOwnRow(row.playerName) ? 'bg-primary-100' : ''"
              >
                <td class="px-4 py-3 text-sm text-gray-600">
                  <span :title="clubRankTitle(row)">
                    {{ formatClubRank(row) }}
                  </span>
                </td>
                <td class="px-4 py-3">
                  <div :class="['font-medium', getPlayerNameClass(row)]">
                    {{ row.playerName || 'Unbekannt' }}
                  </div>
                </td>
                <td class="px-4 py-3 text-sm text-gray-700">
                  {{ row.clubName || 'Harheimer TC' }}
                </td>
                <td class="px-4 py-3 text-right text-lg font-semibold text-gray-900 tabular-nums">
                  {{ row.currentTtr ?? '–' }}
                </td>
                <td class="px-4 py-3 text-right text-lg font-semibold text-gray-900 tabular-nums">
                  {{ row.currentQttr ?? '–' }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'

const authStore = useAuthStore()

definePageMeta({
  middleware: 'auth',
  layout: 'default'
})

await authStore.checkAuth()

const { data, pending, error } = await useFetch('/api/mitgliederbereich/qttr')

const currentUserName = computed(() => authStore.user?.name?.trim() || '')
const sortBy = ref('qttr')

const sortedRows = computed(() => {
  const rows = [...(data.value?.rows || [])]
  const byName = (a, b) => String(a.playerName || '').localeCompare(String(b.playerName || ''), 'de')
  const byRating = (key) => (a, b) => b[key] - a[key] || byName(a, b)

  if (sortBy.value === 'ttr') {
    return rows.sort((a, b) => {
      const aMissing = a.currentTtr == null
      const bMissing = b.currentTtr == null
      if (aMissing !== bMissing) return aMissing ? 1 : -1
      return aMissing ? byName(a, b) : byRating('currentTtr')(a, b)
    })
  }

  return rows.sort((a, b) => {
    const aMissing = a.currentQttr == null
    const bMissing = b.currentQttr == null
    if (aMissing !== bMissing) return aMissing ? 1 : -1
    if (!aMissing) return byRating('currentQttr')(a, b)

    const aMissingTtr = a.currentTtr == null
    const bMissingTtr = b.currentTtr == null
    if (aMissingTtr !== bMissingTtr) return aMissingTtr ? 1 : -1
    return aMissingTtr ? byName(a, b) : byRating('currentTtr')(a, b)
  })
})

function normalizeName(value) {
  return String(value || '').trim().toLowerCase().replace(/\s+/g, ' ')
    .normalize('NFKD')
    .replace(/[\u0300-\u036f]/g, '')
    .replace(/[’'`]/g, '')
}

function isMaleGender(value) {
  const gender = normalizeName(value)
  return gender.startsWith('m') || gender.includes('mann') || gender.includes('maenn')
}

function isFemaleGender(value) {
  const gender = normalizeName(value)
  return gender.startsWith('w') || gender.includes('weib') || gender.includes('frau') || gender.includes('female')
}

function isOwnRow(playerName) {
  const current = normalizeName(currentUserName.value)
  if (!current) return false
  return normalizeName(playerName) === current
}

function formatClubRank(row) {
  const activeRank = sortBy.value === 'qttr' ? row.clubQttrRank : row.clubTtrRank
  const otherRank = sortBy.value === 'qttr' ? row.clubTtrRank : row.clubQttrRank
  return `${activeRank ?? '–'} (${otherRank ?? '–'})`
}

function clubRankTitle(row) {
  const activeLabel = sortBy.value === 'qttr' ? 'QTTR' : 'TTR'
  const otherLabel = sortBy.value === 'qttr' ? 'TTR' : 'QTTR'
  const activeRank = sortBy.value === 'qttr' ? row.clubQttrRank : row.clubTtrRank
  const otherRank = sortBy.value === 'qttr' ? row.clubTtrRank : row.clubQttrRank
  return `${activeLabel}-Platzierung im Verein: ${activeRank ?? 'nicht verfügbar'}; ${otherLabel}-Platzierung im Verein: ${otherRank ?? 'nicht verfügbar'}`
}

function getPlayerNameClass(row) {
  const minor = isMinor(row.birthdate)
  if (minor && isMaleGender(row.gender)) return 'text-blue-400'
  if (minor && isFemaleGender(row.gender)) return 'text-pink-400'
  if (isMaleGender(row.gender)) return 'text-blue-700'
  if (isFemaleGender(row.gender)) return 'text-pink-800'
  return 'text-gray-900'
}

function isMinor(birthdate) {
  const date = parseBirthdate(birthdate)
  if (!date) return false
  const today = new Date()
  let age = today.getFullYear() - date.getFullYear()
  const monthDiff = today.getMonth() - date.getMonth()
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < date.getDate())) {
    age -= 1
  }
  return age < 18
}

function parseBirthdate(value) {
  const raw = String(value || '').trim()
  if (!raw) return null

  if (/^\d{4}$/.test(raw)) {
    const parsed = new Date(Number(raw), 0, 1)
    return Number.isNaN(parsed.getTime()) ? null : parsed
  }

  const parsed = new Date(raw)
  return Number.isNaN(parsed.getTime()) ? null : parsed
}

function formatDate(value) {
  if (!value) return 'unbekannt'
  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return 'unbekannt'
  return new Intl.DateTimeFormat('de-DE', {
    dateStyle: 'medium',
    timeStyle: 'short'
  }).format(date)
}

useHead({
  title: 'TTR- und QTTR-Werte - Harheimer TC'
})
</script>