AJAX schedule enabled status

This is buggy in its current state
This commit is contained in:
luukas 2022-06-23 01:58:06 +03:00
parent 147f178c87
commit f951b49e2f
No known key found for this signature in database
GPG Key ID: CC4915E8D71FC044
2 changed files with 44 additions and 22 deletions

View File

@ -37,6 +37,11 @@
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- End Alpine.js -->
<!-- Bootstrap Toggle -->
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script defer src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<!-- End Bootstrap Toggle -->
</head>
<body class="dark-theme">

View File

@ -24,7 +24,7 @@
</div>
<!-- Page Title Header Ends-->
{% include "parts/details_stats.html %}
{% include "parts/details_stats.html" %}
<div class="row">
@ -33,10 +33,10 @@
<div class="card-body pt-0">
<span class="d-none d-sm-block">
{% include "parts/server_controls_list.html %}
{% include "parts/server_controls_list.html" %}
</span>
<span class="d-block d-sm-none">
{% include "parts/m_server_controls_list.html %}
{% include "parts/m_server_controls_list.html" %}
</span>
<div class="row">
@ -94,15 +94,7 @@
<p>{{schedule.start_time}}</p>
</td>
<td id="{{schedule.enabled}}" class="action">
{% if schedule.enabled %}
<span class="text-success">
<i class="fas fa-check-square"></i> Yes
</span>
{% else %}
<span class="text-danger">
<i class="far fa-times-square"></i> No
</span>
{% end %}
<input type="checkbox" class="schedule-enabled-toggle" data-schedule-id="{{schedule.schedule_id}}" data-schedule-enabled="{{ 'true' if schedule.enabled else 'false' }}">
</td>
<td id="{{schedule.action}}" class="action">
<button onclick="window.location.href='/panel/edit_schedule?id={{ data['server_stats']['server_id']['server_id'] }}&sch_id={{schedule.schedule_id}}'" class="btn btn-info">
@ -189,15 +181,7 @@
<p>{{schedule.start_time}}</p>
</li>
<li id="{{schedule.enabled}}" class="action" style="border-top: .1em solid gray; border-bottom: .1em solid gray">
{% if schedule.enabled %}
<h4>Enabled</h4> <span class="text-success">
<i class="fas fa-check-square"></i> Yes
</span>
{% else %}
<h4>Enabled</h4> <span class="text-danger">
<i class="far fa-times-square"></i> No
</span>
{% end %}
<input type="checkbox" class="schedule-enabled-toggle" data-schedule-id="{{schedule.schedule_id}}" data-schedule-enabled="{{ 'true' if schedule.enabled else 'false' }}">
</li>
</ul>
</div>
@ -256,6 +240,39 @@
{% block js %}
<script>
function debounce(func, timeout = 300){
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
$(() => {
$('.schedule-enabled-toggle').bootstrapToggle({
on: 'Yes',
off: 'No',
onstyle: 'success',
offstyle: 'danger',
})
$('.schedule-enabled-toggle').each(function() {
const enabled = JSON.parse(this.getAttribute('data-schedule-enabled'));
$(this).bootstrapToggle(enabled ? 'on' : 'off')
})
$('.schedule-enabled-toggle').change(function() {
const id = this.getAttribute('data-schedule-id');
const enabled = this.checked;
fetch(`/api/v2/servers/{{data['server_id']}}/tasks/${id}`, {
method: 'PATCH',
body: JSON.stringify({enabled}),
headers: {
'Content-Type': 'application/json',
},
})
});
})
const serverId = new URLSearchParams(document.location.search).get('id')
$(document).ready(function () {
@ -393,4 +410,4 @@
</script>
{% end %}
{% end %}