Resolve merge conflicts

pom.xml

@@ -12,7 +12,7 @@
 	<artifactId>wee</artifactId>
 	<version>0.0.1-SNAPSHOT</version>
 	<name>wee</name>
-	<description>Worflow Enactment Engine</description>
+	<description>Workflow Enactment Engine</description>
 	<properties>
 		<java.version>11</java.version>
 	</properties>
@@ -23,7 +23,6 @@
 			<type>pom</type>
 			<version>4.7.0</version>
 		</dependency>
-		
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-data-jpa</artifactId>
@@ -40,7 +39,6 @@
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-web</artifactId>
 		</dependency>
-
 		<dependency>
 			<groupId>com.h2database</groupId>
 			<artifactId>h2</artifactId>

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

@@ -39,7 +39,7 @@ import ua.be.wee.service.FileStorageService;
 
 @Controller
 @RequestMapping("/")
-public class EnactementControllerMVC {
+public class EnactmentControllerMVC {
 
 	@Autowired private EnactmentController controller;
   
@@ -127,7 +127,7 @@ public class EnactementControllerMVC {
 		}
 		return acts;
 	}
-    
+
     @PostMapping("/startAct")
     public String startActivity(Model model, @RequestParam String activity, HttpServletRequest request) throws Exception {
     	PM pm = (PM)request.getSession().getAttribute("pm");
@@ -163,40 +163,10 @@ public class EnactementControllerMVC {
 				break;
 			}
 		}
-		
+
 	}
 
-	@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<PMTrigger> acts = (List<PMTrigger>)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<Pair<String,String>> iris = controller.findNextNodes(p.getIri());
-		acts.addAll(findElements(pm, iris));
-    	List<TraceArtifact> arts = new ArrayList<TraceArtifact>();
-    	
-    	controller.addEndEvent(pt,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")
+    @PostMapping("/endAct")
     public String endActivityWithArtifacts(Model model, @RequestParam String port, @RequestParam String activity, HttpServletRequest request) throws Exception {
     	PM pm = (PM)request.getSession().getAttribute("pm");
     	List<PMTrigger> acts = (List<PMTrigger>)request.getSession().getAttribute("acts");
@@ -225,22 +195,16 @@ public class EnactementControllerMVC {
 					tArt.setRelatesTo(artifact);
 					traceArts.add(tArt);
 					storageService.save(part);
-					
 				}
 			}  
 		}
     	
     	controller.addEndEvent(pt,traceArts,p);
     	endacts.remove(act);
-    	
-    	
+
     	List<Pair<String,String>> iris = controller.findNextNodes(p.getIri());
-		acts.addAll(findElements(pm, iris));
-    	
-    	
-    	
-    	
-    	
+        acts.addAll(findElements(pm, iris));
+
     	request.getSession().setAttribute("trace", pt);
     	request.getSession().setAttribute("previous", p.getIri());
 		model.addAttribute("arts", null);

src/main/resources/static/main.js

@@ -0,0 +1,64 @@
+function showDiv(select){
+    let hiddenDiv = document.getElementById('hidden_div');
+    if (select.value != 1) {
+        hiddenDiv.classList.remove('is-hidden');
+    } else{
+        hiddenDiv.classList.add('is-hidden');
+    }
+}
+
+// document.addEventListener('DOMContentLoaded', () => {
+//     (document.querySelectorAll('.toggle') || []).forEach(($toggle) => {
+//         $toggle.addEventListener('click', () => {
+//
+//         });
+//     });
+// });
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Get all "navbar-burger" elements
+    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+    // Add a click event on each of them
+    $navbarBurgers.forEach( el => {
+        el.addEventListener('click', () => {
+
+            // Get the target from the "data-target" attribute
+            const target = el.dataset.target;
+            const $target = document.getElementById(target);
+
+            // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+            el.classList.toggle('is-active');
+            $target.classList.toggle('is-active');
+        });
+    });
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+    (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
+        const $notification = $delete.parentNode;
+        $delete.addEventListener('click', () => {
+            $notification.parentNode.removeChild($notification);
+        });
+    });
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+    (document.querySelectorAll('#endpointURL') || []).forEach(($urlInput) => {
+        $urlInput.addEventListener('input', (e) => {
+            window.localStorage.setItem("uri", e.target.value);
+            console.log('Storing uri input ' + e.target.value);
+        });
+    });
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+    let data = window.localStorage.getItem("uri");
+    if (data) {
+        (document.querySelectorAll('#endpointURL') || []).forEach(($urlInput) => {
+            $urlInput.setAttribute('value', data);
+            console.log('Setting uri input to ' + data);
+        });
+    }
+});
+

src/main/resources/static/reset.css

@@ -0,0 +1,53 @@
+/* https://www.joshwcomeau.com/css/custom-css-reset/ */
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+/*
+  2. Remove default margin
+*/
+* {
+  margin: 0;
+}
+/*
+  3. Allow percentage-based heights in the application
+*/
+html, body {
+  height: 100%;
+}
+/*
+  Typographic tweaks!
+  4. Add accessible line-height
+  5. Improve text rendering
+*/
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+  6. Improve media defaults
+*/
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+  7. Remove built-in form typography styles
+*/
+input, button, textarea, select {
+  font: inherit;
+}
+/*
+  8. Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+/*
+  9. Create a root stacking context
+*/
+#root, #__next {
+  isolation: isolate;
+}

src/main/resources/templates/base.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="layout(title, main)">
+<!--<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="layout">-->
+<head>
+  <meta charset="UTF-8"/>
+  <title th:replace="${title}"></title>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <meta name="description" content=""/>
+  <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="../static/reset.css" th:href="@{/reset.css}"/>
+  <link rel="stylesheet" type="text/css" href="../static/style.css" th:href="@{/style.css}"/>
+  <link rel="icon" href="../static/favicon.svg" th:href="@{/favicon.svg}"/>
+</head>
+<body>
+<header>
+  <nav class="navbar" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <a class="navbar-item" href="/">
+<!--        <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">-->
+        <h1 class="is-size-3">Workflow Enactment Engine</h1>
+      </a>
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navigation-menu">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+
+    <div id="navigation-menu" class="navbar-menu">
+      <div class="navbar-start">
+        <a class="navbar-item">Home</a>
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link">Enactment</a>
+          <div class="navbar-dropdown">
+            <a href="https://msdl.uantwerpen.be/git/lucasalbertins/wee/src/master/README.md" class="navbar-item">About</a>
+            <hr class="navbar-divider">
+            <a href="https://msdl.uantwerpen.be/git/lucasalbertins/wee/issues" class="navbar-item">Report an issue</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
+            <a href="https://msdl.uantwerpen.be/git/lucasalbertins/wee" class="button is-primary">
+              <strong>?</strong>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--  <button id="toggle">Theme</button>-->
+  </nav>
+</header>
+<main th:replace="${main}"></main>
+<footer>
+  <section>
+<!--  https://stackoverflow.com/questions/30574093/how-to-implement-breadcrumbs-in-spring-mvc-thymeleaf  -->
+    <nav class="breadcrumb pl-5 pr-5" aria-label="breadcrumbs">
+      <ul>
+        <li><a href="#">WEE</a></li>
+        <li><a href="#">PM</a></li>
+        <li class="is-active"><a href="#" aria-current="page">Index</a></li>
+      </ul>
+    </nav>
+  </section>
+</footer>
+<script src="../static/main.js" th:src="@{/main.js}"></script>
+</body>
+</html>

src/main/resources/templates/enact.html

@@ -1,132 +1,93 @@
 <!DOCTYPE html>
-<html lang="en">
-
+<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="base::layout(~{::title}, ~{::main})">
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>New account</title>
-     <style>
-		.button {
-		  border: none;
-		  color: white;
-		  padding: 16px 32px;
-		  text-align: center;
-		  text-decoration: none;
-		  display: inline-block;
-		  font-size: 16px;
-		  margin: 4px 2px;
-		  transition-duration: 0.4s;
-		  cursor: pointer;
-		}
-		
-		.button1 {
-		  background-color: white; 
-		  color: black; 
-		  border: 2px solid #5e9ca0;
-		}
-		
-		.button1:hover {
-		  background-color: #5e9ca0;
-		  color: white;
-		}		
-	</style>
-	
+  <title>Wee! Workflow Enactment Engine</title>
 </head>
-
 <body>
-<div style="width:100%; height: 100px;background-color:white" class="bg-faded">
-  <!-- Main Div -->
-  <h1 style="color: #5e9ca0; text-align: center;">Wee: Workflow Enactment Engine</h1>
-</div>
-
-<div style="float:left;width:50%;" >
-
-<h3 style="color: #5e9ca0;" 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 style="color: #5e9ca0;"> Select activity to start:</h3></td>
-        <td >
-
-        <select class="form-control" 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 style="color: #5e9ca0;"> Select activity to end: </h3></td>
-        <td >
-
-        <select class="form-control" 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}" class="button button1" 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"  style="padding: 20px; border-bottom: 1px solid red;" ><h3 style="color: #5e9ca0;"> Artifacts </h3></th> </tr>
-	
-	
-	<th:block th:each="art : ${session.arts}">
-    
-    <tr>
-        <td style="color: #5e9ca0;font-weight: bold;" > Artifact Name:</td>
-        <td style="color: #5e9ca0;" th:text="${art.relatesTo.name}">...</td>
-    </tr>
-    <tr>
-        <td style="color: #5e9ca0;font-weight: bold;" > Type:</td>
-        <td style="color: #5e9ca0;" th:text="${art.relatesTo.type}" > </td>
-    </tr>
-    
-    <tr>
-        <td colspan="2" style="color: #5e9ca0;font-weight: bold; padding: 20px;
-    		border-bottom: 1px solid red;"  >  <a class="button button1" th:href="@{|${storageURL}/files/file/${art.location}|}"> Download </a>  </td>
-
-    </tr>
-    
-  </th:block>
-</table>
-<input id="startActivity" class="button button1" type="submit" value="Start Activity"/> 
-
-</div>
-
-</div>
-
-<div style="float:left; width:50%; background-color:white; ">
-
-<h3 style="color: #5e9ca0;" th:inline="text">Trace: [[${session.trace.name}]] </h3>
-<h4 style="color: #5e9ca0;" th:inline="text">Started at: [[${session.trace.timestampF}]] </h4>
-
-
-<table>
-  <th:block th:each="ev : ${session.trace.events}">
-    <tr>
-        <td style="color: #5e9ca0;font-weight: bold;" th:if="${ev.class.name == 'ua.be.wee.model.pt.StartActivityEvent'}" >begin:</td>
-        <td style="color: #5e9ca0;font-weight: bold;" th:if="${ev.class.name == 'ua.be.wee.model.pt.EndActivityEvent'}" >end:</td>
-        <td style="color: #5e9ca0;" colspan="2" th:text="${ev.relatesTo.activity.name}">...</td>
-    </tr>
-    <tr>
-        <td style="color: #5e9ca0;font-weight: bold;" colspan="2" >port:</td>
-        <td style="color: #5e9ca0;"  >[[${ev.relatesTo.name}]]</td>
-    </tr>
-  </th:block>
-</table>
-
-</div>
-    
+<main>
+  <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 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.activity.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>
-
 </html>

src/main/resources/templates/enactEnd.html

@@ -1,143 +1,74 @@
 <!DOCTYPE html>
-<html lang="en">
-
+<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="base::layout(~{::title}, ~{::main})">
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>New account</title>
-     <style>
-		.button {
-		  border: none;
-		  color: white;
-		  padding: 16px 32px;
-		  text-align: center;
-		  text-decoration: none;
-		  display: inline-block;
-		  font-size: 16px;
-		  margin: 4px 2px;
-		  transition-duration: 0.4s;
-		  cursor: pointer;
-		}
-		
-		.button1 {
-		  background-color: white; 
-		  color: black; 
-		  border: 2px solid #5e9ca0;
-		}
-		
-		.button1:hover {
-		  background-color: #5e9ca0;
-		  color: white;
-		}
-	</style>
-	<script type="text/javascript">
-	function showDiv(select){
-	   if(select.value!=1){
-	    document.getElementById('hidden_div').style.display = "block";
-	   } else{
-	    document.getElementById('hidden_div').style.display = "none";
-	   }
-	} 
-</script>
+  <title>Wee! Workflow Enactment Engine</title>
 </head>
-
 <body>
-<div style="width:100%; height: 100px;background-color:white" class="bg-faded">
-  <!-- Main Div -->
-  <h1 style="color: #5e9ca0; text-align: center;">Wee: Workflow Enactment Engine</h1>
-</div>
-
-<div style="float:left;width:50%;" >
-
-<h3 style="color: #5e9ca0;" 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" >	
-</div>
-
-<div id="formNoArts" th:if="${arts.size == 0}" >
-	<form id="formNoA"  th:action="@{/endAct}" method="post" >	
-</div>
-	
-
-
-<table>
-
-    <tr >
-        <td ><h3 style="color: #5e9ca0;">Select output port of Activity: [[${act.name}]]</h3></td>
-        <td >
-
-        <select class="form-control" 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" style="display:none;" > 
-
-<table th:if="${arts != null && arts.size > 0}">
-	<tr> <th colspan="2"  style="padding: 20px; border-bottom: 1px solid red;" ><h3 style="color: #5e9ca0;"> Artifacts </h3></th> </tr>
-	
-	
-	<th:block th:each="art : ${arts}">
-    
-    <tr>
-        <td style="color: #5e9ca0;font-weight: bold;" > Artifact Name:</td>
-        <td style="color: #5e9ca0;" th:text="${art.name}">...</td>
-    </tr>
-    <tr>
-        <td style="color: #5e9ca0;font-weight: bold;" > Type:</td>
-        <td style="color: #5e9ca0;" th:text="${art.type}" > </td>
-    </tr>
-    
-    <tr>
-        <td colspan="2" style="color: #5e9ca0;font-weight: bold; padding: 20px;
-    		border-bottom: 1px solid red;"  > <input id="input-file-${art.name}" type="file" th:name="${art.name}" /> </td>
-
-    </tr>
-    
-  </th:block>
-	
-</table>
-<input class="button button1" type="submit" value="End Activity"/> 
-
-</div>
-
-</div>
-
-<div style="float:left; width:50%; background-color:white; ">
-
-<h3 style="color: #5e9ca0;" th:inline="text">Trace: [[${session.trace.name}]] </h3>
-<h4 style="color: #5e9ca0;" th:inline="text">Started at: [[${session.trace.timestampF}]] </h4>
-
-<table>
-  <th:block th:each="ev : ${session.trace.events}">
-    <tr>
-        <td style="color: #5e9ca0;font-weight: bold;" th:if="${ev.class.name == 'ua.be.wee.model.pt.StartActivityEvent'}" >begin:</td>
-        <td style="color: #5e9ca0;font-weight: bold;" th:if="${ev.class.name == 'ua.be.wee.model.pt.EndActivityEvent'}" >end:</td>
-        <td style="color: #5e9ca0;" colspan="2" th:text="${ev.relatesTo.activity.name}">...</td>
-    </tr>
-    <tr>
-        <td style="color: #5e9ca0;font-weight: bold;" colspan="2" >port:</td>
-        <td style="color: #5e9ca0;"  >[[${ev.relatesTo.name}]]</td>
-    </tr>
-  </th:block>
-</table>
-
-</div>
-    
-
-     
-
-
- 
-
-
-
-
+<main>
+  <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 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>
+        </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.activity.name}]]</span></p>
+        </th:block>
+      </div>
+    </div>
+  </section>
+</main>
 </body>
-
-</html>
+</html>

src/main/resources/templates/endEnactment.html

@@ -1,96 +1,34 @@
 <!DOCTYPE html>
-<html lang="en">
-
+<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="base::layout(~{::title}, ~{::main})">
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>New account</title>
-     <style>
-		.button {
-		  border: none;
-		  color: white;
-		  padding: 16px 32px;
-		  text-align: center;
-		  text-decoration: none;
-		  display: inline-block;
-		  font-size: 16px;
-		  margin: 4px 2px;
-		  transition-duration: 0.4s;
-		  cursor: pointer;
-		}
-		
-		.button1 {
-		  background-color: white; 
-		  color: black; 
-		  border: 2px solid #5e9ca0;
-		}
-		
-		.button1:hover {
-		  background-color: #5e9ca0;
-		  color: white;
-		}		
-	</style>
-	<script type="text/javascript">
-	function showDiv(select){
-	   if(select.value!=1){
-	    document.getElementById('hidden_div').style.display = "block";
-	   } else{
-	    document.getElementById('hidden_div').style.display = "none";
-	   }
-	} 
-</script>
+  <title>Wee! Workflow Enactment Engine</title>
 </head>
-
 <body>
-<div style="width:100%; height: 100px;background-color:white" class="bg-faded">
-  <!-- Main Div -->
-  <h1 style="color: #5e9ca0; text-align: center;">Wee: Workflow Enactment Engine</h1>
-</div>
-
-<div style="float:left;width:50%;" >
-
-<h3 style="color: #5e9ca0;" th:inline="text">Enactment of the Process Model: [[${session.pm.name}]] has ended!</h3>
-
-<a th:href="@{/}" class="button button1" > HOME </a>
-	
-
-
-</div>
-
-<div style="float:left; width:50%; background-color:white; ">
-
-<h3 style="color: #5e9ca0;" th:inline="text">Trace: [[${session.trace.name}]] </h3>
-<h4 style="color: #5e9ca0;" th:inline="text">Started at: [[${session.trace.timestampF}]] </h4>
-
-<table>
-  <th:block th:each="ev : ${session.trace.events}">
-    <tr>
-        <td style="color: #5e9ca0;font-weight: bold;" th:if="${ev.class.name == 'ua.be.wee.model.pt.StartActivityEvent'}" >begin:</td>
-        <td style="color: #5e9ca0;font-weight: bold;" th:if="${ev.class.name == 'ua.be.wee.model.pt.EndActivityEvent'}" >end:</td>
-        <td style="color: #5e9ca0;" colspan="2" th:if="${ev.class.name != 'ua.be.wee.model.pt.EndTraceEvent'}" th:text="${ev.relatesTo.activity.name}">...</td>
-        
-        <td style="color: #5e9ca0;font-weight: bold;" th:if="${ev.class.name == 'ua.be.wee.model.pt.EndTraceEvent'}" >End of Trace at: </td>
-        <td style="color: #5e9ca0;" colspan="2" th:if="${ev.class.name == 'ua.be.wee.model.pt.EndTraceEvent'}" th:text="${ev.timestampF}">...</td>
-    </tr>
-    <tr th:if="${ev.class.name != 'ua.be.wee.model.pt.EndTraceEvent'}">
-        <td style="color: #5e9ca0;font-weight: bold;" colspan="2" >port:</td>
-        <td style="color: #5e9ca0;"  >[[${ev.relatesTo.name}]]</td>
-    </tr>
-  </th:block>
-</table>
-
-</div>
-    
-
-     
-
-
- 
-
-
-
-
+<main>
+  <h1>Wee: Workflow Enactment Engine</h1>
+  <div>
+    <h3 th:inline="text">Enactment of the Process Model: [[${session.pm.name}]] has ended!</h3>
+    <a th:href="@{/}"> HOME </a>
+  </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:if="${ev.class.name != 'ua.be.wee.model.pt.EndTraceEvent'}" th:text="${ev.relatesTo.activity.name}">...</td>
+          <td th:if="${ev.class.name == 'ua.be.wee.model.pt.EndTraceEvent'}">End of Trace at:</td>
+          <td colspan="2" th:if="${ev.class.name == 'ua.be.wee.model.pt.EndTraceEvent'}" th:text="${ev.timestampF}">...</td>
+        </tr>
+        <tr th:if="${ev.class.name != 'ua.be.wee.model.pt.EndTraceEvent'}">
+          <td colspan="2">port:</td>
+          <td>[[${ev.relatesTo.name}]]</td>
+        </tr>
+      </th:block>
+    </table>
+  </div>
+</main>
 </body>
-
 </html>

src/main/resources/templates/index.html

@@ -1,91 +1,32 @@
-<!doctype html>
-<html>
-  <head>
-    <title>Wee! Workflow Enactment Engine</title>
-    <style>
-		.button {
-		  border: none;
-		  color: white;
-		  padding: 16px 32px;
-		  text-align: center;
-		  text-decoration: none;
-		  display: inline-block;
-		  font-size: 16px;
-		  margin: 4px 2px;
-		  transition-duration: 0.4s;
-		  cursor: pointer;
-		}
-		
-		.button1 {
-		  background-color: white; 
-		  color: black; 
-		  border: 2px solid #5e9ca0;
-		}
-		
-		.button1:hover {
-		  background-color: #5e9ca0;
-		  color: white;
-		}
-		body{
-			font-family: Arial, Helvetica, sans-serif;
-			font-size: 13px;
-		}
-		.info, .success, .warning, .error, .validation {
-			border: 1px solid;
-			margin: 10px 0px;
-			padding: 15px 10px 15px 50px;
-			background-repeat: no-repeat;
-			background-position: 10px center;
-		}
-		.info {
-			color: #00529B;
-			background-color: #BDE5F8;
-			background-image: url('https://i.imgur.com/ilgqWuX.png');
-		}
-		.success {
-			color: #4F8A10;
-			background-color: #DFF2BF;
-			background-image: url('https://i.imgur.com/Q9BGTuy.png');
-		}
-		.warning {
-			color: #9F6000;
-			background-color: #FEEFB3;
-			background-image: url('https://i.imgur.com/Z8q7ww7.png');
-		}
-		.error{
-			color: #D8000C;
-			background-color: #FFBABA;
-			background-image: url('https://i.imgur.com/GnyDvKN.png');
-		}
-		.validation{
-			color: #D63301;
-			background-color: #FFCCBA;
-			background-image: url('https://i.imgur.com/GnyDvKN.png');
-		}		
-	</style>
-    
-  </head>
-  <body>
-<h1 style="color: #5e9ca0; text-align: center;">Welcome to Wee! <img src="https://w7.pngwing.com/pngs/276/509/png-transparent-computer-icons-slip-and-fall-running-man-miscellaneous-angle-hand-thumbnail.png" alt="Computer Icons Slip and fall, running man, angle, hand, people png | PNGWing" width="76" height="76" /></h1>
-<h1 style="color: #5e9ca0; text-align: center;">Workflow Enactment Engine</h1>
-<h2 style="color: #2e6c80; text-align: center;">If you want to see wee memes click <a href="https://www.instagram.com/weee.memes/">here!</a></h2>
-<h2 style="color: #2e6c80; text-align: center;">Otherwise, please, indicate the url of your endpoint and let's start enacting your workflow!</h2>
-
-	<table>
-	    <form th:action="@{/pm}" method="post">
-	    <tr >
-	        <td ><h3 style="color: #5e9ca0;">Endpoint:</h3></td>
-	       
-	       
-	        <td>
-	        <input th:if="${hasEndpoint}" type="text" id="endpointURL" name="endpoint" size="50" th:value="${savedEndpoint}" /> 
-	        <input th:unless="${hasEndpoint}" type="text" id="endpointURL" name="endpoint" size="50" />
-	        </td>
-	    </tr>
-	    <tr><td><input class="button button1" type="submit" value="Next"/> </td></tr>   
-	    </form> 
-	</table>
-	<div th:if="${error}" class="error">Error connecting to specified endpoint! </div>
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="base::layout(title=~{::title}, main=~{::main})">
+<head>
+  <title>Wee! Workflow Enactment Engine</title>
+</head>
+<body>
+<main>
+  <section class="pt-6 pb-6 pl-5 pr-5">
+    <h2 class="is-size-3 is-capitalized">Welcome to Wee!</h2>
+    <img class="wee-meme-image" src="../static/img/wee.png" th:src="@{/img/wee.png}" alt="Logo of person slipping"><!--  https://thenounproject.com/icon/slipping-11426/  -->
+    <p>If you want to see wee memes click <a href="https://www.instagram.com/weee.memes/">here!</a></p>
+    <p>Otherwise, please, indicate the url of your endpoint and let's start enacting your workflow!</p>
+    <form class="pt-3" th:action="@{/pm}" method="post">
+      <div class="field has-addons">
+        <div class="control is-expanded">
+          <input class="input" placeholder="SPARQL endpoint URI" th:if="${hasEndpoint}" type="text" id="endpointURL" name="endpoint" th:value="${savedEndpoint}"/>
+          <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-primary">Next</button>
+        </div>
+      </div>
+    </form>
 
+    <div th:if="${error}" class="notification is-danger">
+      <button class="delete"></button>
+      <strong>Error</strong> connecting to specified endpoint!
+    </div>
+  </section>
+</main>
 </body>
 </html>

src/main/resources/templates/pms.html

@@ -1,59 +1,29 @@
 <!DOCTYPE html>
-<html lang="en">
-
+<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="base::layout(~{::title}, ~{::main})">
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Process Model Enactment</title>
-    <style>
-		.button {
-		  border: none;
-		  color: white;
-		  padding: 16px 32px;
-		  text-align: center;
-		  text-decoration: none;
-		  display: inline-block;
-		  font-size: 16px;
-		  margin: 4px 2px;
-		  transition-duration: 0.4s;
-		  cursor: pointer;
-		}
-		
-		.button1 {
-		  background-color: white; 
-		  color: black; 
-		  border: 2px solid #5e9ca0;
-		}
-		
-		.button1:hover {
-		  background-color: #5e9ca0;
-		  color: white;
-		}		
-	</style>
+  <title>Process Model Enactment</title>
 </head>
-
 <body>
-
-<div style="width:100%; height: 100px;background-color:white" class="bg-faded">
-  <!-- Main Div -->
-  <h1 style="color: #5e9ca0; text-align: center;">Wee: Workflow Enactment Engine</h1>
-</div>
-
-<table>
-	<form th:action="@{/enactpm}" method="post">
-    <tr >
-        <td ><h3 style="color: #5e9ca0;">Choose the Process Model to be enacted:</h3></td>
-        <td ><select class="form-control" 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 class="button button1" type="submit" value="Start Enactment"/> </td></tr>  
-</table>
-    
-   
+<main>
+  <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>