132 lines
3.3 KiB
HTML
132 lines
3.3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Stack {{stack_name}}{% endblock %}
|
|
|
|
{% block content %}
|
|
<script type="module" src="/static/scripts/components/editor/script.js" defer></script>
|
|
<main>
|
|
<header>
|
|
<h1>Stack details for <span class="stack-name">{{stack_name}}</span></h1>
|
|
<div class="actions">
|
|
<form action="./start" method="POST">
|
|
<button title="Start all containers" type="submit">
|
|
Start
|
|
</button>
|
|
</form>
|
|
<form action="./restart" method="POST">
|
|
<button title="Restart containers" type="submit">
|
|
Restart
|
|
</button>
|
|
</form>
|
|
<form action="./stop" method="POST">
|
|
<button title="Stop all containers" type="submit">
|
|
Stop
|
|
</button>
|
|
</form>
|
|
<form action="./down" method="POST">
|
|
<button title="Stop and remove all resources" type="submit">
|
|
Down
|
|
</button>
|
|
</form>
|
|
<form action="./delete" method="GET">
|
|
<button title="Stop and delete everything" type="submit">
|
|
Delete
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
<section class="container-list">
|
|
<h2>Containers</h2>
|
|
<table class="containers table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>State</th>
|
|
<th>Image</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for container in containers %}
|
|
<tr>
|
|
<td><a href="/container/{{container.name}}/">{{container.name}}</a></td>
|
|
<td class="status {{container.state}}">{{container.state}}</td>
|
|
<td>{{container.image}}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
<section class="editor">
|
|
<h2>
|
|
Editor
|
|
<form action="./history"><button title="View past versions">History</button></form>
|
|
</h2>
|
|
<form method="POST" enctype="multipart/form-data" action="./edit" id="editor-form">
|
|
<div class="error"></div>
|
|
{% for (filename, content) in files %}
|
|
<script type="stackfile" data-name="{{filename}}">{{content|safe}}</script>
|
|
<noscript>
|
|
<h3>{{filename}}</h3>
|
|
<textarea name="files/{{filename}}" class="nojs-editor">{{content|safe}}</textarea>
|
|
</noscript>
|
|
{% endfor %}
|
|
<file-editor></file-editor>
|
|
<div class="row">
|
|
<input style="flex:1" name="commit_message" type="text"
|
|
placeholder="What did you change?" />
|
|
<div id="editor-extra"></div>
|
|
<button class="wide" type="submit">Deploy</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</main>
|
|
|
|
<link rel="stylesheet" href="/static/css/editor.css" />
|
|
<link rel="stylesheet" href="/static/css/resource.css" />
|
|
<style scoped>
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.containers {
|
|
& .status {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: white;
|
|
padding: 0 10px;
|
|
|
|
&.exited {
|
|
background-color: var(--danger-bright);
|
|
}
|
|
|
|
&.running {
|
|
background-color: var(--success-bright);
|
|
}
|
|
}
|
|
}
|
|
|
|
.stack-name {
|
|
color: var(--text-accent);
|
|
}
|
|
</style>
|
|
|
|
<script type="module">
|
|
const editor = document.querySelector("file-editor");
|
|
const form = document.getElementById("editor-form");
|
|
document.querySelectorAll("script[type=stackfile]").forEach((script) => {
|
|
editor.addFile(script.dataset.name, script.innerText);
|
|
});
|
|
editor.setCurrent("arion-compose.nix");
|
|
|
|
/* Enforce check pre-submit */
|
|
//add_check(form, editor);
|
|
form.addEventListener("formdata", (ev) => {
|
|
editor.files().forEach(([filename, content]) => {
|
|
ev.formData.set(`files/${filename}`, content);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% endblock %} |