From fe7df99c199a609449184056107abf3c218bad14 Mon Sep 17 00:00:00 2001
From: Silversthorn <nakor.silverton@gmail.com>
Date: Wed, 12 Jan 2022 19:48:22 +0100
Subject: [PATCH] Improve Tasks View for Mobile

---
 .../templates/panel/server_tasks.html         | 92 ++++++++++++++++++-
 1 file changed, 89 insertions(+), 3 deletions(-)

diff --git a/app/frontend/templates/panel/server_tasks.html b/app/frontend/templates/panel/server_tasks.html
index 8044c43a..7d791ab8 100644
--- a/app/frontend/templates/panel/server_tasks.html
+++ b/app/frontend/templates/panel/server_tasks.html
@@ -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;