mirror of
https://github.com/garraflavatra/rolens.git
synced 2025-07-19 22:18:03 +00:00
Initial commit
This commit is contained in:
78
frontend/src/organisms/addressbar/index.svelte
Normal file
78
frontend/src/organisms/addressbar/index.svelte
Normal file
@ -0,0 +1,78 @@
|
||||
<script>
|
||||
import Modal from '../../components/modal.svelte';
|
||||
import Icon from '../../components/icon.svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let hosts = {};
|
||||
export let activeHostKey = '';
|
||||
export let modalOpen = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
$: host = hosts?.[activeHostKey];
|
||||
|
||||
function select(hostKey) {
|
||||
activeHostKey = hostKey;
|
||||
dispatch('select', hostKey);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="addressbar">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div class="address" class:empty={!host?.uri} on:click={() => modalOpen = true}>
|
||||
{host?.uri || 'No host selected'}
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn" on:click={() => modalOpen = true}>
|
||||
<Icon name="db" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal bind:show={modalOpen} title="Hosts">
|
||||
{#if Object.keys(hosts).length}
|
||||
<ul class="hosts">
|
||||
{#each Object.entries(hosts) as [hostKey, host]}
|
||||
<li>
|
||||
<button on:click={() => select(hostKey)}>
|
||||
{host.name}
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.addressbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 1rem;
|
||||
padding: 0.5rem 0.5rem 0.5rem 1rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.address.empty {
|
||||
font-style: italic;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.hosts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.hosts li button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
background-color: #ddd;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.hosts li button:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
</style>
|
93
frontend/src/organisms/collection-detail/find.svelte
Normal file
93
frontend/src/organisms/collection-detail/find.svelte
Normal file
@ -0,0 +1,93 @@
|
||||
<script>
|
||||
import { PerformFind } from '../../../wailsjs/go/main/App';
|
||||
import CodeExample from '../../components/code-example.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { input } from '../../actions';
|
||||
import ObjectGrid from '../../components/objectgrid.svelte';
|
||||
|
||||
export let collection;
|
||||
|
||||
const defaults = {
|
||||
query: '{}',
|
||||
sort: '{ "_id": 1 }',
|
||||
fields: '{}',
|
||||
skip: 0,
|
||||
limit: 30,
|
||||
};
|
||||
|
||||
const form = {
|
||||
query: '{}',
|
||||
sort: '{ "_id": 1 }',
|
||||
fields: '{}',
|
||||
skip: 0,
|
||||
limit: 30,
|
||||
};
|
||||
|
||||
let result = [];
|
||||
let queryField;
|
||||
$: code = `db.${collection.key}.find(${form.query || '{}'}${form.fields && form.fields !== '{}' ? `, ${form.fields}` : ''}).sort(${form.sort})${form.skip ? `.skip(${form.skip})` : ''}${form.limit ? `.limit(${form.limit})` : ''};`;
|
||||
|
||||
$: if (collection) {
|
||||
result = [];
|
||||
}
|
||||
|
||||
async function submitQuery() {
|
||||
result = await PerformFind(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(form));
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
queryField?.focus();
|
||||
queryField?.select();
|
||||
});
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={submitQuery}>
|
||||
<div class="row-one">
|
||||
<label class="field">
|
||||
<span class="label">Query or id</span>
|
||||
<input type="text" class="code" bind:this={queryField} bind:value={form.query} use:input={{ json: true }} placeholder={defaults.query} />
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span class="label">Sort</span>
|
||||
<input type="text" class="code" bind:value={form.sort} use:input={{ json: true }} placeholder={defaults.sort} />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="row-two">
|
||||
<label class="field">
|
||||
<span class="label">Fields</span>
|
||||
<input type="text" class="code" bind:value={form.fields} use:input={{ json: true }} placeholder={defaults.fields} />
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span class="label">Skip</span>
|
||||
<input type="number" min="0" bind:value={form.skip} use:input placeholder={defaults.skip} />
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span class="label">Limit</span>
|
||||
<input type="number" min="0" bind:value={form.limit} use:input placeholder={defaults.limit} />
|
||||
</label>
|
||||
|
||||
<button type="submit" class="btn">Run</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<CodeExample {code} />
|
||||
<ObjectGrid data={result} />
|
||||
|
||||
<style>
|
||||
.row-one {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: 3fr 2fr;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.row-two {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: 5fr 1fr 1fr 1fr;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
68
frontend/src/organisms/collection-detail/index.svelte
Normal file
68
frontend/src/organisms/collection-detail/index.svelte
Normal file
@ -0,0 +1,68 @@
|
||||
<script>
|
||||
import ObjectGrid from '../../components/objectgrid.svelte';
|
||||
import CodeExample from '../../components/code-example.svelte';
|
||||
import TabBar from '../../components/tabbar.svelte';
|
||||
import Find from './find.svelte';
|
||||
import Indexes from './indexes.svelte';
|
||||
import Insert from './insert.svelte';
|
||||
import Remove from './remove.svelte';
|
||||
|
||||
export let collection;
|
||||
export let hostKey;
|
||||
export let dbKey;
|
||||
export let collectionKey;
|
||||
|
||||
let tab = 'find';
|
||||
|
||||
$: if (collection) {
|
||||
collection.hostKey = hostKey;
|
||||
collection.dbKey = dbKey;
|
||||
collection.key = collectionKey;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="collection" class:empty={!collection}>
|
||||
{#if collection}
|
||||
<TabBar tabs={[
|
||||
{ key: 'stats', title: 'Stats' },
|
||||
{ key: 'find', title: 'Find' },
|
||||
{ key: 'insert', title: 'Insert' },
|
||||
{ key: 'update', title: 'Update' },
|
||||
{ key: 'remove', title: 'Remove' },
|
||||
{ key: 'indexes', title: 'Indexes' },
|
||||
]} bind:selectedKey={tab} />
|
||||
|
||||
<div class="container">
|
||||
{#if tab === 'stats'}
|
||||
<CodeExample code="db.stats()" />
|
||||
<ObjectGrid data={collection.stats} />
|
||||
{:else if tab === 'find'}
|
||||
<Find {collection} />
|
||||
{:else if tab === 'insert'}
|
||||
<Insert {collection} />
|
||||
{:else if tab === 'remove'}
|
||||
<Remove {collection} />
|
||||
{:else if tab === 'indexes'}
|
||||
<Indexes {collection} />
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
No collection selected
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.collection {
|
||||
margin: 1rem 1rem 1rem 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0.5rem 0.5rem 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
13
frontend/src/organisms/collection-detail/indexes.svelte
Normal file
13
frontend/src/organisms/collection-detail/indexes.svelte
Normal file
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
export let collection;
|
||||
|
||||
const indexes = [];
|
||||
|
||||
function getIndexes() {}
|
||||
</script>
|
||||
|
||||
<div class="buttons">
|
||||
<button class="btn">Get indexes</button>
|
||||
<button class="btn" disabled={!indexes?.length}>Drop selected</button>
|
||||
<button class="btn">Create…</button>
|
||||
</div>
|
39
frontend/src/organisms/collection-detail/insert.svelte
Normal file
39
frontend/src/organisms/collection-detail/insert.svelte
Normal file
@ -0,0 +1,39 @@
|
||||
<script>
|
||||
import { PerformInsert } from '../../../wailsjs/go/main/App';
|
||||
|
||||
export let collection;
|
||||
|
||||
let input = '';
|
||||
let insertedIds;
|
||||
|
||||
$: if (collection) {
|
||||
insertedIds = undefined;
|
||||
}
|
||||
|
||||
async function insert() {
|
||||
insertedIds = await PerformInsert(collection.hostKey, collection.dbKey, collection.key, input);
|
||||
}
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={insert}>
|
||||
<label class="field">
|
||||
<textarea cols="30" rows="10" bind:value={input} placeholder="[]" class="code"></textarea>
|
||||
</label>
|
||||
|
||||
<div class="flex">
|
||||
<div>
|
||||
{#if insertedIds}
|
||||
Success! {insertedIds.length} document{insertedIds.length > 1 ? 's' : ''} inserted
|
||||
{/if}
|
||||
</div>
|
||||
<button type="submit" class="btn">Insert</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
</style>
|
31
frontend/src/organisms/collection-detail/remove.svelte
Normal file
31
frontend/src/organisms/collection-detail/remove.svelte
Normal file
@ -0,0 +1,31 @@
|
||||
<script>
|
||||
import CodeExample from '../../components/code-example.svelte';
|
||||
|
||||
export let collection;
|
||||
|
||||
let remove = '';
|
||||
$: code = `db.${collection.key}.remove(${remove});`;
|
||||
|
||||
function insert() {}
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={insert}>
|
||||
<CodeExample {code} />
|
||||
|
||||
<label class="field">
|
||||
<textarea cols="30" rows="10" bind:value={remove} placeholder={'{}'} class="code"></textarea>
|
||||
</label>
|
||||
|
||||
<div class="flex">
|
||||
<div></div>
|
||||
<button type="submit" class="btn">Remove</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user