Improve Tasks View for Mobile

This commit is contained in:
Silversthorn 2022-01-12 19:48:22 +01:00
parent e310d0e48b
commit fe7df99c19

View File

@ -40,7 +40,7 @@
<div class="card">
<div class="card-body">
<h4 class="card-title">Scheduled Tasks</h4>
<table class="table table-hover" width="100%" style="table-layout:fixed;">
<table class="table table-hover d-none d-lg-block" width="100%" style="table-layout:fixed;">
<thead>
<tr class="rounded">
<th style="width: 25%; min-width: 50px;">Action</th>
@ -81,8 +81,8 @@
<span class="text-danger">
<i class="far fa-times-square"></i> No
</span>
</td>
{% end %}
</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">
<i class="fas fa-pencil-alt"></i>
@ -97,6 +97,92 @@
{% end %}
</tbody>
</table>
<hr />
<table class="table table-hover d-block d-lg-none" width="100%" style="table-layout:fixed;">
<thead>
<tr class="rounded">
<th style="width: 25%; min-width: 50px;">Action</th>
<th style="max-width: 40%; min-width: 50px;">Command</th>
<th style="width: 10%; min-width: 50px;">Enabled</th>
</tr>
</thead>
<tbody>
{% for schedule in data['schedules'] %}
<tr data-toggle="modal" data-target="#task_details_{{schedule.schedule_id}}">
<td id="{{schedule.action}}" class="action">
<p>{{schedule.action}}</p>
</td>
<td id="{{schedule.command}}" class="action" style="overflow: scroll;">
<p>{{schedule.command}}</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 %}
</td>
</tr>
<!-- Modal -->
<div class="modal fade" id="task_details_{{schedule.schedule_id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Task Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<ul>
<li id="{{schedule.action}}" class="action">
<h4>Action</h4><p>{{schedule.action}}</p>
</li>
<li id="{{schedule.command}}" class="action">
<h4>Command</h4><p>{{schedule.command}}</p>
</li>
<li id="{{schedule.interval}}" class="action">
{% if schedule.interval != '' %}
<h4>Interval</h4> <p>Every {{schedule.interval}} {{schedule.interval_type}}</p>
{% else %}
<h4>Interval</h4> <p>Cron String: {{schedule.cron_string}}</p>
{% end %}
</li>
<li id="{{schedule.start_time}}" class="action">
<h4>Start Time</h4> <p>{{schedule.start_time}}</p>
</li>
<li id="{{schedule.enabled}}" class="action">
{% 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 %}
</li>
</ul>
</div>
<div class="modal-footer">
<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">
<i class="fas fa-pencil-alt"></i> Edit
</button>
<button data-sch={{ schedule.schedule_id }} class="btn btn-danger del_button">
<i class="fas fa-trash" aria-hidden="true"></i> Delete
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% end %}
</tbody>
</table>
</div>
</div>
</div>
@ -144,7 +230,7 @@ td {
function yesnoCheck(that) {
if (that.value == "command") {
document.getElementById("ifYes").style.display = "block";
document.getElementById("command").required = true;
document.getElementById("command").required = true;
} else {
document.getElementById("ifYes").style.display = "none";
document.getElementById("command").required = false;