1
0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-07-19 22:18:03 +00:00

Initial commit

This commit is contained in:
2023-01-10 17:28:27 +01:00
commit 101d892139
45 changed files with 7976 additions and 0 deletions

View 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>

View 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>

View 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>

View 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&hellip;</button>
</div>

View 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>

View 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>