improvement: disable input when request is pending

This commit is contained in:
Ondřej Synáček 2020-12-25 09:59:13 +01:00
parent 06c8a217e0
commit 7c831b76e2
4 changed files with 44 additions and 14 deletions

View File

@ -1,5 +1,5 @@
<script>
import Input from './Input.svelte'
import InputContainer from './InputContainer.svelte'
import EventList from './EventList.svelte'
import Status from './Status.svelte'
import TrackingPanel from './TrackingPanel.svelte'
@ -14,8 +14,7 @@
<TrackingPanel />
{/if}
<Status />
<Input />
<InputContainer />
{#if showEventList}
<EventList />
{/if}

View File

@ -19,6 +19,9 @@
import { createEvent } from '../actions'
import logger from '../services/logger'
export let error
export let pending
let value
const onChange = (e) => {
@ -38,6 +41,7 @@
id="url"
name="url"
bind:value={value}
disabled={pending}
placeholder="Paste / type FB event URL or event number..."
title="Please insert Facebook Event URL / Number"
/>
@ -45,6 +49,7 @@
id="submit"
type='submit'
value='Submit'
disabled={pending}
on:click={handleSubmit}
/>
</form>

View File

@ -0,0 +1,25 @@
<script>
import { parseStatusStore, requestStore, swStatusStore } from '../stores'
import Input from './Input.svelte'
import Status from './Status.svelte'
$: error = ($requestStore && $requestStore.error) ? $requestStore.error : null
$: pending = Boolean($requestStore && !$requestStore.error)
$: pendingRequest = $requestStore
$: status = $parseStatusStore
$: swStatus = $swStatusStore
</script>
<div class="input-container">
<Input
{pending}
{error}
/>
<Status
{error}
{pending}
{pendingRequest}
{status}
{swStatus}
/>
</div>

View File

@ -14,31 +14,32 @@
</style>
<script>
import { parseStatusStore, requestStore, swStatusStore } from '../stores'
$: error = ($requestStore && $requestStore.error) ? $requestStore.error : null
$: pendingRequest = Boolean($requestStore && !$requestStore.error)
export let error
export let pending
export let pendingRequest
export let status
export let swStatus
</script>
<div id='status'>
{#if error}
<div class='status-item'>
<div class='status-item status-item--error'>
{error.toString()}
</div>
{/if}
{#if pendingRequest}
{#if pending && pendingRequest}
<div class='status-item'>
Fetching event {$requestStore.url}
Fetching event {pendingRequest.url}
</div>
{/if}
{#if $parseStatusStore}
{#if status}
<div class='status-item'>
{$parseStatusStore}
{status}
</div>
{/if}
{#if $swStatusStore}
{#if swStatus}
<div class='status-item'>
{$swStatusStore}
{swStatus}
</div>
{/if}
</div>