I really dont know

Author: Revilo0509

app/components/FilterPanel.vue

@@ -46,7 +46,8 @@ function emitPageUpdate(value: number) {
         v-if="filter.type === 'select'"
         v-model="filter.modelValue.value"
         :items="(filter.items as any[]) || []"
-        label-key="name"
+        label-key="label"
+        value-key="value"
       />
 
       <UInput

app/components/FooterComponent.vue

@@ -1,14 +1,18 @@
+<script setup lang="ts">
+const { t } = useI18n();
+</script>
+
 <template>
   <UFooter>
     <template #left>
       <p class="text-muted text-sm">
-        Copyright © Zyner {{ new Date().getFullYear() }}
+        {{ t("footer.copyright") }} © Zyner {{ new Date().getFullYear() }}
       </p>
     </template>
 
     <template #right>
       <p class="text-muted text-sm">
-        Made by
+        {{ t("footer.madeBy") }}
         <ULink href="https://zyner.org" class="underline"> Zyner </ULink>
       </p>
     </template>

app/components/SidebarComponent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { locales, setLocale, locale } = useI18n();
+const { t, locales, setLocale, locale } = useI18n();
 
 const items = computed(() =>
   locales.value.map((l) => ({
@@ -27,11 +27,15 @@ const selected = computed({
     <div id="sidebar" />
 
     <template #footer>
-      <UModal title="Settings">
-        <UButton label="Settings" color="neutral" variant="subtle" />
+      <UModal :title="t('settings.title')">
+        <UButton
+          :label="t('settings.title')"
+          color="neutral"
+          variant="subtle"
+        />
 
         <template #body>
-          Language:
+          {{ t("settings.language") }}:
           <USelect
             v-model="selected"
             :items="items"

app/composables/useDataTable.ts

@@ -1,10 +1,12 @@
-import type { Ref } from "vue";
+import { ref, watch, onMounted, computed, type Ref } from "vue";
 
 export interface FilterConfig {
   key: string;
   label: string;
   type: "select" | "input";
   items?: unknown[];
+  accessorKey?: string;
+  valueKey?: string;
   modelValue: Ref<unknown>;
   [key: string]: unknown;
 }
@@ -16,10 +18,34 @@ interface FetchOptions<T> {
     page: number,
   ) => Promise<{ data: T[] }>;
   onTransform?: (item: T) => Promise<T>;
+  t?: (key: string) => string;
+}
+
+function normalizeItems(filter: FilterConfig) {
+  if (!filter.items) return [];
+
+  return filter.items.map((item) => {
+    if (typeof item === "object" && item !== null) {
+      const obj = item as Record<string, unknown>;
+
+      const label = filter.accessorKey
+        ? obj[filter.accessorKey]
+        : (obj.label ?? obj.name ?? obj);
+
+      const value = filter.valueKey ? obj[filter.valueKey] : item;
+
+      return { label: String(label), value };
+    }
+
+    return {
+      label: String(item),
+      value: item,
+    };
+  });
 }
 
 export function useDataTable<T>(options: FetchOptions<T>) {
-  const { filters, onFetch, onTransform } = options;
+  const { filters, onFetch, onTransform, t } = options;
 
   const page = ref(1);
   const data = ref<T[]>([]);
@@ -29,18 +55,33 @@ export function useDataTable<T>(options: FetchOptions<T>) {
 
   let requestId = 0;
 
+  function getLabel(filter: FilterConfig) {
+    if (t && filter.label.startsWith("filters.")) {
+      return t(filter.label);
+    }
+    return filter.label;
+  }
+
+  const normalizedFilters = computed(() =>
+    filters.map((f) => ({
+      ...f,
+      items: normalizeItems(f),
+      label: getLabel(f),
+    })),
+  );
+
   async function fetchData() {
     const id = ++requestId;
     isLoading.value = true;
     error.value = null;
 
     try {
-      const filterValues = filters.reduce(
+      const filterValues = normalizedFilters.value.reduce(
         (acc, filter) => {
           acc[filter.key] = filter.modelValue.value;
           return acc;
         },
-        {} as Record<string, any>,
+        {} as Record<string, unknown>,
       );
 
       const res = await onFetch(filterValues, page.value);
@@ -74,7 +115,7 @@ export function useDataTable<T>(options: FetchOptions<T>) {
     maxPage,
     isLoading,
     error,
-    filters,
+    filters: normalizedFilters,
     refetch: fetchData,
   };
 }

app/pages/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const { t } = useI18n();
+import type { PlayerStat } from "~~/generated/api";
+
+const { t, te } = useI18n();
 const api = useApi();
 const transformer = useTransformerStore();
 
@@ -11,8 +13,40 @@ const [categoriesRes, itemsRes, playersRes] = await Promise.all([
   api.players(),
 ]);
 
-const categories = withNoneOption(categoriesRes.data, t("common.none"));
-const items = withNoneOption(itemsRes.data, t("common.none"));
+function translateCategory(name: string) {
+  const key = `categories.${name}`;
+  return te(key) ? t(key) : name;
+}
+
+const rawCategories = withNoneOption(categoriesRes.data, t("common.none"));
+const categories = rawCategories.map((c) => {
+  return {
+    ...c,
+    label: c.id === -1 ? t("common.none") : translateCategory(c.name),
+  };
+});
+
+function formatItem(name: string) {
+  if (!name.startsWith("minecraft:")) return name;
+  const s = `statName.${name}`;
+  console.log(s);
+  if (te(s)) return t(s);
+  return name
+    .slice(10, name.length)
+    .split("_")
+    .map((word) => {
+      return word.charAt(0).toUpperCase() + word.slice(1);
+    })
+    .join(" ");
+}
+
+const rawItems = withNoneOption(itemsRes.data, t("common.none"));
+const items = rawItems.map((c) => {
+  return {
+    ...c,
+    label: c.id === -1 ? t("common.none") : formatItem(c.name),
+  };
+});
 const players = withNoneOption(playersRes.data, t("common.none"));
 
 const selectedCategory = ref(getDefaultNone(categories, t("common.none")));
@@ -23,26 +57,27 @@ const { data, page, maxPage, filters } = useDataTable({
   filters: [
     {
       key: "player",
-      label: t("filters.player"),
+      label: "filters.player",
       type: "select",
       items: players,
       modelValue: selectedPlayer,
     },
     {
       key: "category",
-      label: t("filters.category"),
+      label: "filters.category",
       type: "select",
       items: categories,
       modelValue: selectedCategory,
     },
     {
       key: "item",
-      label: t("filters.item"),
+      label: "filters.item",
       type: "select",
       items: items,
       modelValue: selectedItem,
     },
   ],
+  t,
 
   onFetch: async (filterValues, pageNum) => {
     const { category, item, player_uuid } = normalizeStatsFilters(filterValues);
@@ -67,21 +102,25 @@ const columns = computed(() => [
     header: t("stats.player"),
   },
   {
-    accessorFn: (row) => {
+    accessorFn: (row: PlayerStat) => {
       const categoryName = transformer.getCategoryNameById(
-        row.statCategoriesId as number,
+        row.statCategoriesId,
       );
       const translated = t(`categories.${categoryName}`) || categoryName;
       return translated;
     },
     header: t("stats.category"),
   },
   {
-    accessorKey: "statName",
+    accessorFn: (row: PlayerStat) => {
+      return formatItem(row.statName);
+    },
     header: t("stats.type"),
   },
   {
-    accessorKey: "value",
+    accessorFn: (row: PlayerStat) => {
+      if (row.statName.endsWith("one_cm")) return row.value / 100;
+    },
     header: t("stats.value"),
   },
 ]);

i18n/locales/en.json

@@ -29,5 +29,19 @@
     "minecraft:killed_by": "Killed By",
     "minecraft:killed": "Killed",
     "minecraft:used": "Used"
+  },
+  "statName": {
+    "minecraft:aviate_one_cm": "Fly with elytra",
+    "minecraft:fly_one_cm": "Fly",
+    "minecraft:sprint_one_cm": "Sprint",
+    "minecraft:play_time": "Playtime"
+  },
+  "footer": {
+    "copyright": "Copyright",
+    "madeBy": "Made by"
+  },
+  "settings": {
+    "title": "Settings",
+    "language": "Language"
   }
 }

i18n/locales/sv.json

@@ -29,5 +29,17 @@
     "minecraft:killed_by": "Dödats av",
     "minecraft:killed": "Dödat",
     "minecraft:used": "Använt"
+  },
+  "statName": {
+    "minecraft:aviate_one_cm": "Flyga med elytra",
+    "minecraft:fly_one_cm": "Flyga"
+  },
+  "footer": {
+    "copyright": "Upphovsrätt",
+    "madeBy": "Gjord av"
+  },
+  "settings": {
+    "title": "Inställningar",
+    "language": "Språk"
   }
 }

nuxt.config.ts

@@ -15,6 +15,11 @@ export default defineNuxtConfig({
 
   compatibilityDate: "2025-01-15",
 
+  typescript: {
+    typeCheck: true,
+    strict: true,
+  },
+
   eslint: {
     config: {
       stylistic: {

package.json

@@ -28,7 +28,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
     "orval": "^8.8.1",
-    "typescript": "^6.0.2",
+    "typescript": "^6.0.3",
     "vue-tsc": "^3.2.6"
   },
   "packageManager": "pnpm@10.33.0"