index.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <link rel="stylesheet" href="style.css" type="text/css" media="screen">
  5. <script src="js/jstools.js" type="text/javascript" charset="utf-8"></script>
  6. <script src="js/raphael.js" type="text/javascript" charset="utf-8"></script>
  7. <script src="js/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
  8. <script src="js/jquery/jquery.progressbar.js" type="text/javascript" charset="utf-8"></script>
  9. <script src="js/jquery/jquery.asyncqueue.js" type="text/javascript" charset="utf-8"></script>
  10. <script src="js/Color.js" type="text/javascript" charset="utf-8"></script>
  11. <script src="js/Polyline.js" type="text/javascript" charset="utf-8"></script>
  12. <script src="js/ActivityImpl.js" type="text/javascript" charset="utf-8"></script>
  13. <script src="js/ActivitiRest.js" type="text/javascript" charset="utf-8"></script>
  14. <script src="js/LineBreakMeasurer.js" type="text/javascript" charset="utf-8"></script>
  15. <script src="js/ProcessDiagramGenerator.js" type="text/javascript" charset="utf-8"></script>
  16. <script src="js/ProcessDiagramCanvas.js" type="text/javascript" charset="utf-8"></script>
  17. <style type="text/css" media="screen">
  18. </style>
  19. </head>
  20. <body>
  21. <div class="wrapper">
  22. <div id="pb1"></div>
  23. <div id="overlayBox" >
  24. <div id="diagramBreadCrumbs" class="diagramBreadCrumbs" onmousedown="return false" onselectstart="return false"></div>
  25. <div id="diagramHolder" class="diagramHolder"></div>
  26. <div class="diagram-info" id="diagramInfo"></div>
  27. </div>
  28. </div>
  29. <script language='javascript'>
  30. var DiagramGenerator = {};
  31. var pb1;
  32. $(document).ready(function(){
  33. var query_string = {};
  34. var query = window.location.search.substring(1);
  35. var vars = query.split("&");
  36. for (var i=0;i<vars.length;i++) {
  37. var pair = vars[i].split("=");
  38. query_string[pair[0]] = pair[1];
  39. }
  40. var processDefinitionId = query_string["processDefinitionId"];
  41. var processInstanceId = query_string["processInstanceId"];
  42. console.log("Initialize progress bar");
  43. pb1 = new $.ProgressBar({
  44. boundingBox: '#pb1',
  45. label: 'Progressbar!',
  46. on: {
  47. complete: function() {
  48. console.log("Progress Bar COMPLETE");
  49. this.set('label', 'complete!');
  50. if (processInstanceId) {
  51. ProcessDiagramGenerator.drawHighLights(processInstanceId);
  52. }
  53. },
  54. valueChange: function(e) {
  55. this.set('label', e.newVal + '%');
  56. }
  57. },
  58. value: 0
  59. });
  60. console.log("Progress bar inited");
  61. ProcessDiagramGenerator.options = {
  62. diagramBreadCrumbsId: "diagramBreadCrumbs",
  63. diagramHolderId: "diagramHolder",
  64. diagramInfoId: "diagramInfo",
  65. on: {
  66. click: function(canvas, element, contextObject){
  67. var mouseEvent = this;
  68. console.log("[CLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
  69. if (contextObject.getProperty("type") == "callActivity") {
  70. var processDefinitonKey = contextObject.getProperty("processDefinitonKey");
  71. var processDefinitons = contextObject.getProperty("processDefinitons");
  72. var processDefiniton = processDefinitons[0];
  73. console.log("Load callActivity '" + processDefiniton.processDefinitionKey + "', contextObject: ", contextObject);
  74. // Load processDefinition
  75. ProcessDiagramGenerator.drawDiagram(processDefiniton.processDefinitionId);
  76. }
  77. },
  78. rightClick: function(canvas, element, contextObject){
  79. var mouseEvent = this;
  80. console.log("[RIGHTCLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
  81. },
  82. over: function(canvas, element, contextObject){
  83. var mouseEvent = this;
  84. //console.log("[OVER] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
  85. // TODO: show tooltip-window with contextObject info
  86. ProcessDiagramGenerator.showActivityInfo(contextObject);
  87. },
  88. out: function(canvas, element, contextObject){
  89. var mouseEvent = this;
  90. //console.log("[OUT] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
  91. ProcessDiagramGenerator.hideInfo();
  92. }
  93. }
  94. };
  95. var baseUrl = window.document.location.protocol + "//" + window.document.location.host + "/";
  96. var shortenedUrl = window.document.location.href.replace(baseUrl, "");
  97. baseUrl = baseUrl + shortenedUrl.substring(0, shortenedUrl.indexOf("/"));
  98. ActivitiRest.options = {
  99. processInstanceHighLightsUrl: baseUrl + "/service/process-instance/{processInstanceId}/highlights?callback=?",
  100. processDefinitionUrl: baseUrl + "/service/process-definition/{processDefinitionId}/diagram-layout?callback=?",
  101. processDefinitionByKeyUrl: baseUrl + "/service/process-definition/{processDefinitionKey}/diagram-layout?callback=?"
  102. };
  103. if (processDefinitionId) {
  104. ProcessDiagramGenerator.drawDiagram(processDefinitionId);
  105. } else {
  106. alert("processDefinitionId parameter is required");
  107. }
  108. });
  109. </script>
  110. </body>
  111. </html>