-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* avoid race condition by overwriting the cache rather than removing and adding in during a refresh * move homeView into a home folder * refactor home view and pull the server list out into it's own component * move server into it's own component outside the server list * display a skeleton when servers are loading * show loading items status when the remote projects are still loading but the server status has loaded
- Loading branch information
Showing
5 changed files
with
217 additions
and
152 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| <script lang="ts"> | ||
| import type {ILexboxServer, IServerStatus} from '$lib/dotnet-types'; | ||
| import type {Project} from '$lib/services/projects-service'; | ||
| import {createEventDispatcher} from 'svelte'; | ||
| import {mdiBookArrowDownOutline, mdiBookSyncOutline, mdiCloud, mdiRefresh} from '@mdi/js'; | ||
| import LoginButton from '$lib/auth/LoginButton.svelte'; | ||
| import {Button, Icon, ListItem, Settings} from 'svelte-ux'; | ||
| import AnchorListItem from '$lib/utils/AnchorListItem.svelte'; | ||
| import {useProjectsService} from '$lib/services/service-provider'; | ||
| const projectsService = useProjectsService(); | ||
| const dispatch = createEventDispatcher<{ | ||
| refreshProjects: void, | ||
| refreshAll: void, | ||
| }>(); | ||
| export let status: IServerStatus | undefined; | ||
| $: server = status?.server; | ||
| export let projects: Project[]; | ||
| export let localProjects: Project[]; | ||
| export let loading: boolean; | ||
| let downloading = ''; | ||
| async function downloadCrdtProject(project: Project, server: ILexboxServer | undefined) { | ||
| if (!server) throw new Error('Server is undefined'); | ||
| downloading = project.name; | ||
| if (project.id == null) throw new Error('Project id is null'); | ||
| try { | ||
| await projectsService.downloadProject(project.id, project.name, server); | ||
| dispatch('refreshAll'); | ||
| } finally { | ||
| downloading = ''; | ||
| } | ||
| } | ||
| function matchesProject(projects: Project[], project: Project): Project | undefined { | ||
| if (project.id) { | ||
| return projects.find(p => p.id == project.id && p.server?.id == project.server?.id); | ||
| } | ||
| return undefined; | ||
| } | ||
| </script> | ||
| <div> | ||
| <div class="flex flex-row mb-2 items-end mr-2 md:mr-0"> | ||
| <p class="sub-title !my-0"> | ||
| {#if server} | ||
| {server.displayName} Server | ||
| {:else} | ||
| <div class="h-2 w-28 bg-surface-content/50 rounded-full animate-pulse"></div> | ||
| {/if} | ||
| </p> | ||
| <div class="flex-grow"></div> | ||
| {#if status?.loggedIn} | ||
| <Button icon={mdiRefresh} | ||
| title="Refresh Projects" | ||
| disabled={loading} | ||
| on:click={() => dispatch('refreshProjects')}/> | ||
| <LoginButton {status} on:status={() => dispatch('refreshAll')}/> | ||
| {/if} | ||
| </div> | ||
| <div> | ||
| {#if !status || loading} | ||
| <!--override the defaults from App.svelte--> | ||
| <Settings components={{ListItem: {classes: {root: 'animate-pulse'}}}}> | ||
| <ListItem icon={mdiCloud} classes={{icon: 'text-neutral-50/50'}}> | ||
| <div slot="title" class="h-4 bg-neutral-50/50 rounded-full w-32"> | ||
| </div> | ||
| <div slot="actions" class="pointer-events-none"> | ||
| <div class="h-4 my-3 bg-neutral-50/50 rounded-full w-20"></div> | ||
| </div> | ||
| </ListItem> | ||
| </Settings> | ||
| {:else if !projects.length} | ||
| <p class="text-surface-content/50 text-center elevation-1 md:rounded p-4"> | ||
| {#if status.loggedIn} | ||
| No projects | ||
| {:else} | ||
| <LoginButton {status} on:status={() => dispatch('refreshAll')}/> | ||
| {/if} | ||
| </p> | ||
| {:else} | ||
| {#each projects as project} | ||
| {@const localProject = matchesProject(localProjects, project)} | ||
| {#if localProject?.crdt} | ||
| <AnchorListItem href={`/project/${project.name}`}> | ||
| <ListItem icon={mdiCloud} | ||
| title={project.name} | ||
| loading={downloading === project.name}> | ||
| <div slot="actions" class="pointer-events-none"> | ||
| <Button disabled icon={mdiBookSyncOutline} class="p-2"> | ||
| Synced | ||
| </Button> | ||
| </div> | ||
| </ListItem> | ||
| </AnchorListItem> | ||
| {:else} | ||
| <ListItem icon={mdiCloud} | ||
| title={project.name} | ||
| on:click={() => void downloadCrdtProject(project, server)} | ||
| loading={downloading === project.name}> | ||
| <div slot="actions" class="pointer-events-none"> | ||
| <Button icon={mdiBookArrowDownOutline} class="p-2"> | ||
| Download | ||
| </Button> | ||
| </div> | ||
| </ListItem> | ||
| {/if} | ||
| {/each} | ||
| {/if} | ||
| </div> | ||
| </div> |
Oops, something went wrong.