110 lines
3.9 KiB
HTML
110 lines
3.9 KiB
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': '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 %} |