mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2024-08-30 18:23:09 +00:00
Improving Toggle buttons and Webhook page
This commit is contained in:
Silversthorn
parent
c49159a0e5
commit
6a2d1fa61a
447
app/frontend/static/assets/css/crafty-toggle-btn.css
Normal file
447
app/frontend/static/assets/css/crafty-toggle-btn.css
Normal file
@ -0,0 +1,447 @@
|
||||
/**************************************************************/
|
||||
/* CSS for Toggle Buttons */
|
||||
/**************************************************************/
|
||||
.btn-toggle {
|
||||
margin: 0 4rem;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
border: none;
|
||||
height: 1.5rem;
|
||||
width: 3rem;
|
||||
border-radius: 1.5rem;
|
||||
color: #6b7381;
|
||||
background: #bdc1c8;
|
||||
}
|
||||
|
||||
.btn-toggle:focus,
|
||||
.btn-toggle.focus,
|
||||
.btn-toggle:focus.active,
|
||||
.btn-toggle.focus.active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-toggle:before,
|
||||
.btn-toggle:after {
|
||||
line-height: 1.5rem;
|
||||
width: 4rem;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle:before {
|
||||
content: 'Off';
|
||||
left: -4rem;
|
||||
}
|
||||
|
||||
.btn-toggle:after {
|
||||
content: 'On';
|
||||
right: -4rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn-toggle>.handle {
|
||||
position: absolute;
|
||||
top: 0.1875rem;
|
||||
left: 0.1875rem;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
border-radius: 1.125rem;
|
||||
background: #fff;
|
||||
transition: left 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle.active {
|
||||
transition: background-color 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle.active>.handle {
|
||||
left: 1.6875rem;
|
||||
transition: left 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle.active:before {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn-toggle.active:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm:before,
|
||||
.btn-toggle.btn-sm:after {
|
||||
line-height: -0.5rem;
|
||||
color: #fff;
|
||||
letter-spacing: 0.75px;
|
||||
left: 0.4125rem;
|
||||
width: 2.325rem;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm:before {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm:after {
|
||||
text-align: left;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm.active:before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm.active:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs:before,
|
||||
.btn-toggle.btn-xs:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-toggle:before,
|
||||
.btn-toggle:after {
|
||||
color: #6b7381;
|
||||
}
|
||||
|
||||
.btn-toggle.active {
|
||||
background-color: #29b5a8;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg {
|
||||
margin: 0 5rem;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
border: none;
|
||||
height: 2.5rem;
|
||||
width: 5rem;
|
||||
border-radius: 2.5rem;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg:focus,
|
||||
.btn-toggle.btn-lg.focus,
|
||||
.btn-toggle.btn-lg:focus.active,
|
||||
.btn-toggle.btn-lg.focus.active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg:before,
|
||||
.btn-toggle.btn-lg:after {
|
||||
line-height: 2.5rem;
|
||||
width: 5rem;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg:before {
|
||||
content: 'Off';
|
||||
left: -5rem;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg:after {
|
||||
content: 'On';
|
||||
right: -5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg>.handle {
|
||||
position: absolute;
|
||||
top: 0.3125rem;
|
||||
left: 0.3125rem;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
border-radius: 1.875rem;
|
||||
background: #fff;
|
||||
transition: left 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg.active {
|
||||
transition: background-color 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg.active>.handle {
|
||||
left: 2.8125rem;
|
||||
transition: left 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg.active:before {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg.active:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg.btn-sm:before,
|
||||
.btn-toggle.btn-lg.btn-sm:after {
|
||||
line-height: 0.5rem;
|
||||
color: #fff;
|
||||
letter-spacing: 0.75px;
|
||||
left: 0.6875rem;
|
||||
width: 3.875rem;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg.btn-sm:before {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg.btn-sm:after {
|
||||
text-align: left;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg.btn-sm.active:before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg.btn-sm.active:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-lg.btn-xs:before,
|
||||
.btn-toggle.btn-lg.btn-xs:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm {
|
||||
margin: 0 0.5rem;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
border: none;
|
||||
height: 1.5rem;
|
||||
width: 3rem;
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm:focus,
|
||||
.btn-toggle.btn-sm.focus,
|
||||
.btn-toggle.btn-sm:focus.active,
|
||||
.btn-toggle.btn-sm.focus.active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm:before,
|
||||
.btn-toggle.btn-sm:after {
|
||||
line-height: 1.5rem;
|
||||
width: 0.5rem;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.55rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm:before {
|
||||
content: 'Off';
|
||||
left: -0.5rem;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm:after {
|
||||
content: 'On';
|
||||
right: -0.5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm>.handle {
|
||||
position: absolute;
|
||||
top: 0.1875rem;
|
||||
left: 0.1875rem;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
border-radius: 1.125rem;
|
||||
background: #fff;
|
||||
transition: left 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm.active {
|
||||
transition: background-color 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm.active>.handle {
|
||||
left: 1.6875rem;
|
||||
transition: left 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm.active:before {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm.active:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm.btn-sm:before,
|
||||
.btn-toggle.btn-sm.btn-sm:after {
|
||||
line-height: -0.5rem;
|
||||
color: #fff;
|
||||
letter-spacing: 0.75px;
|
||||
left: 0.4125rem;
|
||||
width: 2.325rem;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm.btn-sm:before {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm.btn-sm:after {
|
||||
text-align: left;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm.btn-sm.active:before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm.btn-sm.active:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-sm.btn-xs:before,
|
||||
.btn-toggle.btn-sm.btn-xs:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs {
|
||||
margin: 0 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
border: none;
|
||||
height: 1rem;
|
||||
width: 2rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs:focus,
|
||||
.btn-toggle.btn-xs.focus,
|
||||
.btn-toggle.btn-xs:focus.active,
|
||||
.btn-toggle.btn-xs.focus.active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs:before,
|
||||
.btn-toggle.btn-xs:after {
|
||||
line-height: 1rem;
|
||||
width: 0;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs:before {
|
||||
content: 'Off';
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs:after {
|
||||
content: 'On';
|
||||
right: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs>.handle {
|
||||
position: absolute;
|
||||
top: 0.125rem;
|
||||
left: 0.125rem;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border-radius: 0.75rem;
|
||||
background: #fff;
|
||||
transition: left 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs.active {
|
||||
transition: background-color 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs.active>.handle {
|
||||
left: 1.125rem;
|
||||
transition: left 0.25s;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs.active:before {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs.active:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs.btn-sm:before,
|
||||
.btn-toggle.btn-xs.btn-sm:after {
|
||||
line-height: -1rem;
|
||||
color: #fff;
|
||||
letter-spacing: 0.75px;
|
||||
left: 0.275rem;
|
||||
width: 1.55rem;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs.btn-sm:before {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs.btn-sm:after {
|
||||
text-align: left;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs.btn-sm.active:before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs.btn-sm.active:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-xs.btn-xs:before,
|
||||
.btn-toggle.btn-xs.btn-xs:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-info {
|
||||
color: var(--white);
|
||||
background: var(--gray);
|
||||
}
|
||||
|
||||
.btn-toggle.btn-info:before,
|
||||
.btn-toggle.btn-info:after {
|
||||
color: #6b7381;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-info.active {
|
||||
background-color: var(--info);
|
||||
}
|
||||
|
||||
.btn-toggle.btn-secondary {
|
||||
color: #6b7381;
|
||||
background: #bdc1c8;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-secondary:before,
|
||||
.btn-toggle.btn-secondary:after {
|
||||
color: #6b7381;
|
||||
}
|
||||
|
||||
.btn-toggle.btn-secondary.active {
|
||||
background-color: #ff8300;
|
||||
}
|
||||
|
||||
/**************************************************************/
|
||||
@ -182,11 +182,55 @@ div>.input-group>.form-control {
|
||||
}
|
||||
|
||||
.no-scroll {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none;
|
||||
/* IE and Edge */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
}
|
||||
|
||||
.no-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-label::before,
|
||||
.custom-control-label::after {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-control-input:checked~.custom-control-label::before {
|
||||
color: black !important;
|
||||
background-color: blueviolet !important;
|
||||
border-color: var(--outline) !important;
|
||||
}
|
||||
|
||||
.custom-control-label::before {
|
||||
background-color: white !important;
|
||||
top: calc(-0.2rem);
|
||||
}
|
||||
|
||||
.custom-switch .custom-control-label::after {
|
||||
top: calc(-0.125rem + 1px);
|
||||
}
|
||||
|
||||
/**************************************************************/
|
||||
|
||||
/**************************************************************/
|
||||
/* CSS for Tables Displays */
|
||||
/**************************************************************/
|
||||
td>ul {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
td p {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
td.action {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
td.action .btn {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
/**************************************************************/
|
||||
@ -17,6 +17,7 @@
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.22/fh-3.1.7/r-2.2.6/sc-2.0.3/sp-1.2.2/datatables.min.css" />
|
||||
<link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
|
||||
<link rel="stylesheet" href="/static/assets/css/crafty.css">
|
||||
<link rel="stylesheet" href="/static/assets/css/crafty-toggle-btn.css">
|
||||
|
||||
<link rel="manifest" href="/static/assets/crafty.webmanifest">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
|
||||
@ -47,198 +47,184 @@
|
||||
<h4 class="card-title"><i class="fas fa-calendar"></i> {{ translate('serverSchedules',
|
||||
'scheduledTasks', data['lang']) }} </h4>
|
||||
{% if data['user_data']['hints'] %}
|
||||
<span class="too_small" title="{{ translate('serverSchedules', 'cannotSee', data['lang']) }}" ,
|
||||
data-content="{{ translate('serverSchedules', 'cannotSeeOnMobile', data['lang']) }}" ,
|
||||
data-placement="bottom"></span>
|
||||
<span class="too_small" title="{{ translate('serverSchedules', 'cannotSee', data['lang']) }}" , data-content="{{ translate('serverSchedules', 'cannotSeeOnMobile', data['lang']) }}" , data-placement="bottom"></span>
|
||||
{% end %}
|
||||
<div>
|
||||
<button
|
||||
onclick="location.href=`/panel/add_schedule?id={{ data['server_stats']['server_id']['server_id'] }}`"
|
||||
class="btn btn-info">{{ translate('serverSchedules', 'create', data['lang']) }}<i
|
||||
class="fas fa-pencil-alt"></i></button>
|
||||
</div>
|
||||
<div><a class="btn btn-info" href="/panel/add_schedule?id={{ data['server_stats']['server_id']['server_id'] }}"><i class="fas fa-plus-circle"></i> {{ translate('serverSchedules', 'create', data['lang']) }}</a></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-hover d-none d-lg-block responsive-table" id="schedule_table"
|
||||
style="table-layout:fixed;" aria-describedby="Schedule List">
|
||||
<thead>
|
||||
<tr class="rounded">
|
||||
<th style="width: 2%; min-width: 10px;">{{ translate('serverSchedules', 'name', data['lang']) }}
|
||||
</th>
|
||||
<th style="width: 23%; min-width: 50px;">{{ translate('serverSchedules', 'action', data['lang'])
|
||||
}}</th>
|
||||
<th style="width: 40%; min-width: 50px;">{{ translate('serverSchedules', 'command',
|
||||
data['lang']) }}</th>
|
||||
<th style="width: 10%; min-width: 50px;">{{ translate('serverSchedules', 'interval',
|
||||
data['lang']) }}</th>
|
||||
<th style="width: 10%; min-width: 50px;">{{ translate('serverSchedules', 'nextRun',
|
||||
data['lang']) }}</th>
|
||||
<th style="width: 10%; min-width: 50px;">{{ translate('serverSchedules', 'enabled',
|
||||
data['lang']) }}</th>
|
||||
<th style="width: 10%; min-width: 50px;">{{ translate('serverSchedules', 'edit', data['lang'])
|
||||
}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for schedule in data['schedules'] %}
|
||||
<tr>
|
||||
<td id="{{schedule.schedule_id}}" class="id">
|
||||
<p>{{schedule.name}}</p>
|
||||
</td>
|
||||
<td id="{{schedule.action}}" class="action">
|
||||
<p>{{schedule.action}}</p>
|
||||
</td>
|
||||
<td id="{{schedule.command}}" class="action" style="overflow: scroll; max-width: 30px;">
|
||||
<p style="overflow: scroll;" class="no-scroll">{{schedule.command}}</p>
|
||||
</td>
|
||||
<td id="{{schedule.interval}}" class="action">
|
||||
{% if schedule.interval_type != '' and schedule.interval_type != 'reaction' %}
|
||||
<p>{{ translate('serverSchedules', 'every', data['lang']) }}</p>
|
||||
<p>{{schedule.interval}} {{schedule.interval_type}}</p>
|
||||
{% elif schedule.interval_type == 'reaction' %}
|
||||
<p>{{schedule.interval_type}}<br><br>{{ translate('serverSchedules', 'child', data['lang'])}}:
|
||||
{{ schedule.parent }}</p>
|
||||
{% else %}
|
||||
<p>Cron String:</p>
|
||||
<p>{{schedule.cron_string}}</p>
|
||||
{% end %}
|
||||
</td>
|
||||
<td id="{{schedule.start_time}}" class="action">
|
||||
<p>{{schedule.next_run}}</p>
|
||||
</td>
|
||||
<td id="{{schedule.enabled}}" class="action">
|
||||
<input style="width: 10px !important;" 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">
|
||||
<i class="fas fa-pencil-alt"></i>
|
||||
</button>
|
||||
<br>
|
||||
<br>
|
||||
<button data-sch={{ schedule.schedule_id }} class="btn btn-danger del_button">
|
||||
<i class="fas fa-trash" aria-hidden="true"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% end %}
|
||||
</tbody>
|
||||
</table>
|
||||
<hr />
|
||||
<table class="table table-hover d-block d-lg-none" id="mini_schedule_table"
|
||||
style="table-layout:fixed;" aria-describedby="Schedule List Mobile">
|
||||
<thead>
|
||||
<tr class="rounded">
|
||||
<th style="width: 25%; min-width: 50px;">{{ translate('serverSchedules', 'action', data['lang'])
|
||||
}}</th>
|
||||
<th style="max-width: 40%; min-width: 50px;">{{ translate('serverSchedules', 'command',
|
||||
data['lang']) }}</th>
|
||||
<th style="width: 10%; min-width: 50px;">{{ translate('serverSchedules', 'enabled',
|
||||
data['lang']) }}</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; max-width: 30px;">
|
||||
<p style="overflow: scroll;">{{schedule.command}}</p>
|
||||
</td>
|
||||
<td id="{{schedule.enabled}}" class="action">
|
||||
{% if schedule.enabled %}
|
||||
<span class="text-success">
|
||||
<i class="fas fa-check-square"></i> {{ translate('serverSchedules', 'yes', data['lang']) }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="text-danger">
|
||||
<i class="far fa-times-square"></i> {{ translate('serverSchedules', 'no', data['lang']) }}
|
||||
</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">{{ translate('serverSchedules', 'details',
|
||||
data['lang']) }}</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ul style="list-style: none;">
|
||||
<li id="{{schedule.schedule_id}}" class="id" style="border-top: .1em solid gray;">
|
||||
<h4>{{ translate('serverSchedules', 'name', data['lang']) }}</h4>
|
||||
<p>{{schedule.schedule_id}}</p>
|
||||
</li>
|
||||
<li id="{{schedule.action}}" class="action" style="border-top: .1em solid gray;">
|
||||
<h4>{{ translate('serverSchedules', 'action', data['lang']) }}</h4>
|
||||
<p>{{schedule.action}}</p>
|
||||
</li>
|
||||
<li id="{{schedule.command}}" class="action" style="border-top: .1em solid gray;">
|
||||
<h4>{{ translate('serverSchedules', 'command', data['lang']) }}</h4>
|
||||
<p>{{schedule.command}}</p>
|
||||
</li>
|
||||
<li id="{{schedule.interval}}" class="action" style="border-top: .1em solid gray;">
|
||||
{% if schedule.interval != '' %}
|
||||
<h4>{{ translate('serverSchedules', 'interval', data['lang']) }}</h4>
|
||||
<p>{{ translate('serverSchedules', 'every', data['lang']) }} {{schedule.interval}}
|
||||
{{schedule.interval_type}}</p>
|
||||
{% elif schedule.interval_type == 'reaction' %}
|
||||
<h4>{{ translate('serverSchedules', 'interval', data['lang']) }}</h4>
|
||||
<p>{{schedule.interval_type}}<br><br>{{ translate('serverSchedules', 'child',
|
||||
data['lang']) }}: {{ schedule.parent }}</p>
|
||||
{% else %}
|
||||
<h4>{{ translate('serverSchedules', 'interval', data['lang']) }}</h4>
|
||||
<p>{{ translate('serverSchedules', 'cron', data['lang']) }}: {{schedule.cron_string}}
|
||||
</p>
|
||||
{% end %}
|
||||
</li>
|
||||
<li id="{{schedule.start_time}}" class="action" style="border-top: .1em solid gray;">
|
||||
<h4>{{ translate('serverSchedules', 'nextRun', data['lang']) }}</h4>
|
||||
{% if schedule.next_run %}
|
||||
<p>{{schedule.next_run}}</p>
|
||||
{% else %}
|
||||
<p>zzzzzzz</p>
|
||||
{% end %}
|
||||
</li>
|
||||
<li id="{{schedule.enabled}}" class="action"
|
||||
style="border-top: .1em solid gray; border-bottom: .1em solid gray">
|
||||
<h4>{{ translate('serverSchedules', 'enabled', data['lang']) }}</h4>
|
||||
<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>
|
||||
<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> {{ translate('serverSchedules', 'edit', data['lang'])
|
||||
}}
|
||||
</button>
|
||||
<button data-sch={{ schedule.schedule_id }} class="btn btn-danger del_button">
|
||||
<i class="fas fa-trash" aria-hidden="true"></i> {{ translate('serverSchedules',
|
||||
'delete', data['lang']) }}
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{
|
||||
translate('serverSchedules', 'close', data['lang']) }}</button>
|
||||
{% if len(data['schedules']) == 0 %}
|
||||
<div style="text-align: center; color: grey;">
|
||||
<h7>{{ translate('serverSchedules', 'no-shedule', data['lang']) }} <strong>{{ translate('serverSchedules', 'newSchedule',data['lang']) }}</strong>.</h7>
|
||||
</div>
|
||||
{% end %}
|
||||
{% if len(data['schedules']) > 0 %}
|
||||
<div class="d-none d-lg-block">
|
||||
<table class="table table-hover table-responsive" id="schedule_table" style="table-layout:fixed;" aria-describedby="Schedule List">
|
||||
<thead>
|
||||
<tr class="rounded">
|
||||
<th style="width: 5%; min-width: 64px;">{{ translate('serverSchedules', 'enabled',
|
||||
data['lang']) }}</th>
|
||||
<th style="width: 7%; min-width: 10px;">{{ translate('serverSchedules', 'name', data['lang']) }}
|
||||
</th>
|
||||
<th style="width: 23%; min-width: 50px;">{{ translate('serverSchedules', 'action', data['lang'])
|
||||
}}</th>
|
||||
<th style="width: 40%; min-width: 50px;">{{ translate('serverSchedules', 'command',
|
||||
data['lang']) }}</th>
|
||||
<th style="width: 10%; min-width: 50px;">{{ translate('serverSchedules', 'interval',
|
||||
data['lang']) }}</th>
|
||||
<th style="width: 10%; min-width: 50px;">{{ translate('serverSchedules', 'nextRun',
|
||||
data['lang']) }}</th>
|
||||
<th style="width: 10%; min-width: 50px;">{{ translate('serverSchedules', 'edit', data['lang'])
|
||||
}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for schedule in data['schedules'] %}
|
||||
<tr>
|
||||
<td id="{{schedule.enabled}}" class="enabled">
|
||||
<button type="button" class="btn btn-sm btn-info btn-toggle schedule-custom-toggle" id="schedule{{schedule.id}}" name="schedule{{schedule.id}}" data-schedule-id="{{schedule.schedule_id}}" data-schedule-enabled="{{ 'true' if schedule.enabled else 'false' }}" data-toggle="button" aria-pressed="true" autocomplete="off">
|
||||
<div class="handle"></div>
|
||||
</button>
|
||||
</td>
|
||||
<td id="{{schedule.schedule_id}}" class="id">
|
||||
<p>{{schedule.name}}</p>
|
||||
</td>
|
||||
<td id="{{schedule.action}}">
|
||||
<p>{{schedule.action}}</p>
|
||||
</td>
|
||||
<td id="{{schedule.command}}" style="overflow: scroll; max-width: 30px;">
|
||||
<p style="overflow: scroll;" class="no-scroll">{{schedule.command}}</p>
|
||||
</td>
|
||||
<td id="{{schedule.interval}}">
|
||||
{% if schedule.interval_type != '' and schedule.interval_type != 'reaction' %}
|
||||
<p>{{ translate('serverSchedules', 'every', data['lang']) }}</p>
|
||||
<p>{{schedule.interval}} {{schedule.interval_type}}</p>
|
||||
{% elif schedule.interval_type == 'reaction' %}
|
||||
<p>{{schedule.interval_type}}<br><br>{{ translate('serverSchedules', 'child', data['lang'])}}:
|
||||
{{ schedule.parent }}</p>
|
||||
{% else %}
|
||||
<p>Cron String:</p>
|
||||
<p>{{schedule.cron_string}}</p>
|
||||
{% end %}
|
||||
</td>
|
||||
<td id="{{schedule.start_time}}">
|
||||
<p>{{schedule.next_run}}</p>
|
||||
</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>
|
||||
</button>
|
||||
<button data-sch={{ schedule.schedule_id }} class="btn btn-danger del_button">
|
||||
<i class="fas fa-trash" aria-hidden="true"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% end %}
|
||||
</tbody>
|
||||
</table>
|
||||
<hr />
|
||||
</div>
|
||||
<div class=" d-block d-lg-none">
|
||||
<table class="table table-hover" id="mini_schedule_table" style="table-layout:fixed;" aria-describedby="Schedule List Mobile">
|
||||
<thead>
|
||||
<tr class="rounded">
|
||||
<th style="width: 25%; min-width: 50px;">{{ translate('serverSchedules', 'action', data['lang'])
|
||||
}}</th>
|
||||
<th style="max-width: 40%; min-width: 50px;">{{ translate('serverSchedules', 'command',
|
||||
data['lang']) }}</th>
|
||||
<th style="width: 10%; min-width: 50px;">{{ translate('serverSchedules', 'enabled',
|
||||
data['lang']) }}</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; max-width: 30px;">
|
||||
<p style="overflow: scroll;">{{schedule.command}}</p>
|
||||
</td>
|
||||
<td id="{{schedule.enabled}}" class="enabled">
|
||||
<button type="button" class="btn btn-sm btn-info btn-toggle schedule-custom-toggle" id="schedule{{schedule.id}}" name="schedule{{schedule.id}}" data-schedule-id="{{schedule.schedule_id}}" data-schedule-enabled="{{ 'true' if schedule.enabled else 'false' }}" data-toggle="button" aria-pressed="true" autocomplete="off">
|
||||
<div class="handle"></div>
|
||||
</button>
|
||||
</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">{{ translate('serverSchedules', 'details',
|
||||
data['lang']) }}</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ul style="list-style: none;">
|
||||
<li id="{{schedule.schedule_id}}" class="id" style="border-top: .1em solid gray;">
|
||||
<h4>{{ translate('serverSchedules', 'name', data['lang']) }}</h4>
|
||||
<p>{{schedule.schedule_id}}</p>
|
||||
</li>
|
||||
<li id="{{schedule.action}}" class="action" style="border-top: .1em solid gray;">
|
||||
<h4>{{ translate('serverSchedules', 'action', data['lang']) }}</h4>
|
||||
<p>{{schedule.action}}</p>
|
||||
</li>
|
||||
<li id="{{schedule.command}}" class="action" style="border-top: .1em solid gray;">
|
||||
<h4>{{ translate('serverSchedules', 'command', data['lang']) }}</h4>
|
||||
<p>{{schedule.command}}</p>
|
||||
</li>
|
||||
<li id="{{schedule.interval}}" class="action" style="border-top: .1em solid gray;">
|
||||
{% if schedule.interval != '' %}
|
||||
<h4>{{ translate('serverSchedules', 'interval', data['lang']) }}</h4>
|
||||
<p>{{ translate('serverSchedules', 'every', data['lang']) }} {{schedule.interval}}
|
||||
{{schedule.interval_type}}</p>
|
||||
{% elif schedule.interval_type == 'reaction' %}
|
||||
<h4>{{ translate('serverSchedules', 'interval', data['lang']) }}</h4>
|
||||
<p>{{schedule.interval_type}}<br><br>{{ translate('serverSchedules', 'child',
|
||||
data['lang']) }}: {{ schedule.parent }}</p>
|
||||
{% else %}
|
||||
<h4>{{ translate('serverSchedules', 'interval', data['lang']) }}</h4>
|
||||
<p>{{ translate('serverSchedules', 'cron', data['lang']) }}: {{schedule.cron_string}}
|
||||
</p>
|
||||
{% end %}
|
||||
</li>
|
||||
<li id="{{schedule.start_time}}" class="action" style="border-top: .1em solid gray;">
|
||||
<h4>{{ translate('serverSchedules', 'nextRun', data['lang']) }}</h4>
|
||||
{% if schedule.next_run %}
|
||||
<p>{{schedule.next_run}}</p>
|
||||
{% else %}
|
||||
<p>zzzzzzz</p>
|
||||
{% end %}
|
||||
</li>
|
||||
<li id="{{schedule.enabled}}" class="action" style="border-top: .1em solid gray; border-bottom: .1em solid gray">
|
||||
<h4>{{ translate('serverSchedules', 'enabled', data['lang']) }}</h4>
|
||||
<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>
|
||||
<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> {{ translate('serverSchedules', 'edit', data['lang'])
|
||||
}}
|
||||
</button>
|
||||
<button data-sch={{ schedule.schedule_id }} class="btn btn-danger del_button">
|
||||
<i class="fas fa-trash" aria-hidden="true"></i> {{ translate('serverSchedules',
|
||||
'delete', data['lang']) }}
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{
|
||||
translate('serverSchedules', 'close', data['lang']) }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% end %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% end %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% end %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -265,6 +251,16 @@
|
||||
.toggle {
|
||||
height: 0px !important;
|
||||
}
|
||||
|
||||
td.enabled {
|
||||
vertical-align: middle;
|
||||
border-collapse: collapse !important;
|
||||
}
|
||||
|
||||
.enabled .toggle-group .btn {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -299,20 +295,21 @@
|
||||
};
|
||||
}
|
||||
|
||||
$(() => {
|
||||
$('.schedule-enabled-toggle').bootstrapToggle({
|
||||
on: 'Yes',
|
||||
off: 'No',
|
||||
onstyle: 'success',
|
||||
offstyle: 'danger',
|
||||
})
|
||||
$('.schedule-enabled-toggle').each(function () {
|
||||
$(document).ready(function () {
|
||||
$('.schedule-custom-toggle').each(function () {
|
||||
const enabled = JSON.parse(this.getAttribute('data-schedule-enabled'));
|
||||
$(this).bootstrapToggle(enabled ? 'on' : 'off')
|
||||
if (enabled) {
|
||||
this.classList.add("active");
|
||||
}
|
||||
else {
|
||||
this.classList.remove("active");
|
||||
}
|
||||
})
|
||||
$('.schedule-enabled-toggle').change(function () {
|
||||
});
|
||||
$(() => {
|
||||
$('.schedule-custom-toggle').click(function () {
|
||||
const id = this.getAttribute('data-schedule-id');
|
||||
const enabled = this.checked;
|
||||
const enabled = !JSON.parse(this.getAttribute('data-schedule-enabled'));
|
||||
|
||||
fetch(`/api/v2/servers/{{data['server_id']}}/tasks/${id}`, {
|
||||
method: 'PATCH',
|
||||
|
||||
@ -46,104 +46,107 @@
|
||||
<div class="card-header header-sm d-flex justify-content-between align-items-center">
|
||||
<h4 class="card-title"><i class="fa-regular fa-bell"></i> {{ translate('webhooks', 'webhooks', data['lang']) }} </h4>
|
||||
{% if data['user_data']['hints'] %}
|
||||
<span class="too_small" title="{{ translate('serverSchedules', 'cannotSee', data['lang']) }}" ,
|
||||
data-content="{{ translate('serverSchedules', 'cannotSeeOnMobile', data['lang']) }}" ,
|
||||
data-placement="bottom"></span>
|
||||
<span class="too_small" title="{{ translate('serverSchedules', 'cannotSee', data['lang']) }}" , data-content="{{ translate('serverSchedules', 'cannotSeeOnMobile', data['lang']) }}" , data-placement="bottom"></span>
|
||||
{% end %}
|
||||
<div><button
|
||||
onclick="location.href=`/panel/add_webhook?id={{ data['server_stats']['server_id']['server_id'] }}`"
|
||||
class="btn btn-info">{{ translate('webhooks', 'new', data['lang']) }}<i
|
||||
class="fas fa-pencil-alt"></i></button></div>
|
||||
<div><a class="btn btn-info" href="/panel/add_webhook?id={{ data['server_stats']['server_id']['server_id'] }}"><i class="fas fa-plus-circle"></i> {{ translate('webhooks', 'new', data['lang']) }}</a></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-hover d-none d-lg-block responsive-table" aria-label="webhooks list" id="webhook_table" width="100%" style="table-layout:fixed;">
|
||||
<thead>
|
||||
<tr class="rounded">
|
||||
<th style="width: 10%; min-width: 10px;">{{ translate('webhooks', 'name', data['lang']) }}
|
||||
</th>
|
||||
<th style="width: 20%; min-width: 50px;">{{ translate('webhooks', 'type', data['lang']) }}</th>
|
||||
<th style="width: 50%; min-width: 50px;">{{ translate('webhooks', 'trigger', data['lang']) }}</th>
|
||||
<th style="width: 10%; min-width: 50px;">{{ translate('webhooks', 'enabled',
|
||||
data['lang']) }}</th>
|
||||
<th style="width: 10%; min-width: 50px;">{{ translate('webhooks', 'edit', data['lang'])
|
||||
}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for webhook in data['webhooks'] %}
|
||||
<tr>
|
||||
<td id="{{webhook.name}}" class="id">
|
||||
<p>{{webhook.name}}</p>
|
||||
</td>
|
||||
<td id="{{webhook.webhook_type}}" class="type">
|
||||
<p>{{webhook.webhook_type}}</p>
|
||||
</td>
|
||||
<td id="{{webhook.trigger}}" class="trigger" style="overflow: scroll; max-width: 30px;">
|
||||
<ul>
|
||||
{% for trigger in webhook.trigger.split(",") %}
|
||||
{% if trigger in data["triggers"] %}
|
||||
<li>{{translate('webhooks', trigger , data['lang'])}}</li>
|
||||
{%end%}
|
||||
{%end%}
|
||||
</ul>
|
||||
</td>
|
||||
<td id="{{webhook.enabled}}" class="enabled">
|
||||
<input style="width: 10px !important;" type="checkbox" class="webhook-enabled-toggle" data-webhook-id="{{webhook.id}}" data-webhook-enabled="{{ 'true' if webhook.enabled else 'false' }}">
|
||||
</td>
|
||||
<td id="webhook_edit" class="action">
|
||||
<button onclick="window.location.href='/panel/webhook_edit?id={{ data['server_stats']['server_id']['server_id'] }}&webhook_id={{webhook.id}}'" class="btn btn-info">
|
||||
<i class="fas fa-pencil-alt"></i>
|
||||
</button>
|
||||
<br>
|
||||
<br>
|
||||
<button data-webhook={{ webhook.id }} class="btn btn-danger del_button">
|
||||
<i class="fas fa-trash" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button data-webhook={{ webhook.id }} data-toggle="tooltip" title="{{ translate('webhooks', 'run', data['lang']) }}" class="btn btn-outline-warning test-socket">
|
||||
<i class="fa-solid fa-vial"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% end %}
|
||||
</tbody>
|
||||
</table>
|
||||
<table aria-label="webhooks list" class="table table-hover d-block d-lg-none responsive-table" id="webhook_table_mini" width="100%" style="table-layout:fixed;">
|
||||
<thead>
|
||||
<tr class="rounded">
|
||||
<th style="width: 33.33%; min-width: 10px;">Name
|
||||
</th>
|
||||
<th style="width: 33.33%; min-width: 50px;">{{ translate('webhooks', 'enabled',
|
||||
data['lang']) }}</th>
|
||||
<th style="width: 33.33%; min-width: 50px;">{{ translate('webhooks', 'edit', data['lang'])
|
||||
}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for webhook in data['webhooks'] %}
|
||||
<tr>
|
||||
<td id="{{webhook.name}}" class="id">
|
||||
<p>{{webhook.name}}</p>
|
||||
</td>
|
||||
<td id="{{webhook.enabled}}" class="enabled">
|
||||
<input style="width: 10px !important;" type="checkbox" class="webhook-enabled-toggle" data-webhook-id="{{webhook.id}}" data-webhook-enabled="{{ 'true' if webhook.enabled else 'false' }}">
|
||||
</td>
|
||||
<td id="webhook_edit" class="action">
|
||||
<button onclick="window.location.href='/panel/webhook_edit?id={{ data['server_stats']['server_id']['server_id'] }}&webhook_id={{webhook.id}}'" class="btn btn-info">
|
||||
<i class="fas fa-pencil-alt"></i>
|
||||
</button>
|
||||
<br>
|
||||
<br>
|
||||
<button data-webhook={{ webhook.id }} class="btn btn-danger del_button">
|
||||
<i class="fas fa-trash" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button data-webhook={{ webhook.id }} data-toggle="tooltip" title="{{ translate('webhooks', 'run', data['lang']) }}" class="btn btn-outline-warning test-socket">
|
||||
<i class="fa-solid fa-vial"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% end %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if len(data['webhooks']) == 0 %}
|
||||
<div style="text-align: center; color: grey;">
|
||||
<h7>{{ translate('webhooks', 'no-webhook', data['lang']) }} <strong>{{ translate('webhooks', 'newWebhook',data['lang']) }}</strong>.</h7>
|
||||
</div>
|
||||
{% end %}
|
||||
{% if len(data['webhooks']) > 0 %}
|
||||
<div class="d-none d-lg-block">
|
||||
<table class="table table-hover responsive-table" aria-label="webhooks list" id="webhook_table" width="100%" style="table-layout:fixed;">
|
||||
<thead>
|
||||
<tr class="rounded">
|
||||
<th scope="col" style="width: 5%; min-width: 64px;">{{ translate('webhooks', 'enabled', data['lang']) }}</th>
|
||||
<th scope="col" style="width: 15%; min-width: 10px;">{{ translate('webhooks', 'name', data['lang']) }} </th>
|
||||
<th scope="col" style="width: 20%; min-width: 50px;">{{ translate('webhooks', 'type', data['lang']) }}</th>
|
||||
<th scope="col" style="width: 50%; min-width: 50px;">{{ translate('webhooks', 'trigger', data['lang']) }}</th>
|
||||
<th scope="col" style="width: 10%; min-width: 50px;">{{ translate('webhooks', 'edit', data['lang']) }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for webhook in data['webhooks'] %}
|
||||
<tr>
|
||||
<td id="{{webhook.enabled}}" class="enabled">
|
||||
<button type="button" class="btn btn-sm btn-info btn-toggle webhook-custom-toggle" id="webhook_{{webhook.id}}" name="webhook_{{webhook.id}}" data-webhook-id="{{webhook.id}}" data-webhook-enabled="{{ 'true' if webhook.enabled else 'false' }}" data-toggle="button" aria-pressed="true" autocomplete="off">
|
||||
<div class="handle"></div>
|
||||
</button>
|
||||
</td>
|
||||
<td id="{{webhook.name}}" class="id">
|
||||
<p>{{webhook.name}}</p>
|
||||
</td>
|
||||
<td id="{{webhook.webhook_type}}" class="type">
|
||||
<p>{{webhook.webhook_type}}</p>
|
||||
</td>
|
||||
<td id="{{webhook.trigger}}" class="trigger" style="overflow: scroll; max-width: 30px;">
|
||||
<ul>
|
||||
{% for trigger in webhook.trigger.split(",") %}
|
||||
{% if trigger in data["triggers"] %}
|
||||
<li>{{translate('webhooks', trigger , data['lang'])}}</li>
|
||||
{%end%}
|
||||
{%end%}
|
||||
</ul>
|
||||
</td>
|
||||
<td id="webhook_edit" class="action">
|
||||
<button onclick="window.location.href=`/panel/webhook_edit?id={{ data['server_stats']['server_id']['server_id'] }}&webhook_id={{webhook.id}}`" class="btn btn-info">
|
||||
<i class="fas fa-pencil-alt"></i>
|
||||
</button>
|
||||
<button data-webhook={{ webhook.id }} class="btn btn-danger del_button">
|
||||
<i class="fas fa-trash" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button data-webhook={{ webhook.id }} data-toggle="tooltip" title="{{ translate('webhooks', 'run', data['lang']) }}" class="btn btn-outline-warning test-socket">
|
||||
<i class="fa-solid fa-vial"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% end %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="d-block d-lg-none">
|
||||
<table aria-label="webhooks list" class="table table-hover responsive-table" id="webhook_table_mini" width="100%" style="table-layout:fixed;">
|
||||
<thead>
|
||||
<tr class="rounded">
|
||||
<th style="width: 20%; min-width: 64px;">{{ translate('webhooks', 'enabled',
|
||||
data['lang']) }}</th>
|
||||
<th style="width: 40%; min-width: 10px;">Name
|
||||
</th>
|
||||
<th style="width: 40%; min-width: 50px;">{{ translate('webhooks', 'edit', data['lang'])
|
||||
}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for webhook in data['webhooks'] %}
|
||||
<tr>
|
||||
<td id="{{webhook.enabled}}" class="enabled">
|
||||
<button type="button" class="btn btn-sm btn-info btn-toggle webhook-custom-toggle" id="webhook_{{webhook.id}}" name="webhook_{{webhook.id}}" data-webhook-id="{{webhook.id}}" data-webhook-enabled="{{ 'true' if webhook.enabled else 'false' }}" data-toggle="button" aria-pressed="true" autocomplete="off">
|
||||
<div class="handle"></div>
|
||||
</button>
|
||||
</td>
|
||||
<td id="{{webhook.name}}" class="id">
|
||||
<p>{{webhook.name}}</p>
|
||||
</td>
|
||||
<td id="webhook_edit" class="action">
|
||||
<button onclick="window.location.href=`/panel/webhook_edit?id={{ data['server_stats']['server_id']['server_id'] }}&webhook_id={{webhook.id}}`" class="btn btn-info">
|
||||
<i class="fas fa-pencil-alt"></i>
|
||||
</button>
|
||||
<button data-webhook={{ webhook.id }} class="btn btn-danger del_button">
|
||||
<i class="fas fa-trash" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button data-webhook={{ webhook.id }} data-toggle="tooltip" title="{{ translate('webhooks', 'run', data['lang']) }}" class="btn btn-outline-warning test-socket">
|
||||
<i class="fa-solid fa-vial"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% end %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% end %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -170,6 +173,16 @@
|
||||
.toggle {
|
||||
height: 0px !important;
|
||||
}
|
||||
|
||||
td.enabled {
|
||||
vertical-align: middle;
|
||||
border-collapse: collapse !important;
|
||||
}
|
||||
|
||||
.enabled .toggle-group .btn {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -195,16 +208,12 @@
|
||||
|
||||
{% block js %}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$(document).ready(function () {
|
||||
console.log('ready for JS!')
|
||||
$('#webhook_table').DataTable({
|
||||
'order': [4, 'asc'],
|
||||
}
|
||||
);
|
||||
|
||||
});
|
||||
$(document).ready(function () {
|
||||
console.log('ready for JS!')
|
||||
$('#webhook_table_mini').DataTable({
|
||||
'order': [2, 'asc']
|
||||
}
|
||||
@ -247,20 +256,21 @@
|
||||
};
|
||||
}
|
||||
|
||||
$(() => {
|
||||
$('.webhook-enabled-toggle').bootstrapToggle({
|
||||
on: 'Yes',
|
||||
off: 'No',
|
||||
onstyle: 'success',
|
||||
offstyle: 'danger',
|
||||
})
|
||||
$('.webhook-enabled-toggle').each(function () {
|
||||
$(document).ready(function () {
|
||||
$('.webhook-custom-toggle').each(function () {
|
||||
const enabled = JSON.parse(this.getAttribute('data-webhook-enabled'));
|
||||
$(this).bootstrapToggle(enabled ? 'on' : 'off')
|
||||
if (enabled) {
|
||||
this.classList.add("active");
|
||||
}
|
||||
else {
|
||||
this.classList.remove("active");
|
||||
}
|
||||
})
|
||||
$('.webhook-enabled-toggle').change(function () {
|
||||
});
|
||||
$(() => {
|
||||
$('.webhook-custom-toggle').click(function () {
|
||||
const id = this.getAttribute('data-webhook-id');
|
||||
const enabled = this.checked;
|
||||
const enabled = !JSON.parse(this.getAttribute('data-webhook-enabled'));
|
||||
|
||||
fetch(`/api/v2/servers/{{data['server_id']}}/webhook/${id}`, {
|
||||
method: 'PATCH',
|
||||
@ -296,12 +306,12 @@
|
||||
message: "{{ translate('webhooks', 'areYouSureDel', data['lang']) }}",
|
||||
buttons: {
|
||||
cancel: {
|
||||
label: '<i class="fas fa-times"></i> {{ translate("serverSchedules", "cancel", data['lang']) }}'
|
||||
},
|
||||
label: '<i class="fas fa-times"></i> {{ translate("serverSchedules", "cancel", data["lang"]) }}'
|
||||
},
|
||||
confirm: {
|
||||
className: 'btn-outline-danger',
|
||||
label: '<i class="fas fa-check"></i> {{ translate("serverSchedules", "confirm", data['lang']) }}'
|
||||
}
|
||||
label: '<i class="fas fa-check"></i> {{ translate("serverSchedules", "confirm", data["lang"]) }}'
|
||||
}
|
||||
},
|
||||
callback: function (result) {
|
||||
console.log(result);
|
||||
@ -319,12 +329,12 @@
|
||||
message: "{{ translate('webhooks', 'areYouSureRun', data['lang']) }}",
|
||||
buttons: {
|
||||
cancel: {
|
||||
label: '<i class="fas fa-times"></i> {{ translate("serverSchedules", "cancel", data['lang']) }}'
|
||||
},
|
||||
label: '<i class="fas fa-times"></i> {{ translate("serverSchedules", "cancel", data["lang"]) }}'
|
||||
},
|
||||
confirm: {
|
||||
className: 'btn-outline-danger',
|
||||
label: '<i class="fas fa-check"></i> {{ translate("serverSchedules", "confirm", data['lang']) }}'
|
||||
}
|
||||
label: '<i class="fas fa-check"></i> {{ translate("serverSchedules", "confirm", data["lang"]) }}'
|
||||
}
|
||||
},
|
||||
callback: function (result) {
|
||||
console.log(result);
|
||||
@ -346,12 +356,12 @@
|
||||
let responseData = await res.json();
|
||||
if (responseData.status === "ok") {
|
||||
bootbox.alert("Webhook Sent!")
|
||||
}else{
|
||||
} else {
|
||||
console.log(responseData);
|
||||
bootbox.alert({
|
||||
title: responseData.status,
|
||||
message: responseData.error
|
||||
});
|
||||
bootbox.alert({
|
||||
title: responseData.status,
|
||||
message: responseData.error
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -367,11 +377,11 @@
|
||||
let responseData = await res.json();
|
||||
if (responseData.status === "ok") {
|
||||
window.location.reload();
|
||||
}else{
|
||||
} else {
|
||||
bootbox.alert({
|
||||
title: responseData.status,
|
||||
message: responseData.error
|
||||
});
|
||||
title: responseData.status,
|
||||
message: responseData.error
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -500,6 +500,8 @@
|
||||
"interval": "Interval",
|
||||
"name": "Name",
|
||||
"nextRun": "Next Run",
|
||||
"newShedule": "New Schedule",
|
||||
"no-shedule": "There are currently no shedules for this server. To get started, click",
|
||||
"no": "No",
|
||||
"scheduledTasks": "Scheduled Tasks",
|
||||
"yes": "Yes"
|
||||
@ -641,6 +643,8 @@
|
||||
"kill": "Server Killed",
|
||||
"name": "Name",
|
||||
"new": "New Webhook",
|
||||
"newWebhook": "New Webhook",
|
||||
"no-webhook": "There are currently no webhooks for this server. To get started, click",
|
||||
"run": "Test Run Webhook",
|
||||
"send_command": "Server Command Received",
|
||||
"start_server": "Server Started",
|
||||
@ -651,4 +655,4 @@
|
||||
"webhook_body": "Webhook Body",
|
||||
"webhooks": "Webhooks"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -500,6 +500,8 @@
|
||||
"interval": "Intervalle",
|
||||
"name": "Nom",
|
||||
"nextRun": "Exécution suivante",
|
||||
"newShedule": "Nouvelle Tâche",
|
||||
"no-shedule": "Il n'y a actuellement aucune tâche pour ce serveur. Pour commencer, clicke sur ",
|
||||
"no": "Non",
|
||||
"scheduledTasks": "Tâches Planifiées",
|
||||
"yes": "Oui"
|
||||
@ -642,6 +644,8 @@
|
||||
"kill": "Serveur Interrompu",
|
||||
"name": "Nom",
|
||||
"new": "Nouveau Webhook",
|
||||
"newWebhook": "Nouveau Webhook",
|
||||
"no-webhook": "Il n'y a actuellement aucun webhook pour ce serveur. Pour commecner, clicke sur ",
|
||||
"run": "Test l'exécution du Webhook",
|
||||
"send_command": "Commande du Serveur reçue",
|
||||
"start_server": "Le serveur a démarré",
|
||||
@ -652,4 +656,4 @@
|
||||
"webhook_body": "Corps du Webhook",
|
||||
"webhooks": "Webhooks"
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user