Rewrite admin.js with Alpine component

public/css/mango.css

@@ -31,14 +31,6 @@
     cursor: pointer;
 }
 
-.uk-list li:not(.nopointer) {
-    cursor: pointer;
-}
-
-#scan-status {
-    cursor: auto;
-}
-
 .reader-bg {
     background-color: black;
 }

public/js/admin.js

@@ -1,68 +1,55 @@
-$(() => {
+const component = () => {
+	return {
+		progress: 1.0,
+		generating: false,
+		scanning: false,
+		scanTitles: 0,
+		scanMs: -1,
+		themeSetting: '',
+
+		init() {
+			this.getProgress();
+			setInterval(() => {
+				this.getProgress();
+			}, 5000);
+
 			const setting = loadThemeSetting();
-	$('#theme-select').val(capitalize(setting));
+			this.themeSetting = setting.charAt(0).toUpperCase() + setting.slice(1);
-	$('#theme-select').change((e) => {
+		},
-		const newSetting = $(e.currentTarget).val().toLowerCase();
+		themeChanged(event) {
+			const newSetting = $(event.currentTarget).val().toLowerCase();
 			saveThemeSetting(newSetting);
 			setTheme();
-	});
+		},
-
+		scan() {
-	getProgress();
+			if (this.scanning) return;
-	setInterval(getProgress, 5000);
+			this.scanning = true;
-});
+			this.scanMs = -1;
-
+			this.scanTitles = 0;
-/**
- * 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);
-};
-
-/**
- * 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`)
-		.then(getProgress);
-};
-
-/**
- * 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);
+					this.scanMs = data.milliseconds;
-			setProp('scanTitles', data.titles);
+					this.scanTitles = data.titles;
 				})
 				.always(() => {
-			setProp('scanning', false);
+					this.scanning = false;
 				});
-}
+		},
+		generateThumbnails() {
+			if (this.generating) return;
+			this.generating = true;
+			this.progress = 0.0;
+			$.post(`${base_url}api/admin/generate_thumbnails`)
+				.then(() => {
+					this.getProgress()
+				});
+		},
+		getProgress() {
+			$.get(`${base_url}api/admin/thumbnail_progress`)
+				.then(data => {
+					this.progress = data.progress;
+					this.generating = data.progress > 0;
+				});
+		},
+	};
+};

src/views/admin.html.ecr

@@ -1,21 +1,25 @@
-<ul class="uk-list uk-list-large uk-list-divider" id="root" x-data="{progress : 1.0, generating : false, scanTitles: 0, scanMs: -1, scanning : false}">
+<ul class="uk-list uk-list-large uk-list-divider" x-data="component()" x-init="init()">
-  <li @click="location.href = '<%= base_url %>admin/user'">User Managerment</li>
+  <li><a class="uk-link-reset" href="<%= base_url %>admin/user">User Management</a></li>
-  <li :class="{'nopointer' : scanning}" @click="scan()">
+  <li>
+    <a class="uk-link-reset" @click="scan()">
       <span :style="`${scanning ? 'color:grey' : ''}`">Scan Library Files</span>
       <div class="uk-align-right">
         <div uk-spinner x-show="scanning"></div>
         <span x-show="!scanning && scanMs > 0" x-text="`Scan ${scanTitles} titles in ${scanMs}ms`"></span>
       </div>
+    </a>
   </li>
-  <li :class="{'nopointer' : generating}" @click="generateThumbnails()">
+  <li>
+    <a class="uk-link-reset" @click="generateThumbnails()">
       <span :style="`${generating ? 'color:grey' : ''}`">Generate Thumbnails</span>
       <div class="uk-align-right">
         <span x-show="generating && progress > 0" x-text="`${(progress * 100).toFixed(2)}%`"></span>
       </div>
+    </a>
   </li>
-  <li class="nopointer">
+  <li>
     <span>Theme</span>
-    <select id="theme-select" class="uk-select uk-align-right uk-width-1-3@m uk-width-1-2">
+    <select id="theme-select" class="uk-select uk-align-right uk-width-1-3@m uk-width-1-2" :val="themeSetting" @change="themeChanged($event)">
       <option>Dark</option>
       <option>Light</option>
       <option>System</option>