organigramm neu

orga/templates/orga/orga_main.html

@@ -1,6 +1,10 @@
 {% extends "users/base.html" %}
 {% load static %}
 {% block content %}
+<style type="text/css">
+
+</style>
+
 <link href="{% static 'users/css/custom.css' %}" rel="stylesheet">
 <div class="content-section">
   <h3>{{request.user.profile.agency.name}}</h3>
@@ -12,29 +16,64 @@
       </div>
     {% endif %}
   <div class="d-flex justify-content-center">    
-    <div id="diagram" class="diagram_class"></div>     
+    <div id="diagram" class="">
+      
+    </div>     
+
   </div>  
 </div>
 
+
+
 <style type="text/css">
+
   #diagram {
-    
+    overflow-x: scroll;
+  }
+
+  .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="https://unpkg.com/treeflex/dist/css/treeflex.css" rel="stylesheet">
 <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>{% if u.profile.func != None %} {{u.profile.func}} {% endif %}</b></br >{{u.profile.compfunc}}', 'parent': "{{request.user.profile.agency.pk}}", 'color': '#1859B7', "imageUrl": "{{u.profile.get_photo_url}}", 'userid' : '{{u.pk}}', 'children' : [] },
+        { '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>{% if u.profile.func != None %} {{u.profile.func}} {% endif %}</b></br >{{u.profile.compfunc}}', 'parent': '{{u.profile.parent.pk}}', 'color': '#1859B7', "imageUrl": "{{u.profile.get_photo_url }}",  'userid' : '{{u.pk}}', 'children' : []},
+      { '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 %}
 ];
@@ -58,9 +97,6 @@ for(i = 0; i < data.length; i++){
 }
 
 
-
-
-
 //Creates nested array from data
 function unflatten(arr) {
   var tree = [],
@@ -91,16 +127,16 @@ function unflatten(arr) {
   return tree;
 }
 
-var html = ['<ul class="tree"  >'];
+var html = ['<div class="tf-tree example"><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><a href="#"><h4>' + val.name + "</h4></a>");
+          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><a href="#/" onclick="goToUser('+ val.userid +')"><img src="'+val.imageUrl+'" width="125px"><h5>' + val.name + "</h5></ br><small>"+val.role+"</small></a>");
+          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)            
@@ -111,6 +147,8 @@ function createList(arr) {
 }
 createList(unflatten(data));
 
+
+
 //Remove double ul/ul-Elements at the End
 for(i = 0; i < html.length; i++){
   if(html[i+1] != undefined){

orga/templates/orga/orga_main_SAVE.html

@@ -0,0 +1,133 @@
+{% 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" class="diagram_class"></div>     
+  </div>  
+</div>
+
+
+
+<style type="text/css">
+  #diagram {
+    }
+</style>
+
+<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>{% if u.profile.func != None %} {{u.profile.func}} {% endif %}</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>{% if u.profile.func != None %} {{u.profile.func}} {% endif %}</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 %}

users/templates/users/base.html

@@ -538,4 +538,5 @@ $(window).click(function() {
 
 
 </script>
+