PY_DOCKER_DASHBOARD/templates/index.html

109 lines
4.2 KiB
HTML
Raw Normal View History

2023-08-04 17:23:47 +00:00
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{title}}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<style>
</style>
</head>
2023-08-07 07:42:01 +00:00
<body data-bs-theme="dark">
2023-08-04 17:23:47 +00:00
<div class="container-fluid">
2023-08-07 07:42:01 +00:00
<h1>Containers</h1>
<div class="row row-cols-auto g-2">
2023-08-04 17:23:47 +00:00
{% for container in containers %}
2023-08-07 07:42:01 +00:00
<div class="col-6 col-sm-4 col-md-4 col-lg-3 col-xxl-2">
<div class="border h-100 p-3">
2023-08-04 17:23:47 +00:00
<div class="square-content" onclick="openModalForContainer('{{container.id}}')">
<!-- Content for the square item -->
<div class="d-flex justify-content-between">
<img height="60" width="60"
src="https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/nginx.svg" alt="">
<div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse"
onclick="toggleContainer('{{container.id}}', '{{container.status}}', this, event);" {% if
container.status=="running" %} checked {% endif %}>
2023-08-07 07:42:01 +00:00
<label class="form-check-label d-none d-md-block " for="flexSwitchCheckReverse">isRunning</label>
2023-08-04 17:23:47 +00:00
</div>
</div>
2023-08-07 07:42:01 +00:00
<h4 class="text-truncate">{{container.attrs['Config']['Labels']['com.docker.compose.project']}}</h4>
2023-08-04 17:23:47 +00:00
<h5 class="text-truncate">{{container.name}}</h5>
2023-08-07 07:42:01 +00:00
{% if container.status=="running" %}
2023-08-04 17:23:47 +00:00
{% for port in container.attrs['NetworkSettings']['Ports'] %}
2023-08-07 07:42:01 +00:00
<a href="//127.0.0.1:{{ port.split(" /")[0] }}" target="_blank">{{ port.split("/")[0] }}</a>
2023-08-04 17:23:47 +00:00
{%endfor%}
2023-08-07 07:42:01 +00:00
{%endif%}
2023-08-04 17:23:47 +00:00
</div>
</div>
</div>
{%endfor%}
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
2023-08-07 07:42:01 +00:00
<div class="modal-dialog modal-fullscreen-sm-down">
2023-08-04 17:23:47 +00:00
<div class="modal-content">
2023-08-07 07:42:01 +00:00
<div class="modal-body">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
2023-08-04 17:23:47 +00:00
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
<script>
async function toggleContainer(container_id, status, control, control_event) {
//control_event.preventDefault();
control_event.stopPropagation();
console.log(control);
control.disabled = true;
route = (status == 'running' ? 'stop' : 'start')
method = (status == 'running' ? 'DELETE' : 'POST')
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText)
control.checked = (this.responseText == 'running' ? true : false);
}
control.disabled = false;
};
xhttp.open(method, '/api/' + container_id + '/' + route, true);
xhttp.send();
2023-08-07 07:42:01 +00:00
await new Promise(r => setTimeout(() => r(), 1500));
2023-08-04 17:23:47 +00:00
window.location.reload();
}
function openModalForContainer(container_id) {
2023-08-07 07:42:01 +00:00
document.getElementById('exampleModal').getElementsByClassName('modal-content')[0].innerHTML = "<div class=\"modal-body\"><div class=\"spinner-border\" role=\"status\"><span class=\"visually-hidden\">Loading...</span></div></div>"
2023-08-04 17:23:47 +00:00
const myModal = new bootstrap.Modal('#exampleModal')
myModal.show()
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
document.getElementById('exampleModal').getElementsByClassName('modal-content')[0].innerHTML = this.responseText;
}
xhttp.open("GET", "/parts/modal/container/" + container_id, true);
xhttp.send();
}
</script>
</body>
</html>