328 lines
11 KiB
HTML
328 lines
11 KiB
HTML
{% load crispy_forms_tags %}
|
|
{% load static %}
|
|
<button type="button" class="btn btn-primary" onclick="javascript:showAgencyJob()" data-toggle="tooltip" data-placement="top" title="Fügen Sie hier weitere Standard-Agenturfunktionen zu oder bearbeiten bestehende.">Agenturfunktionen verwalten</button>
|
|
<hr>
|
|
<script src="{% static 'users/js/cropper.min.js' %}"></script>
|
|
<script src="{% static 'users/js/jquery-cropper.js' %}"></script>
|
|
<div class="col-12">
|
|
<!-- Für das Speichern der Bilder enctype -->
|
|
<form method="POST" enctype="multipart/form-data">
|
|
<input type="hidden" name="form_type" value="agencyform">
|
|
<input type="hidden" name="settings_area" value="agency">
|
|
{% csrf_token %}
|
|
<fieldset class="form-group">
|
|
<!-- FORMS LADEN -->
|
|
<div class="row">
|
|
<div class="col-3">
|
|
{% for formfield in agencyform %}
|
|
{% if forloop.counter|divisibleby:5 %}
|
|
</div>
|
|
<div class="col-3">
|
|
{{formfield|as_crispy_field}}
|
|
{% else %}
|
|
{{formfield|as_crispy_field}}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
</div>
|
|
</fieldset>
|
|
<hr>
|
|
<div class="form-group">
|
|
<button type="submit" class="btn btn-success">Agenturdaten Aktualisieren</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- MODAL TO CROP THE IMAGE -->
|
|
<div class="modal fade " id="modalCrop" data-backdrop="static" data-keyboard="false">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Bereich bestimmen</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="clearImgField()">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body" id="imgmodbody">
|
|
<img src="" id="imagemod" style="max-width: 100%; max-height: 100%;">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="btn-group pull-left" role="group">
|
|
<button type="button" class="btn btn-default js-zoom-in">
|
|
<i class="fas fa-search-plus"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-default js-zoom-out">
|
|
<i class="fas fa-search-minus"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-default js-rot-left">
|
|
<i class="fas fa-undo-alt"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-default js-rot-right">
|
|
<i class="fas fa-redo-alt"></i>
|
|
</button>
|
|
</div>
|
|
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="clearImgField()">Abbrechen</button>
|
|
<button type="button" class="btn btn-primary js-crop-and-upload">Ausschneiden</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
|
|
/* TEST FÜR RECHTE - GEHT, SO DANN DIE TEXTFELDER UND DEN BUTTON ENTFERNEN! */
|
|
/*
|
|
$(document).ready(function(){
|
|
$(".textinput").attr("disabled", true);
|
|
$(".emailinput").attr("disabled", true);
|
|
$(".clearablefileinput").attr("disabled", true);
|
|
})*/
|
|
|
|
/* CROPPER */
|
|
$("#id_x").val(0);
|
|
$("#id_y").val(0);
|
|
$("#id_width").val(0);
|
|
$("#id_height").val(0);
|
|
$("#id_rotation").val(0);
|
|
|
|
function clearImgField(){
|
|
$("#id_agencypic").val("");
|
|
}
|
|
|
|
|
|
/* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
|
|
$("#id_agencypic").change(function () {
|
|
if (this.files && this.files[0]) {
|
|
var reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
$("#imagemod").attr("src", e.target.result);
|
|
$("#modalCrop").modal("show");
|
|
}
|
|
reader.readAsDataURL(this.files[0]);
|
|
}
|
|
});
|
|
|
|
var cropBoxData;
|
|
var canvasData;
|
|
var $image = $("#imagemod");
|
|
$("#modalCrop").on("shown.bs.modal", function () {
|
|
$image.cropper({
|
|
viewMode: 0,
|
|
strict: false,
|
|
cropBoxMovable: true,
|
|
cropBoxResizable: true,
|
|
ready: function () {
|
|
$image.cropper("setCanvasData", canvasData);
|
|
$image.cropper("setCropBoxData", cropBoxData);
|
|
}
|
|
});
|
|
$("#imgmodbody").css({
|
|
"maxWidth": 465
|
|
});
|
|
|
|
}).on("hidden.bs.modal", function () {
|
|
cropBoxData = $image.cropper("getCropBoxData");
|
|
canvasData = $image.cropper("getCanvasData");
|
|
$image.cropper("destroy");
|
|
});
|
|
|
|
$(".js-zoom-in").click(function () {
|
|
$image.cropper("zoom", 0.1);
|
|
});
|
|
|
|
$(".js-zoom-out").click(function () {
|
|
$image.cropper("zoom", -0.1);
|
|
});
|
|
|
|
$(".js-rot-right").click(function () {
|
|
$image.cropper("rotate", 90);
|
|
});
|
|
|
|
$(".js-rot-left").click(function () {
|
|
$image.cropper("rotate", -90);
|
|
});
|
|
/* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
|
|
$(".js-crop-and-upload").click(function () {
|
|
var cropData = $image.cropper("getData");
|
|
$("#id_x").val(cropData["x"]);
|
|
$("#id_y").val(cropData["y"]);
|
|
$("#id_height").val(cropData["height"]);
|
|
$("#id_width").val(cropData["width"]);
|
|
$("#id_rotation").val(cropData["rotate"]);
|
|
$("#id_agencypic").attr("src", $image);
|
|
$("#modalCrop").modal('toggle');
|
|
});
|
|
|
|
/*
|
|
|
|
AGENCY JOB FUNCTIONS
|
|
|
|
*/
|
|
function showAgencyJob(){
|
|
$("#agencyJobs").modal("toggle");
|
|
}
|
|
|
|
function addAgencyJob(){
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "/dasettings/ajax",
|
|
data:{
|
|
action : "add_agencyfunc"
|
|
},
|
|
success: function( data )
|
|
{
|
|
new_id = data["data"]["new_id"];
|
|
$('#allagencyjobs > tbody:last-child').append('<tr id="agencyjob_'+new_id+'"><td><input class="form-control" type="text" value="" placeholder="Neue Funktion" onkeyup="javascript:updateFunc('+new_id+', this.value)"></td><td><button type="button" class="btn btn-danger" onclick="javascript:funcDel('+new_id+')" data-toggle="tooltip" data-placement="top" title="Agenturfunktion löschen"><i class="fas fa-trash-alt"></i></button></td></tr>');
|
|
}
|
|
});
|
|
}
|
|
|
|
var todelid = 0;
|
|
|
|
function funcDel(id){
|
|
todelid = id;
|
|
$("#agencyJobs").modal("toggle");
|
|
$("#delAgencyJob").modal("toggle");
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "/dasettings/ajax",
|
|
data:{
|
|
action : "get_agencyfunc",
|
|
id : id
|
|
},
|
|
success: function( data )
|
|
{
|
|
$("#delFuncBody").html("Achtung! Die Funktion <b>" + data['data']['funcname'] + "</b> wird gelöscht. Alle Mitarbeiter mit dieser Funktion erhalten eine leere Funktionsbeschreibung. Fortfahren?");
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function doDelAgencyJob(){
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "/dasettings/ajax",
|
|
data:{
|
|
action : "delete_agencyfunc",
|
|
id : todelid
|
|
},
|
|
success: function( data )
|
|
{
|
|
$("#agencyJobs").modal("toggle");
|
|
$("#delAgencyJob").modal("toggle");
|
|
$('#agencyjob_' + todelid).remove();
|
|
todelid = 0;
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
timeout = null;
|
|
function updateFunc(id, funcname){
|
|
var letters = /^[A-Za-zßäöüÄÖÜ_0-9 ]+$/;
|
|
if(funcname.match(letters))
|
|
{
|
|
//SAVE ONLY EVERY SECOND
|
|
$("#erroninput").hide();
|
|
$("#savebreak").show();
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(function () {
|
|
if(funcname.match(letters))
|
|
{
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "/dasettings/ajax",
|
|
data:{
|
|
action : "update_agencyfunc",
|
|
id : id,
|
|
newvalue : funcname
|
|
},
|
|
success: function( data )
|
|
{
|
|
if(data["success"]){
|
|
$("#savebreak").hide();
|
|
$("#funcupdate").fadeTo(2000, 500).slideUp(500, function(){
|
|
$("#funcupdate").fadeOut(500);
|
|
});
|
|
}
|
|
else{
|
|
$("#erroninput").show();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
else{
|
|
$("#erroninput").show();
|
|
$("#savebreak").hide();
|
|
$("#funcupdate").hide();
|
|
}
|
|
}, 1000);
|
|
}
|
|
else{
|
|
$("#erroninput").show();
|
|
$("#savebreak").hide();
|
|
$("#funcupdate").hide();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- MODAL FOR AGENCYJOBS -->
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="agencyJobs" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="agencyFunction" aria-hidden="true">
|
|
<div class="modal-dialog " role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLongTitle">Agenturfunktionen bearbeiten</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-hover" id="allagencyjobs">
|
|
<tbody>
|
|
{% for ele in agencyjobs %}
|
|
<tr id="agencyjob_{{ele.pk}}">
|
|
<td>
|
|
<input class="form-control" type="text" value="{{ele.name}}" onkeyup="javascript:updateFunc({{ele.pk}}, this.value)">
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-danger" onclick="javascript:funcDel({{ele.pk}})" data-toggle="tooltip" data-placement="top" title="Agenturfunktion löschen"><i class="fas fa-trash-alt"></i></button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<div id="erroninput" class="alert alert-danger" style="display: none">Falsche Eingabe! Es wird nichts gespeichert.</div>
|
|
<div id="savebreak" class="alert alert-success" style="display: none">Speichern pausiert...</div>
|
|
<div id="funcupdate" class="alert alert-success" style="display: none">Agenturfunktionen aktualisiert.</div>
|
|
<button type="button" class="btn btn-primary" title="Neue Funktion hinzufügen" onclick="javascript:addAgencyJob()" data-toggle="tooltip" data-placement="top" title="Dialog für eine neue Agenturfunktion öffnen"><i class="fas fa-plus"></i> Funktion</button>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-success" data-dismiss="modal">Schließen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CONFIRMA DELETE DIALOG -->
|
|
<div class="modal fade" id="delAgencyJob" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="agencyDelFunction" aria-hidden="true">
|
|
<div class="modal-dialog " role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLongTitle">Agenturfunktion löschen</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body" id="delFuncBody">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal" onclick="javascript:doDelAgencyJob()">Agenturfunktion löschen</button>
|
|
<button type="button" class="btn btn-success" data-dismiss="modal" onclick="javascript:$('#agencyJobs').modal('toggle')">Abbrechen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |