482 lines
19 KiB
HTML
482 lines
19 KiB
HTML
{% extends "users/base.html" %}
|
|
{% load crispy_forms_tags %}
|
|
{% load counter_tag %}
|
|
{% load static %}
|
|
{% block content %}
|
|
<script src="{% static 'users/js/cropper.min.js' %}"></script>
|
|
<script src="{% static 'users/js/jquery-cropper.js' %}"></script>
|
|
|
|
|
|
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px; max-width: 250px; position: fixed; margin-top: -3%; margin-left: 70.5%; z-index: 10">
|
|
<!-- Then put toasts within -->
|
|
<div id="notchange_done" class="toast alert-success" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<strong class="mr-auto">Gespeichert</strong>
|
|
<!--<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>-->
|
|
</div>
|
|
<div class="toast-body">
|
|
<div id="toast_savecontent">Änderungen wurden gespeichert.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px; max-width: 250px; position: fixed; margin-top: -3%; margin-left: 70.5%; z-index: 10">
|
|
<!-- Then put toasts within -->
|
|
<div id="notchange_err" class="toast alert-danger" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<strong class="mr-auto">Fehler aufgetreten</strong>
|
|
<!--
|
|
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
-->
|
|
</div>
|
|
<div class="toast-body">
|
|
<div id="toast_errcontent">Bitte kontaktieren Sie den Support.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="content-section col-10">
|
|
<h3>Mitarbeiter <span id="user_title_fullname">{{user_fullname}}</span> <small><i data-toggle="tooltip" data-placement="top" title="Geben Sie hier die Profildaten für den Mitarbeiter ein." class="far fa-question-circle"></i></small></h3>
|
|
<hr>
|
|
{% if newuser == 1 %}
|
|
<div class="progress mb-3" style="max-height: 15px;">
|
|
<div class="progress-bar" role="progressbar" style="width: 80%; " aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">Schritt 2: Profildaten festlegen</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="media">
|
|
<img class="img-profile" style="width: 15%;" src="{{ imagelink }}">
|
|
<div class="media-body col-6">
|
|
<div class="row">
|
|
<div class="col-8">
|
|
<h6><b>Name</b></h6>
|
|
<p>
|
|
<span id="user_fullname">{{ user_fullname }}</span> <button style="float: right" type="button" class="btn btn-secondary btn-sm" onclick="javascript:ChangeName()" id="changenamebutton"><i class="fas fa-pen"></i></button>
|
|
</p>
|
|
<h6><b>E-Mail</b></h6>
|
|
<p>
|
|
<span id="user_email">{{ mail }}</span> <button onclick="javascript:ChangeMail()" style="float: right" type="button" class="btn btn-secondary btn-sm" id="changemailbutton"><i class="fas fa-pen"></i></button>
|
|
</p>
|
|
<div style="float: left">
|
|
<button type="button" id="" onclick="javascript:sendPassMail({{vieweduser}})" class="btn btn-primary btn-sm active" >Passwort wiederherstellen</button>
|
|
<br /><br /><span class="alert alert-success" id="mailsend" role="alert" style="display: none;"> E-Mail gesendet!</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<ul class="nav nav-tabs" id="profSettingsTabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="profil-user-tab" data-toggle="tab" href="#profil-user" role="tab" aria-controls="profil-user" aria-selected="false" >Profil</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="contract-tab" data-toggle="tab" href="#contract" role="tab" aria-controls="contract" aria-selected="false" >Vertragsdaten</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="profSettingsTabs">
|
|
<div class="tab-pane fade show" id="profil-user" role="tabpanel" aria-labelledby="profil-user-tab">
|
|
|
|
<form method="POST" enctype="multipart/form-data" name="profileform_basic">
|
|
<input type="hidden" name="userprof_formtype" value="profileform">
|
|
<div class="mt-2">
|
|
<p>Gruppen <small><i data-toggle="tooltip" data-placement="top" title="Legen Sie fest, in welchen Gruppen der neue Mitarbeiter sein soll. Standardmäßig sind alle Mitarbeiter in der Gruppe Mitarbeiter (wenn diese nicht umbenannt worden ist)." class="far fa-question-circle"></i></small></p>
|
|
<div class="row">
|
|
<div class="col-4">
|
|
{% for g in agencygroups %}
|
|
{% if forloop.counter|divisibleby:6 %}
|
|
</div><div class="col-4">
|
|
<div class="custom-control custom-checkbox mb-2">
|
|
{% if vieweduser|useringroupbyid:g.group.name %}
|
|
<input type="checkbox" class="custom-control-input" name="group_{{g.pk}}" id="group_{{g.pk}}" onchange="javascript:updateUser({{vieweduser}}, {{g.pk}}, this.checked)" checked="true">
|
|
{% else %}
|
|
<input type="checkbox" class="custom-control-input" name="group_{{g.pk}}" id="group_{{g.pk}}" onchange="javascript:updateUser({{vieweduser}}, {{g.pk}}, this.checked)">
|
|
{% endif %}
|
|
<label class="custom-control-label" for="group_{{g.pk}}" >{{g.agencygroupname}}</label>
|
|
</div>
|
|
{% else %}
|
|
<div class="custom-control custom-checkbox mb-2">
|
|
{% if vieweduser|useringroupbyid:g.group.name %}
|
|
<input type="checkbox" class="custom-control-input" name="group_{{g.pk}}" id="group_{{g.pk}}" onchange="javascript:updateUser({{vieweduser}}, {{g.pk}}, this.checked)" checked="true">
|
|
{% else %}
|
|
<input type="checkbox" class="custom-control-input" name="group_{{g.pk}}" id="group_{{g.pk}}" onchange="javascript:updateUser({{vieweduser}}, {{g.pk}}, this.checked)">
|
|
{% endif %}
|
|
<label class="custom-control-label" for="group_{{g.pk}}" >{{g.agencygroupname}}</label>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div></div>
|
|
</div>
|
|
<hr>
|
|
<div class="mt-2">
|
|
<p>Übergeordneter Mitarbeiter <small><i data-toggle="tooltip" data-placement="top" title="Legen Sie fest, welche Mitarbeiter über diesen im Organigramm steht. Ist die Einstellung leer, wir" class="far fa-question-circle"></i></small></p>
|
|
<select name="usertoparent" id="usertoparent" class="select form-control col-4">
|
|
<option value="">---------</option>
|
|
{% for singleparent in usertoparent %}
|
|
{% if parentuser == singleparent.pk %}
|
|
<option value="{{singleparent.pk}}" selected>{{singleparent.first_name}} {{singleparent.last_name}} </option>
|
|
{% else %}
|
|
<option value="{{singleparent.pk}}">{{singleparent.first_name}} {{singleparent.last_name}} </option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<hr>
|
|
<p>Persönliches Profil</p>
|
|
{% csrf_token %}
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<input type="hidden" name="form_type" value="profileform">
|
|
{% for field in profileform %}
|
|
{% if forloop.counter|divisibleby:6 %}
|
|
</div>
|
|
<div class="col-6">
|
|
{{field|as_crispy_field}}
|
|
{% else %}
|
|
{{field|as_crispy_field}}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
{% if newuser == 1 %}
|
|
<a class="btn" href="{% url 'dasettings' %} ">Profil später bearbeiten</a>
|
|
{% else %}
|
|
<a class="btn" href="{% url 'dasettings' %} ">Abbrechen</a>
|
|
{% endif%}
|
|
|
|
{% if newuser == 1 %}
|
|
<button type="submit" class="btn btn-primary" style="float: right">Profilerstellung abschließen</button>
|
|
{% else %}
|
|
<button type="submit" name="submitprof" class="btn btn-primary" style="float: right">Speichern</button>
|
|
{% endif %}
|
|
|
|
</form>
|
|
</div>
|
|
<div class="tab-pane fade" id="contract" role="tabpanel" aria-labelledby="contract-tab">
|
|
|
|
|
|
<div class="col-9 mt-2" style="margin-left: -10px;">
|
|
<form method="POST" enctype="multipart/form-data" name="usertime_basic">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="form_type" value="contract">
|
|
|
|
<p>Arbeitszeiten <small><i data-toggle="tooltip" data-placement="top" title="Legen Sie fest, an welchen Tagen dieser Mitarbeiter wie viele Stunden arbeitet." class="far fa-question-circle"></i></small></p>
|
|
<div class="table-responsive">
|
|
<table class="table">
|
|
<tr>
|
|
<td>{{usertime_form.wd_mo|as_crispy_field}}</td>
|
|
<td>{{usertime_form.wd_tu|as_crispy_field}}</td>
|
|
<td>{{usertime_form.wd_we|as_crispy_field}}</td>
|
|
<td>{{usertime_form.wd_th|as_crispy_field}}</td>
|
|
<td>{{usertime_form.wd_fr|as_crispy_field}}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<hr style="margin-top: -20px;">
|
|
<div class="col-5" >
|
|
<p>Urlaub <small><i data-toggle="tooltip" data-placement="top" title="Legen Sie fest, wie viel Urlaub dieser Mitarbeiter im Jahr hat." class="far fa-question-circle"></i></small></p>
|
|
{{usertime_form.media}}
|
|
{{usertime_form.holiday|as_crispy_field}}
|
|
{{usertime_form.holiday_start|as_crispy_field}}
|
|
{{usertime_form.loose_holidedate|as_crispy_field}}
|
|
{{usertime_form.startdate|as_crispy_field}}
|
|
</div>
|
|
<div class="col-12">
|
|
<hr>
|
|
<button type="submit" class="btn btn-primary" style="float: right">Vertragsdaten aktualisieren</button>
|
|
<a class="btn" href="{% url 'dasettings' %} ">Abbrechen</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
/*
|
|
DYNAMIC USERDATA CHANGES
|
|
|
|
*/
|
|
//CHANGE MAILADDRESS
|
|
function ChangeMail(){
|
|
$("#user_email").html('<div class="input-group" style="margin-bottom: -38px;"><input type="email" class="form-control" id="newusermail" value="{{ mail }}"><div class="input-group-append"><button type="button" onclick="javascript:updateNewMail()" class="btn btn-secondary" ><i class="fas fa-check"></i></button></div></div>');
|
|
$("#changemailbutton").hide();
|
|
}
|
|
|
|
function updateNewMail(){
|
|
newmail = $("#newusermail").val();
|
|
$("#changemailbutton").show();
|
|
$("#user_email").html(newmail);
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "/dasettings/ajax",
|
|
data:{
|
|
action : "update_usermail",
|
|
newmail : newmail,
|
|
userid: {{vieweduser}}
|
|
},
|
|
success: function( data )
|
|
{
|
|
if(data['success']){
|
|
$('#notchange_done').toast('show');
|
|
$("#toast_savecontent").html("E-Mailadresse aktualisiert");
|
|
}
|
|
else{
|
|
$('#notchange_err').toast('show');
|
|
$("#toast_errcontent").html("E-Mailadresse nicht aktualisiert! Valide Daten eingeben oder E-Mailadresse ist bereits vorhanden.");
|
|
$("#user_email").html(data["data"]["mail"]);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
//CAHNGE USERNAME
|
|
function ChangeName(){
|
|
$("#user_fullname").html('<div class="input-group" style="margin-bottom: -38px;"><input type="text" class="form-control" size="40" id="user_first_name" value="{{first_name}}"> <div class="input-group-append"><input type="text" class="form-control" id="user_last_name" value="{{last_name}}"><button type="button" onclick="javascript:updateNewNames()" class="btn btn-secondary" ><i class="fas fa-check"></i></button></div></div>');
|
|
$("#changenamebutton").hide();
|
|
}
|
|
|
|
function updateNewNames(){
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "/dasettings/ajax",
|
|
data:{
|
|
action : "update_usernames",
|
|
new_first_name : $("#user_first_name").val(),
|
|
new_last_name : $("#user_last_name").val(),
|
|
userid: {{vieweduser}}
|
|
},
|
|
success: function( data )
|
|
{
|
|
if(data['success']){
|
|
$('#notchange_done').toast('show');
|
|
$("#toast_savecontent").html("Vor- und Nachname aktualisiert");
|
|
$("#user_fullname").html(data["data"]["userfullname"]);
|
|
$("#user_title_fullname").html(data["data"]["userfullname"]);
|
|
$("#changenamebutton").show();
|
|
}
|
|
else{
|
|
$('#notchange_err').toast('show');
|
|
$("#toast_errcontent").html("Vor- und Nachname konnte nicht aktualisiert werden!");
|
|
$("#user_fullname").html(data["data"]["userfullname"]);
|
|
$("#changenamebutton").show();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
function showMainUserForm(){
|
|
$("#changeMainUserData").modal("toggle");
|
|
}
|
|
|
|
$(document).ready(function(){
|
|
|
|
$(".toast").toast({
|
|
autohide: true,
|
|
delay : 3000
|
|
});
|
|
|
|
$('#profil-user').tab('show');
|
|
});
|
|
|
|
function updateUser(userid, groupid, newvalue){
|
|
if(newvalue){
|
|
addUserToGroup(userid, groupid);
|
|
}
|
|
else{
|
|
removeUserFromGroup(userid, groupid);
|
|
}
|
|
}
|
|
|
|
function removeUserFromGroup(userid, groupid){
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "/dasettings/ajax",
|
|
data:{
|
|
action : "remove_user_from_group",
|
|
groupid : groupid,
|
|
userid: userid
|
|
},
|
|
success: function( data )
|
|
{
|
|
if(data['success']){
|
|
$('#notchange_done').toast('show');
|
|
$("#toast_savecontent").html("Mitarbeiter erfolgreich aus der Gruppe entfernt!");
|
|
}
|
|
else{
|
|
$('#notchange_err').toast('show');
|
|
$("#toast_errcontent").html("Mitarbeiter konnte nicht entfernt werden!");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
//Call Function in view to send e-mail with pass-reset-data
|
|
function sendPassMail(id){
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "/dashboard/sendpassmail",
|
|
data:{
|
|
userid : id
|
|
},
|
|
success: function( data )
|
|
{
|
|
$("#mailsend").fadeIn().delay(4000).fadeOut();
|
|
}
|
|
});
|
|
}
|
|
|
|
function addUserToGroup(userid, groupid){
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "/dasettings/ajax",
|
|
data:{
|
|
action : "add_user_to_group",
|
|
groupid : groupid,
|
|
userid: userid,
|
|
},
|
|
success: function( data )
|
|
{
|
|
if(data['success']){
|
|
$('#notchange_done').toast('show');
|
|
$("#toast_savecontent").html("Mitarbeiter erfolgreich der Gruppe hinzugefügt!");
|
|
}
|
|
else{
|
|
$('#notchange_err').toast('show');
|
|
$("#toast_errcontent").html("Mitarbeiter konnte nicht hinzugefügt werden!");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/* CROPPER */
|
|
$("#id_x").val(0);
|
|
$("#id_y").val(0);
|
|
$("#id_width").val(300);
|
|
$("#id_height").val(300);
|
|
$("#id_rotation").val(0);
|
|
|
|
function clearImgField(){
|
|
$("#id_image").val("");
|
|
}
|
|
|
|
|
|
/* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
|
|
$("#id_image").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: 3,
|
|
aspectRatio: 1/1,
|
|
strict: false,
|
|
cropBoxMovable: true,
|
|
cropBoxResizable: true,
|
|
minCropBoxWidth: 300,
|
|
minCropBoxHeight: 300,
|
|
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_image").attr("src", $image);
|
|
$("#modalCrop").modal('toggle');
|
|
});
|
|
|
|
</script>
|
|
{% endblock content %} |