Startsida Utforska Hjälp
Logga in
lucasalbertins
/
wee
Bevaka 2
Stjärnmärk 0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Bläddra i källkod

Restyle index page

Arkadiusz Ryś 2 år sedan
förälder
babcd16659
incheckning
f6f8a56e98
12 ändrade filer med 500 tillägg och 497 borttagningar
Delad Vy Visa Diff Statistik
  1. 0 2
      pom.xml
  2. 25 0
      src/main/resources/static/favicon.svg
  3. BIN
      src/main/resources/static/img/wee.png
  4. 43 0
      src/main/resources/static/main.js
  5. 53 0
      src/main/resources/static/reset.css
  6. 93 0
      src/main/resources/static/style.css
  7. 70 0
      src/main/resources/templates/base.html
  8. 72 126
      src/main/resources/templates/enact.html
  9. 65 138
      src/main/resources/templates/enactEnd.html
  10. 28 90
      src/main/resources/templates/endEnactment.html
  11. 32 88
      src/main/resources/templates/index.html
  12. 19 53
      src/main/resources/templates/pms.html

+ 0 - 2
pom.xml
Visa fil 

@@ -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>

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 25 - 0
src/main/resources/static/favicon.svg


BIN
src/main/resources/static/img/wee.png
Visa fil


+ 43 - 0
src/main/resources/static/main.js
Visa fil 

@@ -0,0 +1,43 @@
 
+function showDiv(select){
 
+    if(select.value!=1){
 
+        document.getElementById('hidden_div').style.display = 'block';
 
+    } else{
 
+        document.getElementById('hidden_div').style.display = 'none';
 
+    }
 
+}
 
+
 
+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);
 
+        });
 
+    });
 
+});

+ 53 - 0
src/main/resources/static/reset.css
Visa fil 

@@ -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;

+}

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 93 - 0
src/main/resources/static/style.css


+ 70 - 0
src/main/resources/templates/base.html
Visa fil 

@@ -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>

+ 72 - 126
src/main/resources/templates/enact.html
Visa fil 

@@ -1,132 +1,78 @@
 
 <!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.act.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>
 
+  <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"/>
 
+      </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>

+ 65 - 138
src/main/resources/templates/enactEnd.html
Visa fil 

@@ -1,143 +1,70 @@
 
 <!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.act.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>
 
+  <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">
 
+    </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>
 
+          <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>
 
+        </th:block>
 
+      </table>
 
+      <input type="submit" value="End Activity"/>
 
+    </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>
 
+</main>
 
 </body>
 
-
 
-</html>
 
+</html>

+ 28 - 90
src/main/resources/templates/endEnactment.html
Visa fil 

@@ -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.act.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.act.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>

+ 32 - 88
src/main/resources/templates/index.html
Visa fil 

@@ -1,91 +1,35 @@
 
-<!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-info">
 
+            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>
 
+    <div ></div>
 
+  </section>
 
+</main>
 
 </body>
 
 </html>

+ 19 - 53
src/main/resources/templates/pms.html
Visa fil 

@@ -1,59 +1,25 @@
 
 <!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>
 
+  <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>
 
+</main>
 
 </body>
 
-
 
 </html>