Replace tables in enactment templates

src/main/java/ua/be/wee/controller/EnactmentControllerMVC.java

@@ -131,40 +131,8 @@ public class EnactmentControllerMVC {
     	
     	
     }
-    
+
     @PostMapping("/endAct")
-    public String endActivity(Model model, @RequestParam String port, @RequestParam String activity, HttpServletRequest request) throws Exception {
-    	PM pm = (PM)request.getSession().getAttribute("pm");
-    	List<Node> acts = (List<Node>)request.getSession().getAttribute("acts");
-    	List<Node> endacts = (List<Node>)request.getSession().getAttribute("endacts");
-    	PT pt = (PT)request.getSession().getAttribute("trace");
-    	Activity act = (Activity)pm.getNode(activity);
-    	List<ControlOutputPort> ctrlOutPorts = act.getCtrlOutPorts();
-    	ControlOutputPort p = null;
-    	for (ControlOutputPort out : ctrlOutPorts) {
-    		if (out.getIri().equals(port)) {
-				p = out;
-				break;
-			}
-		}
-    	List<String> iris = controller.findNextNodes(p.getIri());
-		for (String iri : iris) {
-			acts.add(pm.getNode(iri));
-		}
-    	List<TraceArtifact> arts = new ArrayList<TraceArtifact>();
-    	
-    	controller.addEndEvent(pt,act,arts,p);
-    	endacts.remove(act);
- 
-    	
-    	request.getSession().setAttribute("trace", pt);
-    	request.getSession().setAttribute("previous", p.getIri());
-		model.addAttribute("arts", null);
-		model.addAttribute("current", "1");
-    	return "enact";
-    }
-    
-    @PostMapping("/endActArt")
     public String endActivityWithArtifacts(Model model, @RequestParam String port, @RequestParam String activity, HttpServletRequest request) throws Exception {
     	PM pm = (PM)request.getSession().getAttribute("pm");
     	List<Node> acts = (List<Node>)request.getSession().getAttribute("acts");
@@ -193,7 +161,6 @@ public class EnactmentControllerMVC {
 					tArt.setRelatesTo(artifact);
 					traceArts.add(tArt);
 					storageService.save(part);
-					
 				}
 			}  
 		}
@@ -202,12 +169,10 @@ public class EnactmentControllerMVC {
 		for (String iri : iris) {
 			acts.add(pm.getNode(iri));
 		}
-    	
-    	controller.addEndEvent(pt,act,traceArts,p);
+
+		controller.addEndEvent(pt,act,traceArts,p);
     	endacts.remove(act);
-    	
-    	
-    	
+
     	request.getSession().setAttribute("trace", pt);
     	request.getSession().setAttribute("previous", p.getIri());
 		model.addAttribute("arts", null);

src/main/resources/static/main.js

@@ -1,18 +1,19 @@
 function showDiv(select){
-    if(select.value!=1){
-        document.getElementById('hidden_div').style.display = 'block';
+    let hiddenDiv = document.getElementById('hidden_div');
+    if (select.value != 1) {
+        hiddenDiv.classList.remove('is-hidden');
     } else{
-        document.getElementById('hidden_div').style.display = 'none';
+        hiddenDiv.classList.add('is-hidden');
     }
 }
 
-document.addEventListener('DOMContentLoaded', () => {
-    (document.querySelectorAll('.toggle') || []).forEach(($toggle) => {
-        $toggle.addEventListener('click', () => {
-
-        });
-    });
-});
+// document.addEventListener('DOMContentLoaded', () => {
+//     (document.querySelectorAll('.toggle') || []).forEach(($toggle) => {
+//         $toggle.addEventListener('click', () => {
+//
+//         });
+//     });
+// });
 
 document.addEventListener('DOMContentLoaded', () => {
     // Get all "navbar-burger" elements

src/main/resources/static/style.css

@@ -19,6 +19,7 @@
 }
 
 :root {
+  --color-accent-text: #00d1b2;
   --u: 20px;
   --gp: 50% / calc(var(--u) * 10) calc(var(--u) * 7.8);
   --dg: 0 25%, #fff0 0 100%;
@@ -90,4 +91,36 @@ footer section {
 
 .wee-meme-image {
   width: 25rem;
+}
+
+.enactment {
+  display: grid;
+  gap: 1em 1em;
+  grid-template-columns: 3fr 2fr;
+  grid-template-rows: 1fr 1fr;
+  grid-template-areas: "form details" "artifacts artifacts";
+  justify-items: stretch;
+}
+
+.form {
+  grid-area: form;
+  width: 100%;
+}
+
+.details {
+  grid-area: details;
+  width: 100%;
+}
+
+.artifacts {
+  grid-area: artifacts;
+  width: 100%;
+}
+
+.accent {
+  color: var(--color-accent-text);
+}
+
+strong {
+  color: var(--color-content-text);
 }

src/main/resources/templates/enact.html

@@ -5,73 +5,88 @@
 </head>
 <body>
 <main>
-  <section>
-  <h1>Wee: Workflow Enactment Engine</h1>
-  <div>
-    <h3 th:inline="text">Enacting the Process Model: [[${session.pm.name}]] </h3>
-    <form th:action="@{/startAct}" method="post">
-      <table>
-        <tr th:if="${session.acts != null && session.acts.size > 0}">
-          <td><h3> Select activity to start:</h3></td>
-          <td>
-            <select id="activities" name="activity" th:onchange="'window.location.href = \'' + @{/inarts} + '?iri=\' + encodeURIComponent(this.value) ' ">
-              <option th:value="1">select Activity</option>
-              <option th:each="act: ${session.acts}" th:selected="${act.iri == current}" th:value="${act.iri}" th:text="${act.name}"></option>
-            </select>
-          </td>
-        </tr>
-        <tr th:if="${session.endacts != null && session.endacts.size > 0}">
-          <td><h3> Select activity to end: </h3></td>
-          <td>
-            <select id="activitiesend" name="activityend" th:onchange="'window.location.href = \'' + @{/endselect} + '?iri=\' + encodeURIComponent(this.value) ' ">
-              <option th:value="1">select Activity</option>
-              <option th:each="actend: ${session.endacts}" th:selected="${actend.iri == currentend}" th:value="${actend.iri}" th:text="${actend.name}"></option>
-            </select>
-          </td>
-        </tr>
-      </table>
-      <input id="endEnactment" th:if="${endBool}" type="submit" value="End Enactment"/>
-      <div id="hidden_div" th:if="${session.arts != null}">
-        <table th:if="${session.arts != null && session.arts.size > 0}">
-          <tr>
-            <th colspan="2"><h3>Artifacts</h3></th>
-          </tr>
-          <th:block th:each="art : ${session.arts}">
-            <tr>
-              <td> Artifact Name:</td>
-              <td th:text="${art.relatesTo.name}">...</td>
-            </tr>
-            <tr>
-              <td> Type:</td>
-              <td th:text="${art.relatesTo.type}"></td>
-            </tr>
-            <tr>
-              <td colspan="2"><a th:href="@{|${storageURL}/files/file/${art.location}|}"> Download </a></td>
-            </tr>
-          </th:block>
-        </table>
-        <input id="startActivity" type="submit" value="Start Activity"/>
+  <section class="pt-6 pb-6 pl-5 pr-5">
+    <h2 class="is-size-3 is-capitalized">Workflow Enactment Engine</h2>
+    <div class="level-left">
+      <p th:inline="text">Enacting the Process Model:</p>
+      <div class="tags has-addons">
+        <span class="tag">PM</span>
+        <span class="tag is-primary">[[${session.pm.name}]]</span>
       </div>
-  </div>
-  <div>
-    <h3 th:inline="text">Trace: [[${session.trace.name}]]</h3>
-    <h4 th:inline="text">Started at: [[${session.trace.timestampF}]]</h4>
-    <table>
-      <th:block th:each="ev : ${session.trace.events}">
-        <tr>
-          <td th:if="${ev.class.name == 'ua.be.wee.model.pt.StartActivityEvent'}">begin:
-          </td>
-          <td th:if="${ev.class.name == 'ua.be.wee.model.pt.EndActivityEvent'}">end:
-          </td>
-          <td colspan="2" th:text="${ev.relatesTo.act.name}">...</td>
-        </tr>
-        <tr>
-          <td colspan="2">port:</td>
-          <td>[[${ev.relatesTo.name}]]</td>
-        </tr>
-      </th:block>
-    </table>
-  </div>
+    </div>
+
+    <div class="enactment pt-3">
+      <form class="form" th:action="@{/startAct}" method="post">
+        <th:block th:if="${session.acts != null && session.acts.size > 0}">
+          <!--  Options shown only when starting an activity  -->
+          <label for="activities">Select activity to start:</label>
+          <div class="field has-addons">
+            <div class="control is-expanded">
+              <div class="select is-fullwidth">
+                <select id="activities" name="activity" th:onchange="'window.location.href = \'' + @{/inarts} + '?iri=\' + encodeURIComponent(this.value) ' ">
+                  <option th:value="1">Select Activity</option>
+                  <option th:each="act: ${session.acts}" th:selected="${act.iri == current}" th:value="${act.iri}" th:text="${act.name}"></option>
+                </select>
+              </div>
+            </div>
+            <div class="control">
+              <button th:unless="${session.arts != null}" id="startActivity" type="submit" class="button is-primary" disabled>Start Activity</button>
+              <button th:if="${session.arts != null}" id="startActivity" type="submit" class="button is-primary">Start Activity</button>
+            </div>
+          </div>
+        </th:block>
+        <th:block th:if="${session.endacts != null && session.endacts.size > 0}">
+          <!--  Options shown only when ending an activity  -->
+          <label for="activitiesend">Select activity to end:</label>
+          <div class="field has-addons">
+            <div class="control is-expanded">
+              <div class="select is-fullwidth">
+                <select id="activitiesend" name="activityend" th:onchange="'window.location.href = \'' + @{/endselect} + '?iri=\' + encodeURIComponent(this.value) ' ">
+                  <option th:value="1">Select Activity</option>
+                  <option th:each="actend: ${session.endacts}" th:selected="${actend.iri == currentend}" th:value="${actend.iri}" th:text="${actend.name}"></option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </th:block>
+        <div class="control">
+          <button type="submit" class="button is-primary" id="endEnactment" th:if="${endBool}">End Enactment</button>
+        </div>
+      </form>
+
+      <div class="details">
+        <p th:inline="text"><strong>Trace: </strong><span class="accent">[[${session.trace.name}]]</span></p>
+        <p th:inline="text"><strong>Started at: </strong><span class="accent">[[${session.trace.timestampF}]]</span></p>
+        <th:block th:each="ev : ${session.trace.events}">
+          <p th:if="${ev.class.name == 'ua.be.wee.model.pt.StartActivityEvent'}"><strong>Begin: </strong><span class="accent" th:text="${ev.relatesTo.act.name}"></span></p>
+          <p th:if="${ev.class.name == 'ua.be.wee.model.pt.EndActivityEvent'}"><strong>End: </strong><span class="accent" th:text="${ev.relatesTo.act.name}"></span></p>
+          <p><strong>Port: </strong><span class="accent">[[${ev.relatesTo.name}]]</span></p>
+        </th:block>
+      </div>
+
+      <div class="artifacts pt-6" th:if="${session.arts != null && session.arts.size > 0}">
+        <p class="is-size-4 is-capitalized">Artifacts</p>
+        <th:block th:each="art : ${session.arts}">
+        <article class="media">
+          <figure class="media-left">
+            <p class="image is-64x64">
+              <img src="https://bulma.io/images/placeholders/128x128.png" alt="Download arrow">
+            </p>
+          </figure>
+          <div class="media-content">
+            <div class="content">
+              <p>
+                <strong th:text="${art.relatesTo.name}"></strong> <small th:text="${art.relatesTo.type}"></small>
+                <br>
+                <a th:href="@{|${storageURL}/files/file/${art.location}|}">Download</a>
+              </p>
+            </div>
+          </div>
+        </article>
+        </th:block>
+      </div>
+    </div>
+
   </section>
 </main>
 </body>

src/main/resources/templates/enactEnd.html

@@ -5,66 +5,70 @@
 </head>
 <body>
 <main>
-  <h1>Wee: Workflow Enactment Engine</h1>
-  <div>
-    <h3 th:inline="text">Enacting the Process Model: [[${session.pm.name}]] </h3>
-    <div id="formArts" th:if="${arts.size > 0}">
-      <form id="formA" th:action="@{/endActArt}" method="post" enctype="multipart/form-data">
+  <section class="pt-6 pb-6 pl-5 pr-5">
+    <h2 class="is-size-3 is-capitalized">Workflow Enactment Engine</h2>
+    <div class="level-left">
+      <p th:inline="text">Enacting the Process Model:</p>
+      <div class="tags has-addons">
+        <span class="tag">PM</span>
+        <span class="tag is-primary">[[${session.pm.name}]]</span>
+      </div>
     </div>
-    <div id="formNoArts" th:if="${arts.size == 0}">
-      <form id="formNoA" th:action="@{/endAct}" method="post">
-    </div>
-    <table>
-      <tr>
-        <td><h3>Select output port of Activity: [[${act.name}]]</h3></td>
-        <td>
+
+    <div class="enactment pt-3">
+      <form class="form" id="form" th:action="@{/endAct}" method="post" enctype="multipart/form-data">
+        <div class="level-left">
+          <p th:inline="text">Select output port of Activity:</p>
+          <div class="tags has-addons">
+            <span class="tag">ACTIVITY</span>
+            <span class="tag is-primary">[[${act.name}]]</span>
+          </div>
+        </div>
+        <div class="select">
           <select id="portSelect" name="port" th:onchange="showDiv(this)">
             <option th:value="1">select port</option>
             <option th:each="port: ${act.ctrlOutPorts}" th:value="${port.iri}" th:text="${port.name}"></option>
           </select>
-          <input type="hidden" th:value="${act.iri}" name="activity"/>
-        </td>
-      </tr>
-    </table>
-    <div id="hidden_div">
-      <table th:if="${arts != null && arts.size > 0}">
-        <tr>
-          <th colspan="2"><h3 style="color: #5e9ca0;">Artifacts</h3></th>
-        </tr>
-        <th:block th:each="art : ${arts}">
-          <tr>
-            <td> Artifact Name:</td>
-            <td th:text="${art.name}">...</td>
-          </tr>
-          <tr>
-            <td> Type:</td>
-            <td th:text="${art.type}"></td>
-          </tr>
-          <tr>
-            <td colspan="2"><input id="input-file-${art.name}" type="file" th:name="${art.name}"/></td>
-          </tr>
+        </div>
+        <input type="hidden" th:value="${act.iri}" name="activity"/>
+
+        <div id="hidden_div" class="is-hidden">
+          <div th:if="${arts != null && arts.size > 0}">
+            <p class="is-size-4 pt-4">Artifacts</p>
+            <th:block th:each="art : ${arts}">
+              <p th:inline="text"><strong>Name: </strong><span class="accent">[[${art.name}]]</span></p>
+              <p th:inline="text"><strong>Type: </strong><span class="accent">[[${art.type}]]</span></p>
+              <div class="file has-name">
+                <label class="file-label">
+                  <input class="file-input" type="file" th:name="${art.name}" id="input-file-${art.name}">
+                    <span class="file-cta">
+                      <span class="file-icon">
+                        <i class="fas fa-upload"></i>
+                      </span>
+                    <span class="file-label">Choose a file…</span>
+                  </span>
+                  <span class="file-name">file.extension</span>
+                </label>
+              </div>
+            </th:block>
+          </div>
+          <div class="control pt-4">
+            <button type="submit" class="button is-primary">End Activity</button>
+          </div>
+        </div>
+      </form>
+
+      <div class="details">
+        <p th:inline="text"><strong>Trace: </strong><span class="accent">[[${session.trace.name}]]</span></p>
+        <p th:inline="text"><strong>Started at: </strong><span class="accent">[[${session.trace.timestampF}]]</span></p>
+        <th:block th:each="ev : ${session.trace.events}">
+          <p th:if="${ev.class.name == 'ua.be.wee.model.pt.StartActivityEvent'}"><strong>Begin: </strong><span class="accent" th:text="${ev.relatesTo.act.name}"></span></p>
+          <p th:if="${ev.class.name == 'ua.be.wee.model.pt.EndActivityEvent'}"><strong>End: </strong><span class="accent" th:text="${ev.relatesTo.act.name}"></span></p>
+          <p><strong>Port: </strong><span class="accent">[[${ev.relatesTo.name}]]</span></p>
         </th:block>
-      </table>
-      <input type="submit" value="End Activity"/>
+      </div>
     </div>
-  </div>
-  <div>
-    <h3 th:inline="text">Trace: [[${session.trace.name}]] </h3>
-    <h4 th:inline="text">Started at: [[${session.trace.timestampF}]] </h4>
-    <table>
-      <th:block th:each="ev : ${session.trace.events}">
-        <tr>
-          <td th:if="${ev.class.name == 'ua.be.wee.model.pt.StartActivityEvent'}">begin:</td>
-          <td th:if="${ev.class.name == 'ua.be.wee.model.pt.EndActivityEvent'}">end:</td>
-          <td colspan="2" th:text="${ev.relatesTo.act.name}">...</td>
-        </tr>
-        <tr>
-          <td colspan="2">port:</td>
-          <td>[[${ev.relatesTo.name}]]</td>
-        </tr>
-      </th:block>
-    </table>
-  </div>
+  </section>
 </main>
 </body>
 </html>

src/main/resources/templates/index.html

@@ -17,9 +17,7 @@
           <input class="input" placeholder="SPARQL endpoint URI" th:unless="${hasEndpoint}" type="text" id="endpointURL" name="endpoint"/>
         </div>
         <div class="control">
-          <button type="submit" class="button is-info">
-            Next
-          </button>
+          <button type="submit" class="button is-primary">Next</button>
         </div>
       </div>
     </form>
@@ -28,7 +26,6 @@
       <button class="delete"></button>
       <strong>Error</strong> connecting to specified endpoint!
     </div>
-    <div ></div>
   </section>
 </main>
 </body>

src/main/resources/templates/pms.html

@@ -5,21 +5,25 @@
 </head>
 <body>
 <main>
-  <h1>Wee: Workflow Enactment Engine</h1>
-  <table>
-    <form th:action="@{/enactpm}" method="post">
-      <tr>
-        <td><h3>Choose the Process Model to be enacted:</h3></td>
-        <td><select id="dropDownList" name="pmiri">
-          <option value="select PM">select PM</option>
-          <option th:each="pm: ${pms}" th:value="${pm.iri}" th:text="${pm}"></option>
-        </select>
-        </td>
-      </tr>
-      <tr>
-        <td><input type="submit" value="Start Enactment"/></td>
-      </tr>
-  </table>
+  <section class="pt-6 pb-6 pl-5 pr-5">
+    <h2 class="is-size-3 is-capitalized">Wee: Workflow Enactment Engine</h2>
+    <form class="pt-3" th:action="@{/enactpm}" method="post">
+      <p class="is-size-4">Choose the Process Model to be enacted:</p>
+      <div class="field has-addons">
+        <div class="control is-expanded">
+          <div class="select is-fullwidth">
+            <select id="dropDownList" name="pmiri">
+              <option value="Select PM">select PM</option>
+              <option th:each="pm: ${pms}" th:value="${pm.iri}" th:text="${pm}"></option>
+            </select>
+          </div>
+        </div>
+        <div class="control">
+          <button type="submit" class="button is-primary">Start Enactment</button>
+        </div>
+      </div>
+    </form>
+  </section>
 </main>
 </body>
 </html>