{% 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 %}