{% 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': 'Agentur {{request.user.profile.agency.name}}', 'color': '#71AF17' },    
    {% for u in agencyuser %}
      {% if u.profile.parent == u %}
        { 'id': '{{u.pk}}', 'role': '{{u.first_name}} {{u.last_name}}\n{{u.profile.get_func_display}}', 'manager': 'parent', 'color': '#1859B7' },
      {% else %}
      { 'id': '{{u.pk}}', 'role': '{{u.first_name}} {{u.last_name}}\n{{u.profile.get_func_display}}', 'manager': '{{u.profile.parent.pk}}', 'color': '#1859B7', "imageUrl": "{{u.profile.image}}" },
      {% endif %}
    {% endfor %}
];
console.log(data)
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.size = "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;
}
</script>
{% endblock content %}