Umbrella/frontend/src/routes/message/Settings.svelte

<script>
	import { onMount } from 'svelte';
	import { useTinyRouter } from 'svelte-tiny-router';
	import { t } from '../../translations.svelte';
	import { api, get, patch } from '../../urls.svelte';
	import { error, warn, yikes } from '../../warn.svelte';

	const router = useTinyRouter();
	let instant = false;
	let silent = false;
	let at8 = false;
	let at9 = false;
	let at10 = false;
	let at11 = false;
	let at12 = false;
	let at13 = false;
	let at14 = true;
	let at15 = false;
	let at16 = false;
	let at17 = false;
	let at18 = false;
	let at19 = false;
	let at20 = false;
	let at21 = false;
	let at22 = false;

	function delivery(mode){
		if (mode){
			silent = false;
		} else {
			instant = false;
		}
		at8 = at9 = at10 = at11 = at12 = at13 = at14 = at15 = at16 = at17 = at18 = at19 = at20 = at21 = at22 = false;
		saveTimes();
	}

	async function loadSettings(){
		const url = api('message/settings');
		const res = await get(url);
		if (res.ok){
			yikes();
			const json = await res.json();
			if (json.hours){
				at8 = json.hours.includes(8);
				at9 = json.hours.includes(9);
				at10 = json.hours.includes(10);
				at11 = json.hours.includes(11);
				at12 = json.hours.includes(12);
				at13 = json.hours.includes(13);
				at14 = json.hours.includes(14);
				at15 = json.hours.includes(15);
				at16 = json.hours.includes(16);
				at17 = json.hours.includes(17);
				at18 = json.hours.includes(18);
				at19 = json.hours.includes(19);
				at20 = json.hours.includes(20);
				at21 = json.hours.includes(21);
				at22 = json.hours.includes(22);
				instant = false;
				silent = !(at8 || at9 || at10 || at11 || at12 || at13 || at14 || at15 || at16 || at17 || at18 || at19 || at20 || at21 || at22);
			} else {
				instant = json.instantly;
				silent = !instant;
				at8 = at9 = at10 = at11 = at12 = at13 = at14 = at15 = at16 = at17 = at18 = at19 = at20 = at21 = at22 = false;
			}
		} else {
			error(res);
		}
	}

	async function saveTimes(){
		let data = {
			instantly : instant,
			hours : []
		}
		if (at8) data.hours.push(8);
		if (at9) data.hours.push(9);
		if (at10) data.hours.push(10);
		if (at11) data.hours.push(11);
		if (at12) data.hours.push(12);
		if (at13) data.hours.push(13);
		if (at14) data.hours.push(14);
		if (at15) data.hours.push(15);
		if (at16) data.hours.push(16);
		if (at17) data.hours.push(17);
		if (at18) data.hours.push(18);
		if (at19) data.hours.push(19);
		if (at20) data.hours.push(20);
		if (at21) data.hours.push(21);
		if (at22) data.hours.push(22);
		let url = api('message/settings');
		let res = await patch(url,data);
		if (res.ok){
			yikes();
			warn(t('saved'));
			setTimeout(yikes,2500);
		} else {
			error(res);
		}
	}
	
	function selectTime(ev){
		instant = false;
		silent = !(at8 || at9 || at10 || at11 || at12 || at13 || at14 || at15 || at16 || at17 || at18 || at19 || at20 || at21 || at22);
		saveTimes();
	}

	function user_profile(ev){
		router.navigate('/user');
	}

	onMount(loadSettings)
</script>

<fieldset class="message settings">
	<legend>{t('notification settings')} <button onclick={user_profile}>{t('user profile')}</button></legend>
	<p>{t('When shall messages be delivered?')}</p>
	<table>
		<tbody>
			<tr>
				<td colspan="3">
					<label>
						<input type="checkbox" onchange={ev => delivery(true)} bind:checked={instant} />{t('instantly')}
					</label>
				</td>
			</tr>
			<tr>
				<td>
					{t('collect messages and send them at')}
				</td>
				<td>
					⎧<br/>
					⎪<br/>
					⎪<br/>
					⎪<br/>
					⎪<br/>
					⎪<br/>
					⎪<br/>
					⎪<br/>
					⎨<br/>
					⎪<br/>
					⎪<br/>
					⎪<br/>
					⎪<br/>
					⎪<br/>
					⎪<br/>
					⎪<br/>
					⎩
				</td>
				<td>
					<label>
						<input type="checkbox"  onchange={selectTime} bind:checked={at8} />{t('8:00 am')}
					</label>
					<label>
						<input type="checkbox" onchange={selectTime}  bind:checked={at9} />{t('9:00 am')}
					</label>
					<label>
						<input type="checkbox"  onchange={selectTime} bind:checked={at10} />{t('10:00 am')}
					</label>
					<label>
						<input type="checkbox"  onchange={selectTime} bind:checked={at11} />{t('11:00 am')}
					</label>
					<label>
						<input type="checkbox"  onchange={selectTime} bind:checked={at12} />{t('noon')}
					</label>
					<label>
						<input type="checkbox"  onchange={selectTime} bind:checked={at13} />{t('1:00 pm')}
					</label>
					<label>
						<input type="checkbox"  onchange={selectTime} bind:checked={at14} />{t('2:00 pm')}
					</label>
					<label>
						<input type="checkbox"  onchange={selectTime} bind:checked={at15} />{t('3:00 pm')}
					</label>
					<label>
						<input type="checkbox"  onchange={selectTime} bind:checked={at16} />{t('4:00 pm')}
					</label>
					<label>
						<input type="checkbox"  onchange={selectTime} bind:checked={at17} />{t('5:00 pm')}
					</label>
					<label>
						<input type="checkbox"  onchange={selectTime} bind:checked={at18} />{t('6:00 pm')}
					</label>
					<label>
						<input type="checkbox"  onchange={selectTime} bind:checked={at19} />{t('7:00 pm')}
					</label>
					<label>
						<input type="checkbox"  onchange={selectTime} bind:checked={at20} />{t('8:00 pm')}
					</label>
					<label>
						<input type="checkbox"  onchange={selectTime} bind:checked={at21} />{t('9:00 pm')}
					</label>
					<label>
						<input type="checkbox"  onchange={selectTime} bind:checked={at22} />{t('10:00 pm')}
					</label>
				</td>
			</tr>
			<tr>
				<td colspan="3">
					<label>
						<input type="checkbox"  onchange={ev => delivery(false)} bind:checked={silent} />{t('i don`t want to receive email notifications!')}
					</label>
				</td>
			</tr>
		</tbody>
	</table>
</fieldset>