winery/org.eclipse.winery.repository/src/main/webapp/jsp/servicetemplates/plans/plans.jsp

   1 <%--
   2 /*******************************************************************************
   3  * Copyright (c) 2012-2013 University of Stuttgart.
   4  * All rights reserved. This program and the accompanying materials
   5  * are made available under the terms of the Eclipse Public License v1.0
   6  * and the Apache License 2.0 which both accompany this distribution,
   7  * and are available at http://www.eclipse.org/legal/epl-v10.html
   8  * and http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Contributors:
  11  *    Oliver Kopp - initial API and implementation and/or initial documentation
  12  *    Yves Schubert - switch to bootstrap 3
  13  *******************************************************************************/
  14 --%>
  15 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  16 <%@taglib prefix="p" tagdir="/WEB-INF/tags/parameters" %>
  17 <%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
  18
  19 <script>
  20
  21 var embeddedPlansTableInfo = {
  22         id: '#embeddedPlansTable'
  23 };
  24
  25 var linkedPlansTableInfo = {
  26                 id: '#linkedPlansTable'
  27 };
  28
  29 $(function() {
  30         require(["winery-support"], function(ws) {
  31                 ws.initTable(embeddedPlansTableInfo, {
  32                         "aoColumns": [
  33                                                         { "bVisible": false, "bSearchable": false}, // ID column
  34                                                         { "sTitle": "Precondition" },
  35                                                         { "sTitle": "Name" },
  36                                                         { "sTitle": "Type" },
  37                                                         { "sTitle": "Language" }
  38                                                 ],
  39                         "aaData" : ${it.embeddedPlansTableData}
  40                 });
  41
  42                 ws.initTable(linkedPlansTableInfo, {
  43                         "aoColumns": [
  44                                                         { "bVisible": false, "bSearchable": false}, // ID column
  45                                                         { "sTitle": "Precondition" },
  46                                                         { "sTitle": "Name" },
  47                                                         { "sTitle": "Type" },
  48                                                         { "sTitle": "Language" },
  49                                                         { "sTitle": "Reference" }
  50                                                 ],
  51                         "aaData" : ${it.linkedPlansTableData}
  52                 });
  53         });
  54 });
  55
  56 function editIOParameters() {
  57         if (embeddedPlansTableInfo.selectedRow) {
  58                 require(["winery-support"], function(ws) {
  59                         if (ws.isEmptyTable(embeddedPlansTableInfo)) {
  60                                 vShowError("No plans available");
  61                                 return;
  62                         }
  63                         updateInputAndOutputParameters(getPlanURL());
  64                         $("#editParametersDiag").modal("show");
  65                 });
  66         } else {
  67                 vShowError("No plan selected");
  68         }
  69 }
  70         function createPlan(data) {
  71                 if (highlightRequiredFields()) {
  72                         vShowError("Please fill out all required fields");
  73                         return;
  74                 }
  75                 data.submit();
  76         }
  77
  78         function getPlanURL() {
  79                 var id = embeddedPlansTableInfo.table.fnGetData(embeddedPlansTableInfo.selectedRow, 0);
  80                 return "plans/" + encodeURIComponent(id) + "/";
  81         }
  82
  83         function openPlanEditor() {
  84                 if (embeddedPlansTableInfo.selectedRow) {
  85                         var isEmptyTable = embeddedPlansTableInfo.table.children("tbody").children("tr").first().children("td").hasClass("dataTables_empty");
  86                         if (isEmptyTable) {
  87                                 vShowError("No plans available");
  88                                 return;
  89                         }
  90                         window.open(getPlanURL() + "?edit", "_blank");
  91                 } else {
  92                         vShowError("No plan selected");
  93                 }
  94         }
  95
  96         function letUserChooseAPlan() {
  97                 $('#planFileInput').trigger('click');
  98                 $('#planChooseBtn').focus();
  99         }
 100
 101         requirejs(["jquery.fileupload"], function(){
 102                 $('#addPlanForm').fileupload().bind("fileuploadadd", function(e, data) {
 103                         $.each(data.files, function (index, file) {
 104                                 $("#planFileText").val(file.name);
 105                         });
 106                         $("#addPlanBtnFUP").off("click");
 107                         $("#addPlanBtnFUP").on("click", function() {
 108                                 createPlan(data);
 109                         });
 110                 }).bind("fileuploadstart", function(e) {
 111                         $("#addPlanBtnFUP").button("loading");
 112                 }).bind('fileuploadfail', function(e, data) {
 113                         vShowAJAXError("Could not add plan", data.jqXHR, data.errorThrown);
 114                         $("#addPlanBtnFUP").button("reset");
 115                 }).bind('fileuploaddone', function(e, data) {
 116                         vShowSuccess("Plan created successfully");
 117
 118                         // reset the add button
 119                         $("#addPlanBtnFUP").button("reset");
 120                         // do not allow submission of the old files on a click if the dialog is opened another time
 121                         $("#addPlanBtnFUP").off("click");
 122
 123                         // TODO: if id is already present in table, delete row in table
 124
 125                         embeddedPlansTableInfo.table.fnAddData(data.result.tableData);
 126
 127                         $('#addPlanDiag').modal('hide');
 128                 });
 129         });
 130 </script>
 131
 132 <div class="modal fade" id="addPlanDiag">
 133         <div class="modal-dialog">
 134         <div class="modal-content">
 135                 <div class="modal-header">
 136                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 137                         <h4 class="modal-title">Add Plan</h4>
 138                 </div>
 139                 <div class="modal-body">
 140                         <form id="addPlanForm" enctype="multipart/form-data" action="plans/" method="post">
 141                                 <div class="form-group">
 142                                         <label class="control-label">Name</label>
 143                                         <input name="planName" id="planName" type="text" class="form-control" required="required">
 144                                 </div>
 145
 146                                 <t:typeswithshortnameasselect label="Type" type="plantype" selectname="planType" typesWithShortNames="${it.planTypes}">
 147                                 </t:typeswithshortnameasselect>
 148
 149                                 <t:typeswithshortnameasselect label="Language" type="planlanguage" selectname="planLanguage" typesWithShortNames="${it.planLanguages}">
 150                                 </t:typeswithshortnameasselect>
 151
 152                                 <div class="form-group" id="fileDiv">
 153                                         <label class="control-label" for="planFileDiv">Archive</label>
 154                                         <div style="display: block; width: 100%" id="planFileDiv">
 155                                                 <input id="planFileInput" name="file" type="file" style="display:none">
 156                                                 <input name="fileText" id="planFileText" type="text" class="form-control" style="width:300px; display:inline;" onclick="letUserChooseAPlan();" required="required">
 157                                                 <button type="button" id="planChooseBtn" class="btn btn-default btn-xs" onclick="letUserChooseAPlan();">Choose</button>
 158                                         </div>
 159                                 </div>
 160                         </form>
 161                 </div>
 162                 <div class="modal-footer">
 163                         <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
 164                         <button type="button" class="btn btn-primary" data-loading-text="Uploading..." id="addPlanBtnFUP">Add</button>
 165                         <button type="button" class="btn btn-primary" style="display:none;" id="addPlanBtnBPMN4TOSCA">Add</button>
 166                 </div>
 167         </div>
 168         </div>
 169 </div>
 170
 171 <script>
 172 $("#planLanguage").on("change", function(e) {
 173         var lang = $("#planLanguage").val();
 174         if (lang == "http://www.opentosca.org/bpmn4tosca") {
 175                 $("#fileDiv").hide();
 176                 $("#addPlanBtnFUP").hide();
 177                 $("#addPlanBtnBPMN4TOSCA").show();
 178         } else {
 179                 $("#fileDiv").show();
 180                 $("#addPlanBtnFUP").show();
 181                 $("#addPlanBtnBPMN4TOSCA").hide();
 182         }
 183 });
 184
 185 $("#addPlanBtnBPMN4TOSCA").on("click", function() {
 186         var data = new FormData();
 187         data.append("planName", $("#planName").val());
 188         data.append("planType", $("#planType").val());
 189         data.append("planLanguage", $("#planLanguage").val());
 190
 191         $.ajax({
 192                 url: "plans/",
 193                 type: "POST",
 194                 async: false,
 195                 contentType: false, // jQuery automatically sets multipart/form-data; boundary=...
 196                 data: data,
 197                 processData: false,
 198                 error: function(jqXHR, textStatus, errorThrown) {
 199                         vShowAJAXError("Could not add BPMN4TOSCSA plan", jqXHR, errorThrown);
 200                 },
 201                 success: function(data, textStatus, jqXHR) {
 202                         //typesTableInfo.table.fnAddData([$('#shortname').val(), $('#type').val()]);
 203                         $('#addPlanDiag').modal('hide');
 204                         vShowSuccess("Successfully added plan. Please refresh the page.");
 205                 }
 206         });
 207
 208 });
 209 </script>
 210
 211 <p:parametersJS></p:parametersJS>
 212
 213 <div class="modal fade" id="editParametersDiag">
 214         <div class="modal-dialog">
 215                 <div class="modal-content">
 216                         <div class="modal-header">
 217                                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 218                                 <h4 class="modal-title">Edit Parameters</h4>
 219                         </div>
 220                         <div class="modal-body">
 221                                 <p:parametersInput baseURL="getPlanURL()"></p:parametersInput>
 222                                 <p:parametersOutput baseURL="getPlanURL()"></p:parametersOutput>
 223                         </div>
 224                         <div class="modal-footer">
 225                                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 226                         </div>
 227                 </div>
 228         </div>
 229 </div>
 230
 231         <div id="managementPlans">
 232                 <h4>Embedded Plans</h4>
 233                 <button class="rightbutton btn btn-xs btn-danger" onclick="deleteOnServerAndInTable(embeddedPlansTableInfo, 'Plan', 'plans/', 0, 2);">Remove</button>
 234                 <button class="rightbutton btn btn-xs btn-info" onclick="$('#addPlanDiag').modal('show');">Add</button>
 235                 <button class="rightbutton btn btn-xs btn-default" onclick="editIOParameters();">I/O Parameters</button>
 236                 <button class="rightbutton btn btn-xs btn-primary" onclick="openPlanEditor();">Edit</button>
 237 <%
 238 if (org.eclipse.winery.repository.Prefs.INSTANCE.isPlanBuilderAvailable()) {
 239 %>
 240         <script>
 241         function generateBuildPlan() {
 242                 $("#btnGenerateBuildPlan").button('loading');
 243                 $.ajax({
 244                         url: 'topologytemplate/',
 245                         // targeting method triggerGenerateBuildPlan in TopologyTemplateResource.java
 246                         dataType: "text"
 247                 }).fail(function(jqXHR, textStatus, errorThrown) {
 248                         $("#btnGenerateBuildPlan").button('reset');
 249                         vShowAJAXError("Could not trigger plan generation.", jqXHR, errorThrown);
 250                 }).done(function(data, textStatus, jqXHR) {
 251                         $("#btnGenerateBuildPlan").button('reset');
 252                         var resultText = "Successfully generated build plan. Please refresh the page.";
 253                         vShowSuccess(resultText);
 254                 });
 255         }
 256         </script>
 257         <button id="btnGenerateBuildPlan" class="btn btn-xs btn-default" data-loading-text="Generating..." onclick="generateBuildPlan();">Generate Build Plan</button>
 258 <%
 259 }
 260 %>
 261                 <table cellpadding="0" cellspacing="0" border="0" class="display" id="embeddedPlansTable"></table>
 262
 263                 <br /><br />
 264                 <h4>Linked Plans</h4>
 265                 <table cellpadding="0" cellspacing="0" border="0" class="display" id="linkedPlansTable"></table>
 266         </div>