117 lines
4.1 KiB
HTML
117 lines
4.1 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</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"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var data = [
|
|
{ 'id' : '{{request.user.profile.agency.pk}}', 'parent' : "", 'role': "", 'name': '{{request.user.profile.agency.name}}', 'color': '#71AF17', "imageUrl": "", 'children' : []},
|
|
{% for u in agencyuser %}
|
|
{% if u.profile.parent == u %}
|
|
{ 'id': '{{u.pk}}' , 'name': "{{u.first_name}} {{u.last_name}}",'role': '<b>{{u.profile.get_func_display}}</b></br >{{u.profile.compfunc}}', '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>{{u.profile.get_func_display}}</b></br >{{u.profile.compfunc}}', '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 = ['<ul class="tree">'];
|
|
|
|
//Create UL-LI-List for tree
|
|
function createList(arr) {
|
|
html.push('<ul>');
|
|
$.each(arr, function(i, val) {
|
|
if(val.parent == ""){
|
|
html.push('<li><a href="#"><h4>' + val.name + "</h4></a>");
|
|
}
|
|
else {
|
|
html.push('<li><a href="#/" onclick="goToUser('+ val.userid +')"><img src="'+val.imageUrl+'" width="125px"><h5>' + val.name + "</h5></ br><small>"+val.role+"</small></a>");
|
|
}
|
|
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>
|
|
{% endblock content %} |