enact.html 4.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="base::layout(~{::title}, ~{::main})">
  3. <head>
  4. <title>Wee! Workflow Enactment Engine</title>
  5. </head>
  6. <body>
  7. <main>
  8. <section class="pt-6 pb-6 pl-5 pr-5">
  9. <h2 class="is-size-3 is-capitalized">Workflow Enactment Engine</h2>
  10. <div class="level-left">
  11. <p th:inline="text">Enacting the Process Model:</p>
  12. <div class="tags has-addons">
  13. <span class="tag">PM</span>
  14. <span class="tag is-primary">[[${session.pm.name}]]</span>
  15. </div>
  16. </div>
  17. <div class="enactment pt-3">
  18. <form class="form" th:action="@{/startAct}" method="post">
  19. <th:block th:if="${session.acts != null && session.acts.size > 0}">
  20. <!-- Options shown only when starting an activity -->
  21. <label for="activities">Select activity to start:</label>
  22. <div class="field has-addons">
  23. <div class="control is-expanded">
  24. <div class="select is-fullwidth">
  25. <select id="activities" name="iri" th:onchange="'window.location.href = \'' + @{/inarts} + '?iri=\' + encodeURIComponent(this.value) ' ">
  26. <option th:value="1">Select Activity</option>
  27. <option th:each="act: ${session.acts}" th:selected="${act.iri == current}" th:value="${act.iri}" th:text="${act.name}"></option>
  28. </select>
  29. </div>
  30. </div>
  31. <div class="control">
  32. <button th:unless="${session.arts != null}" id="startActivity" type="submit" class="button is-primary" disabled>Start Activity</button>
  33. <button th:if="${session.arts != null}" id="startActivity" type="submit" class="button is-primary">Start Activity</button>
  34. </div>
  35. </div>
  36. </th:block>
  37. <th:block th:if="${session.endacts != null && session.endacts.size > 0}">
  38. <!-- Options shown only when ending an activity -->
  39. <label for="activitiesend">Select activity to end:</label>
  40. <div class="field has-addons">
  41. <div class="control is-expanded">
  42. <div class="select is-fullwidth">
  43. <select id="activitiesend" name="activityend" th:onchange="'window.location.href = \'' + @{/endselect} + '?iri=\' + encodeURIComponent(this.value) ' ">
  44. <option th:value="1">Select Activity</option>
  45. <option th:each="actend: ${session.endacts}" th:selected="${actend.iri == currentend}" th:value="${actend.iri}" th:text="${actend.name}"></option>
  46. </select>
  47. </div>
  48. </div>
  49. </div>
  50. </th:block>
  51. <div class="control">
  52. <button type="submit" class="button is-primary" id="endEnactment" th:if="${endBool}">End Enactment</button>
  53. </div>
  54. </form>
  55. <div class="details">
  56. <p th:inline="text"><strong>Trace: </strong><span class="accent">[[${session.trace.name}]]</span></p>
  57. <p th:inline="text"><strong>Started at: </strong><span class="accent">[[${session.trace.events[0].timestampF}]]</span></p>
  58. <th:block th:each="ev : ${session.trace.events}">
  59. <p th:if="${ev.class.name == 'ua.be.wee.model.pt.StartActivityEvent'}"><strong>Begin: </strong><span class="accent" th:text="${ev.relatesTo.activity.name}"></span></p>
  60. <p th:if="${ev.class.name == 'ua.be.wee.model.pt.EndActivityEvent'}"><strong>End: </strong><span class="accent" th:text="${ev.relatesTo.activity.name}"></span></p>
  61. <p th:if="${ev.class.name == 'ua.be.wee.model.pt.EndActivityEvent' || ev.class.name == 'ua.be.wee.model.pt.StartActivityEvent'}"><strong>Port: </strong><span class="accent">[[${ev.relatesTo.name}]]</span></p>
  62. </th:block>
  63. </div>
  64. <div class="artifacts pt-6" th:if="${session.arts != null && session.arts.size > 0}">
  65. <p class="is-size-4 is-capitalized">Artifacts</p>
  66. <th:block th:each="art : ${session.arts}">
  67. <article class="media">
  68. <figure class="media-left">
  69. <p class="image is-64x64">
  70. <img src="https://bulma.io/images/placeholders/128x128.png" alt="Download arrow">
  71. </p>
  72. </figure>
  73. <div class="media-content">
  74. <div class="content">
  75. <p>
  76. <strong th:text="${art.relatesTo.name}"></strong> <small th:text="${art.relatesTo.type}"></small>
  77. <br>
  78. <a th:if="${art.fileExtension == 'xopp' || art.fileExtension == 'csv' || art.fileExtension == 'drawio'}" th:href="@{|${storageURL}/files/${art.fileExtension}/${art.location}|}">Download</a>
  79. <a th:if="${art.fileExtension != null && art.fileExtension != 'xopp' && art.fileExtension != 'csv' && art.fileExtension != 'drawio'}" th:href="@{|${storageURL}/files/file/${art.location}|}">Download</a>
  80. </p>
  81. </div>
  82. </div>
  83. </article>
  84. </th:block>
  85. </div>
  86. </div>
  87. </section>
  88. </main>
  89. </body>
  90. </html>