This commit is contained in:
mike12345567 2021-01-26 12:43:26 +00:00
parent c8f8fec8a0
commit c8295f0fbd
10 changed files with 106 additions and 98 deletions

View File

@ -20,12 +20,9 @@
</script>
<div on:click|stopPropagation bind:this={anchor}>
<TextButton
text
on:click={dropdown.show}
active={false}>
<Icon name="add" />
Add Parameters
<TextButton text on:click={dropdown.show} active={false}>
<Icon name="add" />
Add Parameters
</TextButton>
<DropdownMenu align="right" {anchor} bind:this={dropdown}>
<div class="wrapper">

View File

@ -1,6 +1,6 @@
<script>
import { notificationStore } from "builderStore/store/notifications"
import { flip } from 'svelte/animate';
import { flip } from "svelte/animate"
import { fly } from "svelte/transition"
export let themes = {

View File

@ -24,8 +24,8 @@
</script>
<form on:submit|preventDefault>
<div class="field">
{#each schemaKeys as field}
<div class="field">
{#each schemaKeys as field}
<Input
placeholder="Enter {field} name"
outline
@ -33,8 +33,8 @@
type={schema.fields[field]?.type}
required={schema.fields[field]?.required}
bind:value={fields[field]} />
{/each}
</div>
{/each}
</div>
</form>
{#if schema.customisable}
<Editor

View File

@ -135,17 +135,22 @@
<Input placeholder="✎ Edit Query Name" bind:value={query.name} />
</div>
{#if config}
<div class="props">
<div class="query-type">Query type: <span class="query-type-span">{config[query.queryVerb].type}</span></div>
<div class="select">
<Select primary thin bind:value={query.queryVerb}>
{#each Object.keys(config) as queryVerb}
<option value={queryVerb}>{queryVerb}</option>
{/each}
</Select>
</div>
<div class="props">
<div class="query-type">
Query type:
<span class="query-type-span">{config[query.queryVerb].type}</span>
</div>
<div class="select">
<Select primary thin bind:value={query.queryVerb}>
{#each Object.keys(config) as queryVerb}
<option value={queryVerb}>{queryVerb}</option>
{/each}
</Select>
</div>
</div>
<EditQueryParamsPopover bind:parameters={query.parameters} bindable={false} />
<EditQueryParamsPopover
bind:parameters={query.parameters}
bindable={false} />
{/if}
</header>
<Spacer extraLarge />
@ -162,10 +167,7 @@
<Spacer large />
<div class="viewer-controls">
<Button
blue
disabled={data.length === 0}
on:click={saveQuery}>
<Button blue disabled={data.length === 0} on:click={saveQuery}>
Save Query
</Button>
<Button primary on:click={previewQuery}>Run Query</Button>
@ -182,7 +184,11 @@
{#each fields as field, idx}
<Spacer small />
<div class="field">
<Input outline placeholder="Field Name" type={'text'} bind:value={field.name} />
<Input
outline
placeholder="Field Name"
type={'text'}
bind:value={field.name} />
<Select thin border bind:value={field.type}>
<option value={''}>Select a field type</option>
<option value={'STRING'}>Text</option>
@ -195,8 +201,8 @@
on:click={() => deleteField(idx)} />
</div>
{/each}
<Spacer small />
<Button thin secondary on:click={newField}>Add Field</Button>
<Spacer small />
<Button thin secondary on:click={newField}>Add Field</Button>
{/if}
</Switcher>
{/if}
@ -206,7 +212,6 @@
{/if}
<style>
.input {
width: 300px;
}

View File

@ -20,7 +20,6 @@
}
</script>
{#if schema}
{#key query._id}
{#if schema.type === QueryTypes.SQL}

View File

@ -59,7 +59,6 @@
</div>
</div>
</section>
{/if}
<style>

View File

@ -2,9 +2,14 @@
import { writable } from "svelte/store"
import { setContext, onMount } from "svelte"
import Component from "./Component.svelte"
import NotificationDisplay from './NotificationDisplay.svelte'
import NotificationDisplay from "./NotificationDisplay.svelte"
import SDK from "../sdk"
import { createDataStore, initialise, screenStore, notificationStore } from "../store"
import {
createDataStore,
initialise,
screenStore,
notificationStore,
} from "../store"
// Provide contexts
setContext("sdk", SDK)

View File

@ -1,60 +1,59 @@
<script>
import { flip } from 'svelte/animate';
import { fly } from "svelte/transition"
import { getContext } from "svelte"
const { notifications } = getContext("sdk")
import { flip } from "svelte/animate"
import { fly } from "svelte/transition"
import { getContext } from "svelte"
const { notifications } = getContext("sdk")
export let themes = {
danger: "#E26D69",
success: "#84C991",
warning: "#f0ad4e",
info: "#5bc0de",
default: "#aaaaaa",
}
</script>
export let themes = {
danger: "#E26D69",
success: "#84C991",
warning: "#f0ad4e",
info: "#5bc0de",
default: "#aaaaaa",
}
</script>
<div class="notifications">
{#each $notifications as notification (notification.id)}
<div
animate:flip
class="toast"
style="background: {themes[notification.type]};"
transition:fly={{ y: -30 }}>
<div class="content">{notification.message}</div>
{#if notification.icon}<i class={notification.icon} />{/if}
</div>
{/each}
</div>
<div class="notifications">
{#each $notifications as notification (notification.id)}
<div
animate:flip
class="toast"
style="background: {themes[notification.type]};"
transition:fly={{ y: -30 }}>
<div class="content">{notification.message}</div>
{#if notification.icon}<i class={notification.icon} />{/if}
</div>
{/each}
</div>
<style>
.notifications {
position: fixed;
top: 10px;
left: 0;
right: 0;
margin: 0 auto;
padding: 0;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
pointer-events: none;
}
<style>
.notifications {
position: fixed;
top: 10px;
left: 0;
right: 0;
margin: 0 auto;
padding: 0;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
pointer-events: none;
}
.toast {
flex: 0 0 auto;
margin-bottom: 10px;
border-radius: var(--border-radius-s);
/* The toasts now support being auto sized, so this static width could be removed */
width: 40vw;
}
.content {
padding: 10px;
display: block;
color: white;
font-weight: 500;
}
</style>
.toast {
flex: 0 0 auto;
margin-bottom: 10px;
border-radius: var(--border-radius-s);
/* The toasts now support being auto sized, so this static width could be removed */
width: 40vw;
}
.content {
padding: 10px;
display: block;
color: white;
font-weight: 500;
}
</style>

View File

@ -1,7 +1,11 @@
const Helper = require("./Helper")
const { SafeString } = require("handlebars")
const externalHandlebars = require("./external")
const { HelperFunctionNames, HelperFunctionBuiltin, LITERAL_MARKER } = require("./constants")
const {
HelperFunctionNames,
HelperFunctionBuiltin,
LITERAL_MARKER,
} = require("./constants")
const HTML_SWAPS = {
"<": "&lt;",
@ -29,10 +33,10 @@ const HELPERS = [
}),
// adds a note for post-processor
new Helper(HelperFunctionNames.LITERAL, value => {
const type = typeof(value)
const type = typeof value
const outputVal = type === "object" ? JSON.stringify(value) : value
return `{{-${LITERAL_MARKER}-${type}-${outputVal}-}}`
})
}),
]
module.exports.HelperNames = () => {

View File

@ -39,5 +39,5 @@ module.exports.processors = [
return JSON.parse(value)
}
return value
})
}),
]