show result count and time in gallery

also minor optimizations when using array reduce
Faithful-Resource-Pack · Jun 20, 2024 · 331362b · 331362b
1 parent 8fb4fb6
commit 331362b
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 38 deletions.
diff --git a/pages/contribution/contribution-modal.vue b/pages/contribution/contribution-modal.vue
@@ -194,7 +194,10 @@ export default {
 					formID,
 					`${this.formatPack(form.pack)} • ${moment(new Date(form.date)).format("ll")}`,
 				])
-				.reduce((acc, [formID, formLabel]) => ({ ...acc, [formID]: formLabel }), {});
+				.reduce((acc, [formID, formLabel]) => {
+					acc[formID] = formLabel;
+					return acc;
+				}, {});
 		},
 	},
 	methods: {

diff --git a/pages/contribution/main.vue b/pages/contribution/main.vue
@@ -102,11 +102,7 @@
 					>
 						<v-list-item-avatar tile class="texture-preview">
 							<a :href="`/gallery?show=${contrib.texture}`">
-								<v-img
-									class="texture-img"
-									:src="contrib.url"
-									:lazy-src="logos[contrib.pack]"
-								/>
+								<v-img class="texture-img" :src="contrib.url" :lazy-src="logos[contrib.pack]" />
 							</a>
 						</v-list-item-avatar>
 
@@ -490,17 +486,14 @@ export default {
 	},
 	created() {
 		axios.get(`${this.$root.apiURL}/packs/raw`).then((res) => {
-			this.packToCode = Object.values(res.data).reduce(
-				(acc, cur) => ({
-					...acc,
-					[cur.id]: cur.name
-						.split(" ")
-						// Classic Faithful 32x Programmer Art -> CF32PA
-						.map((el) => (isNaN(Number(el[0])) ? el[0].toUpperCase() : el.match(/\d+/g)?.[0]))
-						.join(""),
-				}),
-				{},
-			);
+			this.packToCode = Object.values(res.data).reduce((acc, cur) => {
+				acc[cur.id] = cur.name
+					.split(" ")
+					// Classic Faithful 32x Programmer Art -> CF32PA
+					.map((el) => (isNaN(Number(el[0])) ? el[0].toUpperCase() : el.match(/\d+/g)?.[0]))
+					.join("");
+				return acc;
+			}, {});
 		});
 		this.selectedContributors = this.queryToIds;
 		this.addPack(this.all_packs, this.all_packs_display, true);

diff --git a/pages/dashboard/contribution-card.vue b/pages/dashboard/contribution-card.vue
@@ -102,10 +102,10 @@ export default {
 		});
 		axios.get(`${this.$root.apiURL}/packs/raw`).then((res) => {
 			this.packToName = Object.values(res.data).reduce(
-				(acc, cur) => ({
-					...acc,
-					[cur.id]: cur.name,
-				}),
+				(acc, cur) => {
+					acc[cur.id] = cur.name;
+					return acc;
+				},
 				{},
 			);
 		});

diff --git a/pages/dashboard/roles-graph.vue b/pages/dashboard/roles-graph.vue
@@ -95,7 +95,10 @@ export default {
 			return this.$root.isDark ? "dark" : "classic";
 		},
 		types() {
-			return this.labels.reduce((acc, cur, i) => ({ ...acc, [cur]: this.series[i] }), {});
+			return this.labels.reduce((acc, cur, i) => {
+				acc[cur] = this.series[i];
+				return acc;
+			}, {});
 		},
 		values() {
 			return this.series

diff --git a/pages/gallery/main.vue b/pages/gallery/main.vue
@@ -84,7 +84,14 @@
 			@click:clear="clearSearch"
 		/>
 
-		<br />
+		<v-row>
+			<v-col v-if="requestTime > 0 && displayedTextures.length">
+				<p class="py-3 pb-0 text--secondary">
+					{{ resultMessage }}
+				</p>
+			</v-col>
+			<br v-else />
+		</v-row>
 
 		<v-list class="main-container pa-2" two-line>
 			<div class="text-center">
@@ -209,6 +216,10 @@ export default {
 				edition: "java",
 				search: null,
 			},
+			timer: {
+				start: null,
+				end: null,
+			},
 			// number of displayed results
 			displayedResults: 1,
 			// result
@@ -245,6 +256,22 @@ export default {
 		};
 	},
 	computed: {
+		requestTime() {
+			if (!this.timer.end || !this.timer.start);
+			const seconds = (this.timer.end - this.timer.start) / 1000;
+			// cast to number again to remove unnecessary zeros
+			return Number(seconds.toFixed(1));
+		},
+		resultMessage() {
+			const replacePlaceholders = (msg) =>
+				msg
+					.replace("%COUNT%", this.displayedTextures.length)
+					.replace("%SECONDS%", this.requestTime);
+
+			if (this.displayedTextures.length === 1)
+				return replacePlaceholders(this.$root.lang().gallery.result_stats_singular);
+			return replacePlaceholders(this.$root.lang().gallery.result_stats_plural);
+		},
 		packList() {
 			return Object.entries(this.packToName).map(([id, name]) => ({
 				label: name,
@@ -406,14 +433,15 @@ export default {
 			}
 
 			let route = `/gallery/${this.current.edition}/${this.current.pack}/${this.current.version}/${this.current.tag}`;
-			if (this.current.search) route += `/${this.current.search}`;
+			if (this.current.search) route += `/${this.current.search.replace(/ /g, "_")}`;
 
 			if (this.$route.path === route) return; // new search is the same as before
 			return this.$router.push(route);
 		},
 		updateSearch() {
 			if (this.loading) return;
 			this.loading = true;
+			this.timer.start = Date.now();
 			this.displayedTextures = [];
 
 			// /gallery/{pack}/{edition}/{mc_version}/{tag}
@@ -425,6 +453,7 @@ export default {
 				)
 				.then((res) => {
 					this.displayedTextures = res.data;
+					this.timer.end = Date.now();
 				})
 				.catch((e) => {
 					console.error(e);
@@ -521,13 +550,10 @@ export default {
 		});
 		axios.get(`${this.$root.apiURL}/packs/raw`).then((res) => {
 			this.options.packs = Object.values(res.data).map((v) => v.name);
-			this.packToName = Object.values(res.data).reduce(
-				(acc, cur) => ({
-					...acc,
-					[cur.id]: cur.name,
-				}),
-				{},
-			);
+			this.packToName = Object.values(res.data).reduce((acc, cur) => {
+				acc[cur.id] = cur.name;
+				return acc;
+			}, {});
 		});
 		axios.get(`${this.$root.apiURL}/contributions/authors`).then((res) => {
 			this.loadedContributors = res.data.reduce((acc, cur) => {

diff --git a/pages/texture/texture-modal.vue b/pages/texture/texture-modal.vue
@@ -257,13 +257,10 @@ export default {
 			axios
 				.get(`${this.$root.apiURL}/textures/${textureID}/uses`, this.$root.apiOptions)
 				.then((res) => {
-					this.formData.uses = Object.values(res.data).reduce(
-						(acc, cur) => ({
-							...acc,
-							[cur.id]: cur,
-						}),
-						{},
-					);
+					this.formData.uses = Object.values(res.data).reduce((acc, cur) => {
+						acc[cur.id] = cur;
+						return acc;
+					}, {});
 					// recompute tag list once uses are loaded
 					this.recomputeTagList();
 				})

diff --git a/resources/strings/en_US.js b/resources/strings/en_US.js
@@ -483,6 +483,8 @@ export default {
 		},
 		all: "All",
 		latest: "Latest",
+		result_stats_singular: "%COUNT% texture found in %SECONDS% seconds",
+		result_stats_plural: "%COUNT% textures found in %SECONDS% seconds",
 		modal: {
 			no_contributions: "No contributions found",
 			tabs: {