james/howfeed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added loading indicators on forms

Browse Source
This commit is contained in:
James Shiffer 2020-07-06 07:50:00 -07:00
parent b0bb02a9bd
commit a9d2b49456
No known key found for this signature in database
GPG Key ID: C0DB8774A1B3BA45
2 changed files with 46 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/routes/cms/create.svelte
View File

@ -18,6 +18,7 @@
const { session } = stores();
let editor, form, uploadForm;
let loading = false;
let title = '', category = '';
export let categories;
@ -64,18 +65,25 @@
let html = editor.getHtml(true);
let fd = new FormData(form);
fd.append('html', html);
const res = await fetch(`/cms/article`, {
method: 'POST',
headers: {
'Accept': 'application/json'
},
body: fd
});
const json = await res.json();
if (res.status === 200) {
goto(`/a/${json.slug}`);
} else {
alert(`Error ${res.status}: ${json.message}`);
loading = true;
try {
const res = await fetch(`/cms/article`, {
method: 'POST',
headers: {
'Accept': 'application/json'
},
body: fd
});
const json = await res.json();
if (res.status === 200) {
goto(`/a/${json.slug}`);
} else {
alert(`Error ${res.status}: ${json.message}`);
}
} catch (err) {
console.error(err);
} finally {
loading = false;
}
}
@ -164,4 +172,7 @@
</p>
</form>
<button on:click={submit}>Submit</button>
{#if loading}
<progress>Uploading...</progress>
{/if}
</div>

35
src/routes/me/avatar.svelte
View File

@ -15,23 +15,31 @@
import { goto, stores } from '@sapper/app';
const { session } = stores();
let loading = false;
let uploadForm;
async function upload()
{
let fd = new FormData(uploadForm);
const res = await fetch(`/me/avatar`, {
method: 'POST',
headers: {
'Accept': 'application/json'
},
body: fd
});
const json = await res.json();
if (res.status === 200) {
$session.user.avatar = json.filename;
} else {
alert(`Error ${res.status}: ${json.message}`);
loading = true;
try {
const res = await fetch(`/me/avatar`, {
method: 'POST',
headers: {
'Accept': 'application/json'
},
body: fd
});
const json = await res.json();
if (res.status === 200) {
$session.user.avatar = json.filename;
} else {
alert(`Error ${res.status}: ${json.message}`);
}
} catch (err) {
console.error(err);
} finally {
loading = false;
}
}
@ -64,6 +72,9 @@
Change your photo so you at least have a chance:
<input type="file" name="upload">
<button type="submit">Upload</button>
{#if loading}
<progress>Uploading...</progress>
{/if}
</p>
</form>
<p>Or better yet, erase your wretched face from this site entirely: <button on:click={del}>Reset Avatar</button></p>