From f26ded34f380031e559fcbb1c78eac5ea9d2601b Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Tue, 1 Oct 2024 15:08:50 +0200
Subject: [PATCH] init new ui

---
 app/components/Charts.vue                | 23 +++---------
 app/components/navigation/FilterItem.vue | 22 ++++++++++++
 app/composables/useFilterItem.ts         | 19 ++++++++++
 app/composables/useVersionRange.ts       | 10 +++---
 app/layouts/default.vue                  |  5 ++-
 app/pages/charts.vue                     | 45 ++++++++++++++++++++++++
 app/pages/index.vue                      |  5 +++
 7 files changed, 104 insertions(+), 25 deletions(-)
 create mode 100644 app/components/navigation/FilterItem.vue
 create mode 100644 app/composables/useFilterItem.ts
 create mode 100644 app/pages/charts.vue

diff --git a/app/components/Charts.vue b/app/components/Charts.vue
index b89da8f..fbdf747 100644
--- a/app/components/Charts.vue
+++ b/app/components/Charts.vue
@@ -2,25 +2,11 @@
 import { Bar } from "vue-chartjs";
 
 const props = defineProps<{
-	stat: string;
-	type: string;
-	explanation: string;
+	data: StatExport | undefined;
 }>();
-const { version, exclusive, versionFrom, versionTo } = useSettings();
-
-const { data } = useFetch<StatExport>("/api/stats", {
-	query: {
-		mode: version,
-		exclusive: exclusive,
-		type: props.type,
-		stat: props.stat,
-		versionTo: versionTo,
-		versionFrom: versionFrom,
-	},
-});
 
 const chartData = computed(() => {
-	if (!data.value) {
+	if (!props.data) {
 		return {
 			labels: [],
 			datasets: [],
@@ -28,8 +14,8 @@ const chartData = computed(() => {
 	}
 
 	return {
-		labels: data.value.labels,
-		datasets: data.value.data.map((value) => {
+		labels: props.data.labels,
+		datasets: props.data.data.map((value) => {
 			return {
 				...value,
 				borderRadius: 3,
@@ -74,6 +60,7 @@ const chartOptions = ref({
 </script>
 
 <template>
+  {{props.type}}
   <div id="container">
     <Bar
         :data="chartData"
diff --git a/app/components/navigation/FilterItem.vue b/app/components/navigation/FilterItem.vue
new file mode 100644
index 0000000..e78c9d6
--- /dev/null
+++ b/app/components/navigation/FilterItem.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const model = defineModel();
+
+const { canClear = false } = defineProps<{
+	options: string[];
+	canClear?: boolean;
+}>();
+</script>
+
+<template>
+  <select v-model="model">
+    <option v-if="canClear">
+    </option>
+    <option v-for="option in options" :value="option">
+      {{ option }}
+    </option>
+  </select>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/app/composables/useFilterItem.ts b/app/composables/useFilterItem.ts
new file mode 100644
index 0000000..92ebaee
--- /dev/null
+++ b/app/composables/useFilterItem.ts
@@ -0,0 +1,19 @@
+export function useFilterItem(key: string, defaultValue: string | undefined) {
+	const route = useRoute();
+	const router = useRouter();
+
+	const item = ref(
+		(route.query[key] ? route.query[key] : defaultValue) as string,
+	);
+
+	watch(item, async () => {
+		await router.replace({
+			query: {
+				...route.query,
+				[key]: item.value,
+			},
+		});
+	});
+
+	return item;
+}
diff --git a/app/composables/useVersionRange.ts b/app/composables/useVersionRange.ts
index 0013982..070706a 100644
--- a/app/composables/useVersionRange.ts
+++ b/app/composables/useVersionRange.ts
@@ -1,10 +1,12 @@
 import { useSettings } from "~/composables/useSettings";
 
-export function useVersionRange() {
-	const { version, versionTo, versionFrom } = useSettings();
-
+export function useVersionRange(
+	versionGroup: Ref<string | undefined>,
+	versionTo: Ref<string | undefined>,
+	versionFrom: Ref<string | undefined>,
+) {
 	const { data } = useFetch("/api/gameVersions", {
-		query: { mode: version },
+		query: { mode: versionGroup },
 	});
 
 	const versionNames = computed(() => {
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 2b0a086..109cdf5 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -10,8 +10,7 @@ import Settings from "~/components/navigation/Settings.vue";
       <NuxtLink id="header" href="/">
         Modrinth Statistics
       </NuxtLink>
-      <div id="fullLinks">
-        <Links/>
+      <div id="navBody">
       </div>
       <div id="icons">
         <ButtonLinks class="linksButton"/>
@@ -110,7 +109,7 @@ import Settings from "~/components/navigation/Settings.vue";
 }
 
 @media only screen and (max-width: 1220px) {
-  #fullLinks {
+  #navBody {
     display: none !important;
   }
 }
diff --git a/app/pages/charts.vue b/app/pages/charts.vue
new file mode 100644
index 0000000..7bef525
--- /dev/null
+++ b/app/pages/charts.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { useFilterItem } from "~/composables/useFilterItem";
+import FilterItem from "~/components/navigation/FilterItem.vue";
+import { useVersionRange } from "#imports";
+
+const projectType = useFilterItem("projectType", "mod");
+const stat = useFilterItem("stat", "count");
+
+const versionGroup = useFilterItem("versionGroup", "major");
+
+const versionFrom = useFilterItem("versionFrom", undefined);
+const versionTo = useFilterItem("versionFrom", undefined);
+const { to, from } = useVersionRange(versionGroup, versionTo, versionFrom);
+
+const exclusive = useFilterItem("exclusive", "yes");
+const exclusiveBool = computed(() => exclusive.value === "yes");
+
+const { data } = useFetch<StatExport>("/api/stats", {
+	query: {
+		mode: versionGroup,
+		exclusive: exclusiveBool,
+		type: projectType,
+		stat: stat,
+		versionTo: versionTo,
+		versionFrom: versionFrom,
+	},
+});
+</script>
+
+<template>
+  <Teleport to="#navBody">
+    <FilterItem v-model="projectType" :options="['mod', 'plugin', 'datapack', 'shader', 'resourcepack', 'modpack']"/>
+    <FilterItem v-model="stat" :options="['count', 'downloads', 'versions']"/>
+    <FilterItem v-model="versionGroup" :options="['major', 'minor', 'all']"/>
+    <FilterItem v-model="versionFrom" :can-clear="true" :options="from"/>
+    <FilterItem v-model="versionTo" :can-clear="true" :options="to"/>
+    <FilterItem v-model="exclusive" :options="['yes', 'no']"/>
+  </Teleport>
+  <Charts :data="data" :type="projectType as string"
+          explanation=""/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 04cfa21..8079d94 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -14,6 +14,11 @@ const { data } = useModrinthFetch<statistics>("/statistics");
 </script>
 
 <template>
+  <Teleport to="#navBody">
+    <NuxtLink href="/charts">
+      Charts
+    </NuxtLink>
+  </Teleport>
   <div id="page">
     <div id="header">
       The place for stats all about
-- 
2.51.2