wow
This commit is contained in:
HRG @ SCExC
parent
e335c65506
commit
23414c7b66
490 changed files with 340402 additions and 93 deletions
79
views/workshop/db_garden.eta
Normal file
79
views/workshop/db_garden.eta
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="/css/xp.css">
|
||||
<script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="flex flex-col w-full h-full window">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">Workshop - <%~ include('/workshop/structure_name', {structure: it.structure}) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row flex-grow window-body">
|
||||
<div class="w-1/5 h-full">
|
||||
<%~ include('/workshop/sidebar', it) %>
|
||||
</div>
|
||||
<div id="main-editor" class="flex flex-grow">
|
||||
<div id="left-pane" class="w-1/2 flex-grow h-full flex flex-col">
|
||||
<h1>LIBRARY</h1>
|
||||
<div id="library-editor" class="w-full flex-grow"><%= it.db.library %></div>
|
||||
<button id="save-library" type="submit">Save</button>
|
||||
</div>
|
||||
<div id="preview-area" class="w-1/2 h-full flex flex-col">
|
||||
<h1>REPL</h1>
|
||||
<div id="repl-editor" class="w-full h-1/2">// evaluate code in here
|
||||
</div>
|
||||
<button id="send-repl">RUN</button>
|
||||
<pre id="console-output" class="flex-grow h-full overflow-scroll">stuff goes here</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var libraryEditor = ace.edit("library-editor");
|
||||
libraryEditor.setTheme("ace/theme/monokai");
|
||||
libraryEditor.session.setMode("ace/mode/javascript");
|
||||
|
||||
var replEditor = ace.edit("repl-editor")
|
||||
replEditor.setTheme("ace/theme/monokai");
|
||||
replEditor.session.setMode("ace/mode/javascript");
|
||||
|
||||
document.getElementById('save-library').onclick = function() {
|
||||
fetch('/workshop/<%= it.structure.id %>/db/<%= it.db.id %>/library', {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
library: libraryEditor.getValue()
|
||||
}).toString()
|
||||
}).then(response => {
|
||||
response.text().then((val) => {
|
||||
document.getElementById("console-output").innerHTML = val;
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById('send-repl').onclick = function() {
|
||||
fetch('/workshop/<%= it.structure.id %>/db/<%= it.db.id %>/repl', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
code: replEditor.getValue()
|
||||
}).toString()
|
||||
}).then(response => {
|
||||
response.text().then((val) => {
|
||||
document.getElementById("console-output").innerHTML = val;
|
||||
})
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,29 +1,25 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://unpkg.com/xp.css">
|
||||
<link rel="stylesheet" href="/css/xp.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="flex flex-col w-full h-full window">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">Workshop - <%- include('/workshop/structure_name', {structure: it.structure}) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-grow window-body">
|
||||
<div id="left-pane" class="flex w-1/2 bg-blue-500 h-full">
|
||||
<div id="toggle" class="w-1/5 bg-red-500 h-full">
|
||||
<%- include('/workshop/sidebar') %>
|
||||
</div>
|
||||
<div id="code-area" class="flex-grow bg-black h-full">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="preview-area" class="w-1/2 bg-green-500 h-full">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col w-full h-full window">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">Workshop - <%~ include('/workshop/structure_name', {structure: it.structure}) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row flex-grow window-body">
|
||||
<div class="w-1/5 h-full">
|
||||
<%~ include('/workshop/sidebar', it) %>
|
||||
</div>
|
||||
<div id="main-editor" class="flex flex-grow">
|
||||
<div id="left-pane" class="w-1/2 flex-grow bg-black h-full">
|
||||
</div>
|
||||
<div id="preview-area" class="w-1/2 bg-green-500 h-full">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<button _="on click toggle .hidden on #new-structure">+ new structure</button>
|
||||
<div id="new-structure" class="hidden">
|
||||
<div id="new-structure" class="hhiddenn">
|
||||
<form action="/workshop" method="POST">
|
||||
<label for="name">come up with a name for your structure and enter it here.</label>
|
||||
<input name="name">
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<% structures.map(structure => { %>
|
||||
<% it.structures.map(structure => { %>
|
||||
<a href="/workshop/<%= structure.id %>">
|
||||
<%= structure.name %>
|
||||
</a>
|
||||
|
|
|
|||
22
views/workshop/new_db_modal.eta
Normal file
22
views/workshop/new_db_modal.eta
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<div class="fixed inset-0 flex items-center justify-center z-10" _="on closeModal remove me">
|
||||
<div class="window max-w-[768px]">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">Create or Add DB</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Close" _="on click trigger closeModal"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<form hx-post="/workshop/<%= it.structure.id %>/db" hx-target="#response">
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="name">Name</label>
|
||||
<input name="name" id="name" type="text" />
|
||||
</div>
|
||||
<section class="field-row" style="justify-content: flex-end">
|
||||
<button type="submit">OK</button>
|
||||
<button type="button" _="on click trigger closeModal">Cancel</button>
|
||||
</section>
|
||||
</form>
|
||||
<div id="response"></div>
|
||||
</div>
|
||||
</div>
|
||||
41
views/workshop/new_route_modal.eta
Normal file
41
views/workshop/new_route_modal.eta
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<div class="fixed inset-0 flex items-center justify-center z-10" _="on closeModal remove me">
|
||||
<div class="window max-w-[768px]">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">Create Route</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Close" _="on click trigger closeModal"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<form hx-post="/workshop/<%= it.structure.id %>/route" hx-target="#response">
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="path">Path (e.g. /foo/bar)</label>
|
||||
<input name="path" id="name" type="text" />
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend>verb</legend>
|
||||
<div class="field-row">
|
||||
<input id="get" checked type="radio" name="verb" value="GET">
|
||||
<label for="get">GET</label>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<input id="post" type="radio" name="verb" value="POST">
|
||||
<label for="post">POST</label>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<input id="patch" type="radio" name="verb" value="PATCH">
|
||||
<label for="patch">PATCH</label>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<input id="delete" type="radio" name="verb" value="DELETE">
|
||||
<label for="delete">DELETE</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<section class="field-row" style="justify-content: flex-end">
|
||||
<button type="submit">OK</button>
|
||||
<button type="button" _="on click trigger closeModal">Cancel</button>
|
||||
</section>
|
||||
</form>
|
||||
<div id="response"></div>
|
||||
</div>
|
||||
</div>
|
||||
16
views/workshop/new_template_modal.eta
Normal file
16
views/workshop/new_template_modal.eta
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<div class="window" _="on closeModal remove me">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">Command Prompt</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close" _="on click trigger closeModal"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<pre>Microsoft❮R❯ Windows DOS
|
||||
❮C❯ Copyright Microsoft Corp 1990-2001.
|
||||
<br>C:\WINDOWS\SYSTEM32> You can build a command line easily with a window and pre tag
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
61
views/workshop/route.eta
Normal file
61
views/workshop/route.eta
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="/css/xp.css">
|
||||
<script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="flex flex-col w-full h-full window">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">Workshop - <%~ include('/workshop/structure_name', {structure: it.structure}) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row flex-grow window-body">
|
||||
<div class="w-1/5 h-full">
|
||||
<%~ include('/workshop/sidebar', it) %>
|
||||
</div>
|
||||
<div id="main-editor" class="flex flex-grow">
|
||||
<div id="left-pane" class="w-1/2 flex-grow h-full flex flex-col">
|
||||
<div id="editor" class="w-full flex-grow"><%= it.route.handler %></div>
|
||||
<button id="save-btn" type="submit">Save</button>
|
||||
</div>
|
||||
<div id="preview-area" class="w-1/2 h-full flex flex-col">
|
||||
<form _="on submit halt the event then set #preview's contentWindow.location.href to #url's value">
|
||||
<input id="url" class="w-full">
|
||||
</form>
|
||||
<iframe id="preview"
|
||||
src="<%= it.previewUrl %>"
|
||||
class="w-full flex-grow"
|
||||
_="on load set #url's value to my contentWindow.location.href">
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var editor = ace.edit("editor");
|
||||
editor.setTheme("ace/theme/monokai");
|
||||
editor.session.setMode("ace/mode/javascript");
|
||||
|
||||
document.getElementById('save-btn').onclick = function() {
|
||||
fetch('/workshop/<%= it.structure.id %>/route/<%= it.route.id %>', {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
handler: editor.getValue()
|
||||
}).toString()
|
||||
}).then(response => {
|
||||
if (response.ok) {
|
||||
document.getElementById('preview').contentWindow.location.reload()
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1 +1,58 @@
|
|||
sdf
|
||||
<ul class="tree-view">
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Routes</summary>
|
||||
<ul>
|
||||
<% it.routes.map(route => { %>
|
||||
<li>
|
||||
<a href="/workshop/<%= it.structure.id %>/route/<%= route.id %>">
|
||||
<%= route.verb %> - <%= route.path %>
|
||||
</a>
|
||||
</li>
|
||||
<% }) %>
|
||||
<li hx-get="/workshop/<%= it.structure.id %>/new_route_modal" hx-target="#modal-zone" hx-swap="beforeend" class="cursor-pointer">
|
||||
<strong style="color: purple">
|
||||
+ add
|
||||
</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Templates</summary>
|
||||
<ul>
|
||||
<% it.templates.map(template => { %>
|
||||
<li>
|
||||
<%= template.alias %>
|
||||
</li>
|
||||
<% }) %>
|
||||
<li hx-get="/workshop/<%= it.structure.id %>/new_template_modal" hx-target="#modal-zone" hx-swap="beforeend" class="cursor-pointer">
|
||||
<strong style="color: purple">
|
||||
+ add
|
||||
</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details open>
|
||||
<summary>DBs</summary>
|
||||
<ul>
|
||||
<% it.dbs.map(db => { %>
|
||||
<li class="<% if (it.db?.id == db.id) { %>font-bold text-green-800<% } %>">
|
||||
<a href="/workshop/<%= it.structure.id %>/db/<%= db.id %>">
|
||||
<%= db.alias %>
|
||||
</a>
|
||||
</li>
|
||||
<% }) %>
|
||||
<li hx-get="/workshop/<%= it.structure.id %>/new_db_modal" hx-target="#modal-zone" hx-swap="beforeend" class="cursor-pointer">
|
||||
<strong style="color: purple">
|
||||
+ add
|
||||
</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="modal-zone" style="z-index: 1000000;"></div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue