mirror of
https://github.com/garraflavatra/rolens.git
synced 2025-01-18 21:17:59 +00:00
Added a JSON viewer for items
This commit is contained in:
parent
6931e63f47
commit
5297f00635
16
frontend/package-lock.json
generated
16
frontend/package-lock.json
generated
@ -7,6 +7,9 @@
|
|||||||
"": {
|
"": {
|
||||||
"name": "frontend",
|
"name": "frontend",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
|
"dependencies": {
|
||||||
|
"highlight.js": "^11.7.0"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/vite-plugin-svelte": "^1.0.1",
|
"@sveltejs/vite-plugin-svelte": "^1.0.1",
|
||||||
"eslint": "^8.31.0",
|
"eslint": "^8.31.0",
|
||||||
@ -1888,6 +1891,14 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/highlight.js": {
|
||||||
|
"version": "11.7.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
|
||||||
|
"integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/ignore": {
|
"node_modules/ignore": {
|
||||||
"version": "5.2.4",
|
"version": "5.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
|
||||||
@ -4523,6 +4534,11 @@
|
|||||||
"has-symbols": "^1.0.2"
|
"has-symbols": "^1.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"highlight.js": {
|
||||||
|
"version": "11.7.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
|
||||||
|
"integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ=="
|
||||||
|
},
|
||||||
"ignore": {
|
"ignore": {
|
||||||
"version": "5.2.4",
|
"version": "5.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
|
||||||
|
@ -17,6 +17,12 @@
|
|||||||
"vite": "^3.0.0"
|
"vite": "^3.0.0"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": ["nodejs", "svelte3"]
|
"extends": [
|
||||||
|
"nodejs",
|
||||||
|
"svelte3"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"highlight.js": "^11.7.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1 +1 @@
|
|||||||
2c80c12f4d36310f15d586e535d30d27
|
d445254075c563425c5b0fd21e804d4a
|
@ -19,8 +19,6 @@
|
|||||||
$: database = connection?.databases[activeDbKey];
|
$: database = connection?.databases[activeDbKey];
|
||||||
$: collection = database?.collections?.[activeCollKey];
|
$: collection = database?.collections?.[activeCollKey];
|
||||||
|
|
||||||
$: console.log(connection?.databases);
|
|
||||||
|
|
||||||
async function openConnection(hostKey) {
|
async function openConnection(hostKey) {
|
||||||
busy.start();
|
busy.start();
|
||||||
const databases = await OpenConnection(hostKey);
|
const databases = await OpenConnection(hostKey);
|
||||||
|
@ -53,6 +53,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function doubleClick(itemKey) {
|
||||||
|
toggleChildren(itemKey, false);
|
||||||
|
dispatch('trigger', itemKey);
|
||||||
|
}
|
||||||
|
|
||||||
function showContextMenu(evt, item) {
|
function showContextMenu(evt, item) {
|
||||||
select(item[key]);
|
select(item[key]);
|
||||||
contextMenu.show(evt, item.menu);
|
contextMenu.show(evt, item.menu);
|
||||||
@ -87,7 +92,7 @@
|
|||||||
{#each _items as item (item[key])}
|
{#each _items as item (item[key])}
|
||||||
<tr
|
<tr
|
||||||
on:click={() => select(item[key])}
|
on:click={() => select(item[key])}
|
||||||
on:dblclick={() => toggleChildren(item[key])}
|
on:dblclick={() => doubleClick(item[key])}
|
||||||
on:contextmenu|preventDefault={evt => showContextMenu(evt, item)}
|
on:contextmenu|preventDefault={evt => showContextMenu(evt, item)}
|
||||||
class:selected={activeKey === item[key] && !activeChildKey}
|
class:selected={activeKey === item[key] && !activeChildKey}
|
||||||
>
|
>
|
||||||
|
@ -20,4 +20,6 @@
|
|||||||
<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" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
<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" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||||||
{:else if name === 'reload'}
|
{:else if name === 'reload'}
|
||||||
<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" class="feather feather-refresh-cw"><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></svg>
|
<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" class="feather feather-refresh-cw"><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></svg>
|
||||||
|
{:else if name === 'clipboard'}
|
||||||
|
<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" class="feather feather-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></svg>
|
||||||
{/if}
|
{/if}
|
||||||
|
58
frontend/src/components/jsonviewer.svelte
Normal file
58
frontend/src/components/jsonviewer.svelte
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<script>
|
||||||
|
import hljs from 'highlight.js/lib/core';
|
||||||
|
import hljsJson from 'highlight.js/lib/languages/json';
|
||||||
|
import 'highlight.js/styles/atom-one-dark.css';
|
||||||
|
import Icon from './icon.svelte';
|
||||||
|
import Modal from './modal.svelte';
|
||||||
|
|
||||||
|
export let json = '';
|
||||||
|
|
||||||
|
hljs.registerLanguage('json', hljsJson);
|
||||||
|
$: highlighted = json ? hljs.highlight('json', json).value : '';
|
||||||
|
|
||||||
|
function copy() {
|
||||||
|
navigator.clipboard.writeText(json);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if json}
|
||||||
|
<Modal bind:show={json} title="JSON viewer" contentPadding={false}>
|
||||||
|
<div class="codeblock">
|
||||||
|
<div class="buttons">
|
||||||
|
<button class="btn" on:click={copy}>
|
||||||
|
<Icon name="clipboard" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<pre><code class="hljs">{@html highlighted}</code></pre>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.codeblock {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.buttons {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
.buttons button {
|
||||||
|
margin-left: 1rem;
|
||||||
|
background: none;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
.buttons button:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
user-select: text;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre :global(::selection) {
|
||||||
|
background: rgba(5, 5, 5, 0.8);
|
||||||
|
}
|
||||||
|
</style>
|
@ -8,7 +8,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if show}
|
{#if show}
|
||||||
<div class="modal outer" on:mousedown|self={close} transition:fade>
|
<div class="modal outer" on:mousedown|self={() => show = false} transition:fade>
|
||||||
<div class="inner" transition:fly={{ y: 100 }}>
|
<div class="inner" transition:fly={{ y: 100 }}>
|
||||||
<header>
|
<header>
|
||||||
{#if title}
|
{#if title}
|
||||||
@ -18,7 +18,7 @@
|
|||||||
<Icon name="x" />
|
<Icon name="x" />
|
||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
<div class="slot content" class:p-0={!contentPadding}> <slot /> </div>
|
<div class="slot content" class:padded={contentPadding}> <slot /> </div>
|
||||||
{#if $$slots.footerLeft || $$slots.footerRight}
|
{#if $$slots.footerLeft || $$slots.footerRight}
|
||||||
<footer>
|
<footer>
|
||||||
<slot name="footer" />
|
<slot name="footer" />
|
||||||
@ -52,6 +52,7 @@
|
|||||||
margin-bottom: auto;
|
margin-bottom: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
@ -79,10 +80,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 1rem;
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
}
|
}
|
||||||
|
.content.padded {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
@ -69,4 +69,14 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Grid {columns} {items} {showHeaders} {contained} key="key" bind:activeKey />
|
<Grid
|
||||||
|
key="key"
|
||||||
|
on:select
|
||||||
|
on:selectChild
|
||||||
|
on:trigger
|
||||||
|
bind:activeKey
|
||||||
|
{columns}
|
||||||
|
{items}
|
||||||
|
{showHeaders}
|
||||||
|
{contained}
|
||||||
|
/>
|
||||||
|
@ -5,6 +5,7 @@
|
|||||||
import { input } from '../../actions';
|
import { input } from '../../actions';
|
||||||
import ObjectGrid from '../../components/objectgrid.svelte';
|
import ObjectGrid from '../../components/objectgrid.svelte';
|
||||||
import Icon from '../../components/icon.svelte';
|
import Icon from '../../components/icon.svelte';
|
||||||
|
import JsonViewer from '../../components/jsonviewer.svelte';
|
||||||
|
|
||||||
export let collection;
|
export let collection;
|
||||||
|
|
||||||
@ -21,6 +22,7 @@
|
|||||||
let submittedForm = {};
|
let submittedForm = {};
|
||||||
let queryField;
|
let queryField;
|
||||||
let activeKey = '';
|
let activeKey = '';
|
||||||
|
let json = '';
|
||||||
$: 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})` : ''};`;
|
$: 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})` : ''};`;
|
||||||
|
|
||||||
async function submitQuery() {
|
async function submitQuery() {
|
||||||
@ -55,6 +57,12 @@
|
|||||||
queryField?.select();
|
queryField?.select();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function openJson(itemId) {
|
||||||
|
const item = result?.results?.filter(i => i._id == itemId);
|
||||||
|
console.log(item);
|
||||||
|
json = JSON.stringify(item, undefined, 2);
|
||||||
|
}
|
||||||
|
|
||||||
export function performQuery(q) {
|
export function performQuery(q) {
|
||||||
form = { ...defaults, ...q };
|
form = { ...defaults, ...q };
|
||||||
console.log(form);
|
console.log(form);
|
||||||
@ -103,7 +111,7 @@
|
|||||||
<div class="result">
|
<div class="result">
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
{#key result}
|
{#key result}
|
||||||
<ObjectGrid data={result.results} bind:activeKey />
|
<ObjectGrid data={result.results} bind:activeKey on:trigger={e => openJson(e.detail)} />
|
||||||
{/key}
|
{/key}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -128,6 +136,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<JsonViewer bind:json />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.find {
|
.find {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
Loading…
Reference in New Issue
Block a user