gerrit.onap Code Review - vfc/nfvo/wfengine.git/blob

   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  *******************************************************************************/
  13 --%>
  14 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  15
  16 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  17 <%@taglib prefix="o" tagdir="/WEB-INF/tags/common/orioneditor"%>
  18 <%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
  19 <%@taglib prefix="w" uri="http://www.eclipse.org/winery/repository/functions"%>
  20
  21 <%-- Upload functionality inspired by plans.jsp. That code could be generalized somehow in a .tag file --%>
  22
  23 <ul class="nav nav-tabs" id="myTab">
  24         <li class="active"><a href="#description">Description</a></li>
  25         <li><a href="#images">Images</a></li>
  26         <li><a href="#options">Options</a></li>
  27         <li><a href="#xml" id="showXMLTab">XML</a></li>
  28 </ul>
  29
  30 <div class="tab-content">
  31
  32         <div class="tab-pane active" id="description">
  33                 <div class="form-group">
  34                         <label class="label-form">Name</label>
  35                         <a href="#" class="form-control" data-send="always" id="displayName" data-url="selfserviceportal/displayname" data-tile="Enter Display Name">${it.application.displayName}</a>
  36                 </div>
  37
  38                 <div class="form-group">
  39                         <label class="label-form">Description</label>
  40                         <div class="form-control" id="applicationDescriptionDiv">${it.application.description}</div>
  41                 </div>
  42         </div>
  43
  44         <div class="tab-pane" id="images">
  45
  46                 <t:imageUpload
  47                 label="Icon"
  48                 URL="selfserviceportal/icon.jpg"
  49                 id="upIcon"
  50                 width="16px"
  51                 accept="image/*"/>
  52
  53                 <t:imageUpload
  54                 label="Preview"
  55                 URL="selfserviceportal/image.jpg"
  56                 id="upImage"
  57                 width="100px"
  58                 accept="image/*"/>
  59
  60         </div>
  61
  62         <div class="tab-pane" id="options">
  63                 <button class="rightbutton btn btn-xs btn-danger" name="remove" onclick="deleteOnServerAndInTable(optionsTableInfo, 'Option', 'selfserviceportal/options/', 0, 1);">Remove</button>
  64                 <button class="rightbutton btn btn-xs btn-info" name="add" onclick="$('#addOptionDiag').modal('show');">Add</button>
  65                 <!--  <button class="rightbutton btn btn-xs btn-default" name="edit" onclick="openOptionEditor();">Edit</button> -->
  66
  67                 <table id="optionsTable">
  68                         <thead>
  69                                 <tr>
  70                                         <th>Id</th>
  71                                         <th>Name</th>
  72                                         <th>Icon</th>
  73                                         <th>Plan Service Name</th>
  74                                 </tr>
  75                         </thead>
  76                         <tbody>
  77                                 <c:if test="${not empty it.application}">
  78                                         <c:forEach var="option" items="${it.application.options.option}">
  79                                                 <tr>
  80                                                         <td>${option.id}</td>
  81                                                         <td>${option.name}</td>
  82                                                         <td><img src="selfserviceportal/options/${w:URLencode(option.id)}/icon.jpg" style="width:50px;"></td>
  83                                                         <td>${option.planServiceName}</td>
  84                                                 </tr>
  85                                         </c:forEach>
  86                                 </c:if>
  87                         </tbody>
  88                 </table>
  89         </div>
  90
  91         <div class="tab-pane" id="xml">
  92                 <o:orioneditorarea areaid="XML" url="selfserviceportal/" reloadAfterSuccess="true">${it.applicationAsXMLStringEncoded}</o:orioneditorarea>
  93         </div>
  94
  95 </div>
  96
  97 <script>
  98 function letUserChooseAFile() {
  99         $('#fileInput').trigger('click');
 100         $('#chooseBtn').focus();
 101 }
 102
 103 $('#showXMLTab').on('shown.bs.tab', function (e) {
 104         window.winery.orionareas['XML'].fixEditorHeight();
 105 });
 106 </script>
 107
 108 <div class="modal fade" id="addOptionDiag">
 109         <div class="modal-dialog">
 110         <div class="modal-content">
 111                 <div class="modal-header">
 112                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 113                         <h4 class="modal-title">Add Option</h4>
 114                 </div>
 115                 <div class="modal-body">
 116                         <form id="addOptionForm" enctype="multipart/form-data" action="selfserviceportal/options/" method="post">
 117                                 <div class="form-group">
 118                                         <label class="control-label">Name</label>
 119                                         <input name="name" type="text" class="form-control" required="required">
 120                                 </div>
 121
 122                                 <div class="form-group">
 123                                         <label class="control-label">Description</label>
 124                                         <textarea id="optionDescription" name="description" class="form-control" required="required"></textarea>
 125                                 </div>
 126
 127                                 <div class="form-group">
 128                                         <label class="control-label" for="fileDiv">Icon</label>
 129                                         <div style="display: block; width: 100%" id="iconDiv">
 130                                                 <input id="fileInput" name="file" type="file" style="display:none" accept="image/*">
 131                                                 <input name="fileText" id="fileText" type="text" class="form-control" style="width:300px; display:inline;" onclick="letUserChooseAFile();" required="required">
 132                                                 <button type="button" id="chooseBtn" class="btn btn-default btn-xs" onclick="letUserChooseAFile();">Choose</button>
 133                                         </div>
 134                                 </div>
 135
 136                                 <div class="form-group">
 137                                         <label class="control-label">Plan Service Name</label>
 138                                         <input name="planServiceName" type="text" class="form-control" required="required">
 139                                 </div>
 140
 141                                 <div class="form-group">
 142                                         <label class="control-label">Plan Input Message</label>
 143                                         <textarea name="planInputMessage" class="form-control" required="required" rows="20">&lt;soapenv:Envelope xmlns:soapenv=&quot;http://schemas.xmlsoap.org/soap/envelope/&quot;&gt;
 144 &lt;soapenv:Header/&gt;
 145 &lt;soapenv:Body&gt;
 146 &lt;/soapenv:Body&gt;
 147 &lt;/soapenv:Envelope&gt;</textarea>
 148                                 </div>
 149
 150                         </form>
 151                 </div>
 152                 <div class="modal-footer">
 153                         <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
 154                         <button type="button" class="btn btn-primary" data-loading-text="Uploading..." id="addOptionBtn">Add</button>
 155                 </div>
 156         </div>
 157         </div>
 158 </div>
 159
 160
 161 <script>
 162 $("#displayName").editable({
 163         ajaxOptions: {type: "PUT"},
 164         success: function() {
 165                 vShowSuccess("Successfully updated display name");
 166         },
 167         error: function(response) {
 168                 vShowError("Could not update display name: " + response.status + " " + response.responseText);
 169         }
 170 });
 171
 172 $("#applicationDescriptionDiv").editable({
 173         type: "wysihtml5",
 174         send: "always",
 175         url: "selfserviceportal/description",
 176         ajaxOptions: {type: "PUT"},
 177         success: function() {
 178                 vShowSuccess("Successfully updated description");
 179         },
 180         error: function(response) {
 181                 vShowError("Could not update description: " + response.status + " " + response.responseText);
 182         }
 183 });
 184
 185 $("#optionDescription").wysihtml5();
 186
 187 var optionsTableInfo = {
 188         id: '#optionsTable'
 189 };
 190
 191 $('#myTab a').click(function (e) {
 192         e.preventDefault();
 193         $(this).tab('show');
 194 });
 195
 196 $(function() {
 197         // initialize table and hide first column
 198         require(["winery-support"], function(ws) {
 199                 ws.initTable(optionsTableInfo, {
 200                         "aoColumnDefs": [
 201                                 { "bSearchable": false, "bVisible": false, "aTargets": [ 0 ] }
 202                         ]
 203                 });
 204         });
 205
 206         $("#addOptionDiag").on("hidden.bs.modal", function() {
 207                 // we currently do not send data back from the server
 208                 // we emulate the AJAX refresh by a reaload
 209                 doTheTabSelection(function() {
 210                         $('#myTab a[href="#options"]').tab('show');
 211                 });
 212         });
 213 });
 214
 215 function createOption(data) {
 216         if (highlightRequiredFields()) {
 217                 vShowError("Please fill out all required fields");
 218                 return;
 219         }
 220         data.submit();
 221 }
 222
 223 requirejs(["jquery.fileupload"], function(){
 224         $('#addOptionForm').fileupload({
 225                 // dropping should only be available in the addOptionDialog. This, however, does not work correctly
 226                 dropZone: $("#addOptionDiag")
 227         }).bind("fileuploadadd", function(e, data) {
 228                 $.each(data.files, function (index, file) {
 229                         $("#fileText").val(file.name);
 230                 });
 231                 $("#addOptionBtn").off("click");
 232                 $("#addOptionBtn").on("click", function() {
 233                         createOption(data);
 234                 });
 235         }).bind("fileuploadstart", function(e) {
 236                 $("#addOptionBtn").button("loading");
 237         }).bind('fileuploadfail', function(e, data) {
 238                 vShowAJAXError("Could not add option", data.jqXHR, data.errorThrown);
 239                 $("#addOptionBtn").button("reset");
 240         }).bind('fileuploaddone', function(e, data) {
 241                 vShowSuccess("Option created successfully.");
 242
 243                 // reset the add button
 244                 $("#addOptionBtn").button("reset");
 245                 // do not allow submission of the old files on a click if the dialog is opened another time
 246                 $("#addOptionBtn").off("click");
 247
 248                 // TODO: add data
 249                 //embeddedPlansTableInfo.table.fnAddData(data.result.tableData);
 250                 // current workaround: event on hidden.bs.modal
 251
 252                 $('#addOptionDiag').modal('hide');
 253         });
 254 });
 255
 256 </script>