romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2024-12-01 13:20:54 +00:00
Code Issues Releases Activity

Create new host button

Browse Source
This commit is contained in:
Romein van Buren 2023-01-19 08:36:05 +01:00
parent dbceac7edf
commit 9cecad0c3a
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
1 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/organisms/addressbar/hostmodal.svelte
View File

@ -14,6 +14,7 @@
let error = ''; let error = '';
let createHostModalOpen = false; let createHostModalOpen = false;
$: host = hosts?.[activeHostKey]; $: host = hosts?.[activeHostKey];
$: hostCount = Object.keys(hosts).length;
$: if (!modalOpen) { $: if (!modalOpen) {
error = ''; error = '';
@ -47,13 +48,20 @@
onMount(getHosts); onMount(getHosts);
</script> </script>
<Modal bind:show={modalOpen} title={Object.keys(hosts).length && 'Hosts'} width="60vw"> <Modal bind:show={modalOpen} title={hostCount && 'Hosts'} width="60vw">
{#if error} <div class="status">
<p class="error"> <p class:error>
<strong>Oops!</strong> {error} {#if error}
<strong>Oops!</strong> {error}
{:else}
{hostCount} host{hostCount === 1 ? '' : 's'}
{/if}
</p> </p>
{/if} <button class="btn" on:click={() => createHostModalOpen = true}>
{#if Object.keys(hosts).length} Create new host
</button>
</div>
{#if hostCount}
<ul class="hosts"> <ul class="hosts">
{#each Object.entries(hosts) as [hostKey, host]} {#each Object.entries(hosts) as [hostKey, host]}
<li> <li>
@ -85,6 +93,11 @@
gap: 0.5rem; gap: 0.5rem;
} }
.status {
display: flex;
justify-content: space-between;
align-items: center;
}
.error { .error {
color: #c00; color: #c00;
} }