88 lines
2.4 KiB
Svelte
88 lines
2.4 KiB
Svelte
<script>
|
||
import { onMount } from 'svelte';
|
||
import { useTinyRouter } from 'svelte-tiny-router';
|
||
|
||
import { api } from '../../urls.svelte.js';
|
||
import { t } from '../../translations.svelte.js';
|
||
import { user } from '../../user.svelte.js';
|
||
|
||
import List from './List.svelte';
|
||
|
||
let authors = $state({});
|
||
let error = $state(null);
|
||
let loader = {
|
||
offset : 0,
|
||
limit : 20,
|
||
active : true
|
||
}
|
||
let note = $state({source:null,rendered:null});
|
||
let notes = $state(null);
|
||
let {
|
||
module = null,
|
||
entity_id = null
|
||
} = $props();
|
||
|
||
|
||
|
||
|
||
async function loadNotes(){
|
||
const url = api(`notes?offset=${loader.offset}&limit=${loader.limit}`);
|
||
|
||
const resp = await fetch(url,{credentials:'include'});
|
||
if (resp.ok){
|
||
const data = await resp.json();
|
||
if (!notes) notes = [];
|
||
notes.push(...Object.values(data.notes).sort((a, b) => b.id - a.id));
|
||
authors = {...authors, ...data.authors};
|
||
loader.offset += loader.limit;
|
||
loader.active = false;
|
||
error = null;
|
||
if (Object.keys(data.notes).length) onscroll(null); // when notes were received, check whether they fill up the page
|
||
|
||
} else {
|
||
error = await resp.text();
|
||
}
|
||
}
|
||
|
||
async function saveNote(){
|
||
const url = api(`notes/${module}/${entity_id}`);
|
||
const resp = await fetch(url,{
|
||
credentials : 'include',
|
||
method : 'POST',
|
||
body : note.source
|
||
});
|
||
if (resp.ok){
|
||
let newNote = await resp.json();
|
||
authors[user.id] = user;
|
||
notes[newNote.id] = newNote;
|
||
note = {source:'',rendered:''};
|
||
error = null;
|
||
return true;
|
||
} else {
|
||
error = await resp.text();
|
||
return false;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
function onscroll(ev){
|
||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight && !loader.active) {
|
||
loader.active = true;
|
||
loadNotes();
|
||
}
|
||
}
|
||
|
||
loadNotes(loadNotes)
|
||
</script>
|
||
|
||
<svelte:head>
|
||
<title>Umbrella – {t('notes')}</title>
|
||
</svelte:head>
|
||
|
||
<svelte:window {onscroll} />
|
||
{#if error}
|
||
<span class="error">{error}</span>
|
||
{/if}
|
||
<List {notes} />
|