Update translation strings for multiple languages, including corrections and new entries for Chinese, Thai, and Cebuano. Adjusted phrases for clarity and consistency across various contexts.

2026-08-20 13:53:52 +02:00
parent 7553f2c99a
commit 1c2ee5ea10
2 changed files with 520 additions and 133 deletions
--- a/frontend/src/components/MemberTtrHistoryDialog.vue
+++ b/frontend/src/components/MemberTtrHistoryDialog.vue
@@ -1,5 +1,6 @@
 <template>
  <BaseDialog
+    class="ttr-history-dialog"
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    title="TTR-Historie"
@@ -37,18 +38,19 @@
        <div v-if="errorMessage" class="state-panel state-panel-error state-panel-full">{{ errorMessage }}</div>
        <div v-if="infoMessage" class="state-panel state-panel-info">{{ infoMessage }}</div>

-        <div class="chart-panel">
-          <div class="panel-title">Verlauf</div>
-          <div v-if="chartPoints.length < 2" class="state-panel state-panel-muted">
-            Noch nicht genug Datenpunkte für einen Verlauf.
-          </div>
-          <svg
-            v-else
-            class="history-chart"
-            :viewBox="`0 0 ${chartMeta.width} ${chartMeta.height}`"
-            preserveAspectRatio="none"
-            aria-label="TTR-Verlauf"
-          >
+        <div class="history-panels">
+          <div class="chart-panel">
+            <div class="panel-title">Verlauf</div>
+            <div v-if="chartPoints.length < 2" class="state-panel state-panel-muted">
+              Noch nicht genug Datenpunkte für einen Verlauf.
+            </div>
+            <svg
+              v-else
+              class="history-chart"
+              :viewBox="`0 0 ${chartMeta.width} ${chartMeta.height}`"
+              preserveAspectRatio="none"
+              aria-label="TTR-Verlauf"
+            >
            <line
              class="chart-axis"
              :x1="chartMeta.paddingLeft"
@@ -83,7 +85,22 @@
              :cx="point.x"
              :cy="point.y"
              r="4"
+              tabindex="0"
+              :aria-label="`${point.label}: ${point.value} TTR-Punkte`"
+              @mouseenter="activeChartPoint = point"
+              @mouseleave="activeChartPoint = null"
+              @focus="activeChartPoint = point"
+              @blur="activeChartPoint = null"
            />
+            <g
+              v-if="chartTooltip"
+              class="chart-tooltip"
+              :transform="`translate(${chartTooltip.x}, ${chartTooltip.y})`"
+            >
+              <rect width="142" height="44" rx="6" />
+              <text x="10" y="17">{{ chartTooltip.label }}</text>
+              <text x="10" y="34">{{ chartTooltip.value }} TTR-Punkte</text>
+            </g>
            <g v-for="tick in chartXTicks" :key="`x-${tick.id}`">
              <line
                class="chart-tick"
@@ -99,34 +116,37 @@
                {{ tick.label }}
              </text>
            </g>
-          </svg>
-        </div>
-
-        <div class="table-panel">
-          <div class="panel-title">Historie</div>
-          <div v-if="tableRows.length === 0" class="state-panel state-panel-muted">
-            Noch keine gespeicherte TTR-Historie vorhanden.
+            </svg>
+          </div>
+
+          <div class="table-panel">
+            <div class="panel-title">Historie</div>
+            <div v-if="tableRows.length === 0" class="state-panel state-panel-muted">
+              Noch keine gespeicherte TTR-Historie vorhanden.
+            </div>
+            <div v-else class="history-table-scroll">
+              <table class="history-table">
+                <thead>
+                  <tr>
+                    <th>Datum</th>
+                    <th>TTR</th>
+                    <th>Veränderung</th>
+                    <th>Quelle</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="row in tableRows" :key="row.id">
+                    <td>{{ formatDate(row.sourceDate) }}</td>
+                    <td class="ttr-transition-cell">{{ formatTtrTransition(row.beforeTtr, row.afterTtr) }}</td>
+                    <td :class="changeClass(row.change)">
+                      {{ formatChange(row.change) }}
+                    </td>
+                    <td>{{ row.label || row.sourceType || '–' }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
          </div>
-          <table v-else class="history-table">
-            <thead>
-              <tr>
-                <th>Datum</th>
-                <th>TTR</th>
-                <th>Veränderung</th>
-                <th>Quelle</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="row in tableRows" :key="row.id">
-                <td>{{ formatDate(row.sourceDate) }}</td>
-                <td class="ttr-transition-cell">{{ formatTtrTransition(row.beforeTtr, row.afterTtr) }}</td>
-                <td :class="changeClass(row.change)">
-                  {{ formatChange(row.change) }}
-                </td>
-                <td>{{ row.label || row.sourceType || '–' }}</td>
-              </tr>
-            </tbody>
-          </table>
        </div>
      </div>
    </div>
@@ -171,6 +191,7 @@ export default {
      entries: [],
      lastFetchedAt: null,
      selectedRange: 'all',
+      activeChartPoint: null,
      playerId: this.member?.myTischtennisHistoryPlayerId || this.member?.myTischtennisPlayerId || null
    };
  },
@@ -278,6 +299,23 @@ export default {
    chartPolyline() {
      return this.chartPoints.map((point) => `${point.x},${point.y}`).join(' ');
    },
+    chartTooltip() {
+      if (!this.activeChartPoint) {
+        return null;
+      }
+
+      const width = 142;
+      const height = 44;
+      const margin = 8;
+      const { x, y, label, value } = this.activeChartPoint;
+      const tooltipX = Math.min(
+        Math.max(margin, x - width / 2),
+        this.chartMeta.width - width - margin
+      );
+      const tooltipY = y - height - 12 >= margin ? y - height - 12 : y + 12;
+
+      return { x: tooltipX, y: tooltipY, label, value };
+    },
    chartXTicks() {
      if (this.chartPoints.length === 0) {
        return [];
@@ -451,8 +489,22 @@ export default {
 </script>

 <style scoped>
+.ttr-history-dialog :deep(.dialog-container) {
+  height: min(800px, 90vh);
+}
+
+.ttr-history-dialog :deep(.dialog-body) {
+  display: flex;
+  min-height: 0;
+  overflow: hidden;
+}
+
 .ttr-history-content {
  padding: 1rem;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
 }

 .dialog-intro {
@@ -510,9 +562,21 @@ export default {
 }

 .content-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.history-panels {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
+  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
+  flex: 1;
+  min-height: 0;
 }

 .chart-panel,
@@ -521,6 +585,12 @@ export default {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
+  min-height: 0;
+}
+
+.table-panel {
+  display: flex;
+  flex-direction: column;
 }

 .panel-title {
@@ -583,6 +653,31 @@ export default {

 .chart-point {
  fill: #0d4f9a;
+  cursor: pointer;
+  outline: none;
+}
+
+.chart-point:focus {
+  stroke: #fff;
+  stroke-width: 2;
+}
+
+.chart-tooltip {
+  pointer-events: none;
+}
+
+.chart-tooltip rect {
+  fill: #1f2937;
+  opacity: 0.96;
+}
+
+.chart-tooltip text {
+  fill: #fff;
+  font-size: 11px;
+}
+
+.chart-tooltip text:last-child {
+  font-weight: 700;
 }

 .chart-tick {
@@ -605,6 +700,11 @@ export default {
  border-collapse: collapse;
 }

+.history-table-scroll {
+  min-height: 0;
+  overflow-y: auto;
+}
+
 .history-table th,
 .history-table td {
  text-align: left;
@@ -613,6 +713,10 @@ export default {
 }

 .history-table thead th {
+  position: sticky;
+  top: 0;
+  background: var(--primary-color);
+  z-index: 1;
  color: #fff;
  border-bottom: 2px solid #ddd;
  font-size: 0.82rem;
@@ -663,7 +767,12 @@ export default {
  }

  .content-grid {
+    overflow: hidden;
+  }
+
+  .history-panels {
    grid-template-columns: 1fr;
+    grid-template-rows: auto minmax(0, 1fr);
  }
 }
 </style>