|
|
|
|
@ -1,7 +1,8 @@ |
|
|
|
|
<script> |
|
|
|
|
import template from "lodash/template"; |
|
|
|
|
import { fade } from "svelte/transition"; |
|
|
|
|
import Icon from "$/client/components/Icon.svelte"; |
|
|
|
|
import Toasts from "$/client/components/Toasts.svelte"; |
|
|
|
|
import Code from "$/client/components/Code.svelte"; |
|
|
|
|
import { log } from "$/client/logging.js"; |
|
|
|
|
import Layout from "../Layout.svelte"; |
|
|
|
|
import api from '$/client/api.js'; |
|
|
|
|
@ -19,6 +20,15 @@ |
|
|
|
|
let renderer = () => source; |
|
|
|
|
let notice = ""; |
|
|
|
|
let last_good = ""; |
|
|
|
|
let send_toast; |
|
|
|
|
|
|
|
|
|
let language = "javascript"; |
|
|
|
|
const language_list = { |
|
|
|
|
"html": "html", |
|
|
|
|
"svelte": "javascript", |
|
|
|
|
"sh": "shell", |
|
|
|
|
"js": "javascript" |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const list_generators = async () => { |
|
|
|
|
let [status, data] = await api.get('/api/devtools/djenterator'); |
|
|
|
|
@ -43,6 +53,7 @@ |
|
|
|
|
|
|
|
|
|
return true; |
|
|
|
|
} catch(err) { |
|
|
|
|
log.error(err); |
|
|
|
|
notice = err.message; |
|
|
|
|
results = last_good; |
|
|
|
|
return false; |
|
|
|
|
@ -60,12 +71,19 @@ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const detect_language = (name) => { |
|
|
|
|
const ext = name.split(".")[1]; |
|
|
|
|
language = language_list[ext]; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const load_template = async (template_name) => { |
|
|
|
|
let res = await fetch(`/djenterator/${template_name}`); |
|
|
|
|
|
|
|
|
|
if(res.status == 200) { |
|
|
|
|
source = await res.text(); |
|
|
|
|
last_good = source; |
|
|
|
|
detect_language(template_name); |
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
renderer = template(source); |
|
|
|
|
// tag this template renderer so that we don't try to render it against the wrong one |
|
|
|
|
@ -81,16 +99,6 @@ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const toggle_template = () => { |
|
|
|
|
if(showing_rendered) { |
|
|
|
|
render_template(); |
|
|
|
|
} else { |
|
|
|
|
results = renderer.toString(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
showing_rendered = !showing_rendered; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const copy_code = () => { |
|
|
|
|
navigator.clipboard.writeText(results).then(() => { |
|
|
|
|
notice = "Code copied to clipboard."; |
|
|
|
|
@ -99,9 +107,6 @@ |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const canary = '3a025dba-1a62-4169-ae9f-f7cd4104c4f4'; |
|
|
|
|
log.debug("Canary is compiled into build as", canary); |
|
|
|
|
|
|
|
|
|
$: if(variable_json) render_template(); |
|
|
|
|
|
|
|
|
|
// this reload the templates when you click on a new one |
|
|
|
|
@ -116,142 +121,32 @@ |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
content { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: row; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
template-editor { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
width: 100%; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
pre { |
|
|
|
|
position: relative; |
|
|
|
|
height: 90vh; |
|
|
|
|
max-height: 90vh; |
|
|
|
|
overflow-y: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
right pre { |
|
|
|
|
display: flex; |
|
|
|
|
font-size: 1em; |
|
|
|
|
flex-basis: 100%; |
|
|
|
|
margin: 0; |
|
|
|
|
padding: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
right pre code { |
|
|
|
|
padding-top: 2rem; |
|
|
|
|
display: flex; |
|
|
|
|
flex-basis: 100%; |
|
|
|
|
border-radius: 0px 4px 4px 0px; |
|
|
|
|
line-height: unset; |
|
|
|
|
margin: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
left { |
|
|
|
|
display: flex; |
|
|
|
|
flex-grow: 1; |
|
|
|
|
flex-basis: 70ch; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
left textarea { |
|
|
|
|
border-radius: 4px 0px 0px 4px; |
|
|
|
|
margin: 0; |
|
|
|
|
background-color: var(--color-secondary); |
|
|
|
|
color: var(--color-bg); |
|
|
|
|
height: 90vh; |
|
|
|
|
max-height: 90vh; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
right { |
|
|
|
|
position: relative; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
flex-grow: 3; |
|
|
|
|
flex-basis: 100ch; |
|
|
|
|
align-items: stretch; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
status { |
|
|
|
|
position: absolute; |
|
|
|
|
z-index: 100; |
|
|
|
|
top: 0; |
|
|
|
|
padding-right: 1rem; |
|
|
|
|
padding-left: 1rem; |
|
|
|
|
padding-top: 0.1rem; |
|
|
|
|
width: 90%; |
|
|
|
|
color: var(--color-bg); |
|
|
|
|
display: flex; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
background-color: var(--color-secondary); |
|
|
|
|
border-radius: 0px 4px 0px 0px; |
|
|
|
|
justify-content: space-evenly; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
status file { |
|
|
|
|
flex-basis: 90%; |
|
|
|
|
text-align: right; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
status buttons { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-around; |
|
|
|
|
flex-basis: 10%; |
|
|
|
|
padding-top: 0.5rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
pre notice { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 0; |
|
|
|
|
left: 0.3rem; |
|
|
|
|
right: 0.3rem; |
|
|
|
|
text-align: right; |
|
|
|
|
padding: 0.5rem; |
|
|
|
|
font-size: 1rem; |
|
|
|
|
background-color: var(--color-bg-tertiary); |
|
|
|
|
border-radius: 4px 4px 0px 0px; |
|
|
|
|
textarea.editor { |
|
|
|
|
height: 15em; |
|
|
|
|
background-color: var(--value0); |
|
|
|
|
color: var(--value9); |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
<Layout fullscreen={ true } header={ false } testid="page-bando-djenterator"> |
|
|
|
|
<template-editor> |
|
|
|
|
<select bind:value={ selected_template }> |
|
|
|
|
{#each generators as template} |
|
|
|
|
<option value={ template }>{ template }</option> |
|
|
|
|
{/each} |
|
|
|
|
</select> |
|
|
|
|
|
|
|
|
|
<content> |
|
|
|
|
<left> |
|
|
|
|
<textarea class="editor" bind:value={ variable_json } rows="15"></textarea> |
|
|
|
|
</left> |
|
|
|
|
|
|
|
|
|
<right> |
|
|
|
|
<status> |
|
|
|
|
<buttons> |
|
|
|
|
<span on:click={ copy_code }><Icon name="copy" size="24" color="var(--color-bg)" /></span> |
|
|
|
|
<span on:click={ toggle_template }><Icon name="code" size="24" color="var(--color-bg)" /></span> |
|
|
|
|
</buttons> |
|
|
|
|
|
|
|
|
|
<file>static/djenterator/{ selected_template }</file> |
|
|
|
|
</status> |
|
|
|
|
<pre> |
|
|
|
|
<code> |
|
|
|
|
{results} |
|
|
|
|
</code> |
|
|
|
|
|
|
|
|
|
{#if notice} |
|
|
|
|
<notice in:fade on:click={ () => notice = "" }> |
|
|
|
|
<b>{ notice }</b> |
|
|
|
|
</notice> |
|
|
|
|
{/if} |
|
|
|
|
</pre> |
|
|
|
|
</right> |
|
|
|
|
</content> |
|
|
|
|
<template-editor> |
|
|
|
|
<blockstart style="width: 100%"> |
|
|
|
|
<block style="--w: 100%"> |
|
|
|
|
<select bind:value={ selected_template }> |
|
|
|
|
{#each generators as template} |
|
|
|
|
<option value={ template }>{ template }</option> |
|
|
|
|
{/each} |
|
|
|
|
</select> |
|
|
|
|
|
|
|
|
|
<textarea class="editor" bind:value={ variable_json }></textarea> |
|
|
|
|
{#if notice} |
|
|
|
|
<callout class="error">{notice}</callout> |
|
|
|
|
{/if} |
|
|
|
|
|
|
|
|
|
{#if results} |
|
|
|
|
<Code on:copy={ send_toast("Copied to clipboard!") } content={ results } language={ language } /> |
|
|
|
|
{/if} |
|
|
|
|
|
|
|
|
|
</block> |
|
|
|
|
</blockstart> |
|
|
|
|
<Toasts bind:send_toast fade_after={ 10000 } orientation="bottom right" /> |
|
|
|
|
</Layout> |
|
|
|
|
|
