winery/org.eclipse.winery.repository/src/main/webapp/jsp/entitytypes/properties/propertiesDefinition.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="t" tagdir="/WEB-INF/tags"%>
  17 <%@taglib prefix="ct" tagdir="/WEB-INF/tags/common"%>
  18 <%@taglib prefix="w" uri="http://www.eclipse.org/winery/repository/functions"%>
  19
  20 <%-- createResource of winery-support.js could be used. However, currently selects are not supported --%>
  21 <div class="modal fade" id="addPropertyDiag">
  22         <div class="modal-dialog">
  23                 <div class="modal-content">
  24                         <div class="modal-header">
  25                                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  26                                 <h4 class="modal-title">Add Property</h4>
  27                         </div>
  28                         <div class="modal-body">
  29                                 <form id="addPropertyForm">
  30                                         <div class="form-group">
  31                                                 <label class="control-label" for="propName">Name</label>
  32                                                 <input name="key" class="form-control" id="propName" type="text" />
  33                                         </div>
  34
  35                                         <div class="form-group">
  36                                                 <label class="control-label" for="propType">Type</label>
  37                                                 <select name="type" class="form-control" id="propType">
  38                                                         <c:forEach var="t" items="${it.availablePropertyTypes}">
  39                                                                 <option value="${t}">${t}</option>
  40                                                         </c:forEach>
  41                                                 </select>
  42                                         </div>
  43                                 </form>
  44                         </div>
  45                         <div class="modal-footer">
  46                                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  47                                 <button type="button" class="btn btn-primary" onclick="createProperty();">Add</button>
  48                         </div>
  49                 </div>
  50         </div>
  51 </div>
  52
  53 <script>
  54 function noneClicked() {
  55         disableKVproperties();
  56         clearXSDElementSelection();
  57         clearXSDTypeSelection();
  58         $.ajax({
  59                 url:  "propertiesdefinition/",
  60                 type: 'DELETE',
  61                 async: true,
  62                 error: function(jqXHR, textStatus, errorThrown) {
  63                         vShowAJAXError("Could not remove properties definition", jqXHR, errorThrown);
  64                 }
  65         });
  66 }
  67
  68 function clearXSDElementSelection() {
  69         $("#xsdelement").editable('setValue', "", true);
  70 }
  71
  72 function clearXSDTypeSelection() {
  73         $("#xsdtype").editable('setValue', "", true);
  74 }
  75
  76 $(function(){
  77         $("#xsdelement").editable({
  78                 type: "select",
  79                 url: "post/",
  80                 pk: 1,
  81                 source: ${w:allXSDElementDefinitionsForTypeAheadSelection()}
  82         });
  83         $("#xsdelement").on("click", function(e){
  84                 $("#xsdelementradio").prop("checked", true);
  85         });
  86
  87         $("#xsdtype").editable({
  88                 type: "select",
  89                 source: ${w:allXSDTypeDefinitionsForTypeAheadSelection()}
  90         });
  91         $("#xsdtype").on("click", function(e){
  92                 $("#xsdtyperadio").prop("checked", true);
  93         });
  94
  95         /* make UI more nice: enable click on label */
  96         $("#textnone").on("click", function(e){
  97                 $("#nopropdef").prop("checked", true);
  98                 noneClicked();
  99         });
 100         $("#textxmlelement").on("click", function(e){
 101                 $("#xsdelementradio").prop("checked", true);
 102                 disableKVproperties();
 103                 clearXSDTypeSelection();
 104         });
 105         $("#textxmltype").on("click", function(e){
 106                 $("#xsdtyperadio").prop("checked", true);
 107                 disableKVproperties();
 108                 clearXSDElementSelection();
 109         });
 110         $("#textcustomkv").on("click", function(e){
 111                 $("#customkv").prop("checked", true);
 112                 updateKVpropertiesVisibility();
 113                 setKVPropertiesOnServer();
 114                 clearXSDElementSelection();
 115                 clearXSDTypeSelection();
 116         });
 117
 118         $('#kvPropsTabs a').click(function (e) {
 119                 e.preventDefault();
 120                 $(this).tab('show');
 121         });
 122
 123         $("#addPropertyDiag").on("shown.bs.modal", function() {
 124                 $("#propName").focus();
 125         });
 126 });
 127 </script>
 128
 129 <p>
 130         <%-- TODO: if clicked on the "label" of the input field (i.e., the content of the input tag), the input should be selected. This is not the default at HTML5 - see http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_radio --%>
 131
 132         <input id="nopropdef" type="radio" name="kind" value="none" <c:if test="${not it.isWineryKeyValueProperties and empty it.entityType.propertiesDefinition.element and empty t.entityType.propertiesDefinition.type}">checked="checked"</c:if>><span class="cursorpointer" id="textnone">(none)</span></input>
 133         <br/>
 134
 135         <input id="xsdelementradio" type="radio" name="kind" value="element" <c:if test="${not empty it.entityType.propertiesDefinition.element}">checked="checked"</c:if>><span class="cursorpointer" id="textxmlelement">XML element</span></input>
 136         <a href="#" id="xsdelement" data-url="propertiesdefinition/" data-send="always" data-title="Select XSD Element" data-value="${it.entityType.propertiesDefinition.element}"><c:if test="${not empty it.entityType.propertiesDefinition.element}">${it.entityType.propertiesDefinition.element.localPart}</c:if></a>
 137         <br/>
 138
 139         <input id="xsdtyperadio" type="radio" name="kind" value="type" <c:if test="${not empty it.entityType.propertiesDefinition.type}">checked="checked"</c:if>><span class="cursorpointer" id="textxmltype">XML type</span></input>
 140         <a href="#" id="xsdtype" data-url="propertiesdefinition/" data-send="always" data-title="Select XSD Type" data-value="${it.entityType.propertiesDefinition.type}"><c:if test="${not empty it.entityType.propertiesDefinition.type}">${it.entityType.propertiesDefinition.type.localPart}</c:if></a>
 141         <br/>
 142
 143
 144         <input id="customkv" type="radio" name="kind" value="KV" <c:if test="${it.isWineryKeyValueProperties and not it.isWineryKeyValuePropertiesDerivedFromXSD}">checked="checked"</c:if>><span class="cursorpointer" id="textcustomkv">Custom key/value pairs</span></input>
 145 </p>
 146
 147 <div id="Properties" style="display:none; margin-left:20px;">
 148         <ul class="nav nav-tabs" id="kvPropsTabs">
 149                 <li class="active"><a href="#kvProps">Properties</a></li>
 150                 <li><a href="#wrapper">Wrapping</a></li>
 151         </ul>
 152
 153         <div class="tab-content">
 154                 <div class="tab-pane active" id="kvProps">
 155
 156                         <button class="rightbutton btn btn-danger btn-xs" type="button" onclick="deleteOnServerAndInTable(propertiesTableInfo, 'Property', 'propertiesdefinition/winery/list/');">Remove</button>
 157                         <button class="rightbutton btn btn-primary btn-xs" type="button" onclick="$('#addPropertyDiag').modal('show');">Add</button>
 158
 159                         <table cellpadding="0" cellspacing="0" border="0" class="display" id="propertiesTable">
 160                                 <thead>
 161                                         <tr>
 162                                                 <th>Name</th>
 163                                                 <th>Type</th>
 164                                         </tr>
 165                                 </thead>
 166                                 <tbody>
 167                                         <c:if test="${it.isWineryKeyValueProperties}">
 168                                                 <c:forEach var="t" items="${it.propertyDefinitionKVList}">
 169                                                         <tr>
 170                                                                 <td>${t.key}</td>
 171                                                                 <%-- FIXME: t.type is the short type, but we need the full type. Currently, there is no way to get the full type for a short type --%>
 172                                                                 <td>${t.type}</td>
 173                                                         </tr>
 174                                                 </c:forEach>
 175                                         </c:if>
 176                                 </tbody>
 177                         </table>
 178                 </div>
 179
 180                 <div class="tab-pane" id="wrapper">
 181                         <form id="wrapperelementform" enctype="multipart/form-data">
 182                                 <fieldset>
 183                                         <div style="width:400px;">
 184                                                 <div class="form-group">
 185                                                         <label for="wrapperelement_name">Name of Wrapper Element</label>
 186                                                         <a href="#" class="form-control" id="wrapperelement_name" data-url="propertiesdefinition/winery/elementname" data-send="always" data-title="Local Name" data-type="text" data-value="${it.elementName}"></a>
 187                                                 </div>
 188                                                 <t:namespaceChooser idOfInput="wrapperelement_ns" selected="${it.namespace}" allNamespaces="${w:allNamespaces()}"></t:namespaceChooser>
 189                                         </div>
 190                                 </fieldset>
 191                         </form>
 192                 </div>
 193         </div>
 194 </div>
 195
 196 <script>
 197 function disableKVproperties() {
 198         $("#Properties").hide();
 199 }
 200
 201 function enableKVproperties() {
 202         $("#Properties").show();
 203 }
 204
 205 function updateKVpropertiesVisibility() {
 206         if ($("input[name='kind']:checked").val() == "KV") {
 207                 enableKVproperties();
 208         } else {
 209                 disableKVproperties();
 210         }
 211 }
 212
 213 function setKVPropertiesOnServer() {
 214         $.ajax({
 215                 url: "propertiesdefinition/winery/",
 216                 type: "POST",
 217                 async: true,
 218                 error: function(jqXHR, textStatus, errorThrown) {
 219                         vShowAJAXError("Could change to custom key/value pairs", jqXHR, errorThrown);
 220                 }
 221         });
 222 }
 223
 224 $(function() {
 225         // put change function on all inputs to get notified of any change by the user
 226         $("input[name='kind']").on("change", function(e) {
 227                 // we do not POST something to the server as only concrete values really trigger a change on server side
 228                 var target = e.currentTarget.value;
 229                 if (target == "none") {
 230                         noneClicked();
 231                 } else if (target == "element") {
 232                         disableKVproperties();
 233                         clearXSDTypeSelection();
 234                 } else if (target == "type") {
 235                         disableKVproperties();
 236                         clearXSDElementSelection();
 237                         enableKVproperties();
 238                 } else if (target == "KV") {
 239                         <c:if test="${not it.isWineryKeyValuePropertiesDerivedFromXSD}">
 240                         <%-- only empty the k/v properties if not derived from XSD--%>
 241                         setKVPropertiesOnServer();
 242                         </c:if>
 243                         clearXSDElementSelection();
 244                         clearXSDTypeSelection();
 245                 } else {
 246                         vShowError("UI not consistent to code");
 247                 }
 248         });
 249
 250         // initialization - display the custom box to enter k/vs only if KV is selected
 251         updateKVpropertiesVisibility();
 252
 253         $("#wrapperelement_name").editable({
 254                 ajaxOptions: {
 255                         type: 'put'
 256                 },
 257                 params: function(params) {
 258                         // adjust params according to Winery's expectations
 259                         delete params.pk;
 260                         params.name = params.value;
 261                         delete params.value;
 262                         return params;
 263                 }
 264         }).on("save", function(e, params) {
 265                 vShowSuccess("Successfully updated local name of wrapper element");
 266         });
 267
 268         $("#wrapperelement_ns").on("change", function(e) {
 269                 $.ajax({
 270                         url: "propertiesdefinition/winery/namespace",
 271                         type: "PUT",
 272                         async: true,
 273                         contentType: "text/plain",
 274                         processData: false,
 275                         data: e.val,
 276                         error: function(jqXHR, textStatus, errorThrown) {
 277                                 vShowAJAXError("Could not update namespace", jqXHR, errorThrown);
 278                         },
 279                         success: function(data, textStatus, jqXHR) {
 280                                 vShowSuccess("Successfully updated namespace");
 281                         }
 282                 });
 283         });
 284 });
 285
 286 var propertiesTableInfo = {
 287         id: '#propertiesTable'
 288 };
 289
 290 require(["winery-support"], function(ws) {
 291         ws.initTable(propertiesTableInfo);
 292 });
 293
 294 function createProperty() {
 295         var data = {
 296                 key: $("#propName").val(),
 297                 type: $('#propType :selected').text()
 298         }
 299         $.ajax({
 300                 url: "propertiesdefinition/winery/list/",
 301                 type: "POST",
 302                 async: true,
 303                 contentType: "application/json",
 304                 processData: false,
 305                 data: JSON.stringify(data),
 306                 error: function(jqXHR, textStatus, errorThrown) {
 307                         vShowAJAXError("Could not add property", jqXHR, errorThrown);
 308                 },
 309                 success: function(data, textStatus, jqXHR) {
 310                         var name = $('#propName').val();
 311                         var type = $('#propType :selected').text();
 312                         var dataToAdd = [name, type];
 313                         propertiesTableInfo.table.fnAddData(dataToAdd);
 314                         vShowSuccess("Property successfully added");
 315                         $('#addPropertyDiag').modal('hide');
 316                 }
 317         });
 318 }
 319 </script>
 320