From 030dd7bac1de828c367114624993e0ddf81e407e Mon Sep 17 00:00:00 2001
From: "holger.trampe" <htrampe@gmail.com>
Date: Fri, 27 Mar 2020 00:04:19 +0100
Subject: [PATCH] organigramm neu

---
 media/default.jpg                       | Bin 5787 -> 1871 bytes
 orga/templates/orga/orga_main.html      |  62 ++++++++---
 orga/templates/orga/orga_main_SAVE.html | 133 ++++++++++++++++++++++++
 users/templates/users/base.html         |   1 +
 4 files changed, 184 insertions(+), 12 deletions(-)
 create mode 100644 orga/templates/orga/orga_main_SAVE.html

diff --git a/media/default.jpg b/media/default.jpg
index 86489159e6f591b8af41b3fc11ecc9e7b2a08c6f..d47174033f6204d606cd8403cfcffac4d5a0e111 100644
GIT binary patch
literal 1871
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!I^=Bjg6g+m4ls~os*M;i${c)hnt&6Qb?Fz
zL{>^(PF6}rMnOeST|r4lSw=>~TvNxu(8R<<Uft5x!pKI?*u?1n0S0akMjaqz6lC~+
zgh3u?I4dI<FhBt#6Eh1d8#@Ol7dKGBRsjYkMrLLv7G_pf78aoDTA(}wiy*6zqM;+3
za9|?4QlW@Z<HUs=%1#>(iUwW$pkka<)WpdpCN3c<rK+Z`p{ZqJYG!U>Y31zV>gMj@
z=@lFj8WtWA8I_!pnwFlCnN?g;T2@|BS=HRq+ScCD*)?hMl&RCE&zL!D(c&dbmn~nh
za@D5ITefc7zGLUELx+zXJ$C%W$y1juU%7hi`i+~n9zJ^f<mt2LFJ8X-`04YPuiw7^
z`1$MqEd~xyu-P+w|E000YxttYm5crNJP6UP&6)q{f>i6)>csn|(%EH?7pN_^`Vu?k
zg6WIhD@B!F7s%}i{?D*YcW<^EmcY=|ntN?2>js5w&%TKE7OuYIQ(yjRZE)q1;^}3k
za>jQqJqYYFySOEAOJHN{T9H6kG$hJ%UGVn8%m~Ja@L5MD8+zD<d|h+-q-vjkQ3fRB
z*ImQ3bMyPH8f!y(-c8;hdj5Q|?&bGWcf8pu3N<-A8{H0(sgqZ{YLYq3czWLQOB-fP
zPdZa{e5J`0m|M!Wz*sQ1MOv*}ln}3`{28R)QoYbJ8OafEp$>y5j8)gCYiBcC+B|NI
zS$yKsZja}xy{a&iTt#nPL~~BeyRC)K&M5~U`nu*6B57fGbMeeSJ7(@>Ei$&8Rz6|g
zvY7}|FpLb<^^4a!d49d<>HggaWg-{>5wYt_i`&W@*A#vu`xxE(qUT=s?|K-#0oiqn
zc1Izc3ikNZukQEDYFAB#dsHM4J$gN=q@KJ#mmhPr3P~@zK@<1A{1vWPQe3Y1eZ>lR
zkS^*%59OTsuWrALDLr_%<oUhXcsv=b`kx`>zSrYr{~7w1|GI<}vlzj4UD8eN>hU{z
zr&o&KLkeDua0~WkW!ZQ@^wfP3^L3|+_^a09u|7<1Ystxu36E{Fg_j})jVpQ}7tgx>
zrzR{HpOS>vot>h4vz3sOKYHkG+<HVcbT`*wq=3^vPf2U;CUW1JQ?{<41fQx^*H`Yl
zdOS{h@;~LT_|&a<8gu0Fm2gE3ZR3@%c+HR;hi>npov~iVvY!hZszSZ+B!I4C*L6?3
zZCdf9bd420WqlFXB5s+<2*zx^I%nHv11+yIrPUJ-7KJoa&q8R!a6?zJ+d6|&{MR;Z
koiW9MYXw79n7~U!^r6R!NMIx|UaGEJ*}Xu7!T$d@0rd&@6#xJL

literal 5787
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
PFzkOp<VoU8n|bzcrm9Th

diff --git a/orga/templates/orga/orga_main.html b/orga/templates/orga/orga_main.html
index eb4f6ba..42ad266 100644
--- a/orga/templates/orga/orga_main.html
+++ b/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){
diff --git a/orga/templates/orga/orga_main_SAVE.html b/orga/templates/orga/orga_main_SAVE.html
new file mode 100644
index 0000000..f7f5d53
--- /dev/null
+++ b/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 %}
\ No newline at end of file
diff --git a/users/templates/users/base.html b/users/templates/users/base.html
index 50de61f..9f3fcbc 100644
--- a/users/templates/users/base.html
+++ b/users/templates/users/base.html
@@ -538,4 +538,5 @@ $(window).click(function() {
 
 
 </script>
+
            
\ No newline at end of file