mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2024-08-30 18:23:09 +00:00
Add webhooks to frontend
This commit is contained in:
amcmanu3
parent
0a2b8694ac
commit
697c1392dc
@ -6,7 +6,7 @@
|
||||
{% block title %}Crafty Controller - {{ translate('serverDetails', 'serverDetails', data['lang']) }}{% end %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.min.css">
|
||||
<div class="content-wrapper">
|
||||
|
||||
<!-- Page Title Header Starts-->
|
||||
@ -39,22 +39,61 @@
|
||||
{% if data['new_webhook'] == True %}
|
||||
<form class="forms-sample" method="post" id="new_webhook_form"
|
||||
action="/panel/new_webhook?id={{ data['server_stats']['server_id']['server_id'] }}">
|
||||
{% else %}
|
||||
<form class="forms-sample" method="post" id="schedule_form"
|
||||
action="/panel/edit_schedule?id={{ data['server_stats']['server_id']['server_id'] }}&sch_id={{ data['schedule']['schedule_id'] }}">
|
||||
{% end %}
|
||||
<select class="form-select form-control form-control-lg select-css" id="webhook_type" name="webhook_type"
|
||||
form="role_form">
|
||||
{% for type in data['providers'] %}
|
||||
<option value="{{type}}">{{type}}</option>
|
||||
{% end %}
|
||||
{% else %}
|
||||
<form class="forms-sample" method="post" id="schedule_form"
|
||||
action="/panel/edit_webhook?id={{ data['server_stats']['server_id']['server_id'] }}&sch_id={{ data['webhook']['id'] }}">
|
||||
{% end %}
|
||||
<select class="form-select form-control form-control-lg select-css" id="webhook_type" name="webhook_type">
|
||||
{% for type in data['providers'] %}
|
||||
<option value="{{type}}">{{type}}</option>
|
||||
{% end %}
|
||||
</select>
|
||||
<br>
|
||||
<br>
|
||||
<div class="form-group">
|
||||
<label for="name">{{ translate('serverSchedules', 'name' , data['lang']) }}</label>
|
||||
<input type="input" class="form-control" name="name" id="name_input"
|
||||
value="{{ data['webhook']['name']}}" maxlength="30" placeholder="Name" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="url">Webhook URL</label>
|
||||
<input type="input" class="form-control" name="url" id="url"
|
||||
value="{{ data['webhook']['url']}}" placeholder="https://webhooks.craftycontrol.com/fakeurl" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="bot_name">Bot {{ translate('serverSchedules', 'name' , data['lang']) }}</label>
|
||||
<input type="input" class="form-control" name="bot_name" id="bot_name_input"
|
||||
value="{{ data['webhook']['bot_name']}}" maxlength="30" placeholder="Crafty Controller" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="trigger">Trigger</label>
|
||||
<select class="form-control selectpicker show-tick" name="trigger" id="trigger-select" data-icon-base="fas" data-tick-icon="fa-check" multiple data-style="custom-picker">
|
||||
{% for trigger in data['triggers'] %}
|
||||
{% if trigger in data["webhook"]["trigger"] %}
|
||||
<option selected>{{trigger}}</option>
|
||||
{% else %}
|
||||
<option>{{trigger}}</option>
|
||||
{% end %}
|
||||
{% end %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="body">Body</label>
|
||||
<textarea id="body-input" name="body" rows="4" cols="50">
|
||||
{{ data["webhook"]["body"] }}
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="form-check-flat">
|
||||
<label for="enabled" class="form-check-label ml-4 mb-4">
|
||||
<input type="checkbox" class="form-check-input" id="enabled" name="enabled" checked=""
|
||||
value="1">{{ translate('serverScheduleConfig', 'enabled' , data['lang']) }}
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success mr-2"><i class="fas fa-save"></i> {{
|
||||
translate('serverConfig', 'save', data['lang']) }}</button>
|
||||
<button type="reset"
|
||||
onclick="location.href=`/panel/server_detail?id={{ data['server_stats']['server_id']['server_id'] }}&subpage=schedules`"
|
||||
onclick="location.href=`/panel/server_detail?id={{ data['server_stats']['server_id']['server_id'] }}&subpage=webhooks`"
|
||||
class="btn btn-light"><i class="fas fa-times"></i> {{ translate('serverConfig', 'cancel',
|
||||
data['lang']) }}</button>
|
||||
</form>
|
||||
@ -68,6 +107,14 @@
|
||||
|
||||
|
||||
</div>
|
||||
<style>
|
||||
#body-input {
|
||||
background-color: var(--card-banner-bg);
|
||||
outline-color: var(--outline);
|
||||
color: var(--base-text);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<!-- content-wrapper ends -->
|
||||
|
||||
{% end %}
|
||||
@ -106,35 +153,30 @@
|
||||
}
|
||||
|
||||
const serverId = new URLSearchParams(document.location.search).get('id');
|
||||
const schId = new URLSearchParams(document.location.search).get('sch_id');
|
||||
const webhookId = new URLSearchParams(document.location.search).get('webhook_id');
|
||||
$(document).ready(function () {
|
||||
console.log("ready!");
|
||||
$("#new_schedule_form").on("submit", async function (e) {
|
||||
console.log('ready for JS!');
|
||||
$('.selectpicker').selectpicker("refresh");
|
||||
$("#new_webhook_form").on("submit", async function (e) {
|
||||
e.preventDefault();
|
||||
var token = getCookie("_xsrf")
|
||||
let schForm = document.getElementById("new_schedule_form");
|
||||
let webhookForm = document.getElementById("new_webhook_form");
|
||||
let select_val = JSON.stringify($('#trigger-select').val());
|
||||
select_val = JSON.parse(select_val);
|
||||
|
||||
let formData = new FormData(schForm);
|
||||
formData.delete("difficulty");
|
||||
let formData = new FormData(webhookForm);
|
||||
//Create an object from the form data entries
|
||||
let formDataObject = Object.fromEntries(formData.entries());
|
||||
//We need to make sure these are sent regardless of whether or not they're checked
|
||||
formDataObject.enabled = $("#enabled").prop('checked');
|
||||
formDataObject.one_time = $("#one_time").prop('checked');
|
||||
if ($("#difficulty").val() == "reaction"){
|
||||
formDataObject.interval_type = "reaction";
|
||||
}
|
||||
if ($("#action").val() != "command"){
|
||||
formDataObject.command = formDataObject.action + "_server";
|
||||
}
|
||||
if (formDataObject.cron_string != ""){
|
||||
formDataObject.interval_type = '';
|
||||
}
|
||||
formDataObject.trigger = select_val;
|
||||
|
||||
console.log(formDataObject);
|
||||
// Format the plain form data as JSON
|
||||
let formDataJsonString = JSON.stringify(formDataObject, replacer);
|
||||
|
||||
let res = await fetch(`/api/v2/servers/${serverId}/tasks/`, {
|
||||
let res = await fetch(`/api/v2/servers/${serverId}/webhook/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-XSRFToken': token,
|
||||
@ -144,7 +186,7 @@
|
||||
});
|
||||
let responseData = await res.json();
|
||||
if (responseData.status === "ok") {
|
||||
window.location.href = `/panel/server_detail?id=${serverId}&subpage=schedules`;
|
||||
window.location.href = `/panel/server_detail?id=${serverId}&subpage=webhooks`;
|
||||
} else {
|
||||
|
||||
bootbox.alert({
|
||||
@ -156,32 +198,23 @@
|
||||
|
||||
$("#schedule_form").on("submit", async function (e) {
|
||||
e.preventDefault();
|
||||
var token = getCookie("_xsrf")
|
||||
let schForm = document.getElementById("schedule_form");
|
||||
var token = getCookie("_xsrf");
|
||||
let webhookForm = document.getElementById("new_webhook_form");
|
||||
let select_val = JSON.stringify($('#trigger-select').val());
|
||||
select_val = JSON.parse(select_val);
|
||||
|
||||
let formData = new FormData(schForm);
|
||||
formData.delete("difficulty");
|
||||
let formData = new FormData(webhookForm);
|
||||
//Create an object from the form data entries
|
||||
let formDataObject = Object.fromEntries(formData.entries());
|
||||
//We need to make sure these are sent regardless of whether or not they're checked
|
||||
formDataObject.enabled = $("#enabled").prop('checked');
|
||||
formDataObject.one_time = $("#one_time").prop('checked');
|
||||
if ($("#difficulty").val() == "reaction"){
|
||||
formDataObject.interval_type = "reaction";
|
||||
}
|
||||
if ($("#action").val() != "command"){
|
||||
formDataObject.command = formDataObject.action + "_server";
|
||||
}
|
||||
if (formDataObject.cron_string != ""){
|
||||
formDataObject.interval_type = '';
|
||||
}
|
||||
formDataObject.trigger = select_val;
|
||||
|
||||
console.log(formDataObject);
|
||||
// Format the plain form data as JSON
|
||||
let formDataJsonString = JSON.stringify(formDataObject, replacer);
|
||||
|
||||
console.log(formDataJsonString);
|
||||
|
||||
let res = await fetch(`/api/v2/servers/${serverId}/tasks/${schId}`, {
|
||||
let res = await fetch(`/api/v2/servers/${serverId}/webhooks/${webhookId}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'X-XSRFToken': token,
|
||||
@ -191,7 +224,7 @@
|
||||
});
|
||||
let responseData = await res.json();
|
||||
if (responseData.status === "ok") {
|
||||
window.location.href = `/panel/server_detail?id=${serverId}&subpage=schedules`;
|
||||
window.location.href = `/panel/server_detail?id=${serverId}&subpage=webhooks`;
|
||||
} else {
|
||||
|
||||
bootbox.alert({
|
||||
@ -202,60 +235,8 @@
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function yesnoCheck() {
|
||||
if (document.getElementById('action').value == "command") {
|
||||
document.getElementById("ifYes").style.display = "block";
|
||||
document.getElementById("command_input").required = true;
|
||||
} else {
|
||||
document.getElementById("ifYes").style.display = "none";
|
||||
document.getElementById("command_input").required = false;
|
||||
}
|
||||
}
|
||||
function basicAdvanced() {
|
||||
if (document.getElementById('difficulty').value == "advanced") {
|
||||
document.getElementById("ifAdvanced").style.display = "block";
|
||||
document.getElementById("ifReaction").style.display = "none";
|
||||
document.getElementById("ifBasic").style.display = "none";
|
||||
document.getElementById("delay").required = false;
|
||||
document.getElementById("parent").required = false;
|
||||
document.getElementById("interval").required = false;
|
||||
document.getElementById("time").required = false;
|
||||
} else if (document.getElementById('difficulty').value == "reaction") {
|
||||
document.getElementById("ifReaction").style.display = "block";
|
||||
document.getElementById("ifBasic").style.display = "none";
|
||||
document.getElementById("ifAdvanced").style.display = "none";
|
||||
document.getElementById("delay").required = true;
|
||||
document.getElementById("parent").required = true;
|
||||
document.getElementById("interval").required = false;
|
||||
document.getElementById("time").required = false;
|
||||
$("#cron").val("");
|
||||
}
|
||||
else {
|
||||
document.getElementById("ifAdvanced").style.display = "none";
|
||||
document.getElementById("ifReaction").style.display = "none";
|
||||
document.getElementById("ifBasic").style.display = "block";
|
||||
document.getElementById("delay").required = false;
|
||||
document.getElementById("parent").required = false;
|
||||
document.getElementById("interval").required = true;
|
||||
document.getElementById("time").required = true;
|
||||
$("#cron").val("");
|
||||
}
|
||||
}
|
||||
function ifDays() {
|
||||
if (document.getElementById('interval_type').value == "days") {
|
||||
document.getElementById("ifDays").style.display = "block";
|
||||
document.getElementById("time").required = true;
|
||||
} else {
|
||||
document.getElementById("ifDays").style.display = "none";
|
||||
document.getElementById("time").required = false;
|
||||
}
|
||||
}
|
||||
|
||||
function startup() {
|
||||
}
|
||||
|
||||
window.onload(startup())
|
||||
</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>
|
||||
|
||||
{% end %}
|
||||
@ -57,6 +57,51 @@
|
||||
class="fas fa-pencil-alt"></i></button></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-hover d-none d-lg-block responsive-table" id="schedule_table" width="100%" style="table-layout:fixed;">
|
||||
<thead>
|
||||
<tr class="rounded">
|
||||
<th style="width: 10%; min-width: 10px;">Name
|
||||
</th>
|
||||
<th style="width: 20%; min-width: 50px;">Webhook Type</th>
|
||||
<th style="width: 50%; min-width: 50px;">Trigger</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 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;">
|
||||
<p style="overflow: scroll;" class="no-scroll">{{webhook.trigger}}</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="Test Websocket" class="btn btn-outline-warning test-socket">
|
||||
<i class="fa-solid fa-vial"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% end %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -118,21 +163,21 @@
|
||||
}
|
||||
|
||||
$(() => {
|
||||
$('.schedule-enabled-toggle').bootstrapToggle({
|
||||
$('.webhook-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'));
|
||||
$('.webhook-enabled-toggle').each(function () {
|
||||
const enabled = JSON.parse(this.getAttribute('data-webhook-enabled'));
|
||||
$(this).bootstrapToggle(enabled ? 'on' : 'off')
|
||||
})
|
||||
$('.schedule-enabled-toggle').change(function () {
|
||||
const id = this.getAttribute('data-schedule-id');
|
||||
$('.webhook-enabled-toggle').change(function () {
|
||||
const id = this.getAttribute('data-webhook-id');
|
||||
const enabled = this.checked;
|
||||
|
||||
fetch(`/api/v2/servers/{{data['server_id']}}/tasks/${id}`, {
|
||||
fetch(`/api/v2/servers/{{data['server_id']}}/webhook/${id}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({ enabled }),
|
||||
headers: {
|
||||
@ -143,50 +188,6 @@
|
||||
})
|
||||
|
||||
const serverId = new URLSearchParams(document.location.search).get('id')
|
||||
|
||||
$(document).ready(function () {
|
||||
console.log('ready for JS!')
|
||||
$('#schedule_table').DataTable({
|
||||
'order': [4, 'asc'],
|
||||
}
|
||||
);
|
||||
|
||||
});
|
||||
$(document).ready(function () {
|
||||
console.log('ready for JS!')
|
||||
$('#mini_schedule_table').DataTable({
|
||||
'order': [2, 'asc']
|
||||
}
|
||||
);
|
||||
document.getElementById('mini_schedule_table_wrapper').hidden = true;
|
||||
});
|
||||
$(document).ready(function () {
|
||||
$('[data-toggle="popover"]').popover();
|
||||
if ($(window).width() < 1000) {
|
||||
$('.too_small').popover("show");
|
||||
document.getElementById('schedule_table_wrapper').hidden = true;
|
||||
document.getElementById('mini_schedule_table_wrapper').hidden = false;
|
||||
}
|
||||
|
||||
});
|
||||
$(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");
|
||||
document.getElementById('schedule_table_wrapper').hidden = true;
|
||||
document.getElementById('mini_schedule_table_wrapper').hidden = false;
|
||||
}
|
||||
else {
|
||||
$('.too_small').popover("hide");
|
||||
document.getElementById('schedule_table_wrapper').hidden = false;
|
||||
document.getElementById('mini_schedule_table_wrapper').hidden = true;
|
||||
} // New width
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
|
||||
@ -202,42 +203,9 @@
|
||||
|
||||
});
|
||||
|
||||
function yesnoCheck(that) {
|
||||
if (that.value == "command") {
|
||||
document.getElementById("ifYes").style.display = "block";
|
||||
document.getElementById("command").required = true;
|
||||
} else {
|
||||
document.getElementById("ifYes").style.display = "none";
|
||||
document.getElementById("command").required = false;
|
||||
}
|
||||
}
|
||||
function basicAdvanced(that) {
|
||||
if (that.value == "advanced") {
|
||||
document.getElementById("ifAdvanced").style.display = "block";
|
||||
document.getElementById("ifBasic").style.display = "none";
|
||||
document.getElementById("interval").required = false;
|
||||
document.getElementById("time").required = false;
|
||||
} else {
|
||||
document.getElementById("ifAdvanced").style.display = "none";
|
||||
document.getElementById("ifBasic").style.display = "block";
|
||||
document.getElementById("interval").required = true;
|
||||
document.getElementById("time").required = true;
|
||||
}
|
||||
}
|
||||
function ifDays(that) {
|
||||
if (that.value == "days") {
|
||||
document.getElementById("ifDays").style.display = "block";
|
||||
document.getElementById("time").required = true;
|
||||
} else {
|
||||
document.getElementById("ifDays").style.display = "none";
|
||||
document.getElementById("time").required = false;
|
||||
}
|
||||
}
|
||||
|
||||
$(".del_button").click(function () {
|
||||
var sch_id = $(this).data('sch');
|
||||
|
||||
console.log(sch_id)
|
||||
var webhook_id = $(this).data('webhook');
|
||||
|
||||
bootbox.confirm({
|
||||
title: "{{ translate('serverSchedules', 'areYouSure', data['lang']) }}",
|
||||
@ -254,24 +222,73 @@
|
||||
callback: function (result) {
|
||||
console.log(result);
|
||||
if (result == true) {
|
||||
del_task(sch_id, serverId);
|
||||
del_hook(webhook_id, serverId);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
async function del_task(sch_id, id) {
|
||||
$(".test-socket").click(function () {
|
||||
var webhook_id = $(this).data('webhook');
|
||||
|
||||
bootbox.confirm({
|
||||
title: "{{ translate('serverSchedules', 'areYouSure', data['lang']) }}",
|
||||
message: "{{ translate('serverSchedules', 'confirmDelete', data['lang']) }}",
|
||||
buttons: {
|
||||
cancel: {
|
||||
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']) }}'
|
||||
}
|
||||
},
|
||||
callback: function (result) {
|
||||
console.log(result);
|
||||
if (result == true) {
|
||||
test_hook(webhook_id, serverId);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
async function test_hook(webhook_id, id) {
|
||||
var token = getCookie("_xsrf")
|
||||
|
||||
let res = await fetch(`/api/v2/servers/${id}/tasks/${sch_id}`, {
|
||||
let res = await fetch(`/api/v2/servers/${id}/webhook/${webhook_id}/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'token': token,
|
||||
},
|
||||
});
|
||||
let responseData = await res.json();
|
||||
if (responseData.status === "ok") {
|
||||
bootbox.alert("Webhook Sent!")
|
||||
}else{
|
||||
console.log(responseData);
|
||||
bootbox.alert({
|
||||
title: responseData.status,
|
||||
message: responseData.error
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function del_hook(webhook_id, id) {
|
||||
var token = getCookie("_xsrf")
|
||||
|
||||
let res = await fetch(`/api/v2/servers/${id}/webhook/${webhook_id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'token': token,
|
||||
},
|
||||
});
|
||||
let responseData = await res;
|
||||
let responseData = await res.json();
|
||||
if (responseData.statusText === "OK") {
|
||||
window.location.reload();
|
||||
}else{
|
||||
bootbox.alert({
|
||||
title: responseData.stats,
|
||||
message: responseData.error
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user