winery/org.eclipse.winery.topologymodeler/src/main/webapp/WEB-INF/tags/templates/nodetemplates/propertiesOfOneNodeTemplate.tag

   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  *    Uwe Breitenbücher - initial API and implementation and/or initial documentation
  12  *    Oliver Kopp - improvements to fit updated index.jsp
  13  *    Yves Schubert - switch to bootstrap 3
  14  *******************************************************************************/
  15 --%>
  16
  17 <%@tag language="java" pageEncoding="UTF-8" description="Renders the properies of one node tempate on the right"%>
  18
  19 <%@attribute name="repositoryURL" required="true" type="java.lang.String" description="The repository URL"%>
  20
  21 <%@taglib prefix="ct" tagdir="/WEB-INF/tags/common" %>
  22
  23
  24 <link rel="stylesheet" href="css/propertiesview.css" />
  25
  26 <div id="NTPropertiesView" class="propertiesView" style="display: none;">
  27
  28         <div id="nodeTemplateInformationSection">
  29                 <%--
  30                         If this is layouted strangely, maybe a <form> wrapper has to be added
  31                         Be aware that nested buttons then trigger a submission of the form (-> ct:spinnerwithinphty)
  32                 --%>
  33                 <fieldset>
  34                         <div class="form-group">
  35                                 <label for="nodetemplateid">Id</label>
  36                                 <input id="nodetemplateid" disabled="disabled" class="form-control"></input>
  37                         </div>
  38                         <div class="form-group">
  39                                 <label for="nodetemplatename" class="control-label">Name</label>
  40                                 <input id="nodetemplatename" name="name" class="form-control"/>
  41                         </div>
  42                         <div class="form-group">
  43                                 <label for="nodetemplateType">Type</label>
  44                                 <%-- filled by fillInformationSection --%>
  45                                 <a id="nodetemplateType" target="_blank" href="#" class="form-control"></a>
  46                         </div>
  47                         <ct:spinnerwithinphty min="0" width="10" changedfunction="minInstancesChanged" label="min" id="minInstances" />
  48                         <ct:spinnerwithinphty min="1" width="10" changedfunction="maxInstancesChanged" label="max" id="maxInstances" withinphty="true" />
  49                 </fieldset>
  50         </div>
  51
  52 </div>
  53
  54 <script>
  55         function minInstancesChanged(event, ui) {
  56                 var val;
  57                 if (ui === undefined) {
  58                         val = $("#minInstances").val();
  59                 } else {
  60                         val = ui.value;
  61                 }
  62                 ntMin.html(val);
  63         }
  64
  65         function maxInstancesChanged(event, ui) {
  66                 var val;
  67                 if (ui === undefined) {
  68                         val = $("#maxInstances").val();
  69                 } else {
  70                         val = ui.value;
  71                 }
  72                 ntMax.html(val);
  73         }
  74
  75         // the name input field of the properties section
  76         var nameInput = $("#nodetemplatename");
  77
  78         // the min/max fields of the currently selected node template
  79         var ntMin;
  80         var ntMax;
  81
  82         function fillInformationSection(nodeTemplate) {
  83                 require(["winery-support-common"], function(wsc) {
  84                         // currently doesn't help for a delayed update
  85                         //informationSection.slideDown();
  86
  87                         $("#nodetemplateid").val(nodeTemplate.attr("id"));
  88
  89                         var headerContainer = nodeTemplate.children("div.headerContainer");
  90
  91                         // copy name
  92                         var nameField = headerContainer.children("div.name");
  93                         var name = nameField.text();
  94                         nameInput.val(name);
  95
  96                         // copy type
  97                         var typeQName = headerContainer.children("span.typeQName").text();
  98                         var href = wsc.makeNodeTypeURLFromQName("${repositoryURL}", typeQName);
  99                         var type = headerContainer.children("div.type").text();
 100                         $("#nodetemplateType").attr("href", href).text(type);
 101
 102                         // we could use jQuery-typing, but it is not possible to replace key events there
 103                         nameInput.off("keyup");
 104                         nameInput.on("keyup", function() {
 105                                 nameField.text($(this).val());
 106                         });
 107
 108                         // handling of min and max
 109                         ntMin = nodeTemplate.children(".headerContainer").children(".minMaxInstances").children(".minInstances");
 110                         $("#minInstances").val(ntMin.text());
 111                         ntMax = nodeTemplate.children(".headerContainer").children(".minMaxInstances").children(".maxInstances");
 112                         $("#maxInstances").val(ntMax.text());
 113                 });
 114         }
 115
 116         function showViewOnTheRight() {
 117                 $("#NTPropertiesView").fadeIn();
 118         }
 119
 120         function hideViewOnTheRight() {
 121                 $("#NTPropertiesView").fadeOut();
 122         }
 123
 124 $(function() {
 125         winery.events.register(
 126                 winery.events.name.SELECTION_CHANGED,
 127                 function() {
 128                         // min/max instances do not lost focus if other shape is clicked
 129                         // workaround
 130                         if ($("#minInstances").is(":focus")) {
 131                                 minInstancesChanged();
 132                         }
 133                         if ($("#maxInstances").is(":focus")) {
 134                                 maxInstancesChanged();
 135                         }
 136                         var nodeTemplate = $("div.NodeTemplateShape.selected");
 137                         var numSelected = nodeTemplate.length;
 138                         if (numSelected == 1) {
 139                                 fillInformationSection(nodeTemplate);
 140                                 showViewOnTheRight();
 141                         } else {
 142                                 hideViewOnTheRight();
 143                         }
 144                 }
 145         );
 146 });
 147 </script>