| <html xmlns:th="https://www.thymeleaf.org"> |
| <head> |
| <title>APP4MC Cloud Manager - Workflow</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| <link href="webjars/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> |
| <script src="webjars/jquery/3.5.1/jquery.min.js"></script> |
| <script type="module" src="webjars/popper.js/1.16.0/popper.min.js"></script> |
| <script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
| <script type="text/javascript"> |
| function clearWorkflow() { |
| $.ajax({ |
| type: 'POST', |
| url: '/clear', |
| success: function(result) { |
| $('#selectedServicesBlock').load('/selectedServices'); |
| $('#messagesBlock').load('/messages'); |
| $('#errorsBlock').load('/errors'); |
| $('#resultsBlock').load('/results'); |
| } |
| }); |
| } |
| |
| function updateSelectedServices(service) { |
| $.ajax({ |
| type: 'POST', |
| url: '/select/' + service, |
| success: function(result) { |
| $('#selectedServicesBlock').load('/selectedServices'); |
| } |
| }); |
| } |
| |
| function removeSelectedServices(service) { |
| $.ajax({ |
| type: 'POST', |
| url: '/remove/' + service, |
| success: function(result) { |
| $('#selectedServicesBlock').load('/selectedServices'); |
| } |
| }); |
| } |
| |
| $(document).ready(function(){ |
| $('#selectedServicesBlock').load('/selectedServices'); |
| $('#messagesBlock').load('/messages'); |
| $('#errorsBlock').load('/errors'); |
| $('#resultsBlock').load('/results'); |
| }); |
| </script> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="row justify-content-center"> |
| <div class="col text-center" style="height:200px"> |
| <img class="img-fluid" style="height:100%" src="/images/Logo_Panorama.png"/> |
| </div> |
| </div> |
| <div class="row mb-4"> |
| <div class="col text-center"> |
| <div class="content-heading"><h1>Cloud Service Workflow</h1></div> |
| </div> |
| </div> |
| |
| <form method="POST" enctype="multipart/form-data" action="/workflow" th:object="${workflowStatus}"> |
| <div class="form-row mb-3"> |
| <div class="custom-file"> |
| <input type="file" class="custom-file-input" id="customFile" name="file"> |
| <label class="custom-file-label" for="customFile">Select input file to process</label> |
| <script> |
| $('#customFile').on('change',function(){ |
| //get the file name |
| var fileName = $(this).val().split('\\').pop(); |
| //replace the "Choose a file" label |
| $(this).next('.custom-file-label').html(fileName); |
| clearWorkflow(); |
| }) |
| </script> |
| </div> |
| </div> |
| <div class="form-row"> |
| <div class="form-group col"> |
| <label >Select service(s) to process</label> |
| <div id="selectedServicesBlock"> |
| |
| </div> |
| </div> |
| </div> |
| <div class="form-row"> |
| <div class="col text-center"> |
| <input type="submit" value="Start workflow" class="btn btn-primary mt-2" onClick="this.form.submit(); this.disabled=true; this.value='Processing…'; "/> |
| </div> |
| </div> |
| </form> |
| |
| <div id="messagesBlock"> |
| |
| </div> |
| |
| <div id="errorsBlock"> |
| |
| </div> |
| |
| <div id="resultsBlock"> |
| |
| </div> |
| |
| <div class="row"> |
| <div class="col"> |
| <a th:href="@{/}" class="btn btn-dark mb-5">Go back</a> |
| </div> |
| </div> |
| |
| </div> |
| </body> |
| </html> |
