DigitaleAgentur___ALT
/
digitaleagenturnc
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

orga teil 2

This commit is contained in:
holger.trampe 2019-12-12 15:31:59 +01:00
parent 5a830cf48e
commit 1073e9d8a9
1 changed files with 26 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
orga/templates/orga/orga_main.html
View File

@ -11,108 +11,21 @@
<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": "{{ 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}}" },
{ '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 }}" },
{% endif %}
{ '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: "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",
tool: ej.diagrams.DiagramTools.ZoomPan,
dataSourceSettings: {
// set the unique field from data source
id: 'id',
@ -154,7 +67,7 @@ function setNodeTemplate(obj, diagram) {
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.width = 0; image.height = 0; image.style.strokeColor = 'none';
image.source = obj.data.imageUrl;
}
else{
@ -172,13 +85,14 @@ function setNodeTemplate(obj, diagram) {
// 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.style.fontSize = 18;
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.style.fontSize = 16;
desigText.content = obj.data.role;
// append the text elements
@ -190,5 +104,22 @@ function setNodeTemplate(obj, diagram) {
return content;
}
$(document).ready(function(){
var orgaele = $( "#diagram" ).find("rect");
console.log(orgaele);
orgaele.each(function( ele ) {
console.log( );
document.getElementById(orgaele[ele]['id']).addEventListener("click", clickme(orgaele[ele]['id']));
});
});
function clickme(id){
console.log(id);
}
</script>
{% endblock content %}