76 lines
2.8 KiB
Text
76 lines
2.8 KiB
Text
|
<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">
|
||
|
|
Route
|
||
|
|
<div id="route-editor" class="w-full flex-grow"><%= it.route.handler %></div>
|
||
|
|
<input id="urlparams" name="urlparams">
|
||
|
|
<input id="queryparams" name="queryparams">
|
||
|
|
Test Page
|
||
|
|
<div id="scaffold-editor" class="w-full flex-grow"><%= it.route.scaffold_page_content %></div>
|
||
|
|
<button id="save-btn" type="submit">Save</button>
|
||
|
|
<button id="logs-btn" type="submit" _="on click toggle .hidden on #logs">Logs</button>
|
||
|
|
</div>
|
||
|
|
<pre id="logs" class="max-h-[50vh] overflow-scroll flex hidden" hx-get="/workshop/<%= it.structure.id %>/route/<%= it.route.id %>/logs" hx-trigger="load">
|
||
|
|
</pre>
|
||
|
|
|
||
|
|
</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.route.structure_id %>/route/<%= it.route.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 routeEditor = ace.edit("route-editor");
|
||
|
|
routeEditor.setTheme("ace/theme/monokai");
|
||
|
|
routeEditor.session.setMode("ace/mode/javascript");
|
||
|
|
|
||
|
|
const scaffoldEditor = ace.edit("scaffold-editor");
|
||
|
|
scaffoldEditor.setTheme("ace/theme/monokai");
|
||
|
|
scaffoldEditor.session.setMode("ace/mode/ejs");
|
||
|
|
|
||
|
|
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: routeEditor.getValue(),
|
||
|
|
scaffold_page: scaffoldEditor.getValue(),
|
||
|
|
}).toString()
|
||
|
|
}).then(response => {
|
||
|
|
if (response.ok) {
|
||
|
|
document.getElementById('preview').contentWindow.location.reload()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|