winery/org.eclipse.winery.topologymodeler/src/main/webapp/WEB-INF/tags/templates/relationshiptemplates/propertiesOfOneRelationshipTemplate.tag

   1 <%--
   2 /*******************************************************************************
   3  * Copyright (c) 2012-2014 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 <%@tag language="java" pageEncoding="UTF-8" description="Renders the properies of one relationship tempate on the right"%>
  15
  16 <%@attribute name="relationshipTypes" required="true" type="java.util.Collection" %>
  17 <%@attribute name="repositoryURL" required="true" type="java.lang.String" description="The repository URL"%>
  18
  19 <link rel="stylesheet" href="css/propertiesview.css" />
  20
  21 <%@taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>
  22 <%@taglib prefix="props" tagdir="/WEB-INF/tags/common/templates" %>
  23 <%@taglib prefix="wc" uri="http://www.eclipse.org/winery/functions" %>
  24
  25 <div id="RTPropertiesView" class="propertiesView" style="display: none;">
  26
  27         <div id="relationshipTemplateInformationSection">
  28                 <fieldset>
  29                         <div class="form-group">
  30                                 <label for="relationshiptemplateid">Id</label>
  31                                 <input id="relationshiptemplateid" disabled="disabled" class="form-control"></input>
  32                         </div>
  33                         <div class="form-group">
  34                                 <label for="relationshiptemplatename" class="control-label">Name</label>
  35                                 <a href="#" id="relationshiptemplatename" data-title="Name" data-type="text" class="form-control"></a>
  36                         </div>
  37                         <div class="form-group">
  38                                 <label for="relationshipType">Type</label>
  39                                 <%-- filled by showRTViewOnTheRight --%>
  40                                 <a id="relationshipType" target="_blank" href="#" class="form-control"></a>
  41                         </div>
  42                         <div class="form-group">
  43                                 <label for="RTreq" class="control-label">Requirement</label>
  44                                 <select id="RTreq" class="form-control">
  45                                 </select>
  46                         </div>
  47                         <div class="form-group">
  48                                 <label for="RTcap" class="control-label">Capability</label>
  49                                 <select id="RTcap" class="form-control">
  50                                 </select>
  51                         </div>
  52                 </fieldset>
  53         </div>
  54
  55 </div>
  56
  57 <script>
  58
  59         var currentlySelectedConn = null;
  60
  61         /**
  62          * Fills the requirement and capabilities dropdowns with the available reqs and caps (which are defined at the source/target node template)
  63          *
  64          * @param conn the connection itself
  65          * @param dataField = "req"|"cap"
  66          * @param sourceDivClass = requirementsContainer | capabilitiesContainer
  67          */
  68         function fillReqOrCap(conn, dataField, nodetemplateId, sourceDivClass, targetSelect) {
  69                 var nt = $("#" + nodetemplateId);
  70                 var reqsOrCaps = nt.children("." + sourceDivClass).children(".content").children(".reqorcap");
  71                 var connReqCap = winery.connections[conn.id][dataField];
  72
  73                 targetSelect.empty();
  74
  75                 var optData = {
  76                         value: "__NONE__",
  77                         text: "(none)"
  78                 };
  79                 if (!connReqCap) {
  80                         selected: true
  81                 }
  82                 require(["tmpl"], function(tmpl) {
  83                         var newOption = tmpl("tmpl-option", optData);
  84                         targetSelect.append(newOption);
  85
  86                         reqsOrCaps.each(function(i,e) {
  87                                 optData.value = $(e).children(".id").children("span.id").text();
  88                                 optData.text = $(e).children(".name").children("span.name").text();
  89                                 optData.selected = (optData.value == connReqCap);
  90                                 newOption = tmpl("tmpl-option", optData);
  91                                 targetSelect.append(newOption);
  92                         });
  93                 });
  94
  95                 targetSelect.off("change");
  96                 targetSelect.on("change", function(e) {
  97                         var val = targetSelect.val();
  98                         if (val == "__NONE__") {
  99                                 delete(winery.connections[conn.id][dataField]);
 100                         } else {
 101                                 winery.connections[conn.id][dataField] = val;
 102                         }
 103                 });
 104         }
 105
 106         function fillType(nsAndLocalName) {
 107                 require(["winery-support-common"], function(wsc) {
 108                         var href = wsc.makeRelationshipTypeURLFromNSAndLocalName("${repositoryURL}", nsAndLocalName);
 109                         // localname is always the name of the relationship type because the specification requires a "name" attribute only and does not foresee an "id" attribute
 110                         $("#relationshipType").attr("href", href).text(nsAndLocalName.localname);
 111                 })
 112         }
 113
 114         function displayProperties(connData) {
 115                 $("#RTPropertiesView").append(connData.propertiesContainer);
 116         }
 117
 118         /**
 119          * @param conn the jsPlumb connection
 120          */
 121         function showRTViewOnTheRight(conn) {
 122                 currentlySelectedConn = conn;
 123
 124                 $("#RTPropertiesView").fadeIn();
 125
 126                 $("#relationshiptemplateid").val(winery.connections[conn.id].id);
 127                 $("#relationshiptemplatename").editable('setValue', winery.connections[conn.id].name);
 128                 fillReqOrCap(conn, "req", conn.sourceId, "requirementsContainer", $("#RTreq"));
 129                 fillReqOrCap(conn, "cap", conn.targetId, "capabilitiesContainer", $("#RTcap"));
 130                 fillType(winery.connections[conn.id].nsAndLocalName);
 131                 displayProperties(winery.connections[conn.id]);
 132         }
 133
 134         function hideRTViewOnTheRight() {
 135                 if (currentlySelectedConn == null) {
 136                         // nothing to do if no relationship template is selected
 137                         return;
 138                 }
 139
 140                 $("#RTPropertiesView").fadeOut();
 141
 142                 // user will see some flickering here, but we don't want to set timers -> could lead to race conditions
 143                 $("#skelettonContainerForRelationshipTemplates").append(winery.connections[currentlySelectedConn.id].propertiesContainer);
 144                 currentlySelectedConn = null;
 145         }
 146
 147         function storeUpdatedName(newName) {
 148                 currentlySelectedConn.name = newName;
 149         }
 150
 151         $(function() {
 152                 $("#relationshiptemplatename").editable({
 153                         success: function(response, newValue) {
 154                                 currentlySelectedConn.name = newValue;
 155                         }
 156                 });
 157         });
 158
 159         function unselectAllConnections() {
 160                 jsPlumb.select().each(function(connection) {
 161                         connection.removeType("selected");
 162                 });
 163         }
 164
 165         winery.events.register(
 166                 winery.events.name.SELECTION_CHANGED,
 167                 function() {
 168                         var nodeTemplate = $("div.NodeTemplateShape.selected");
 169                         var numSelected = nodeTemplate.length;
 170                         if (numSelected != 0) {
 171                                 // if node templates are selected, no RT properties should be shown
 172                                 hideRTViewOnTheRight();
 173
 174                                 unselectAllConnections();
 175                         }
 176                 }
 177         );
 178
 179 </script>