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 id="diagram"></div>   
</div>
<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 }}",  },    
    {% 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}}" },
      {% 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 %}
    {% 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",
  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');

//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();
    
    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.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';
  
    // 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.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;
}

</script>
{% endblock content %}