romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-01-18 21:17:59 +00:00
Code Issues Releases Activity

Fixed frontend coding style problems

Browse Source
This commit is contained in:
Romein van Buren 2023-06-11 09:34:00 +02:00
parent 6cc329982a
commit 2ee5c7dadd
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
27 changed files with 213 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json.md5
View File

@ -1 +1 @@
679b6f6f86f66d3499bdecbee288c567
499da1237327bf4ddd2de74bfd6635c7

6
frontend/src/app.svelte
View File

@ -1,7 +1,6 @@
<script>
import BlankState from '$components/blankstate.svelte';
import ContextMenu from '$components/contextmenu.svelte';
import connections from '$lib/stores/connections';
import contextMenu from '$lib/stores/contextmenu';
import environment from '$lib/stores/environment';
import hosts from '$lib/stores/hosts';
@ -10,7 +9,7 @@
import About from '$organisms/about.svelte';
import Connection from '$organisms/connection/index.svelte';
import Settings from '$organisms/settings/index.svelte';
import { EventsEmit, EventsOn } from '$wails/runtime';
import { EventsOn } from '$wails/runtime';
import { tick } from 'svelte';
const activeHostKey = '';
@ -21,9 +20,6 @@
let connectionManager;
let showWelcomeScreen = undefined;
$: host = hosts[activeHostKey];
$: connection = $connections[activeHostKey];
hosts.subscribe(h => {
if (h && (showWelcomeScreen === undefined)) {
showWelcomeScreen = !Object.keys($hosts || {}).length;

4
frontend/src/components/grid-items.svelte
View File

@ -50,7 +50,9 @@
return obj;
}
else if ((typeof obj === 'object') && (obj !== null)) {
return Object.entries(obj).map(([ k, item ]) => ({ ...item, [key]: k }));
return Object.entries(obj).map(([ k, item ]) => {
return { ...item, [key]: k };
});
}
else {
return obj;

43
frontend/src/components/icon.svelte vendored
View File

@ -16,7 +16,15 @@
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
{#if name === 'radio'}
<circle cx="12" cy="12" r="2"></circle><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path>
{:else if name === 'chev-l'}
@ -44,7 +52,12 @@
{:else if name === 'reload'}
<polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
{:else if name === 'clipboard'}
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8"
y="2"
width="8"
height="4"
rx="1"
ry="1"></rect>
{:else if name === 'edit'}
<path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
{:else if name === 'check'}
@ -60,15 +73,35 @@
{:else if name === 'zap'}
<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" />
{:else if name === 'server'}
<rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><path d="M6 6h.01M6 18h.01"/>
<rect x="2"
y="2"
width="20"
height="8"
rx="2"
ry="2" /><rect x="2"
y="14"
width="20"
height="8"
rx="2"
ry="2" /><path d="M6 6h.01M6 18h.01" />
{:else if name === 'text'}
<path d="M4 7V4h16v3M9 20h6M12 4v16" />
{:else if name === 'hash'}
<path d="M4 9h16M4 15h16M10 3 8 21M16 3l-2 18" />
{:else if name === 'toggle-l'}
<rect x="1" y="5" width="22" height="14" rx="7" ry="7"/><circle cx="8" cy="12" r="3"/>
<rect x="1"
y="5"
width="22"
height="14"
rx="7"
ry="7" /><circle cx="8" cy="12" r="3" />
{:else if name === 'cal'}
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
<rect x="3"
y="4"
width="18"
height="18"
rx="2"
ry="2" /><path d="M16 2v4M8 2v4M3 10h18" />
{:else if name === 'code'}
<path d="m16 18 6-6-6-6M8 6l-6 6 6 6" />
{:else if name === 'target'}

2
frontend/src/components/objectviewer.svelte
View File

@ -1,5 +1,5 @@
<script>
import { jsonLooseParse, looseJsonIsValid } from '$lib/strings';
import { looseJsonIsValid } from '$lib/strings';
import { createEventDispatcher, onDestroy } from 'svelte';
import Icon from './icon.svelte';
import Modal from './modal.svelte';

2
frontend/src/lib/stores/inited.js
View File

@ -10,7 +10,7 @@ const defer = listener => {
listener();
}
else {
listeners.push(listener)
listeners.push(listener);
}
};

7
frontend/src/organisms/connection/collection/aggregate.svelte
View File

@ -31,7 +31,9 @@
}
async function run() {
const pipeline = stages.map(stage => ({ [stage.type]: jsonLooseParse(stage.data) }));
const pipeline = stages.map(stage => {
return { [stage.type]: jsonLooseParse(stage.data) };
});
await Aggregate(
collection.hostKey,
collection.dbKey,
@ -66,7 +68,8 @@
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="field">
<ObjectEditor bind:text={stage.data} on:inited={e => {
<ObjectEditor bind:text={stage.data}
on:inited={e => {
e.detail.editor.dispatch({
changes: {
from: 0,

2
frontend/src/organisms/connection/collection/components/form.svelte
View File

@ -38,7 +38,7 @@
{#if item && view}
{#each view?.columns?.filter(c => inputTypes.includes(c.inputType)) || [] as column, index}
<!-- svelte-ignore a11y-label-has-associated-control because FormInput contains one -->
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="column">
<div class="label">
<Icon name={iconMap[column.inputType]} />

10
frontend/src/organisms/connection/collection/components/viewconfig.svelte
View File

@ -13,7 +13,9 @@
$: tabs = Object.entries(views.forCollection(collection.hostKey, collection.dbKey, collection.key))
.sort((a, b) => sortTabKeys(a[0], b[0]))
.map(([ key, v ]) => ({ key, title: v.name, closable: key !== 'list' }));
.map(([ key, v ]) => {
return { key, title: v.name, closable: key !== 'list' };
});
function sortTabKeys(a, b) {
if (a === 'list') {
@ -70,11 +72,13 @@
return;
}
$views[activeViewKey].columns = Object.keys(firstItem).sort().map(key => ({
$views[activeViewKey].columns = Object.keys(firstItem).sort().map(key => {
return {
key,
showInTable: true,
inputType: 'none',
}));
};
});
}
function moveColumn(oldIndex, delta) {

27
frontend/src/organisms/connection/collection/find.svelte
View File

@ -38,8 +38,8 @@
let querying = false;
let objectViewerSuccessMessage = '';
// $: 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})` : ''};`;
$: viewsForCollection = views.forCollection(collection.hostKey, collection.dbKey, collection.key);
$: 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})` : ''};`;
$: lastPage = (submittedForm.limit && result?.results?.length) ? Math.max(0, Math.ceil((result.total - submittedForm.limit) / submittedForm.limit)) : 0;
$: activePage = (submittedForm.limit && submittedForm.skip && result?.results?.length) ? submittedForm.skip / submittedForm.limit : 0;
@ -162,7 +162,12 @@
<div class="form-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={{ type: 'json', autofocus: true }} placeholder={defaults.query} />
<input type="text"
class="code"
bind:this={queryField}
bind:value={form.query}
use:input={{ type: 'json', autofocus: true }}
placeholder={defaults.query} />
</label>
<label class="field">
@ -179,12 +184,22 @@
<label class="field">
<span class="label">Skip</span>
<input type="number" min="0" bind:value={form.skip} use:input placeholder={defaults.skip} list="skipstops" />
<input type="number"
min="0"
bind:value={form.skip}
use:input
placeholder={defaults.skip}
list="skipstops" />
</label>
<label class="field">
<span class="label">Limit</span>
<input type="number" min="0" bind:value={form.limit} use:input placeholder={defaults.limit} list="limits" />
<input type="number"
min="0"
bind:value={form.limit}
use:input
placeholder={defaults.limit}
list="limits" />
</label>
</div>
@ -219,7 +234,9 @@
{:else}
<Grid
key="_id"
columns={$views[collection.viewKey]?.columns?.map(c => ({ key: c.key, title: c.key })) || []}
columns={$views[collection.viewKey]?.columns?.map(c => {
return { key: c.key, title: c.key };
}) || []}
showHeaders={true}
items={result.results ? result.results.map(r => EJSON.deserialize(r)) : []}
bind:activePath

3
frontend/src/organisms/connection/collection/index.svelte
View File

@ -57,7 +57,8 @@
{ key: 'remove', icon: 'trash', title: 'Remove' },
{ key: 'indexes', icon: 'list', title: 'Indexes' },
{ key: 'aggregate', icon: 're', title: 'Aggregate' },
]} bind:selectedKey={tab} />
]}
bind:selectedKey={tab} />
<div class="container">
{#if tab === 'stats'} <Stats {collection} />

1
frontend/src/organisms/connection/collection/indexes.svelte
View File

@ -1,7 +1,6 @@
<script>
import Icon from '$components/icon.svelte';
import ObjectGrid from '$components/objectgrid.svelte';
import ObjectViewer from '$components/objectviewer.svelte';
import { DropIndex, GetIndexes } from '$wails/go/app/App';
import IndexDetail from './components/indexdetail.svelte';

12
frontend/src/organisms/connection/collection/insert.svelte
View File

@ -60,9 +60,7 @@
function showDocs() {
dispatch('performFind', {
query: insertedIds.length === 1
? `{ "_id": ${JSON.stringify(insertedIds[0])} }`
: `{ "_id": { "$in": [ ${insertedIds.map(id => JSON.stringify(id)).join(', ')} ] } }`,
query: insertedIds.length === 1 ? `{ "_id": ${JSON.stringify(insertedIds[0])} }` : `{ "_id": { "$in": [ ${insertedIds.map(id => JSON.stringify(id)).join(', ')} ] } }`,
});
}
@ -146,11 +144,11 @@
<Grid
key="id"
items={newItems}
columns={
$views[collection.viewKey]?.columns
columns={$views[collection.viewKey]?.columns
?.filter(c => inputTypes.includes(c.inputType))
.map(c => ({ ...c, id: randomString(8), title: c.key })) || []
}
.map(c => {
return { ...c, id: randomString(8), title: c.key };
}) || []}
showHeaders={true}
canSelect={false}
canRemoveItems={true}

2
frontend/src/organisms/connection/collection/remove.svelte
View File

@ -11,7 +11,7 @@
let many = true;
let result = undefined;
let editor;
$: code = `db.${collection.key}.remove(${json});`;
// $: code = `db.${collection.key}.remove(${json});`;
async function removeItems() {
result = await RemoveItems(

32
frontend/src/organisms/connection/collection/update.svelte
View File

@ -11,7 +11,7 @@
const allOperators = Object.values(atomicUpdateOperators).map(Object.keys).flat();
const form = { query: '{}', parameters: [ { type: '$set' } ] };
let updatedCount;
$: code = buildCode(form);
// $: code = buildCode(form);
$: invalid = !form.query || form.parameters?.some(param => {
if (!param.value) {
return true;
@ -26,26 +26,28 @@
}
});
function buildCode(form) {
let operation = '{ ' + form.parameters.filter(p => p.type).map(p => `${p.type}: ${p.value || '{}'}`).join(', ') + ' }';
if (operation === '{ }') {
operation = '{}';
}
// function buildCode(form) {
// let operation = '{ ' + form.parameters.filter(p => p.type).map(p => `${p.type}: ${p.value || '{}'}`).join(', ') + ' }';
// if (operation === '{ }') {
// operation = '{}';
// }
let options = (form.upsert || form.many) ? ', { ' : '';
form.upsert && (options += 'upsert: true');
form.upsert && form.many && (options += ', ');
form.many && (options += 'multi: true');
(form.upsert || form.many) && (options += ' }');
// let options = (form.upsert || form.many) ? ', { ' : '';
// form.upsert && (options += 'upsert: true');
// form.upsert && form.many && (options += ', ');
// form.many && (options += 'multi: true');
// (form.upsert || form.many) && (options += ' }');
const code = `db.${collection.key}.update(${form.query || '{}'}, ${operation}${options});`;
return code;
}
// const code = `db.${collection.key}.update(${form.query || '{}'}, ${operation}${options});`;
// return code;
// }
async function submitQuery() {
const f = deepClone(form);
f.query = convertLooseJson(f.query);
f.parameters = f.parameters.map(param => ({ ...param, value: convertLooseJson(param.value) }));
f.parameters = f.parameters.map(param => {
return { ...param, value: convertLooseJson(param.value) };
});
updatedCount = await UpdateItems(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(f));
}

2
frontend/src/organisms/connection/database/stats.svelte
View File

@ -7,7 +7,7 @@
let copySucceeded = false;
async function copy() {
const json = JSON.stringify(collection.stats, undefined, '\t');
const json = JSON.stringify(database.stats, undefined, '\t');
await navigator.clipboard.writeText(json);
copySucceeded = true;
setTimeout(() => copySucceeded = false, 1500);

17
frontend/src/organisms/connection/dump.svelte
View File

@ -65,7 +65,6 @@
<Modal bind:show={info} title="Perform dump">
<form on:submit|preventDefault={performDump}>
<!-- svelte-ignore a11y-label-has-associated-control - input is in DirectoryChooser -->
<label class="field">
<span class="label">Output destination:</span>
<DirectoryChooser bind:value={info.outdir} />
@ -83,7 +82,9 @@
hideChildrenToggles
items={[
{ id: undefined, name: '(localhost)' },
...Object.keys($hosts).map(id => ({ id, name: $hosts[id]?.name })),
...Object.keys($hosts).map(id => {
return { id, name: $hosts[id]?.name };
}),
]}
on:select={e => selectHost(e.detail?.itemKey)}
/>
@ -97,9 +98,9 @@
hideChildrenToggles
items={[
{ id: undefined, name: '(all databases)' },
...($connections[info.hostKey]?.databases
? Object.keys($connections[info.hostKey].databases).map(id => ({ id, name: id }))
: []
...($connections[info.hostKey]?.databases ? Object.keys($connections[info.hostKey].databases).map(id => {
return { id, name: id };
}) : []
),
]}
on:select={e => selectDatabase(e.detail?.itemKey)}
@ -114,9 +115,9 @@
hideChildrenToggles
items={[
{ id: undefined, name: '(all collections)' },
...($connections[info.hostKey]?.databases[info.dbKey]?.collections
? Object.keys($connections[info.hostKey].databases[info.dbKey].collections).map(id => ({ id, name: id }))
: []
...($connections[info.hostKey]?.databases[info.dbKey]?.collections ? Object.keys($connections[info.hostKey].databases[info.dbKey].collections).map(id => {
return { id, name: id };
}) : []
),
]}
on:select={e => selectCollection(e.detail?.itemKey)}

7
frontend/src/organisms/connection/host/index.svelte
View File

@ -14,7 +14,7 @@
host.hostKey = hostKey;
}
$: if (hostKey || dbKey) {
$: if (hostKey) {
tab = 'status';
}
@ -26,8 +26,9 @@
{#key host}
<TabBar tabs={[
{ key: 'status', icon: 'chart', title: 'Host status' },
{ key: 'systemInfo', icon: 'server', title: 'System info' }
]} bind:selectedKey={tab} />
{ key: 'systemInfo', icon: 'server', title: 'System info' },
]}
bind:selectedKey={tab} />
<div class="container">
{#if tab === 'status'} <Status {host} />

2
frontend/src/organisms/connection/host/status.svelte
View File

@ -7,7 +7,7 @@
let copySucceeded = false;
async function copy() {
const json = JSON.stringify(collection.stats, undefined, '\t');
const json = JSON.stringify(host.status, undefined, '\t');
await navigator.clipboard.writeText(json);
copySucceeded = true;
setTimeout(() => copySucceeded = false, 1500);

2
frontend/src/organisms/connection/host/systeminfo.svelte
View File

@ -7,7 +7,7 @@
let copySucceeded = false;
async function copy() {
const json = JSON.stringify(collection.stats, undefined, '\t');
const json = JSON.stringify(host.systemInfo, undefined, '\t');
await navigator.clipboard.writeText(json);
copySucceeded = true;
setTimeout(() => copySucceeded = false, 1500);

26
frontend/src/organisms/connection/hosttree.svelte
View File

@ -2,10 +2,9 @@
import Grid from '$components/grid.svelte';
import { startProgress } from '$lib/progress';
import connections from '$lib/stores/connections';
import { createEventDispatcher } from 'svelte';
import { createEventDispatcher, tick } from 'svelte';
import { DropCollection, DropDatabase, OpenCollection, OpenConnection, OpenDatabase, RemoveHost, TruncateCollection } from '../../../wailsjs/go/app/App';
import hosts from '$lib/stores/hosts';
import { tick } from 'svelte';
import windowTitle from '$lib/stores/windowtitle';
export let activeHostKey = '';
@ -17,10 +16,7 @@
// $: activeGridPath[0] = activeHostKey || undefined;
// $: activeGridPath[1] = activeDbKey || undefined;
// $: activeGridPath[2] = activeCollKey || undefined;
$: host = $hosts[activeHostKey];
$: connection = $connections[activeHostKey];
$: database = connection?.databases[activeDbKey];
$: collection = database?.collections?.[activeCollKey];
export async function reload() {
activeHostKey && await openConnection(activeHostKey);
@ -129,16 +125,19 @@
striped={false}
columns={[ { key: 'name' }, { key: 'count', right: true } ]}
bind:activePath={activeGridPath}
items={Object.keys($hosts).map(hostKey => ({
items={Object.keys($hosts).map(hostKey => {
return {
id: hostKey,
name: $hosts[hostKey].name,
icon: 'server',
children: Object.keys(connection?.databases || {}).sort().map(dbKey => ({
children: Object.keys(connection?.databases || {}).sort().map(dbKey => {
return {
id: dbKey,
name: dbKey,
icon: 'db',
count: Object.keys(connection.databases[dbKey].collections || {}).length || '',
children: Object.keys(connection.databases[dbKey].collections).sort().map(collKey => ({
children: Object.keys(connection.databases[dbKey].collections).sort().map(collKey => {
return {
id: collKey,
name: collKey,
icon: 'list',
@ -152,21 +151,24 @@
{ separator: true },
{ label: 'New collection…', fn: () => dispatch('newCollection') },
],
})) || [],
};
}) || [],
menu: [
{ label: 'Drop database…', fn: () => dropDatabase(dbKey) },
{ separator: true },
{ label: 'New database…', fn: () => dispatch('newDatabase') },
{ label: 'New collection…', fn: () => dispatch('newCollection') },
],
})),
};
}),
menu: [
{ label: 'New database…', fn: () => dispatch('newDatabase') },
{ separator: true },
{ label: `Edit host ${$hosts[hostKey].name}…`, fn: () => dispatch('editHost', hostKey) },
{ label: `Remove host…`, fn: () => removeHost(hostKey) },
{ label: 'Remove host…', fn: () => removeHost(hostKey) },
],
}))}
};
})}
on:select={e => {
const key = e.detail.itemKey;
switch (e.detail?.level) {

5
frontend/src/organisms/connection/index.svelte
View File

@ -1,10 +1,9 @@
<script>
import { startProgress } from '$lib/progress';
import connections from '$lib/stores/connections';
import { Hosts, RenameCollection } from '$wails/go/app/App';
import { RenameCollection } from '$wails/go/app/App';
import { EnterText } from '$wails/go/ui/UI';
import { EventsOn } from '$wails/runtime/runtime';
import { onMount } from 'svelte';
import HostView from './host/index.svelte';
import DatabaseView from './database/index.svelte';
import CollectionView from './collection/index.svelte';
@ -135,7 +134,7 @@
<HostDetail
bind:show={showHostDetail}
on:reload={hosts.update}
hostKey={activeHostKey}
hostKey={hostDetailKey}
/>
<DumpInfo bind:info={exportInfo} />

2
frontend/src/organisms/settings/index.svelte
View File

@ -27,7 +27,7 @@
</span>
<label for="defaultExportDirectory">Default export directory</label>
<!-- svelte-ignore a11y-label-has-associated-control - input is in DirectoryChooser -->
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="field">
<DirectoryChooser id="defaultExportDirectory" bind:value={$settings.defaultExportDirectory} />
</label>