Hosts and settings

frontend/src/organisms/addressbar/createhostmodal.svelte

@@ -0,0 +1,72 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import { AddHost } from '../../../wailsjs/go/app/App';
+  import Modal from '../../components/modal.svelte';
+
+  export let show = false;
+
+  const dispatch = createEventDispatcher('reload');
+  let form = {};
+  let error = '';
+  $: valid = validate(form);
+
+  $: if (show || !show) {
+    form = {};
+  }
+
+  function validate(form) {
+    return form.name && form.uri && true;
+  }
+
+  async function submit() {
+    if (!valid) {
+      return;
+    }
+
+    try {
+      await AddHost(JSON.stringify(form));
+      show = false;
+      dispatch('reload');
+    }
+    catch (e) {
+      error = e;
+    }
+  }
+</script>
+
+<Modal bind:show title="Create a new host">
+  <form on:submit|preventDefault={submit}>
+    <label class="field">
+      <span class="label">Label</span>
+      <input type="text" placeholder="mywebsite.com MongoDB" bind:value={form.name} />
+    </label>
+
+    <label class="field">
+      <span class="label">Connection string</span>
+      <input type="text" placeholder="mongodb://..." bind:value={form.uri} spellcheck="false" />
+    </label>
+
+    <div class="result">
+      <div>
+        {#if error}
+          <div class="error">{error}</div>
+        {/if}
+      </div>
+      <button class="btn" disabled={!valid} type="submit">Create</button>
+    </div>
+  </form>
+</Modal>
+
+<style>
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .result {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>

frontend/src/organisms/addressbar/hostmodal.svelte

@@ -1,44 +1,83 @@
 <script>
   import Modal from '../../components/modal.svelte';
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
   import Icon from '../../components/icon.svelte';
+  import { Hosts, RemoveHost } from '../../../wailsjs/go/app/App';
+  import Welcome from './welcome.svelte';
+  import CreateHostModal from './createhostmodal.svelte';
 
   export let hosts = {};
   export let activeHostKey = '';
   export let modalOpen = false;
 
   const dispatch = createEventDispatcher();
+  let error = '';
+  let createHostModalOpen = false;
   $: host = hosts?.[activeHostKey];
 
+  $: if (!modalOpen) {
+    error = '';
+  }
+
   function select(hostKey) {
     activeHostKey = hostKey;
     dispatch('select', hostKey);
   }
+
+  async function getHosts() {
+    try {
+      const h = await Hosts();
+      hosts = h || {};
+    }
+    catch (e) {
+      error = e;
+    }
+  }
+
+  async function removeHost(hostKey) {
+    try {
+      await RemoveHost(hostKey);
+      await getHosts();
+    }
+    catch (e) {
+      error = e;
+    }
+  }
+
+  onMount(getHosts);
 </script>
 
-<Modal bind:show={modalOpen} title="Hosts">
+<Modal bind:show={modalOpen} title={Object.keys(hosts).length && 'Hosts'} width="60vw">
+  {#if error}
+    <p class="error">
+      <strong>Oops!</strong> {error}
+    </p>
+  {/if}
   {#if Object.keys(hosts).length}
     <ul class="hosts">
       {#each Object.entries(hosts) as [hostKey, host]}
         <li>
           <div class="host">
-            <!-- <div class="name">{host.name}</div> -->
-            <button class="btn" on:click={() => select(hostKey)} title="Connect to {host.name}">
+            <button class="btn secondary" on:click={() => select(hostKey)} title="Connect to {host.name}">
               {host.name}
             </button>
-            <button class="btn" title="Edit {host.name}">
+            <button class="btn secondary" title="Edit {host.name}">
               <Icon name="edit" />
             </button>
-            <button class="btn" title="Remove {host.name}">
+            <button class="btn secondary" title="Remove {host.name}" on:click={() => removeHost(hostKey)}>
               <Icon name="x" />
             </button>
           </div>
         </li>
       {/each}
     </ul>
+  {:else}
+    <Welcome on:createHost={() => createHostModalOpen = true} />
   {/if}
 </Modal>
 
+<CreateHostModal bind:show={createHostModalOpen} on:reload={getHosts} />
+
 <style>
   .hosts {
     display: grid;
@@ -46,36 +85,32 @@
     gap: 0.5rem;
   }
 
+  .error {
+    color: #c00;
+  }
+
   .host {
     display: grid;
     grid-template: 1fr 1fr / 1fr auto;
     align-items: center;
     width: 100%;
     height: 100%;
-    border-radius: 10px;
-    overflow: hidden;
-    border: 1px solid #ccc;
   }
   .host button {
     border-radius: 0;
-    background: #eee;
-    color: inherit;
-    border: none;
     border-left: 1px solid #ccc;
   }
-  .host button:hover {
-    background-color: #ddd;
-  }
-  .host button:first-child {
+  .host button:nth-child(1) {
+    border-right: none;
     grid-row: 1 / 3;
     height: 100%;
-    border: none;
-    background-color: #fff;
+    border-radius: 10px 0 0 10px;
   }
-  .host button:first-child:hover {
-    background-color: #eee;
+  .host button:nth-child(2) {
+    border-top-right-radius: 10px;
+    border-bottom: none;
   }
-  .host button:last-child {
-    border-top: 1px solid #ccc;
+  .host button:nth-child(3) {
+    border-bottom-right-radius: 10px;
   }
 </style>

frontend/src/organisms/addressbar/index.svelte

@@ -27,7 +27,7 @@
   </div>
 </div>
 
-<HostModal bind:modalOpen on:select {hosts} />
+<HostModal bind:modalOpen bind:hosts on:select />
 
 <style>
   .addressbar {

frontend/src/organisms/addressbar/welcome.svelte

@@ -0,0 +1,30 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  function createHost() {
+    dispatch('createHost');
+  }
+</script>
+
+<div class="welcome">
+  <p class="title">Welcome to Mongodup!</p>
+  <button class="btn" on:click={createHost}>Create your first host</button>
+</div>
+
+<style>
+  .welcome {
+    text-align: center;
+    padding: 2rem;
+  }
+
+  .title {
+    font-weight: 600;
+    font-size: 1.5rem;
+  }
+
+  .btn {
+    margin-top: 2rem;
+  }
+</style>