add templater
This commit is contained in:
parent
4d6c343422
commit
c33a49e817
8 changed files with 248 additions and 27 deletions
69
views/workshop/template.eta
Normal file
69
views/workshop/template.eta
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue