Backups/Mango
1
0
Fork 0
mirror of https://github.com/hkalexling/Mango.git synced 2025-08-02 19:05:32 -04:00
Code Issues Projects Releases Wiki Activity

Rewrite admin.js with Alpine component

Browse Source
This commit is contained in:
Alex Ling 2021-01-01 09:04:53 +00:00
parent 0fbc11386e
commit f18ee4284f
3 changed files with 71 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/css/mango.css
View File

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

117
public/js/admin.js
View File

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

34
src/views/admin.html.ecr
View File

@ -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>
<span :style="`${scanning ? 'color:grey' : ''}`">Scan Library Files</span> <a class="uk-link-reset" @click="scan()">
<div class="uk-align-right"> <span :style="`${scanning ? 'color:grey' : ''}`">Scan Library Files</span>
<div uk-spinner x-show="scanning"></div> <div class="uk-align-right">
<span x-show="!scanning && scanMs > 0" x-text="`Scan ${scanTitles} titles in ${scanMs}ms`"></span> <div uk-spinner x-show="scanning"></div>
</div> <span x-show="!scanning && scanMs > 0" x-text="`Scan ${scanTitles} titles in ${scanMs}ms`"></span>
</div>
</a>
</li> </li>
<li :class="{'nopointer' : generating}" @click="generateThumbnails()"> <li>
<span :style="`${generating ? 'color:grey' : ''}`">Generate Thumbnails</span> <a class="uk-link-reset" @click="generateThumbnails()">
<div class="uk-align-right"> <span :style="`${generating ? 'color:grey' : ''}`">Generate Thumbnails</span>
<span x-show="generating && progress > 0" x-text="`${(progress * 100).toFixed(2)}%`"></span> <div class="uk-align-right">
</div> <span x-show="generating && progress > 0" x-text="`${(progress * 100).toFixed(2)}%`"></span>
</div>
</a>
</li> </li>
<li class="nopointer"> <li>
<span>Theme</span> <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>Dark</option>
<option>Light</option> <option>Light</option>
<option>System</option> <option>System</option>