staxman-old/templates/stack/get-one.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 %}