Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

ui: loading indicator for plausible buttons

Browse Source
This commit is contained in:
Andras Bacsai 2022-08-10 12:50:38 +00:00
parent 9211a79b21
commit 6b1bea2195
1 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
apps/ui/src/routes/services/[id]/_Services/_Services.svelte
View File

@ -33,8 +33,11 @@
!$appSession.isAdmin || $status.service.isRunning || $status.service.initialLoading; !$appSession.isAdmin || $status.service.isRunning || $status.service.initialLoading;
let forceSave = false; let forceSave = false;
let loading = false; let loading = {
let loadingVerification = false; save: false,
verification: false,
cleanup: false
}
let dualCerts = service.dualCerts; let dualCerts = service.dualCerts;
let nonWWWDomain = service.fqdn && getDomain(service.fqdn).replace(/^www\./, ''); let nonWWWDomain = service.fqdn && getDomain(service.fqdn).replace(/^www\./, '');
@ -58,8 +61,8 @@
} }
async function handleSubmit() { async function handleSubmit() {
if (loading) return; if (loading.save) return;
loading = true; loading.save = true;
try { try {
await post(`/services/${id}/check`, { await post(`/services/${id}/check`, {
fqdn: service.fqdn, fqdn: service.fqdn,
@ -94,11 +97,11 @@
} }
return errorNotification(error); return errorNotification(error);
} finally { } finally {
loading = false; loading.save = false;
} }
} }
async function setEmailsToVerified() { async function setEmailsToVerified() {
loadingVerification = true; loading.verification = true;
try { try {
await post(`/services/${id}/${service.type}/activate`, { id: service.id }); await post(`/services/${id}/${service.type}/activate`, { id: service.id });
return addToast({ return addToast({
@ -108,7 +111,7 @@
} catch (error) { } catch (error) {
return errorNotification(error); return errorNotification(error);
} finally { } finally {
loadingVerification = false; loading.verification = false;
} }
} }
async function changeSettings(name: any) { async function changeSettings(name: any) {
@ -126,6 +129,7 @@
} }
} }
async function cleanupLogs() { async function cleanupLogs() {
loading.cleanup = true;
try { try {
await post(`/services/${id}/${service.type}/cleanup`, { id: service.id }); await post(`/services/${id}/${service.type}/cleanup`, { id: service.id });
return addToast({ return addToast({
@ -134,7 +138,9 @@
}); });
} catch (error) { } catch (error) {
return errorNotification(error); return errorNotification(error);
} } finally {
loading.cleanup = false;
}
} }
onMount(async () => { onMount(async () => {
if (browser && window.location.hostname === 'demo.coolify.io' && !service.fqdn) { if (browser && window.location.hostname === 'demo.coolify.io' && !service.fqdn) {
@ -170,10 +176,10 @@
class="btn btn-sm" class="btn btn-sm"
class:bg-orange-600={forceSave} class:bg-orange-600={forceSave}
class:hover:bg-orange-400={forceSave} class:hover:bg-orange-400={forceSave}
class:loading={loading} class:loading={loading.save}
class:bg-services={!loading} class:bg-services={!loading.save}
disabled={loading} disabled={loading.save}
>{loading >{loading.save
? $t('forms.save') ? $t('forms.save')
: forceSave : forceSave
? $t('forms.confirm_continue') ? $t('forms.confirm_continue')
@ -181,14 +187,21 @@
> >
{/if} {/if}
{#if service.type === 'plausibleanalytics' && $status.service.isRunning} {#if service.type === 'plausibleanalytics' && $status.service.isRunning}
<button class="btn btn-sm" on:click|preventDefault={setEmailsToVerified} disabled={loadingVerification} <button
>{loadingVerification class="btn btn-sm"
on:click|preventDefault={setEmailsToVerified}
disabled={loading.verification}
class:loading={loading.verification}
>{loading.verification
? $t('forms.verifying') ? $t('forms.verifying')
: $t('forms.verify_emails_without_smtp')}</button : $t('forms.verify_emails_without_smtp')}</button
> >
<button class="btn btn-sm" on:click|preventDefault={cleanupLogs} <button
>Cleanup Unnecessary Database Logs</button class="btn btn-sm"
> on:click|preventDefault={cleanupLogs}
disabled={loading.cleanup}
class:loading={loading.cleanup}>Cleanup Unnecessary Database Logs</button
>
{/if} {/if}
</div> </div>