winery/org.eclipse.winery.repository/src/main/webapp/WEB-INF/tags/genericpage.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  *    Oliver Kopp - initial API and implementation and/or initial documentation
  12  *    Yves Schubert - switch to bootstrap 3
  13  *******************************************************************************/
  14 --%>
  15 <%@tag description="Global Wrapper" pageEncoding="UTF-8"%><!DOCTYPE html>
  16
  17 <%@attribute name="windowtitle" required="true" description="String to be used as window title"%>
  18 <%@attribute name="selected" required="true"%>
  19 <%@attribute name="cssClass" required="true"%>
  20
  21 <%@attribute name="libs" fragment="true" %>
  22
  23 <%@taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>
  24 <%@taglib prefix="ct" tagdir="/WEB-INF/tags/common"%>
  25 <%@taglib prefix="t"  tagdir="/WEB-INF/tags"%>
  26 <%@taglib prefix="w"  uri="http://www.eclipse.org/winery/repository/functions"%>
  27
  28 <%@tag import="org.eclipse.winery.repository.Prefs" %>
  29
  30 <!-- This is Winery ${project.version}  -->
  31
  32 <html>
  33 <head>
  34         <title>${windowtitle}</title>
  35         <meta name="application-name" content="Winery" />
  36         <meta charset="UTF-8">
  37         <link rel="icon" href="${w:topologyModelerURI()}/favicon.png" type="image/png">
  38         <link rel="stylesheet" href="${pageContext.request.contextPath}/components/bootstrap/dist/css/bootstrap.css" />
  39         <link rel="stylesheet" href="${pageContext.request.contextPath}/components/bootstrap/dist/css/bootstrap-theme.css" />
  40
  41         <%-- CSS to style the file input field as button and adjust the Bootstrap progress bars --%>
  42         <link rel="stylesheet" href="${pageContext.request.contextPath}/components/blueimp-file-upload/css/jquery.fileupload.css" />
  43         <link rel="stylesheet" href="${pageContext.request.contextPath}/components/blueimp-file-upload/css/jquery.fileupload-ui.css" />
  44         <link type="text/css" href="${pageContext.request.contextPath}/components/datatables/media/css/jquery.dataTables.css" rel="stylesheet" />
  45         <link type="text/css" href="${pageContext.request.contextPath}/css/winery-repository.css" rel="Stylesheet" />
  46         <link type="text/css" href="${pageContext.request.contextPath}/components/pnotify/jquery.pnotify.default.css" media="all" rel="stylesheet" />
  47         <link type="text/css" href="${pageContext.request.contextPath}/components/pnotify/jquery.pnotify.default.icons.css" media="all" rel="stylesheet" />
  48         <link type="text/css" href="${pageContext.request.contextPath}/components/select2/select2.css" media="all" rel="stylesheet" />
  49         <link type="text/css" href="${pageContext.request.contextPath}/components/select2/select2-bootstrap.css" media="all" rel="stylesheet" />
  50
  51         <link type="text/css" href="${pageContext.request.contextPath}/components/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.css" media="all" rel="stylesheet" />
  52         <link type="text/css" href="${pageContext.request.contextPath}/components/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" media="all" rel="stylesheet" />
  53
  54         <link rel="stylesheet" href="${pageContext.request.contextPath}/components/bootstrap-spinedit/css/bootstrap-spinedit.css" />
  55
  56         <link rel="stylesheet" href="${pageContext.request.contextPath}/components/xmltree/xmltree.css" />
  57
  58         <link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/6.0/built-editor.css"/>
  59
  60         <link type="text/css" href="${w:topologyModelerURI()}/css/winery-common.css" rel="stylesheet" />
  61
  62         <script type='text/javascript' src='${pageContext.request.contextPath}/components/requirejs/require.js'></script>
  63         <script>
  64                 require.config({
  65                         baseUrl: "${pageContext.request.contextPath}/js",
  66                         paths: {
  67                                 "artifacttemplateselection": "${w:topologyModelerURI()}/js/artifacttemplateselection",
  68                                 "winery-sugiyamaLayouter": "${w:topologyModelerURI()}/js/winery-sugiyamaLayouter",
  69
  70                                 "datatables": "../components/datatables/media/js/jquery.dataTables",
  71                                 "jquery": "../components/jquery/jquery",
  72
  73                                 "jquery.fileupload": "../components/blueimp-file-upload/js/jquery.fileupload",
  74                                 "jquery.fileupload-ui": "../components/blueimp-file-upload/js/jquery.fileupload-ui",
  75                                 "jquery.fileupload-process": "../components/blueimp-file-upload/js/jquery.fileupload-process",
  76                                 "jquery.ui.widget": "../components/blueimp-file-upload/js/vendor/jquery.ui.widget",
  77
  78                                 // required for jsplumb
  79                                 "jquery.ui": "../3rdparty/jquery-ui/js/jquery-ui",
  80
  81                                 "jsplumb": "../components/jsPlumb/dist/js/jquery.jsPlumb-1.5.4",
  82
  83                                 "keyboardjs": "../components/KeyboardJS/keyboard",
  84
  85                                 "orioneditor": "http://eclipse.org/orion/editor/releases/6.0/built-editor-amd",
  86
  87                                 "pnotify": "../components/pnotify/jquery.pnotify",
  88
  89                                 "select2": "../components/select2/select2",
  90
  91                                 "tmpl": "../components/blueimp-tmpl/js/tmpl",
  92
  93                                 "URIjs": '../components/uri.js/src',
  94
  95                                 "xmltree": "../components/xmltree/xmltree",
  96
  97                                 "XMLWriter": "../components/XMLWriter/XMLWriter"
  98                         }
  99                 });
 100         </script>
 101
 102         <script type='text/javascript' src='${pageContext.request.contextPath}/components/jquery/jquery.js'></script>
 103         <script type='text/javascript' src='${pageContext.request.contextPath}/components/bootstrap/dist/js/bootstrap.js'></script>
 104
 105         <script type="text/javascript" src="${pageContext.request.contextPath}/components/jquery-typing/plugin/jquery.typing-0.3.2.js"></script>
 106         <script type="text/javascript" src="${pageContext.request.contextPath}/components/select2/select2.js"></script>
 107
 108         <script type="text/javascript" src="${pageContext.request.contextPath}/components/wysihtml5/dist/wysihtml5-0.3.0.js"></script>
 109         <script type="text/javascript" src="${pageContext.request.contextPath}/components/handlebars/handlebars.min.js"></script>
 110         <script type="text/javascript" src="${pageContext.request.contextPath}/components/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.min.js"></script>
 111         <script type="text/javascript" src="${pageContext.request.contextPath}/components/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
 112         <script type="text/javascript" src="${pageContext.request.contextPath}/components/x-editable/dist/inputs-ext/wysihtml5/wysihtml5.js"></script>
 113
 114         <script type='text/javascript' src='${pageContext.request.contextPath}/components/bootstrap-spinedit/js/bootstrap-spinedit.js'></script>
 115         <script type="text/javascript" src="${pageContext.request.contextPath}/js/winery-support-non-AMD.js"></script>
 116         <script type="text/javascript" src="${w:topologyModelerURI()}/js/winery-common.js"></script>
 117
 118         <script>
 119         // all x-editable popups should be placed in a way to fit "perfectly" on the screen
 120         $.fn.editable.defaults.placement = "auto";
 121
 122         //configuration for pnotify
 123         require(["jquery", "pnotify"], function() {
 124                 $.pnotify.defaults.styling = "bootstrap3";
 125         });
 126         </script>
 127 </head>
 128
 129 <body>
 130
 131 <jsp:include page="/jsp/shared/dialogs.jsp" />
 132
 133 <script>
 134 //enable caching. This disables appending of "?_=xy" at requests
 135 jQuery.ajaxSetup({cache:true});
 136
 137 // prevent form submission on pressing "enter"
 138 // In the topology modeler, this phenomen does not occurr.
 139 // The reason why all forms are submitted on enter pressing is unknown.
 140 $(document).on("keypress", "input", function(e) {
 141         var key = (e.keyCode || e.which);
 142         if (key == 13) {
 143                 // enter pressed
 144                 // press tab instead
 145                 // The following does not work
 146                 // TODO: include jQuery.tabbable plugin (http://stackoverflow.com/a/18740738/873282 / https://github.com/marklagendijk/jQuery.tabbable)
 147                 $(e.currentTarget).trigger({
 148                         type: 'keydown',
 149                         which: 9
 150                 });
 151                 return false;
 152         }
 153 });
 154
 155 $(function() {
 156         var scrolling = $(document).height() > $(window).height();
 157         if (scrolling) {
 158                 // add CSS fix to prevent flickering
 159                 $("#mainContainer").addClass("overflown");
 160         } else {
 161                 $("#mainContainer").addClass("notoverflown");
 162         }
 163 });
 164 </script>
 165
 166 <t:about />
 167
 168 <div id="mainContainer">
 169         <div id="header">
 170                 <div id="showabout">
 171                         <button type="button" class="btn btn-default btn-xs" onClick="showAbout();">about</button>
 172                 </div>
 173                 <c:set var="warning" value="<%=Prefs.INSTANCE.getProperties().get(\"warning\")%>" />
 174                 <c:if test="${not empty warning}">
 175                 <div id="warning">
 176                         ${warning}
 177                 </div>
 178                 </c:if>
 179
 180                 <div id="mainMenuContainer">
 181
 182                         <%-- String values come from ComponentKind.toString() --%>
 183
 184                         <a class="styledTabMenuButton <c:if test="${selected eq 'ServiceTemplate'}">selected</c:if>" href="${pageContext.request.contextPath}/servicetemplates/">
 185                                 <div class="left"></div>
 186                                 <div class="center">Service Templates</div>
 187                                 <div class="right"></div>
 188                         </a>
 189
 190                         <%-- TopologyTemplates: top level topology templates only in "pro" mode <a href="${pageContext.request.contextPath}/topologytemplates/">Topology Templates</a>  --%><%!  %>
 191
 192                         <a class="styledTabMenuButton <c:if test="${selected eq 'NodeType'}">selected</c:if>" href="${pageContext.request.contextPath}/nodetypes/">
 193                                 <div class="left"></div>
 194                                 <div class="center">Node Types</div>
 195                                 <div class="right"></div>
 196                         </a>
 197
 198                         <a class="styledTabMenuButton <c:if test="${selected eq 'RelationshipType'}">selected</c:if>" href="${pageContext.request.contextPath}/relationshiptypes/">
 199                                 <div class="left"></div>
 200                                 <div class="center">Relationship Types</div>
 201                                 <div class="right"></div>
 202                         </a>
 203
 204
 205                         <%-- include all other TOSCA Elements into admin --%>
 206                         <%-- We need to call it "Elements" instead of "components" as PRD01 on line 334 calls these "elements" --%>
 207
 208                         <c:choose>
 209
 210                                 <c:when test="${selected eq 'ArtifactTemplate'}">
 211                                         <c:set var="otherSelected" value="selected" />
 212                                         <c:set var="otherLabel" value="Other Elements: Artifact Templates" />
 213                                 </c:when>
 214
 215                                 <c:when test="${selected eq 'ArtifactType'}">
 216                                         <c:set var="otherSelected" value="selected" />
 217                                         <c:set var="otherLabel" value="Other Elements: Artifact Types" />
 218                                 </c:when>
 219
 220                                 <c:when test="${selected eq 'CapabilityType'}">
 221                                         <c:set var="otherSelected" value="selected" />
 222                                         <c:set var="otherLabel" value="Other Elements: Capability Types" />
 223                                 </c:when>
 224
 225                                 <c:when test="${selected eq 'NodeTypeImplementation'}">
 226                                         <c:set var="otherSelected" value="selected" />
 227                                         <c:set var="otherLabel" value="Other Elements: Node Type Implementations" />
 228                                 </c:when>
 229
 230                                 <c:when test="${selected eq 'PolicyTemplate'}">
 231                                         <c:set var="otherSelected" value="selected" />
 232                                         <c:set var="otherLabel" value="Other Elements: Policy Templates" />
 233                                 </c:when>
 234
 235                                 <c:when test="${selected eq 'PolicyType'}">
 236                                         <c:set var="otherSelected" value="selected" />
 237                                         <c:set var="otherLabel" value="Other Elements: Policy Types" />
 238                                 </c:when>
 239
 240                                 <c:when test="${selected eq 'RelationshipTypeImplementation'}">
 241                                         <c:set var="otherSelected" value="selected" />
 242                                         <c:set var="otherLabel" value="Other Elements: Relationship Type Implementations" />
 243                                 </c:when>
 244
 245                                 <c:when test="${selected eq 'RequirementType'}">
 246                                         <c:set var="otherSelected" value="selected" />
 247                                         <c:set var="otherLabel" value="Other Elements: Requirement Types" />
 248                                 </c:when>
 249
 250                                 <c:when test="${selected eq 'XSDImport'}">
 251                                         <c:set var="otherSelected" value="selected" />
 252                                         <c:set var="otherLabel" value="Other Elements: Imports: XSD" />
 253                                 </c:when>
 254
 255
 256                                 <c:when test="${selected eq 'OtherElements'}">
 257                                         <c:set var="otherSelected" value="selected" />
 258                                         <c:set var="otherLabel" value="Other Elements" />
 259                                 </c:when>
 260
 261
 262                                 <c:otherwise>
 263                                         <c:set var="otherSelected" value="" />
 264                                         <c:set var="otherLabel" value="Other Elements" />
 265                                 </c:otherwise>
 266
 267                         </c:choose>
 268
 269                         <a class="styledTabMenuButton ${otherSelected}" href="${pageContext.request.contextPath}/other/">
 270                                 <div class="left"></div>
 271                                 <div class="center">${otherLabel}</div>
 272                                 <div class="right"></div>
 273                         </a>
 274
 275                         <a class="styledTabMenuButton <c:if test="${selected eq 'admin'}">selected</c:if>" href="${pageContext.request.contextPath}/admin/">
 276                                 <div class="left"></div>
 277                                 <div class="center">Administration</div>
 278                                 <div class="right"></div>
 279                         </a>
 280
 281                 </div>
 282         </div>
 283
 284 <script id="template-createresource" type="text/x-tmpl">
 285 <div class="modal fade" id="createResource">
 286         <div class="modal-dialog">
 287                 <div class="modal-content">
 288                         <div class="modal-header">
 289                                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 290                                 <h4 class="modal-title">{%=o.nameOfResource%}</h4>
 291                         </div>
 292                         <div class="modal-body">
 293                                 <form id="createResourceForm" enctype="multipart/form-data">
 294                                         <fieldset>
 295                                                 {% for (var i=0, field; field=o.fields[i]; i++) { %}
 296                                                         {%
 297                                                         if (field.type === undefined) {
 298                                                                 field.type = "text";
 299                                                         }
 300                                                         if (field.type == 'checkbox' || field.type == 'radio') {
 301                                                         %}
 302                                                                 <div class="form-group">
 303                                                                         <label>
 304                                                                                 <input
 305                                                                                         style="margin: 0 5px;"
 306                                                                                         name="{%=field.name%}"
 307                                                                                         type="{%=field.type%}"
 308                                                                                         required="required"
 309                                                                                         {% if (field.checked) { %}checked="checked"{% } %}
 310                                                                                         autocomplete="off">
 311                                                                                 {%=field.label%}
 312                                                                         </label>
 313                                                         {% } else { %}
 314                                                                 <div class="form-group">
 315                                                                         <label for="addedtypeinput">{%=field.label%}</label>
 316                                                                         <input id="addedtypeinput" class="form-control" name="{%=field.name%}" type="{%=field.type%}" required="required" autocomplete="off" />
 317                                                         {% } %}
 318                                                         {% if (field.hint) { %}
 319                                                                         <span class="help-block">{%=field.hint%}</span>
 320                                                         {% } %}
 321                                                                 </div>
 322                                                 {% } %}
 323                                         </fieldset>
 324                                 </form>
 325                         </div>
 326                         <div class="modal-footer">
 327                                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
 328                                 <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addResourceInstance();">Add</button>
 329                         </div>
 330                 </div>
 331         </div>
 332 </div>
 333 </script>
 334
 335 <div id="mainContent">
 336
 337
 338 <jsp:invoke fragment="libs"></jsp:invoke>
 339
 340 <div class="${cssClass}">
 341 <jsp:doBody/>
 342 </div>
 343
 344 </div>
 345 </div>
 346
 347 </body>
 348 </html>
 349