view.js

class View {
	constructor() {
		this.elemById = document.querySelectorAll("[id]").values().reduce((acc, elem) => ({ ...acc, [elem.id]: elem}), {});
		this.resetState();
		this.setupLogReader();
		this.setupEventHandlers();
	}

	resetState() {
		this.logLines = [];

		this.elemById['issues'].replaceChildren();
		this.elemById['mod-table'].replaceChildren();
		this.elemById['file-content'].innerText = '';

		this.elemById['mods-details'].open = false;
		this.elemById['issues-details'].open = false;
		this.elemById['check-for-updates'].disabled = false;
		this.elemById['check-for-updates'].hidden = true;
		this.elemById['check-for-updates'].value = "Check for updates";
		this.elemById['show-up-to-date'].hidden = true;
		this.elemById['label-show-up-to-date'].hidden = true;
		this.elemById['scroll-to-critical-error'].hidden = true;
	}

	addIssue(issueText) {
		const issuesList = this.elemById['issues'];

		const issue = document.createElement('li');
		issue.textContent = issueText;
		issuesList.appendChild(issue);
		this.elemById['issues-details'].open = true;
	}

	displayLog(logLines) {
		const contentElem = this.elemById['file-content'];

		for (const line of logLines) {
			const elem = document.createElement('pre');
			elem.classList.add('logline');
			elem.dataset.loglevel = line.loglevel;

			if (line.criticalError) {
				elem.classList.add('critical-error');
				this.elemById['scroll-to-critical-error'].hidden = false;
			}

			elem.textContent = line.text;
			contentElem.appendChild(elem);
		}

		this.filterLog(-this.elemById['loglevel-slider'].value);
	}

	displayModsTable(modsVersions) {
		const table = this.elemById['mod-table'];
		table.replaceChildren();

		for (const [mod, versions] of Object.entries(modsVersions)) {
			const row = table.insertRow(-1);
			const modNameCell = row.insertCell(-1);
			modNameCell.textContent = mod;

			const loadedVersionCell = row.insertCell(-1);
			const loadedVersion = versions['loadedVersion'];
			loadedVersionCell.textContent = loadedVersion;

			const latestVersionCell = row.insertCell(-1);
			const latestVersion = versions['latestVersion'] || 'N/A';
			latestVersionCell.textContent = latestVersion;

			if (latestVersion != 'N/A' && loadedVersion != latestVersion) {
				latestVersionCell.classList.add('outdated');
			} else {
				latestVersionCell.classList.add('up-to-date');
			}
		}

		this.elemById['mods-details'].open = true;
		this.elemById['check-for-updates'].hidden = false;
	}

	toggleUpToDateModsVisibility(displayUpToDateMods) {
		for (const elem of document.getElementsByClassName('up-to-date')) {
			elem.parentElement.hidden = !displayUpToDateMods;
		}
	}

	updateUpToDateModsControls(componentsOutOfDate) {
		this.elemById['show-up-to-date'].hidden = false;
		this.elemById['label-show-up-to-date'].hidden = false;
		if (!componentsOutOfDate) {
			this.elemById['show-up-to-date'].checked = true;
			this.elemById['show-up-to-date'].hidden = true;
			this.elemById['label-show-up-to-date'].hidden = true;
			this.toggleUpToDateModsVisibility(true);
		} else {
			this.toggleUpToDateModsVisibility(false);
		}
	}

	filterLog(threshold) {
		for (const elem of document.getElementsByClassName('logline')) {
			if (elem.dataset.loglevel >= threshold) {
				elem.classList.remove('invisible');
			} else {
				elem.classList.add('invisible');
			}
		}
	}

	setupLogReader() {
		this.logReader = new FileReader();
		this.logReader.onload = (event) => {
			this.resetState();
			const fileContents = event.target.result;
			this.handleFileLoaded(fileContents);
		};
	}

	setupEventHandlers() {
		this.elemById['loglevel-slider'].addEventListener('input', (event) => {
			const threshold = -event.target.value;
			this.filterLog(threshold);
		});

		document.querySelectorAll('option').forEach(elem => elem.addEventListener('click', (event) => {
			const threshold = event.target.value;
			this.elemById['loglevel-slider'].value = -threshold;
			this.filterLog(threshold);
		}));

		// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
		document.querySelector('html').addEventListener('dragover', (event) => {
			// Prevent default behavior (Prevent file from being opened)
			event.preventDefault();
		});

		this.elemById['show-up-to-date'].addEventListener('input', (event) => {
			const showUpToDateMods = event.target.checked;
			this.toggleUpToDateModsVisibility(showUpToDateMods);
		});

		this.elemById['scroll-to-critical-error'].addEventListener('click', (event) => {
			const threshold = -1;
			this.elemById['loglevel-slider'].value = -threshold;
			this.filterLog(threshold); // show whole log
			document.querySelector('.critical-error').scrollIntoView();
		});

		// https://stackoverflow.com/questions/3582671/how-to-open-a-local-disk-file-with-javascript/26298948
		this.elemById['file-input'].addEventListener('change', (event) => {
			const file = this.elemById['file-input'].files[0]; // assume one file
			this.logReader.readAsText(file);
		});

		// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
		document.querySelector('html').addEventListener('drop', (event) => {
			event.preventDefault();

			if (event.dataTransfer.items) {
				for (const item of event.dataTransfer.items) {
					if (item.kind === "file") {
						const file = item.getAsFile();
						this.logReader.readAsText(file);
						break; // handle only one file
					}
				}
			} else {
				for (const file of event.dataTransfer.files) {
					this.logReader.readAsText(file);
					break; // handle only one file
				}
			}
		});

		this.elemById['check-for-updates'].addEventListener('click', async (event) => {
			this.elemById['check-for-updates'].disabled = true;
			this.elemById['check-for-updates'].value = "Checking...";
			await this.handleCheckForUpdateClicked();
			this.elemById['check-for-updates'].value = "Updates checking done!";
		});
	}
}