7th-saga/web/static/saga.js

(function(window) {
	const $apprenticeFilterForm = $('.apprentice-filter-form');
	const $locationFilterForm = $('.location-filter-form');
	const $table = $('#main-table');

	window.saga = {
		sortData: () => {
			console.log('sorting data');
			const qs = new URLSearchParams(window.location.search);
			const col = qs.get('col');
			let dir = qs.get('dir');

			if (!col) {
				return;
			}

			if (!$table.length) {
				return;
			}

			if (dir !== 'asc' && dir !== 'desc') {
				dir = 'asc';
			}

			const rows = $table.find('tbody.data tr').toArray();

			const firstRow = rows[0];
			if (!firstRow) {
				return;
			}

			const coefficient = dir === 'desc' ? -1 : 1;

			rows.sort((a, b) => {
				let aVal = a.getAttribute('data-' + col);
				let bVal = b.getAttribute('data-' + col);

				const isNumber = !isNaN(Number(aVal));

				if (isNumber && aVal) {
					aVal = Number(aVal);
					bVal = Number(bVal);
				}

				if (aVal === bVal) {
					if (col === 'name') {
						return 0;
					}

					const aName = a.getAttribute('data-name');
					const bName = b.getAttribute('data-name');
					if (typeof(aName) === 'string' && typeof(bName) === 'string') {
						return aName.localeCompare(bName) * coefficient;
					}

					return 0;
				}

				if (typeof(aVal) === 'number' && typeof(bVal) === 'number') {
					return (aVal < bVal ? -1 : 1) * coefficient;
				}

				if (typeof(aVal) === 'string' && typeof(bVal) === 'string') {
					return aVal.localeCompare(bVal) * coefficient;
				}

				return 0;

			});

			let nextChild = null;
			const headers = $table.find('tr.header th').removeClass('sorted').toArray();
			const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
			if (highlightedIndex === -1) {
				throw new Error('could not find header column');
			}

			headers[highlightedIndex].classList.add('sorted');

			for (let i = rows.length - 1; i >= 0; i--) {
				const row = rows[i];
				if (row === nextChild) {
					continue;
				}

				$(row).find('td.sorted').removeClass('sorted');
				$(row).find('td').eq(highlightedIndex).addClass('sorted');

				row.parentNode.insertBefore(row, nextChild);
				nextChild = row;
			}
		},

		filterApprentices: () => {
			if (!$apprenticeFilterForm.length) {
				return;
			}

			const checked = [];

			$apprenticeFilterForm.find('input[type="checkbox"]').toArray().map((input) => {
				if (input.checked) {
					checked.push(input.name);
				}
			});

			window.Cookies.set('apprenticeFilter', checked.join(','), {
				sameSite: 'strict',
			});

			$table
				.find('tbody.data tr')
				.hide()
				.filter((i, row) => {
					if (!checked.length) {
						return true;
					}

					const users = ($(row).attr('data-users') || '').split(',');
					if (!users.length) {
						return true;
					}
					return checked.some((name) => users.includes(name));
				})
				.show();
		},

		filterLocations: () => {
			if (!$locationFilterForm.length) {
				return;
			}

			const checked = [];

			$locationFilterForm.find('input[type="checkbox"]').toArray().map((input) => {
				if (input.checked) {
					checked.push(input.name);
				}
			});

			window.Cookies.set('locationFilter', checked.join(','), {
				sameSite: 'strict',
			});

			$table
				.find('tbody.data tr')
				.hide()
				.filter((i, row) => {
					if (!checked.length) {
						return true;
					}

					const data = $(row).attr('data-locations').split(',');
					if (!data.length) {
						return true;
					}
					return data.some((name) => checked.includes(name));
				})
				.show();
		},
	};

	const checkLocations = () => {
		if (!$locationFilterForm.length) {
			return;
		}

		try {
			window.Cookies.get('locationFilter').split(',').forEach((location) => {
				$locationFilterForm.find(`input[type="checkbox"][name="${location}"]`).prop('checked', true);
			});
		} catch (e) {}
	};

	const checkApprentices = () => {
		if (!$apprenticeFilterForm.length) {
			return;
		}

		try {
			window.Cookies.get('apprenticeFilter').split(',').forEach((apprentice) => {
				$apprenticeFilterForm.find(`input[type="checkbox"][name="${apprentice}"]`).prop('checked', true);
			});
		} catch (e) {}
	};

	checkLocations();
	checkApprentices();

	window.saga.sortData();
	window.saga.filterApprentices();
	window.saga.filterLocations();

	window.addEventListener('popstate', () => {
		checkLocations();
		checkApprentices();
		window.saga.sortData();
		window.saga.filterApprentices();
		window.saga.filterLocations();
	});

	$('.sortable-links a').click(function(e) {
		e.preventDefault();
		window.history.replaceState(null, '', $(this).attr('href'));
		window.saga.sortData();
	});

	$apprenticeFilterForm.find('input[type="checkbox"]').on('change', window.saga.filterApprentices);
	$locationFilterForm.find('input[type="checkbox"]').on('change', window.saga.filterLocations);
}(window));