163 lines
No EOL
3.2 KiB
HTML
163 lines
No EOL
3.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Stack {{stack_name}}{% endblock %}
|
|
|
|
{% block content %}
|
|
<main>
|
|
<header>
|
|
<h1>Stack details for <span class="stack-name">{{stack_name}}</span></h1>
|
|
<div class="actions">
|
|
<form action="./start" method="POST"><button type="submit">Start</button></form>
|
|
<form action="./restart" method="POST"><button type="submit">Restart</button></form>
|
|
<form action="./stop" method="POST"><button type="submit">Stop</button></form>
|
|
<form action="./down" method="POST"><button type="submit">Down</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</h2>
|
|
<form method="POST" action="./edit" id="editor-form">
|
|
<textarea name="source" id="editor">{{file_contents}}</textarea>
|
|
<div class="row">
|
|
<input style="flex:1" name="commit_message" type="text"
|
|
placeholder="What did you change?" />
|
|
<button class="wide" type="submit">Deploy</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</main>
|
|
|
|
<style scoped>
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
h2 {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
pre {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.containers {
|
|
& .status {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: white;
|
|
padding: 0 10px;
|
|
|
|
&.exited {
|
|
background-color: #E5484D;
|
|
}
|
|
|
|
&.running {
|
|
background-color: #46A758;
|
|
}
|
|
}
|
|
}
|
|
|
|
.stack-name {
|
|
color: #E796F3;
|
|
}
|
|
|
|
.editor form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5ch;
|
|
|
|
& .row {
|
|
display: flex;
|
|
gap: 0.5ch;
|
|
|
|
& input,
|
|
& button {
|
|
font-size: 13pt;
|
|
padding: 6px 10px;
|
|
|
|
&.wide {
|
|
padding: 6px 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
border: 1px solid #5958B1;
|
|
border-radius: 3px;
|
|
background-color: var(--bg-raised);
|
|
color: var(--text);
|
|
padding: 4px;
|
|
}
|
|
|
|
#editor {
|
|
border-width: 3px;
|
|
min-height: 50vh;
|
|
}
|
|
|
|
.ace_editor {
|
|
min-height: 50vh;
|
|
border: 3px solid #5958B1;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
|
|
& form {
|
|
display: flex;
|
|
min-width: 80px;
|
|
}
|
|
|
|
& button {
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.31.2/ace.min.js"
|
|
integrity="sha512-4qIbBlcJOvbOmEB50FfnviJ9jOCen2yhi4skodkbTLU/uJJdULPxlX2R9Enf1oOBleUK9KD3fGmMcnItFQdNeA=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script>
|
|
var editor = ace.edit("editor");
|
|
editor.setTheme("ace/theme/dracula");
|
|
editor.setOptions({
|
|
fontFamily: "Iosevka Web",
|
|
fontSize: "12pt"
|
|
});
|
|
editor.getSession().setUseWrapMode(true);
|
|
editor.setKeyboardHandler("ace/keyboard/vim");
|
|
editor.session.setMode("ace/mode/nix");
|
|
|
|
document.getElementById("editor-form").addEventListener("formdata", (ev) => {
|
|
ev.formData.set("source", editor.getValue());
|
|
});
|
|
</script>
|
|
|
|
{% endblock %} |