digitaleagenturnc/orga/templates/orga/orga_main.html

{% extends "users/base.html" %}
{% block content %}
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">   
<div class="content-section">
  <h3>{{request.user.profile.agency.name}}</h3>
  <hr>
  <h4>Organigramm</h4>
  <div class="text-center">
    <div id="diagram"></div> 
  </div>
  <div id="spinner" class="text-center" style="margin-top: 15%; width: 100%; height: 100%; display: none;">
    <div class="spinner-border text-danger" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>  
</div>
<script type="text/javascript">

var data = [
    { '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}}' },
      {% 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 }}",  'userid' : '{{u.pk}}'},
        {% endif %}
    {% endfor %}
];

var items = new ej.data.DataManager(data);

var diagram = new ej.diagrams.Diagram({
  width: "1350px", height: "800px",
  /*tool: ej.diagrams.DiagramTools.ZoomPan,*/
  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
  },
  layout: {
    // set the layout type
    type: 'OrganizationalChart',
  },
  getConnectorDefaults: connectorDefaults,
  setNodeTemplate: setNodeTemplate,
  // hide the gridlines in the diagram
  snapSettings: { constraints: ej.diagrams.SnapConstraints.None }
});
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();
            $("#spinner").show();
            window.location.href = "/orga/single/"+selected_id;     
        }
        else{
            $("#diagram").hide();
            $("#spinner").show();
            window.location.href = "/orga/";
        }
        
    }
   
}

//Define the common settings for connectors.
function connectorDefaults(connector) {
  connector.targetDecorator.shape = 'None';
  connector.type = 'Orthogonal';
  connector.style.strokeColor = 'gray';

  console.log(connector);

  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();
    
    if(obj['properties']['data']['id'] == 'parent'){
        image.id = obj.id + '_pic';
        image.width = 0; image.height = 0; image.style.strokeColor = 'none';
        image.source = obj.data.imageUrl;
    }
    else{
        image.id = obj.id + '_pic';
        image.width = 100; image.height = 100; 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';
  
    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
    
    if(obj['properties']['data']['id'] == 'parent'){
         var desigText = new ej.diagrams.TextElement();
        desigText.id = obj.id + '_desig';
        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
   
  
    // append the text elements
    innerStack.children = [text, desigText];
    
    // append the image and inner stack elements
    content.children = [image, innerStack];

    return content;
}
</script>
{% endblock content %}