fix front end for tasks and activity logs

This commit is contained in:
Andrew 2022-01-12 22:54:22 -05:00
parent 9f798ff291
commit d4359da6b1
2 changed files with 76 additions and 40 deletions

View File

@ -21,40 +21,51 @@
</div> </div>
<!-- Page Title Header Ends--> <!-- Page Title Header Ends-->
<div class="row"> <div class="row">
<div class="col-md-12 grid-margin"> <div class="col-md-12 col-lg-12 grid-margin stretch-card">
<div class="card"> <div class="card">
<div class="card-header header-sm d-flex justify-content-between align-items-center">
<h4 class="card-title"><i class="fas fa-history"></i> &nbsp;Audit Logs</h4>
<span class="too_small" title="{{ translate('dashboard', 'cannotSeeOnMobile', data['lang']) }}", data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}", data-placement="top"></span>
</div>
<div class="card-body"> <div class="card-body">
<table class="table" id="audit_table">
<thead> <div class="table-responsive">
<tr> <table class="table table-hover" id="audit_table" style="overflow: scroll;">
<td>Username</td> <thead>
<td>Time</td> <tr class="rounded">
<td>Action</td> <td>Username</td>
<td>Server ID</td> <td>Time</td>
<td>IP</td> <td>Action</td>
</tr> <td>Server ID</td>
</thead> <td>IP</td>
<tbody> </tr>
{% for row in data['audit_logs'] %} </thead>
<tr> <tbody>
<td>{{ row['user_name'] }}</td> {% for row in data['audit_logs'] %}
<td> <tr>
{{ row['created'].strftime('%m-%d-%Y %H:%M:%S') }} <td>{{ row['user_name'] }}</td>
</td> <td>
<td>{{ row['log_msg'] }}</td> {{ row['created'].strftime('%m-%d-%Y %H:%M:%S') }}
<td>{{ row['server_id'] }}</td> </td>
<td>{{ row['source_ip'] }}</td> <td>{{ row['log_msg'] }}</td>
</tr> <td>{{ row['server_id'] }}</td>
{% end %} <td>{{ row['source_ip'] }}</td>
</tbody> </tr>
</table> {% end %}
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<style>
.popover-body{
color: white !important;;
}
</style>
@ -72,5 +83,28 @@ $( document ).ready(function() {
$('#audit_table').DataTable(); $('#audit_table').DataTable();
}); });
</script> </script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
if($(window).width() < 1000){
$('.too_small').popover("show");
}
});
$(window).ready(function(){
$('body').click(function(){
$('.too_small').popover("hide");
});
});
$(window).resize(function() {
// This will execute whenever the window is resized
if($(window).width() < 1000){
$('.too_small').popover("show");
}
else{
$('.too_small').popover("hide");
} // New width
});
</script>
{% end %} {% end %}

View File

@ -35,17 +35,19 @@
{% include "parts/server_controls_list.html %} {% include "parts/server_controls_list.html %}
<div class="row"> <div class="row">
<button onclick="location.href=`/panel/add_schedule?id={{ data['server_stats']['server_id']['server_id'] }}`" class="btn btn-info">Create New Schedule <i class="fas fa-pencil-alt"></i></button>
<span class="too_small" data-toggle="popover" data-placement="left" title="{{ translate('serverSchedules', 'cannotSee', data['lang']) }}" data-content="{{ translate('serverSchedules', 'cannotSeeOnMobile', data['lang']) }}"></span>
<div class="col-md-12 col-sm-12" style="overflow-x:auto;"> <div class="col-md-12 col-sm-12" style="overflow-x:auto;">
<div class="card"> <div class="card">
<div class="card-header header-sm d-flex justify-content-between align-items-center">
<h4 class="card-title"><i class="fas fa-calendar"></i> Scheduled Tasks</h4>
<span class="too_small" title="{{ translate('serverSchedules', 'cannotSee', data['lang']) }}", data-content="{{ translate('serverSchedules', 'cannotSeeOnMobile', data['lang']) }}", data-placement="bottom"></span>
<div><button onclick="location.href=`/panel/add_schedule?id={{ data['server_stats']['server_id']['server_id'] }}`" class="btn btn-info">Create New Schedule <i class="fas fa-pencil-alt"></i></button></div>
</div>
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Scheduled Tasks</h4> <table class="table table-hover d-none d-lg-block responsive-table" width="100%" style="table-layout:fixed;">
<table class="table table-hover d-none d-lg-block" width="100%" style="table-layout:fixed;">
<thead> <thead>
<tr class="rounded"> <tr class="rounded">
<th style="width: 25%; min-width: 50px;">Action</th> <th style="width: 25%; min-width: 50px;">Action</th>
<th style="max-width: 40%; min-width: 50px;">Command</th> <th style="width: 40%; min-width: 50px;">Command</th>
<th style="width: 10%; min-width: 50px;">Interval</th> <th style="width: 10%; min-width: 50px;">Interval</th>
<th style="width: 10%; min-width: 50px;">Start Time</th> <th style="width: 10%; min-width: 50px;">Start Time</th>
<th style="width: 10%; min-width: 50px;">Enabled</th> <th style="width: 10%; min-width: 50px;">Enabled</th>
@ -58,7 +60,7 @@
<td id="{{schedule.action}}" class="action"> <td id="{{schedule.action}}" class="action">
<p>{{schedule.action}}</p> <p>{{schedule.action}}</p>
</td> </td>
<td id="{{schedule.command}}" class="action" style="overflow: scroll;"> <td id="{{schedule.command}}" class="action" style="overflow: scroll; max-width: 30px;">
<p>{{schedule.command}}</p> <p>{{schedule.command}}</p>
</td> </td>
<td id="{{schedule.interval}}" class="action"> <td id="{{schedule.interval}}" class="action">
@ -113,7 +115,7 @@
<td id="{{schedule.action}}" class="action"> <td id="{{schedule.action}}" class="action">
<p>{{schedule.action}}</p> <p>{{schedule.action}}</p>
</td> </td>
<td id="{{schedule.command}}" class="action" style="overflow: scroll;"> <td id="{{schedule.command}}" class="action" style="overflow: scroll; max-width: 30px;">
<p>{{schedule.command}}</p> <p>{{schedule.command}}</p>
</td> </td>
<td id="{{schedule.enabled}}" class="action"> <td id="{{schedule.enabled}}" class="action">
@ -139,24 +141,24 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<ul> <ul style="list-style: none;">
<li id="{{schedule.action}}" class="action"> <li id="{{schedule.action}}" class="action" style="border-top: .1em solid gray;">
<h4>Action</h4><p>{{schedule.action}}</p> <h4>Action</h4><p>{{schedule.action}}</p>
</li> </li>
<li id="{{schedule.command}}" class="action"> <li id="{{schedule.command}}" class="action" style="border-top: .1em solid gray;">
<h4>Command</h4><p>{{schedule.command}}</p> <h4>Command</h4><p>{{schedule.command}}</p>
</li> </li>
<li id="{{schedule.interval}}" class="action"> <li id="{{schedule.interval}}" class="action" style="border-top: .1em solid gray;">
{% if schedule.interval != '' %} {% if schedule.interval != '' %}
<h4>Interval</h4> <p>Every {{schedule.interval}} {{schedule.interval_type}}</p> <h4>Interval</h4> <p>Every {{schedule.interval}} {{schedule.interval_type}}</p>
{% else %} {% else %}
<h4>Interval</h4> <p>Cron String: {{schedule.cron_string}}</p> <h4>Interval</h4> <p>Cron String: {{schedule.cron_string}}</p>
{% end %} {% end %}
</li> </li>
<li id="{{schedule.start_time}}" class="action"> <li id="{{schedule.start_time}}" class="action" style="border-top: .1em solid gray;">
<h4>Start Time</h4> <p>{{schedule.start_time}}</p> <h4>Start Time</h4> <p>{{schedule.start_time}}</p>
</li> </li>
<li id="{{schedule.enabled}}" class="action"> <li id="{{schedule.enabled}}" class="action" style="border-top: .1em solid gray; border-bottom: .1em solid gray">
{% if schedule.enabled %} {% if schedule.enabled %}
<h4>Enabled</h4> <span class="text-success"> <h4>Enabled</h4> <span class="text-success">
<i class="fas fa-check-square"></i> Yes <i class="fas fa-check-square"></i> Yes