Hosts and settings

frontend/src/app.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount } from 'svelte';
-  import { Hosts, OpenConnection } from '../wailsjs/go/app/App';
+  import { OpenConnection } from '../wailsjs/go/app/App';
   import { Environment, WindowSetTitle } from '../wailsjs/runtime';
   import BlankState from './components/blankstate.svelte';
   import ContextMenu from './components/contextmenu.svelte';
@@ -41,7 +41,6 @@
 
   onMount(() => {
     Environment().then(e => environment = e);
-    Hosts().then(h => hosts = h);
   });
 </script>
 
@@ -52,7 +51,7 @@
 
   {#if environment}
     <main class:empty={!host || !connection}>
-      <AddressBar {hosts} bind:activeHostKey on:select={e => openConnection(e.detail)} bind:modalOpen={addressBarModalOpen} />
+      <AddressBar bind:hosts bind:activeHostKey on:select={e => openConnection(e.detail)} bind:modalOpen={addressBarModalOpen} />
 
       {#if host && connection}
         <Connection {hosts} bind:activeCollKey bind:activeDbKey {activeHostKey} />

frontend/src/components/modal.svelte

@@ -5,6 +5,7 @@
   export let show = false;
   export let title = undefined;
   export let contentPadding = true;
+  export let width = '80vw';
 
   function keydown(event) {
     if (event.key === 'Escape') {
@@ -17,7 +18,7 @@
 
 {#if show}
   <div class="modal outer" on:mousedown|self={() => show = false} transition:fade>
-    <div class="inner" transition:fly={{ y: 100 }}>
+    <div class="inner" style:max-width={width || '80vw'} transition:fly={{ y: 100 }}>
       {#if title}
         <header>
           <div class="title">{title}</div>
@@ -55,7 +56,6 @@
   }
 
   .inner {
-    max-width: 80vw;
     max-height: 80vh;
     background-color: #fff;
     margin-left: auto;

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>

frontend/wailsjs/go/app/App.d.ts

@@ -4,6 +4,8 @@ import {app} from '../models';
 import {primitive} from '../models';
 import {map[string]app} from '../models';
 
+export function AddHost(arg1:string):Promise<void>;
+
 export function DropCollection(arg1:string,arg2:string,arg3:string):Promise<boolean>;
 
 export function DropDatabase(arg1:string,arg2:string):Promise<boolean>;
@@ -24,6 +26,8 @@ export function OpenConnection(arg1:string):Promise<Array<string>>;
 
 export function OpenDatabase(arg1:string,arg2:string):Promise<Array<string>>;
 
+export function RemoveHost(arg1:string):Promise<void>;
+
 export function RemoveItems(arg1:string,arg2:string,arg3:string,arg4:string,arg5:boolean):Promise<number>;
 
 export function UpdateItems(arg1:string,arg2:string,arg3:string,arg4:string):Promise<number>;

frontend/wailsjs/go/app/App.js

@@ -2,6 +2,10 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+export function AddHost(arg1) {
+  return window['go']['app']['App']['AddHost'](arg1);
+}
+
 export function DropCollection(arg1, arg2, arg3) {
   return window['go']['app']['App']['DropCollection'](arg1, arg2, arg3);
 }
@@ -42,6 +46,10 @@ export function OpenDatabase(arg1, arg2) {
   return window['go']['app']['App']['OpenDatabase'](arg1, arg2);
 }
 
+export function RemoveHost(arg1) {
+  return window['go']['app']['App']['RemoveHost'](arg1);
+}
+
 export function RemoveItems(arg1, arg2, arg3, arg4, arg5) {
   return window['go']['app']['App']['RemoveItems'](arg1, arg2, arg3, arg4, arg5);
 }