Organigramm klickbar

orga/templates/orga/orga_main.html

@@ -11,7 +11,7 @@
 <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": ""},    
     {% 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}}", 'userid' : '{{u.pk}}' },
@@ -24,8 +24,8 @@ var data = [
 var items = new ej.data.DataManager(data);
 
 var diagram = new ej.diagrams.Diagram({
-  width: "1400px", height: "800px",
+  width: "1000px", height: "600px",
-  tool: ej.diagrams.DiagramTools.ZoomPan,
+  /*tool: ej.diagrams.DiagramTools.ZoomPan,*/
   dataSourceSettings: {
     // set the unique field from data source
     id: 'id',
@@ -45,6 +45,24 @@ var diagram = new ej.diagrams.Diagram({
 });
 diagram.appendTo('#diagram');
 
+diagram.selectionChange = goToUser
+
+function goToUser(){
+    if(diagram.selectedItems['nodes'][0] != undefined){
+        selected_id = diagram.selectedItems['nodes'][0]['properties']['data']['id'];
+        if(selected_id != 'parent'){
+            $("#diagram").hide();
+            window.location.href = "/orga/single/"+selected_id;     
+        }
+        else{
+            $("#diagram").hide();
+            window.location.href = "/orga/";        
+        }
+        
+    }
+   
+}
+
 //Define the common settings for connectors.
 function connectorDefaults(connector) {
   connector.targetDecorator.shape = 'None';
@@ -61,7 +79,7 @@ function setNodeTemplate(obj, diagram) {
     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();
     
@@ -82,18 +100,37 @@ function setNodeTemplate(obj, diagram) {
     innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };
     innerStack.id = obj.id + '_innerstack';
   
+    if(obj['properties']['data']['id'] == 'parent'){
+        var text = new ej.diagrams.TextElement();
+        text.style.bold = true;
+        text.style.fontSize = 24;
+        text.id = obj.id + '_name';
+        text.content = obj.data.name;
+    }
+    else{
+        var text = new ej.diagrams.TextElement();
+        text.style.bold = true;
+        text.style.fontSize = 18;
+        text.id = obj.id + '_name';
+        text.content = obj.data.name;
+    }
+
     // create the text element to map the name data from the data source
-    var text = new ej.diagrams.TextElement();
+    
-    text.style.bold = true;
+    if(obj['properties']['data']['id'] == 'parent'){
-    text.style.fontSize = 18;
+         var desigText = new ej.diagrams.TextElement();
-    text.id = obj.id + '_name';
+        desigText.id = obj.id + '_desig';
-    text.content = obj.data.name;
+        desigText.style.fontSize = 0;
-  
+        desigText.content = obj.data.role;
+    }
+    else{
+         var desigText = new ej.diagrams.TextElement();
+        desigText.id = obj.id + '_desig';
+        desigText.style.fontSize = 16;
+        desigText.content = obj.data.role;
+    }
     // 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
     innerStack.children = [text, desigText];
@@ -103,7 +140,7 @@ function setNodeTemplate(obj, diagram) {
 
     return content;
 }
-
+/*
 $(document).ready(function(){
 
 
@@ -121,5 +158,6 @@ $(document).ready(function(){
 function clickme(id){
     console.log(id);
 }
+*/
 </script>
 {% endblock content %}