mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2024-08-30 18:23:09 +00:00
282 lines
8.9 KiB
HTML
282 lines
8.9 KiB
HTML
{% extends ../base.html %}
|
||
|
||
{% block meta %}
|
||
{% end %}
|
||
|
||
{% block title %}Crafty Controller - {{ translate('panelConfig', 'pageTitle', data['lang']) }}{% end %}
|
||
|
||
{% block content %}
|
||
|
||
<div class="content-wrapper">
|
||
{% if data['superuser'] %}
|
||
<ul class="nav nav-tabs col-md-12 tab-simple-styled " role="tablist">
|
||
<li class="nav-item term-nav-item">
|
||
<a class="nav-link" href="/panel/panel_config" role="tab" aria-selected="false">
|
||
<i class="fas fa-file-signature"></i>Panel Config</a>
|
||
</li>
|
||
<li class="nav-item term-nav-item">
|
||
<a class="nav-link active" href="/panel/config_json" role="tab" aria-selected="false">
|
||
<i class="fas fa-file-signature"></i>Config.json</a>
|
||
</li>
|
||
</ul>
|
||
{% end %}
|
||
|
||
<!-- Page Title Header Starts-->
|
||
<div class="row page-title-header">
|
||
<div class="col-12">
|
||
<div class="page-header">
|
||
<!-- TODO: Translate the following -->
|
||
<h4 class="page-title">Config.json</h4>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- Page Title Header Ends-->
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 grid-margin">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<form id="config-form" class="forms-sample" method="post" action="/panel/config_json">
|
||
{% raw xsrf_form_html() %}
|
||
{% for item in data['config-json'].items() %}
|
||
<br />
|
||
<br />
|
||
<label for="{{item[0]}}">{{item[0]}}
|
||
<small class="text-muted ml-1">
|
||
</small> </label>
|
||
{% if isinstance(item[1], list) %}
|
||
<<<<<<< HEAD <br>
|
||
<textarea value="{{','.join(item[1])}}" type="text" name="{{item[0]}}"
|
||
class="list">{{','.join(item[1])}}</textarea>
|
||
=======
|
||
<ul id="list-{{item[0]}}" class="list">
|
||
{% for li in item[1] %}
|
||
<li data-name="list-{{item[0]}}" style="color: white; margin-left: 20px;" selected readonly>{{li}}</li>
|
||
<br />
|
||
{% end %}
|
||
</ul>
|
||
>>>>>>> 99ccfb222840ed1c7d871763887d7108e178710d
|
||
{% elif isinstance(item[1], bool) %}
|
||
|
||
{% if item[1] == True %}
|
||
<div style="margin-left: 30px;">
|
||
<input type="radio" class="form-check-input" name="{{item[0]}}" id="True" value="True" checked>
|
||
<label for="True">True</label><br>
|
||
<input type="radio" class="form-check-input" name="{{item[0]}}" id="False" value="False">
|
||
<label for="False">False</label>
|
||
</div>
|
||
{% else %}
|
||
<div style="margin-left: 30px;">
|
||
<input type="radio" class="form-check-input" name="{{item[0]}}" id="True" value="True">
|
||
<label for="True">True</label><br>
|
||
<input type="radio" class="form-check-input" name="{{item[0]}}" id="False" value="False" checked>
|
||
<label for="False">False</label>
|
||
</div>
|
||
{% end %}
|
||
{% elif isinstance(item[1], int) %}
|
||
<input type="number" class="form-control" name="{{item[0]}}" id="{{item[0]}}" value="{{ item[1] }}"
|
||
step="1" min="0" required>
|
||
{% else %}
|
||
<input type="text" class="form-control" name="{{item[0]}}" id="{{item[0]}}" value="{{ item[1] }}"
|
||
step="2" min="0" required>
|
||
{% end %}
|
||
{% end %}
|
||
<button type="submit">Submit</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<style>
|
||
.popover-body {
|
||
color: white !important;
|
||
;
|
||
}
|
||
|
||
input[type="radio"] {
|
||
-ms-transform: scale(1.5);
|
||
/* IE 9 */
|
||
-webkit-transform: scale(1.5);
|
||
/* Chrome, Safari, Opera */
|
||
transform: scale(1.5);
|
||
}
|
||
</style>
|
||
<!-- content-wrapper ends -->
|
||
|
||
{% end %}
|
||
|
||
{% block js %}
|
||
<script>
|
||
$("#config-form").submit(function (e) {
|
||
let uuid = uuidv4();
|
||
var token = getCookie("_xsrf")
|
||
e.preventDefault();
|
||
let class_list = document.getElementsByClassName("list");
|
||
let form_json = convertFormToJSON($("#config-form"));
|
||
for (let i = 0; i < class_list.length; i++) {
|
||
let str = String($(class_list.item(i)).val())
|
||
form_json[$(class_list.item(i)).attr("name")] = uuid + "," + str.replace(/\s/g, '');
|
||
};
|
||
form_json['uuid'] = uuid;
|
||
$.ajax({
|
||
type: "POST",
|
||
headers: { 'X-XSRFToken': token },
|
||
dataType: "json",
|
||
url: '/panel/config_json',
|
||
data: form_json,
|
||
success: function (data) {
|
||
window.location.reload();
|
||
},
|
||
});
|
||
});
|
||
|
||
function uuidv4() {
|
||
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
|
||
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
|
||
);
|
||
}
|
||
function convertFormToJSON(form) {
|
||
const array = $(form).serializeArray(); // Encodes the set of form elements as an array of names and values.
|
||
const json = {};
|
||
$.each(array, function () {
|
||
json[this.name] = this.value || "";
|
||
});
|
||
return json;
|
||
}
|
||
|
||
$(document).ready(function () {
|
||
$('[data-toggle="popover"]').popover();
|
||
if ($(window).width() < 1000) {
|
||
$('.too_small').popover("show");
|
||
$('.too_small2').popover("show");
|
||
}
|
||
|
||
});
|
||
$(window).ready(function () {
|
||
$('body').click(function () {
|
||
$('.too_small').popover("hide");
|
||
$('.too_small2').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
|
||
if ($(window).width() < 1000) {
|
||
$('.too_small2').popover("show");
|
||
}
|
||
else {
|
||
$('.too_small2').popover("hide");
|
||
} // New width
|
||
});
|
||
$('#file').change(function () {
|
||
console.log("File changed");
|
||
if ($('#file').val()) {
|
||
$('#upload-button').prop("disabled", false);
|
||
console.log("File changed good");
|
||
}
|
||
});
|
||
</script>
|
||
<script>
|
||
|
||
$(document).ready(function () {
|
||
console.log('ready for JS!')
|
||
|
||
});
|
||
|
||
$(".show_button").click(function () {
|
||
console.log("showing key");
|
||
api_key = $(this).attr("data-id");
|
||
bootbox.alert({
|
||
backdrop: true,
|
||
title: '',
|
||
message: api_key,
|
||
});
|
||
});
|
||
|
||
$('.clear-comm').click(function () {
|
||
var token = getCookie("_xsrf")
|
||
$.ajax({
|
||
type: "POST",
|
||
headers: { 'X-XSRFToken': token },
|
||
url: '/ajax/clear_comm',
|
||
success: function (data) {
|
||
},
|
||
});
|
||
})
|
||
|
||
$('.delete-photo').click(function () {
|
||
var token = getCookie("_xsrf")
|
||
let photo = $('#photo').find(":selected").val();
|
||
$.ajax({
|
||
type: "POST",
|
||
headers: { 'X-XSRFToken': token },
|
||
url: '/ajax/delete_photo?photo=' + photo,
|
||
success: function (data) {
|
||
location.reload();
|
||
},
|
||
});
|
||
})
|
||
|
||
$('.select-photo').click(function () {
|
||
var token = getCookie("_xsrf")
|
||
let photo = $('#photo').find(":selected").val();
|
||
$.ajax({
|
||
type: "POST",
|
||
headers: { 'X-XSRFToken': token },
|
||
url: '/ajax/select_photo?photo=' + photo,
|
||
success: function (data) {
|
||
window.location.reload();
|
||
},
|
||
});
|
||
})
|
||
|
||
var file;
|
||
function sendFile() {
|
||
file = $("#file")[0].files[0]
|
||
document.getElementById("upload_input").innerHTML = '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> <i class="fa-solid fa-spinner"></i></div></div>'
|
||
let xmlHttpRequest = new XMLHttpRequest();
|
||
let token = getCookie("_xsrf")
|
||
let fileName = file.name
|
||
let target = '/upload'
|
||
let mimeType = file.type
|
||
let size = file.size
|
||
let type = 'background'
|
||
|
||
xmlHttpRequest.open('POST', target, true);
|
||
xmlHttpRequest.setRequestHeader('X-Content-Type', mimeType);
|
||
xmlHttpRequest.setRequestHeader('X-XSRFToken', token);
|
||
xmlHttpRequest.setRequestHeader('X-Content-Length', size);
|
||
xmlHttpRequest.setRequestHeader('X-Content-Disposition', 'attachment; filename="' + fileName + '"');
|
||
xmlHttpRequest.setRequestHeader('X-Content-Upload-Type', type);
|
||
xmlHttpRequest.setRequestHeader('X-FileName', fileName);
|
||
xmlHttpRequest.addEventListener('load', (event) => {
|
||
if (event.target.responseText == 'success') {
|
||
console.log('Upload for file', file.name, 'was successful!')
|
||
document.getElementById("upload_input").innerHTML = '<div class="card-header header-sm d-flex justify-content-between align-items-center"><span id="file-uploaded" style="color: gray;">' + fileName + '</span> 🔒</div>';
|
||
setTimeout(function () {
|
||
window.location.reload();
|
||
}, 2000);
|
||
}
|
||
else {
|
||
alert('Upload failed with response: ' + event.target.responseText);
|
||
doUpload = false;
|
||
}
|
||
}, false);
|
||
xmlHttpRequest.addEventListener('error', (e) => {
|
||
console.error('Error while uploading file', file.name + '.', 'Event:', e)
|
||
}, false);
|
||
xmlHttpRequest.send(file);
|
||
}
|
||
</script>
|
||
|
||
{% end %} |