From 1073e9d8a9169086febecdd4439db74e7e8f50f6 Mon Sep 17 00:00:00 2001
From: "holger.trampe" <htrampe@gmail.com>
Date: Thu, 12 Dec 2019 15:31:59 +0100
Subject: [PATCH] orga teil 2

---
 orga/templates/orga/orga_main.html | 121 +++++++----------------------
 1 file changed, 26 insertions(+), 95 deletions(-)

diff --git a/orga/templates/orga/orga_main.html b/orga/templates/orga/orga_main.html
index dc03633..66dcedb 100644
--- a/orga/templates/orga/orga_main.html
+++ b/orga/templates/orga/orga_main.html
@@ -11,108 +11,21 @@
 <script type="text/javascript">
 
 var data = [
-    { 'id': 'parent', 'role': "", 'name': 'Agentur {{request.user.profile.agency.name}}', 'color': '#71AF17', "imageUrl": "{{ request.user.profile.agency.agencypic.url }}",  },    
+    { 'id': 'parent', 'role': "", 'name': 'Agentur {{request.user.profile.agency.name}}', 'color': '#71AF17', "imageUrl": "{{ request.user.profile.agency.agencypic.url }}"},    
     {% for u in agencyuser %}
       {% if u.profile.parent == u %}
-        { 'id': '{{u.pk}}' , 'name': "{{u.first_name}} {{u.last_name}}",'role': '{{u.profile.get_func_display}}\n{{u.profile.compfunc}}', 'manager': 'parent', 'color': '#1859B7', "imageUrl": "{{u.profile.image.url}}" },
+        { 'id': '{{u.pk}}' , 'name': "{{u.first_name}} {{u.last_name}}",'role': '{{u.profile.get_func_display}}\n{{u.profile.compfunc}}', 'manager': 'parent', 'color': '#1859B7', "imageUrl": "{{u.profile.image.url}}", 'userid' : '{{u.pk}}' },
       {% else %}
-      { 'id': '{{u.pk}}', 'name': "{{u.first_name}} {{u.last_name}}", 'role': '{{u.profile.get_func_display}}\n{{u.profile.compfunc}}', 'manager': '{{u.profile.parent.pk}}', 'color': '#1859B7', "imageUrl": "{{u.profile.image.url }}" },
-      {% endif %}
+      { 'id': '{{u.pk}}', 'name': "{{u.first_name}} {{u.last_name}}", 'role': '{{u.profile.get_func_display}}\n{{u.profile.compfunc}}', 'manager': '{{u.profile.parent.pk}}', 'color': '#1859B7', "imageUrl": "{{u.profile.image.url }}",  'userid' : '{{u.pk}}'},
+        {% endif %}
     {% endfor %}
-];/*
-var items = new ej.data.DataManager(data);
-var diagram = new ej.diagrams.Diagram({
-    width: "1400px",
-    height: "800px",
-    dataSourceSettings: {
-        // set the unique field from data source
-        id: 'id', 
-        // set the field which is used to identify the reporting person
-        parentId: 'manager', 
-        // define the employee data
-        dataManager: items,
-        doBinding: function (node, data) {
-            // You will get the employee information in data argument and bind that value directly to node's built-in properties.
-            node.annotations = [{ content: data.role }];
-            node.style = { fill: data.color };
-        }
-    },
-    layout: {
-        // set the layout type
-        type: 'OrganizationalChart' 
-    },
-    // set the common settings for node and connector
-    getNodeDefaults: nodeDefaults,
-    getConnectorDefaults: connectorDefaults,
-    // hide the gridlines in the diagram
-    snapSettings: { constraints: ej.diagrams.SnapConstraints.None }
-});
-diagram.appendTo('#diagram');
-
-function nodeDefaults(node) {
-    node.annotations[0].style.color = "white";
-    node.annotations[0].style.font = "2em";
-    node.width = 220; 
-    node.height = 120; 
-    return node;
-}
-
-
-//Define the common settings for connectors.
-function connectorDefaults(connector) {
-  connector.targetDecorator.shape = 'None';
-  connector.type = 'Orthogonal';
-  connector.style.strokeColor = 'gray';
-  return connector;
-}
-
-//Funtion to add the Template of the Node.
-
-function setNodeTemplate(obj, diagram) {
-    // create the stack panel
-    var content = new ej.diagrams.StackPanel();
-    content.id = obj.id + '_outerstack';
-    content.orientation = 'Horizontal';
-    content.style.strokeColor = 'gray';
-    content.padding = { left: 5, right: 10, top: 5, bottom: 5 };
-  
-    // create the image element to map the image data from the data source
-    var image = new ej.diagrams.ImageElement();
-    image.id = obj.id + '_pic';
-    image.width = 50; image.height = 50; image.style.strokeColor = 'none';
-    image.source = obj.data.imageUrl;
-  
-    // create the stack panel to append the text elements.
-    var innerStack = new ej.diagrams.StackPanel();
-    innerStack.style.strokeColor = 'none';
-    innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };
-    innerStack.id = obj.id + '_innerstack';
-  
-    // create the text element to map the name data from the data source
-    var text = new ej.diagrams.TextElement();
-    text.style.bold = true;
-    text.id = obj.id + '_name';
-    text.content = obj.data.name;
-  
-    // create the text element to map the role data from the data source
-    var desigText = new ej.diagrams.TextElement();
-    desigText.id = obj.id + '_desig';
-    desigText.content = obj.data.role;
-  
-    // append the text elements
-    innerStack.children = [text, desigText];
-    
-    // append the image and inner stack elements
-    content.children = [image, innerStack];
-    return content;
-}
-*/
-
+];
 
 var items = new ej.data.DataManager(data);
 
 var diagram = new ej.diagrams.Diagram({
   width: "1400px", height: "800px",
+  tool: ej.diagrams.DiagramTools.ZoomPan,
   dataSourceSettings: {
     // set the unique field from data source
     id: 'id',
@@ -154,7 +67,7 @@ function setNodeTemplate(obj, diagram) {
     
     if(obj['properties']['data']['id'] == 'parent'){
         image.id = obj.id + '_pic';
-        image.width = 325; image.height = image.width/1.5; image.style.strokeColor = 'none';
+        image.width = 0; image.height = 0; image.style.strokeColor = 'none';
         image.source = obj.data.imageUrl;
     }
     else{
@@ -172,13 +85,14 @@ function setNodeTemplate(obj, diagram) {
     // create the text element to map the name data from the data source
     var text = new ej.diagrams.TextElement();
     text.style.bold = true;
-    text.fontSize = 20;
+    text.style.fontSize = 18;
     text.id = obj.id + '_name';
     text.content = obj.data.name;
   
     // create the text element to map the role data from the data source
     var desigText = new ej.diagrams.TextElement();
     desigText.id = obj.id + '_desig';
+    desigText.style.fontSize = 16;
     desigText.content = obj.data.role;
   
     // append the text elements
@@ -190,5 +104,22 @@ function setNodeTemplate(obj, diagram) {
     return content;
 }
 
+$(document).ready(function(){
+
+
+    var orgaele = $( "#diagram" ).find("rect");
+    console.log(orgaele);
+
+    orgaele.each(function( ele ) {
+      console.log(  );
+      document.getElementById(orgaele[ele]['id']).addEventListener("click", clickme(orgaele[ele]['id']));
+
+    });
+
+});
+
+function clickme(id){
+    console.log(id);
+}
 </script>
 {% endblock content %}
\ No newline at end of file