224 lines
6.9 KiB
HTML
224 lines
6.9 KiB
HTML
{% extends "users/base.html" %}
|
|
{% load static %}
|
|
{% block content %}
|
|
<link href="{% static 'users/css/custom.css' %}" rel="stylesheet">
|
|
|
|
<div class="content-section">
|
|
<h3>{{request.user.profile.agency.name}}</h3>
|
|
<hr>
|
|
<h4>Organigramm
|
|
<small><i onclick="javascript:$('#youtubevideoinformation').modal('toggle');" class="far fa-play-circle"></i></small>
|
|
</h4>
|
|
{% if invisible_users > 0%}
|
|
<div class="alert alert-danger" role="alert">
|
|
Achtung! {{invisible_users}} Mitarbeiter sind anderen Mitarbeitern untergeordnet, die nicht im Organigramm sichtbar sein sollen. Bitte prüfen sie die Zuordnung der übergeordneten Mitarbeiter!
|
|
</div>
|
|
{% endif %}
|
|
<div class="d-flex justify-content-center">
|
|
<div id="diagram" class="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style type="text/css">
|
|
|
|
#diagram {
|
|
overflow-x: scroll;
|
|
/*min-width: 100%;
|
|
min-height: 100%;*/
|
|
}
|
|
|
|
.example {
|
|
/*padding-left: 12%;*/
|
|
}
|
|
|
|
.orga-hover {
|
|
transition: 0.3s;
|
|
border-width: 1px !important;
|
|
border-color: #b9bbb6 !important;
|
|
border-radius: 5px !important;
|
|
}
|
|
.orga-hover:hover {
|
|
background-color: rgba(185,187,182, 0.5);
|
|
}
|
|
.orga-textcenter {
|
|
text-align: center;
|
|
}
|
|
|
|
.tf-nc:before,.tf-nc:after {
|
|
border-color: #b9bbb6 !important;
|
|
border-radius: 5px !important;
|
|
}
|
|
|
|
li li:before {
|
|
border-color: #b9bbb6 !important;
|
|
border-radius: 5px !important;
|
|
|
|
}
|
|
.orga-h {
|
|
color: #000000;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
|
|
<link href="{% static 'users/css/tree.css' %}" rel="stylesheet">
|
|
<script type="text/javascript">
|
|
var data = [
|
|
{% for u in agencyuser %}
|
|
{% if u.profile.parent == u %}
|
|
{ 'id': '{{u.pk}}' , 'name': "{{u.first_name}} {{u.last_name}}",'role': '<b class="orga-h">{% if u.profile.func != None %} {{u.profile.func}} {% endif %}</b></br ><span class="orga-h">{{u.profile.compfunc}}</span>', 'parent': "{{request.user.profile.agency.pk}}", 'color': '#1859B7', "imageUrl": "{{u.profile.get_photo_url}}", 'userid' : '{{u.pk}}', 'children' : [] },
|
|
{% else %}
|
|
{ 'id': '{{u.pk}}', 'name': "{{u.first_name}} {{u.last_name}}", 'role': '<b class="orga-h">{% if u.profile.func != None %} {{u.profile.func}} {% endif %}</b></br ><span class="orga-h">{{u.profile.compfunc}}</span>', 'parent': '{{u.profile.parent.pk}}', 'color': '#1859B7', "imageUrl": "{{u.profile.get_photo_url }}", 'userid' : '{{u.pk}}', 'children' : []},
|
|
{% endif %}
|
|
{% endfor %}
|
|
];
|
|
|
|
|
|
//Check for Agency and User-IDs - dont touch the userid for URLs!
|
|
for(i = 0; i < data.length; i++){
|
|
for(k = 0; k < data.length; k++){
|
|
if(k != i){
|
|
if(data[i]['id'] == data[k]['id']){
|
|
data[k]['id'] = data[k]['id']*10;
|
|
//If double found, change parents of that id!
|
|
for(m = 0; m < data.length; m++){
|
|
if(data[m]['parent'] == data[k]['id']*10){
|
|
data[m]['parent'] = data[m]['parent']*10;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//Creates nested array from data
|
|
function unflatten(arr) {
|
|
var tree = [],
|
|
mappedArr = {},
|
|
arrElem,
|
|
mappedElem;
|
|
|
|
// First map the nodes of the array to an object -> create a hash table.
|
|
for(var i = 0, len = arr.length; i < len; i++) {
|
|
arrElem = arr[i];
|
|
mappedArr[arrElem.id] = arrElem;
|
|
mappedArr[arrElem.id]['children'] = [];
|
|
}
|
|
|
|
for (var id in mappedArr) {
|
|
if (mappedArr.hasOwnProperty(id)) {
|
|
mappedElem = mappedArr[id];
|
|
// If the element is not at the root level, add it to its parent array of children.
|
|
if (mappedElem.parent) {
|
|
mappedArr[mappedElem['parent']]['children'].push(mappedElem);
|
|
}
|
|
// If the element is at the root level, add it to first level elements array.
|
|
else {
|
|
tree.push(mappedElem);
|
|
}
|
|
}
|
|
}
|
|
return tree;
|
|
}
|
|
|
|
var html = ['<div class="tf-tree example tf-gap-sm "><ul><li class="orga-textcenter"><span class="tf-nc orga-hover"><h2>{{request.user.profile.agency.name}}</h2></span>'];
|
|
//Create UL-LI-List for tree
|
|
function createList(arr) {
|
|
html.push('<ul>');
|
|
$.each(arr, function(i, val) {
|
|
if(val.parent == ""){
|
|
html.push('<li class="orga-textcenter"><span class="tf-nc orga-hover" onclick="goToUser('+ val.userid +')"><img src="'+val.imageUrl+'" width="125px"><h5 class="orga-h">' + val.name + "</h5></ br><small>"+val.role+"</small></span>");
|
|
}
|
|
else {
|
|
html.push('<li class="orga-textcenter"><span class="tf-nc orga-hover" onclick="goToUser('+ val.userid +')"><img src="'+val.imageUrl+'" width="125px"><h5 class="orga-h">' + val.name + "</h5></ br><small>"+val.role+"</small></span>");
|
|
}
|
|
if (val.children) {
|
|
createList(val.children)
|
|
}
|
|
html.push('</li>');
|
|
});
|
|
html.push('</ul>');
|
|
}
|
|
createList(unflatten(data));
|
|
|
|
|
|
|
|
//Remove double ul/ul-Elements at the End
|
|
for(i = 0; i < html.length; i++){
|
|
if(html[i+1] != undefined){
|
|
if(html[i] == "<ul>" && html[i+1] == "</ul>"){
|
|
html.splice(i,2);
|
|
}
|
|
}
|
|
}
|
|
function goToUser(id){
|
|
window.location.href = "/orga/single/"+id;
|
|
}
|
|
|
|
$('#diagram').append(html.join(''));
|
|
|
|
|
|
</script>
|
|
|
|
<!-- YOUTUBE PART START -->
|
|
<!--
|
|
//COPY THAT
|
|
<small><i onclick="javascript:$('#youtubevideoinformation').modal('toggle');" class="far fa-play-circle"></i></small>
|
|
-->
|
|
<script type="text/javascript">
|
|
|
|
//CHANGE
|
|
var VIDEOURL = "Ca3Ez895CLU"
|
|
var MODALNAME = "#youtubevideoinformation"
|
|
var VIDEOTITLE = "Informationsvideo News"
|
|
|
|
$(document).ready(function(){
|
|
|
|
$("#modaltitle_video").html(VIDEOTITLE);
|
|
|
|
//VIDEOCONTROLS
|
|
$( MODALNAME ).on('shown.bs.modal', function(e){
|
|
player.playVideo();
|
|
});
|
|
|
|
$( MODALNAME ).on('hidden.bs.modal', function(e){
|
|
player.pauseVideo();
|
|
});
|
|
});
|
|
//VIDEOPLAYER
|
|
var player;
|
|
|
|
function onYouTubeIframeAPIReady() {
|
|
player = new YT.Player('video-placeholder', {
|
|
width: 760,
|
|
height: 500,
|
|
videoId: VIDEOURL,
|
|
});
|
|
}
|
|
|
|
</script>
|
|
<!-- <script src="https://www.youtube.com/iframe_api"></script> -->
|
|
<!-- VIDEOMODAL -->
|
|
<div class="modal fade" id="youtubevideoinformation" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="modaltitle_video"></h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body" style="min-height: 500px;">
|
|
<div id="video-placeholder"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Schließen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- YOUTUBE PART ENDE -->
|
|
|
|
{% endblock content %} |