262 lines
9.1 KiB
HTML
262 lines
9.1 KiB
HTML
{% extends "users/base.html" %}
|
|
{% load crispy_forms_tags %}
|
|
{% load static %}
|
|
{% block content %}
|
|
<script src="{% static 'users/js/cropper.min.js' %}"></script>
|
|
<script src="{% static 'users/js/jquery-cropper.js' %}"></script>
|
|
<div class="content-section">
|
|
<div class="media">
|
|
<img class="img-profile " id="profpic" width="17%" src="{{ prof_user.profile.get_photo_url }}">
|
|
<div class="media-body col-5">
|
|
<h2 class="account-heading">Profil von {{ prof_user.first_name }} {{ prof_user.last_name }}</h2>
|
|
<hr>
|
|
<div class="row mt-2">
|
|
<div class="col-md-6">
|
|
<h6><b>Name</b></h6>
|
|
<p>
|
|
{{ prof_user.first_name}} {{ prof_user.last_name }}
|
|
</p>
|
|
<h6><b>E-Mail</b></h6>
|
|
<p>
|
|
{{ prof_user.email }}
|
|
</p>
|
|
<h6><b>Agenturfunktion</b></h6>
|
|
<p>
|
|
{{ prof_user.profile.get_func_display }}
|
|
</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6><b>Tätigkeit</b></h6>
|
|
<p>
|
|
{{ prof_user.profile.compfunc }}
|
|
</p>
|
|
<h6><b>Festnetz</b></h6>
|
|
<p>
|
|
{{ prof_user.profile.phoneland }}
|
|
</p>
|
|
<h6><b>Mobil</b></h6>
|
|
<p>
|
|
{{ prof_user.profile.phonemobile }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Für das Speichern der Bilder enctype -->
|
|
<div class="col-7 mt-5">
|
|
<form method="POST" id="newprofiledata" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<fieldset class="form-group">
|
|
<legend class="border-bottom mb-4">
|
|
Profil bearbeiten
|
|
</legend>
|
|
<!-- FORMS LADEN -->
|
|
{{ profileform_form|crispy }}
|
|
<button type="button" id="" onclick="javascript:sendPassMail({{prof_user.pk}})" class="btn btn-success">E-Mail mit Link zur Passworterstellung senden</button> <span class="alert alert-success" id="mailsend" role="alert" style="display: none;"> E-Mail gesendet!</span>
|
|
</fieldset>
|
|
Übergeordneter Mitarbeiter: <span id="ps_act">{{prof_user.profile.parent.first_name}} {{prof_user.profile.parent.last_name}}</span>
|
|
<div class="input-group mb-3">
|
|
<input class="form-control" name="puser" id="puser" list="parentuser" type="text" onkeyup="javascript:checkValueAddParent()">
|
|
<div class="input-group-append">
|
|
<button type="button" id="addusertouserp" onclick="javascript:addUserParentUser()" class="btn btn-success" disabled>Festlegen</button>
|
|
<button type="button" onclick="javascript:clearSearchfield()" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<datalist id="parentuser" nmae="parentuser">
|
|
{% for us in possible_users %}
|
|
<option id="{{us.pk}}" value="{{us.first_name}} {{us.last_name}}"></option>
|
|
{% endfor %}
|
|
</datalist>
|
|
|
|
</div>
|
|
<hr>
|
|
<div class="form-group">
|
|
<button type="submit" class="btn btn-success">Speichern</button>
|
|
<a href="{% url 'users-management' %}" class="btn">Abbrechen</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- MODAL TO CROP THE IMAGE -->
|
|
<!-- 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">
|
|
<span class="glyphicon glyphicon-zoom-in"></span>
|
|
</button>
|
|
<button type="button" class="btn btn-default js-zoom-out">
|
|
<span class="glyphicon glyphicon-zoom-out"></span>
|
|
</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>
|
|
{% block javascript %}
|
|
<script>
|
|
|
|
$("#id_x").val(0);
|
|
$("#id_y").val(0);
|
|
$("#id_width").val($("#profpic")[0]['naturalWidth']);
|
|
$("#id_height").val($("#profpic")[0]['naturalHeight']);
|
|
|
|
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: 200,
|
|
minCropBoxHeight: 200,
|
|
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);
|
|
});
|
|
|
|
/* 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_image").attr("src", $image);
|
|
$("#modalCrop").modal('toggle');
|
|
});
|
|
|
|
|
|
</script>
|
|
{% endblock %}
|
|
|
|
<script type="text/javascript">
|
|
var ua = window.navigator.userAgent;
|
|
var isIE = /MSIE|Trident/.test(ua);
|
|
if ( isIE ) {
|
|
//IE specific code goes here
|
|
setInterval(function()
|
|
{
|
|
checkValueAddParent();
|
|
},250);
|
|
}
|
|
|
|
|
|
//Call Function in view to send e-mail with pass-reset-data
|
|
function sendPassMail(id){
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "/dashboard/sendpassmail",
|
|
data:{
|
|
userid : {{prof_user.pk}}
|
|
},
|
|
success: function( data )
|
|
{
|
|
if(data["message"] == 0){
|
|
$("#mailsend").fadeIn().delay(4000).fadeOut();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
tempid = null;
|
|
function clearSearchfield(){
|
|
$("#puser").val("");
|
|
$("#addusertouserp").prop('disabled', true);
|
|
}
|
|
|
|
function addUserParentUser(){
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "/dashboard/setuserparent",
|
|
data:{
|
|
userid: tempid,
|
|
action : 'adduserp',
|
|
objectid : {{prof_user.pk}}
|
|
},
|
|
success: function( data )
|
|
{
|
|
console.log(data);
|
|
clearSearchfield();
|
|
//Add User-Button
|
|
$("#ps_act").html(data['username_clean']);
|
|
$("#parentuser").empty();
|
|
for (var i in data['remaining_users']) {
|
|
id = data['remaining_users'][i]['id'];
|
|
name = data['remaining_users'][i]['first_name'] + " " + data['remaining_users'][i]['last_name'];
|
|
$("#parentuser").append('<option id="'+id+'" value="'+name+'"></option>');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function checkValueAddParent()
|
|
{
|
|
|
|
var g = $('#puser').val();
|
|
var id = $('#parentuser').find('option[value="' + g + '"]').attr('id');
|
|
if(id != undefined && id.length > 0){
|
|
tempid = id;
|
|
$("#addusertouserp").prop('disabled', false);
|
|
}
|
|
else{
|
|
tempid = null;
|
|
$("#addusertouserp").prop('disabled', true);
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock content %} |