noe/bliss
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add templater

Browse source
This commit is contained in:
HRG @ SCExC 2024-06-02 10:20:01 -04:00
parent 4d6c343422
commit c33a49e817
8 changed files with 248 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

36
views/workshop/new_template_modal.eta
View file

@ -1,16 +1,22 @@
<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 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 Template</div>
<div class="title-bar-controls">
<button aria-label="Close" _="on click trigger closeModal"></button>
</div>
</div>
</div>
<div class="window-body">
<pre>Microsoft&#10094;R&#10095; Windows DOS
&#10094;C&#10095; Copyright Microsoft Corp 1990-2001.
<br>C:&#92;WINDOWS&#92;SYSTEM32> You can build a command line easily with a window and pre tag
</pre>
</div>
</div>
<div class="window-body">
<form hx-post="/workshop/<%= it.structure.id %>/template" hx-target="#response">
<div class="field-row-stacked" style="width: 200px">
<label>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>

8
views/workshop/sidebar.eta
View file

@ -24,7 +24,9 @@
<ul>
<% it.templates.map(template => { %>
<li>
<%= template.alias %>
<a href="/workshop/<%= it.structure.id %>/template/<%= template.id %>">
<%= template.name %>
</a>
</li>
<% }) %>
<li hx-get="/workshop/<%= it.structure.id %>/new_template_modal" hx-target="#modal-zone" hx-swap="beforeend" class="cursor-pointer">
@ -41,8 +43,8 @@
<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 href="/workshop/<%= it.structure.id %>/db/<%= db.id %>">
<%= db.alias %>
</a>
</li>
<% }) %>

69
views/workshop/template.eta Normal file
View file

@ -0,0 +1,69 @@
<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">
Template
<div id="template-editor" class="w-full flex-grow"><%= it.template.content %></div>
Test Object
<div id="object-editor" class="w-full flex-grow"><%= it.template.test_object %></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="/workshop/<%= it.template.structure_id %>/template/<%= it.template.id %>/preview"
class="w-full flex-grow"
_="on load set #url's value to my contentWindow.location.href">
</iframe>
</div>
</div>
</div>
</div>
<script>
const templateEditor = ace.edit("template-editor");
templateEditor.setTheme("ace/theme/monokai");
templateEditor.session.setMode("ace/mode/ejs");
const objectEditor = ace.edit("object-editor");
objectEditor.setTheme("ace/theme/monokai");
objectEditor.session.setMode("ace/mode/javascript");
document.getElementById('save-btn').onclick = function() {
fetch('/workshop/<%= it.structure.id %>/template/<%= it.template.id %>', {
method: 'PUT',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
content: templateEditor.getValue(),
test_object: objectEditor.getValue(),
}).toString()
}).then(response => {
if (response.ok) {
document.getElementById('preview').contentWindow.location.reload()
}
});
};
</script>
</body>
</html>