diagram.tpl 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. {% extends 'layout/layout_1_col.tpl'|get_template %}
  2. {% block content %}
  3. <script>
  4. mxBasePath = '{{ _p.web_lib }}mxgraph/src/';
  5. </script>
  6. <style>
  7. #graphContainer svg {
  8. min-width: 100% !important;
  9. }
  10. </style>
  11. <script type="text/javascript" src="{{ _p.web_lib }}mxgraph/src/js/mxClient.js"></script>
  12. <script>
  13. // Overridden to define per-shape connection points
  14. mxGraph.prototype.getAllConnectionConstraints = function(terminal, source) {
  15. if (terminal != null && terminal.shape != null) {
  16. if (terminal.shape.stencil != null) {
  17. if (terminal.shape.stencil != null) {
  18. return terminal.shape.stencil.constraints;
  19. }
  20. } else if (terminal.shape.constraints != null) {
  21. return terminal.shape.constraints;
  22. }
  23. }
  24. return null;
  25. };
  26. // Edges have no connection points
  27. mxPolyline.prototype.constraints = null;
  28. // Program starts here. Creates a sample graph in the
  29. // DOM node with the specified ID. This function is invoked
  30. // from the onLoad event handler of the document (see below).
  31. function main(container)
  32. {
  33. // Checks if the browser is supported
  34. if (!mxClient.isBrowserSupported()) {
  35. // Displays an error message if the browser is not supported.
  36. mxUtils.error('Browser is not supported!', 200, false);
  37. } else {
  38. // Disables the built-in context menu
  39. mxEvent.disableContextMenu(container);
  40. // Creates the graph inside the given container
  41. var graph = new mxGraph(container);
  42. graph.setConnectable(true);
  43. graph.setHtmlLabels(true);
  44. // Blocks the selection of elements
  45. graph.setEnabled(false);
  46. // Enables connect preview for the default edge style
  47. graph.connectionHandler.createEdgeState = function(me) {
  48. var edge = graph.createEdge(null, null, null, null, null);
  49. return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
  50. };
  51. // Specifies the default edge style
  52. graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';
  53. // Enables rubberband selection
  54. new mxRubberband(graph);
  55. // Gets the default parent for inserting new cells. This
  56. // is normally the first child of the root (ie. layer 0).
  57. var parent = graph.getDefaultParent();
  58. // Adds cells to the model in a single step
  59. graph.getModel().beginUpdate();
  60. try {
  61. //var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
  62. //var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
  63. //var e1 = graph.insertEdge(parent, null, '', v1, v2);
  64. {% for vertex in group_list %}
  65. {{ vertex }}
  66. {% endfor %}
  67. {% for vertex in subgroup_list %}
  68. {{ vertex }}
  69. {% endfor %}
  70. {% for vertex in vertex_list %}
  71. {{ vertex }}
  72. {% endfor %}
  73. {% for vertex in connections %}
  74. {{ vertex }}
  75. {% endfor %}
  76. } finally {
  77. // Updates the display
  78. graph.getModel().endUpdate();
  79. }
  80. }
  81. }
  82. $(function () {
  83. main(document.getElementById('graphContainer'));
  84. var svg1 = document.getElementsByTagName("svg")[0];
  85. var data = svg1.getBBox();
  86. var widthValue = data.width + 100;
  87. var heightValue = data.height + 50;
  88. var att = document.createAttributeNS(null, "viewBox");
  89. att.value = '0 0 ' + widthValue + ' '+heightValue;
  90. svg1.setAttributeNode(att);
  91. //$('[data-toggle="popover"]').popover({container: 'body'});
  92. //$('.popup').popover({trigger: 'hover'});
  93. $(".popup").qtip({
  94. content: {
  95. text: function(event, api) {
  96. var item = $(this);
  97. var itemId = $(this).attr("id");
  98. var desc = $(this).attr("data-description");
  99. var period = $(this).attr("data-period");
  100. var teacherText = $(this).attr("data-teacher-text");
  101. var teacher = $(this).attr("data-teacher");
  102. var score = $(this).attr("data-score");
  103. var value = $(this).attr("data-score-value");
  104. var info = $(this).attr("data-info");
  105. var textToShow = desc
  106. + '<br />'+ period + '<br />'
  107. + teacherText +': '+ teacher + '<br />'
  108. + score +': '+ value + '<br />'
  109. + '<br />'+ info + '<br />'
  110. ;
  111. return textToShow;
  112. }
  113. },
  114. events: {
  115. render: function(event, api) {
  116. var popup = $(api.elements.target);
  117. var bg = popup.attr("data-background-color");
  118. var color = popup.attr("data-color");
  119. var borderColor = popup.attr("data-border-color");
  120. console.log(bg);
  121. console.log(color);
  122. console.log(borderColor);
  123. // Grab the tooltip element from the API
  124. //var tooltip = api.elements.tooltip;
  125. $(this).css('background-color', bg);
  126. $(this).css('color', color);
  127. $(this).css('border-color', borderColor);
  128. }
  129. },
  130. position: {
  131. my: 'bottom left', // Position my top left...
  132. at: 'top right', // at the bottom right of...
  133. adjust: {
  134. x: -55,
  135. y: -55
  136. }
  137. }
  138. });
  139. });
  140. </script>
  141. {{ content }}
  142. {% endblock %}