mirror of
https://github.com/comatory/fb2iCal
synced 2025-06-05 22:09:25 +02:00
feature: create Svelte component for showing status UI
This commit is contained in:
@@ -10,10 +10,15 @@ const getEventHTML = async (url) => {
|
||||
formData.set('url', url)
|
||||
|
||||
try {
|
||||
const request = new Request({ id: uuidv4() })
|
||||
const request = new Request({
|
||||
id: uuidv4(),
|
||||
url,
|
||||
})
|
||||
requestStore.set(request)
|
||||
const response = await postURL(formData)
|
||||
const text = await response.text()
|
||||
|
||||
requestStore.set(null)
|
||||
return text
|
||||
} catch (error) {
|
||||
requestStore.update((prevRequest) => {
|
||||
|
@@ -1,7 +1,8 @@
|
||||
<script>
|
||||
import Input from './Input.svelte'
|
||||
import TrackingPanel from './TrackingPanel.svelte'
|
||||
import EventList from './EventList.svelte'
|
||||
import Status from './Status.svelte'
|
||||
import TrackingPanel from './TrackingPanel.svelte'
|
||||
|
||||
import { configStore, eventStore } from '../stores'
|
||||
|
||||
@@ -13,6 +14,7 @@
|
||||
<TrackingPanel />
|
||||
{/if}
|
||||
|
||||
<Status />
|
||||
<Input />
|
||||
{#if showEventList}
|
||||
<EventList />
|
||||
|
34
lib/frontend/components/Status.svelte
Normal file
34
lib/frontend/components/Status.svelte
Normal file
@@ -0,0 +1,34 @@
|
||||
<style>
|
||||
#status {
|
||||
flex: 1;
|
||||
height: 1rem;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
min-width: 200px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { requestStore } from '../stores'
|
||||
|
||||
$: error = ($requestStore && $requestStore.error) ? $requestStore.error : null
|
||||
$: pendingRequest = Boolean($requestStore && !$requestStore.error)
|
||||
</script>
|
||||
|
||||
<div id='status'>
|
||||
{#if error}
|
||||
<div class='status-item'>
|
||||
{error.toString()}
|
||||
</div>
|
||||
{/if}
|
||||
{#if pendingRequest}
|
||||
<div class='status-item'>
|
||||
Fetching event {$requestStore.url}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
@@ -1,9 +1,11 @@
|
||||
export default class Request {
|
||||
constructor({
|
||||
id,
|
||||
url,
|
||||
error,
|
||||
}) {
|
||||
this.id = id
|
||||
this.url = url
|
||||
this.error = error
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user