Trigger thumbnail generation from the admin page

public/js/admin.js

@@ -1,40 +1,88 @@
-let scanning = false;
-
-const scan = () => {
-	scanning = true;
-	$('#scan-status > div').removeAttr('hidden');
-	$('#scan-status > span').attr('hidden', '');
-	const color = $('#scan').css('color');
-	$('#scan').css('color', 'gray');
-	$.post(base_url + 'api/admin/scan', (data) => {
-		const ms = data.milliseconds;
-		const titles = data.titles;
-		$('#scan-status > span').text('Scanned ' + titles + ' titles in ' + ms + 'ms');
-		$('#scan-status > span').removeAttr('hidden');
-		$('#scan').css('color', color);
-		$('#scan-status > div').attr('hidden', '');
-		scanning = false;
-	});
-}
-
-String.prototype.capitalize = function() {
-	return this.charAt(0).toUpperCase() + this.slice(1);
-}
-
 $(() => {
-	$('li').click((e) => {
-		const url = $(e.currentTarget).attr('data-url');
-		if (url) {
-			$(location).attr('href', url);
-		}
-	});
-
 	const setting = loadThemeSetting();
-	$('#theme-select').val(setting.capitalize());
-
+	$('#theme-select').val(capitalize(setting));
 	$('#theme-select').change((e) => {
 		const newSetting = $(e.currentTarget).val().toLowerCase();
 		saveThemeSetting(newSetting);
 		setTheme();
 	});
+
+	setInterval(getProgress, 5000);
 });
+
+/**
+ * Capitalize String
+ *
+ * @function capitalize
+ * @param {string} str - The string to be capitalized
+ * @return {string} The capitalized string
+ */
+const capitalize = (str) => {
+	return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+/**
+ * Set an alpine.js property
+ *
+ * @function setProp
+ * @param {string} key - Key of the data property
+ * @param {*} prop - The data property
+ */
+const setProp = (key, prop) => {
+	$('#root').get(0).__x.$data[key] = prop;
+};
+
+/**
+ * Get an alpine.js property
+ *
+ * @function getProp
+ * @param {string} key - Key of the data property
+ * @return {*} The data property
+ */
+const getProp = (key) => {
+	return $('#root').get(0).__x.$data[key];
+};
+
+/**
+ * Get the thumbnail generation progress from the API
+ *
+ * @function getProgress
+ */
+const getProgress = () => {
+	$.get(`${base_url}api/admin/thumbnail_progress`)
+		.then(data => {
+			setProp('progress', data.progress);
+			const generating = data.progress > 0
+			setProp('generating', generating);
+		});
+};
+
+/**
+ * Trigger the thumbnail generation
+ *
+ * @function generateThumbnails
+ */
+const generateThumbnails = () => {
+	setProp('generating', true);
+	setProp('progress', 0.0);
+	$.post(`${base_url}api/admin/generate_thumbnails`);
+};
+
+/**
+ * Trigger the scan
+ *
+ * @function scan
+ */
+const scan = () => {
+	setProp('scanning', true);
+	setProp('scanMs', -1);
+	setProp('scanTitles', 0);
+	$.post(`${base_url}api/admin/scan`)
+		.then(data => {
+			setProp('scanMs', data.milliseconds);
+			setProp('scanTitles', data.titles);
+		})
+		.always(() => {
+			setProp('scanning', false);
+		});
+}