{% extends "base.html" %} {% block title %}{{ config.name }}{% endblock %} {%
block content %}
<article>
<div class="footernav">
<div class="item">
<a href="?">< Back</a>
</div>
<div class="item">
<b>{{ services.len() }}</b>
total
</div>
</div>
<fieldset>
<legend>Server Services</legend>
<div style="display: flex; flex-direction: column">
{% for service in services %}
<div style="display: flex; gap: 0.5rem">
{% if !service.2 %}
<button onclick="globalThis.start_service(event, '{{ service.0 }}')">Start</button>
<button
onclick="globalThis.uninstall_service(event, '{{ service.0 }}')"
id="{{ service.0 }}/buttons/uninstall"
>
Uninstall
</button>
{% else %}
<button onclick="globalThis.kill_service(event, '{{ service.0 }}')">Stop</button>
<button
onclick="globalThis.get_service_info(event, '{{ service.0 }}')"
id="{{ service.0 }}/buttons/info"
>
Info
</button>
{% endif %}
<details style="width: 100%">
<summary>{{ service.0 }}</summary>
<div style="display: flex; flex-direction: column">
<pre><code id="{{ service.0 }}/boxes/command">{{ service.1.command }}</code></pre>
<pre><code id="{{ service.0 }}/boxes/info"></code></pre>
</div>
</details>
</div>
{% endfor %}
</div>
</fieldset>
<fieldset>
<legend>Install Service</legend>
<div style="display: flex; flex-direction: column">
<form id="install_form">
<div class="row">
<label for="registry">Registry</label>
<div style="display: flex; gap: 0.2rem">
<button
onclick="document.getElementById('registry').value = window.location.host"
title="Use this registry"
type="button"
>
T
</button>
<input
name="registry"
id="registry"
type="text"
placeholder="swmff.org"
/>
</div>
</div>
<div class="row">
<label for="service">Service</label>
<input
name="service"
id="service"
type="text"
placeholder="Service Name"
/>
</div>
<button id="install_button">Submit</button>
</form>
</div>
</fieldset>
<script type="text/plain" id="key">{{ key|safe }}</script>
<script>
globalThis.start_service = (e, name) => {
fetch("/start", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
key: document.getElementById("key").innerHTML,
service: name,
}),
})
.then((res) => res.json())
.then((res) => {
alert(`${res.ok ? "OK" : "ERR"} ${res.data}`);
if (res.ok) {
e.target.innerText = "Stop";
e.target.setAttribute(
"onclick",
`globalThis.kill_service(event, '${name}')`,
);
document.getElementById(
`${name}/buttons/uninstall`,
).innerText = "Info";
document
.getElementById(`${name}/buttons/uninstall`)
.setAttribute(
"onclick",
`globalThis.get_service_info(event, '${name}')`,
);
document.getElementById(
`${name}/buttons/uninstall`,
).id = `${name}/buttons/info`;
}
});
};
globalThis.kill_service = (e, name) => {
fetch("/kill", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
key: document.getElementById("key").innerHTML,
service: name,
}),
})
.then((res) => res.json())
.then((res) => {
alert(`${res.ok ? "OK" : "ERR"} ${res.data}`);
if (res.ok) {
e.target.innerText = "Start";
e.target.setAttribute(
"onclick",
`globalThis.start_service(event, '${name}')`,
);
document.getElementById(
`${name}/buttons/info`,
).innerText = "Uninstall";
document
.getElementById(`${name}/buttons/info`)
.setAttribute(
"onclick",
`globalThis.uninstall_service(event, '${name}')`,
);
document.getElementById(`${name}/buttons/info`).id =
`${name}/buttons/uninstall`;
}
});
};
globalThis.uninstall_service = (e, name) => {
if (!confirm("Are you sure you would like to do this?")) {
return;
}
fetch("/uninstall", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
key: document.getElementById("key").innerHTML,
service: name,
}),
})
.then((res) => res.json())
.then((res) => {
alert(`${res.ok ? "OK" : "ERR"} ${res.data}`);
if (res.ok) {
window.location.reload();
}
});
};
globalThis.get_service_info = (e, name) => {
fetch("/info", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
key: document.getElementById("key").innerHTML,
service: name,
}),
})
.then((res) => res.json())
.then((res) => {
document.getElementById(`${name}/boxes/info`).innerText =
res.data;
});
};
document
.getElementById("install_form")
.addEventListener("submit", (e) => {
e.preventDefault();
if (!confirm("Are you sure you would like to do this?")) {
return;
}
document
.getElementById("install_button")
.setAttribute("disabled", "");
fetch("/install", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
key: document.getElementById("key").innerHTMLt,
registry: e.target.registry.value,
service: e.target.service.value,
}),
})
.then((res) => res.json())
.then((res) => {
e.target.reset();
alert(`${res.ok ? "OK" : "ERR"} ${res.data}`);
document
.getElementById("install_button")
.removeAttribute("disabled");
});
});
</script>
</article>
{% call super() %} {% endblock %}