mirror of
https://github.com/garraflavatra/rolens.git
synced 2024-12-01 13:20:54 +00:00
Edit hosts
This commit is contained in:
parent
c54c3b1ff6
commit
05058bf363
@ -1,17 +1,24 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import { input } from '../../actions';
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher } from 'svelte';
|
||||||
import { AddHost } from '../../../wailsjs/go/app/App';
|
import { AddHost, UpdateHost } from '../../../wailsjs/go/app/App';
|
||||||
import Modal from '../../components/modal.svelte';
|
import Modal from '../../components/modal.svelte';
|
||||||
|
|
||||||
export let show = false;
|
export let show = false;
|
||||||
|
export let host = undefined;
|
||||||
|
export let hostKey = '';
|
||||||
|
|
||||||
const dispatch = createEventDispatcher('reload');
|
const dispatch = createEventDispatcher();
|
||||||
let form = {};
|
let form = { ...(host || {}) };
|
||||||
let error = '';
|
let error = '';
|
||||||
$: valid = validate(form);
|
$: valid = validate(form);
|
||||||
|
|
||||||
$: if (show || !show) {
|
$: if (show || !show) {
|
||||||
form = {};
|
init();
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
form = { ...(host || {}) };
|
||||||
}
|
}
|
||||||
|
|
||||||
function validate(form) {
|
function validate(form) {
|
||||||
@ -24,7 +31,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
if (host && hostKey) {
|
||||||
|
await UpdateHost(hostKey, JSON.stringify(form));
|
||||||
|
}
|
||||||
|
else {
|
||||||
await AddHost(JSON.stringify(form));
|
await AddHost(JSON.stringify(form));
|
||||||
|
}
|
||||||
show = false;
|
show = false;
|
||||||
dispatch('reload');
|
dispatch('reload');
|
||||||
}
|
}
|
||||||
@ -34,16 +46,16 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Modal bind:show title="Create a new host">
|
<Modal bind:show title={host ? `Edit ${host.name}` : 'Create a new host'}>
|
||||||
<form on:submit|preventDefault={submit}>
|
<form on:submit|preventDefault={submit}>
|
||||||
<label class="field">
|
<label class="field">
|
||||||
<span class="label">Label</span>
|
<span class="label">Label</span>
|
||||||
<input type="text" placeholder="mywebsite.com MongoDB" bind:value={form.name} />
|
<input type="text" placeholder="mywebsite.com MongoDB" bind:value={form.name} use:input={{ autofocus: true }} />
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="field">
|
<label class="field">
|
||||||
<span class="label">Connection string</span>
|
<span class="label">Connection string</span>
|
||||||
<input type="text" placeholder="mongodb://..." bind:value={form.uri} spellcheck="false" />
|
<input type="text" placeholder="mongodb://..." bind:value={form.uri} spellcheck="false" use:input />
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="result">
|
<div class="result">
|
||||||
@ -52,7 +64,9 @@
|
|||||||
<div class="error">{error}</div>
|
<div class="error">{error}</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<button class="btn" disabled={!valid} type="submit">Create</button>
|
<button class="btn" disabled={!valid} type="submit">
|
||||||
|
{host ? 'Save' : 'Create'}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</Modal>
|
</Modal>
|
@ -4,7 +4,7 @@
|
|||||||
import Icon from '../../components/icon.svelte';
|
import Icon from '../../components/icon.svelte';
|
||||||
import { Hosts, RemoveHost } from '../../../wailsjs/go/app/App';
|
import { Hosts, RemoveHost } from '../../../wailsjs/go/app/App';
|
||||||
import Welcome from './welcome.svelte';
|
import Welcome from './welcome.svelte';
|
||||||
import CreateHostModal from './createhostmodal.svelte';
|
import HostDetail from './hostdetail.svelte';
|
||||||
|
|
||||||
export let hosts = {};
|
export let hosts = {};
|
||||||
export let activeHostKey = '';
|
export let activeHostKey = '';
|
||||||
@ -12,7 +12,9 @@
|
|||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
let error = '';
|
let error = '';
|
||||||
let createHostModalOpen = false;
|
let hostDetailModalOpen = false;
|
||||||
|
let hostDetailModalHost;
|
||||||
|
let hostDetailModalKey = '';
|
||||||
$: host = hosts?.[activeHostKey];
|
$: host = hosts?.[activeHostKey];
|
||||||
$: hostCount = Object.keys(hosts).length;
|
$: hostCount = Object.keys(hosts).length;
|
||||||
|
|
||||||
@ -35,6 +37,18 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function createHost() {
|
||||||
|
hostDetailModalHost = undefined;
|
||||||
|
hostDetailModalKey = '';
|
||||||
|
hostDetailModalOpen = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function editHost(hostKey) {
|
||||||
|
hostDetailModalHost = hosts[hostKey];
|
||||||
|
hostDetailModalKey = hostKey;
|
||||||
|
hostDetailModalOpen = true;
|
||||||
|
}
|
||||||
|
|
||||||
async function removeHost(hostKey) {
|
async function removeHost(hostKey) {
|
||||||
try {
|
try {
|
||||||
await RemoveHost(hostKey);
|
await RemoveHost(hostKey);
|
||||||
@ -57,7 +71,7 @@
|
|||||||
{hostCount} host{hostCount === 1 ? '' : 's'}
|
{hostCount} host{hostCount === 1 ? '' : 's'}
|
||||||
{/if}
|
{/if}
|
||||||
</p>
|
</p>
|
||||||
<button class="btn" on:click={() => createHostModalOpen = true}>
|
<button class="btn" on:click={createHost}>
|
||||||
Create new host
|
Create new host
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -66,10 +80,10 @@
|
|||||||
{#each Object.entries(hosts) as [hostKey, host]}
|
{#each Object.entries(hosts) as [hostKey, host]}
|
||||||
<li>
|
<li>
|
||||||
<div class="host">
|
<div class="host">
|
||||||
<button class="btn secondary" on:click={() => select(hostKey)} title="Connect to {host.name}">
|
<button class="btn secondary" title="Connect to {host.name}" on:click={() => select(hostKey)}>
|
||||||
{host.name}
|
{host.name}
|
||||||
</button>
|
</button>
|
||||||
<button class="btn secondary" title="Edit {host.name}">
|
<button class="btn secondary" title="Edit {host.name}" on:click={() => editHost(hostKey)}>
|
||||||
<Icon name="edit" />
|
<Icon name="edit" />
|
||||||
</button>
|
</button>
|
||||||
<button class="btn secondary" title="Remove {host.name}" on:click={() => removeHost(hostKey)}>
|
<button class="btn secondary" title="Remove {host.name}" on:click={() => removeHost(hostKey)}>
|
||||||
@ -80,11 +94,16 @@
|
|||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
{:else}
|
{:else}
|
||||||
<Welcome on:createHost={() => createHostModalOpen = true} />
|
<Welcome on:createHost={createHost} />
|
||||||
{/if}
|
{/if}
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
<CreateHostModal bind:show={createHostModalOpen} on:reload={getHosts} />
|
<HostDetail
|
||||||
|
host={hostDetailModalHost}
|
||||||
|
hostKey={hostDetailModalKey}
|
||||||
|
on:reload={getHosts}
|
||||||
|
bind:show={hostDetailModalOpen}
|
||||||
|
/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.hosts {
|
.hosts {
|
||||||
|
@ -162,7 +162,7 @@ func (a *App) RemoveHost(key string) error {
|
|||||||
|
|
||||||
sure, _ := runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
|
sure, _ := runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
|
||||||
Title: "Confirm",
|
Title: "Confirm",
|
||||||
Message: "Are you sure you want to remove " + key + "?",
|
Message: "Are you sure you want to remove " + hosts[key].Name + "?",
|
||||||
Buttons: []string{"Yes", "No"},
|
Buttons: []string{"Yes", "No"},
|
||||||
DefaultButton: "Yes",
|
DefaultButton: "Yes",
|
||||||
CancelButton: "No",
|
CancelButton: "No",
|
||||||
|
Loading…
Reference in New Issue
Block a user