Filter in MangaDex search results

src/views/download.ecr

@@ -69,6 +69,18 @@
 	var baseURL = "<%= base_url %>".replace(/\/$/, "");
 </script>
 <script>
+	$(() => {
+		$('.uk-input').keypress(event => {
+			if (event.which === 13) {
+				search();
+			}
+		});
+		$('.uk-select').each((i, ele) => {
+			$(ele).change(() => {
+				buildTable();
+			});
+		});
+	});
 	const toggleSpinner = () => {
 		var attr = $('#spinner').attr('hidden');
 		if (attr) {
@@ -82,6 +94,7 @@
 		searching = !searching;
 	};
 	var searching = false;
+	var globalChapters = undefined;
 	const search = () => {
 		if (searching) {
 			return;
@@ -132,20 +145,89 @@
 				$('#manga-details').removeAttr('hidden');
 
 				console.log(data.chapters);
+				globalChapters = data.chapters;
 
-				const langs = new Set(['All']);
+				let langs = new Set();
-				const group_names = new Set(['All']);
+				let group_names = new Set();
-				const volumes = new Set(['All']);
+				let volumes = new Set();
-				const chapters = new Set(['All']);
+				let chapters = new Set();
-				const inner = data.chapters.map(chp => {
+				data.chapters.forEach(chp => {
+					Object.entries(chp.groups).forEach(([k, v]) => {
+						group_names.add(k);
+					});
 					langs.add(chp.language);
 					volumes.add(chp.volume);
 					chapters.add(chp.chapter);
-					const group_str = Object.entries(chp.groups).map(([k, v]) => {
+				});
-						group_names.add(k);
+
-						return `<a href="${baseURL }/group/${v}">${k}</a>`;
+				const comp = (a, b) => {
-					}).join(' | ');
+					var ai;
-					return `<tr>
+					var bi;
+					try {ai = parseFloat(a)} catch(e) {}
+					try {bi = parseFloat(b)} catch(e) {}
+					if (typeof ai === 'undefined') return -1;
+					if (typeof bi === 'undefined') return 1;
+					if (ai < bi) return 1;
+					if (ai > bi) return -1;
+					return 0;
+				};
+
+				langs = [...langs].sort();
+				group_names = [...group_names].sort();
+				volumes = [...volumes].sort(comp);
+				chapters = [...chapters].sort(comp);
+
+				langs.unshift('All');
+				group_names.unshift('All');
+				volumes.unshift('All');
+				chapters.unshift('All');
+
+				$('select#lang-select').append(langs.map(e => `<option>${e}</option>`).join(''));
+				$('select#group-select').append(group_names.map(e => `<option>${e}</option>`).join(''));
+				$('select#volume-select').append(volumes.map(e => `<option>${e}</option>`).join(''));
+				$('select#chapter-select').append(chapters.map(e => `<option>${e}</option>`).join(''));
+
+				$('#filter-form').removeAttr('hidden');
+
+				buildTable();
+			})
+			.fail((jqXHR, status) => {
+				alert('danger', 'Failed to get manga info. Error: ' + status);
+			})
+			.always(() => {
+				toggleSpinner();
+			});
+	};
+	const getFilters = () => {
+		const filters = {};
+		$('.uk-select').each((i, ele) => {
+			const id = $(ele).attr('id');
+			const by = id.split('-')[0];
+			const choice = $(ele).val();
+			filters[by] = choice;
+		});
+		return filters;
+	};
+	const buildTable = () => {
+		console.log('rebuilding table');
+		const filters = getFilters();
+		console.log('filters:', filters);
+		var chapters = globalChapters.slice();
+		Object.entries(filters).forEach(([k, v]) => {
+			if (v === 'All') return;
+			if (k === 'group') {
+				chapters = chapters.filter(c => v in c.groups);
+				return;
+			}
+			if (k === 'lang') k = 'language';
+			chapters = chapters.filter(c => c[k] === v);
+		});
+		console.log('filtered chapters:', chapters);
+		const inner = chapters.map(chp => {
+			const group_str = Object.entries(chp.groups).map(([k, v]) => {
+				return `<a href="${baseURL }/group/${v}">${k}</a>`;
+			}).join(' | ');
+			return `<tr>
 						<td><a href="${baseURL}/chapter/${chp.id}">${chp.id}</a></td>
 						<td>${chp.title}</td>
 						<td>${chp.language}</td>
@@ -154,25 +236,11 @@
 						<td>${chp.chapter}</td>
 						<td>${chp.time}</td>
 					</tr>`;
-				}).join('');
+		}).join('');
-				const tbody = `<tbody>${inner}</tbody>`;
+		const tbody = `<tbody>${inner}</tbody>`;
-				$('table > tbody').remove();
+		$('table > tbody').remove();
-				$('table').append(tbody);
+		$('table').append(tbody);
-
+		$('table').removeAttr('hidden');
-				$('select#lang-select').append([...langs].map(e => `<option>${e}</option>`).join(''));
-				$('select#group-select').append([...group_names].map(e => `<option>${e}</option>`).join(''));
-				$('select#volume-select').append([...volumes].map(e => `<option>${e}</option>`).join(''));
-				$('select#chapter-select').append([...chapters].map(e => `<option>${e}</option>`).join(''));
-
-				$('#filter-form').removeAttr('hidden');
-				$('table').removeAttr('hidden');
-			})
-			.fail((jqXHR, status) => {
-				alert('danger', 'Failed to get manga info. Error: ' + status);
-			})
-			.always(() => {
-				toggleSpinner();
-			});
 	};
 	const alert = (level, text) => {
 		hideAlert();