ecomp-portal-BE/war/WEB-INF/fusion/jsp/ebz/ebz_header.jsp

   1 <%--
   2   ================================================================================
   3   eCOMP Portal
   4   ================================================================================
   5   Copyright (C) 2017 AT&T Intellectual Property
   6   ================================================================================
   7   Licensed under the Apache License, Version 2.0 (the "License");
   8   you may not use this file except in compliance with the License.
   9   You may obtain a copy of the License at
  10
  11        http://www.apache.org/licenses/LICENSE-2.0
  12
  13   Unless required by applicable law or agreed to in writing, software
  14   distributed under the License is distributed on an "AS IS" BASIS,
  15   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16   See the License for the specific language governing permissions and
  17   limitations under the License.
  18   ================================================================================
  19   --%>
  20         <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  21         <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
  22         <%@ page isELIgnored ="false" %>
  23         <%@ page import="org.openecomp.portalsdk.core.util.SystemProperties" %>
  24         <link rel="stylesheet" type="text/css" href="static/ebz/header_new.css">
  25         <script src= "static/ebz/js/attHeaderSnippet.js"></script>
  26         <script src= "static/ebz/js/attHeader_new.js"></script>
  27      <c:set var="menu"    value="<%=session.getAttribute(SystemProperties.getProperty(SystemProperties.APPLICATION_MENU_ATTRIBUTE_NAME))%>"/>
  28
  29         <style>
  30         li {
  31                 list-style: none;
  32         }
  33
  34         #userIcon:hover {
  35                 color: rgb(191, 231, 239);
  36         }
  37
  38         #headerChatIcon:hover {
  39                 background: url(static/images/headerChatIcon_hover.png) no-repeat -3px
  40                         -3px !important;
  41         }
  42
  43         .headerContentContainer .primaryMenuContainer .headerIconContainer .popbox .openpopbox:hover
  44                 {
  45                 color: #bfe7fb;
  46                 margin-top: -2px;
  47                 text-decoration: none;
  48                 outline: none
  49         }
  50         /* .headerContentContainer .primaryMenuContainer .headerIconContainer .popbox .openpopbox:focus{color:#bfe7fb;margin-top:-2px;text-decoration:none;outline:none}  */
  51         .headerContentContainer .primaryMenuContainer .headerIconContainer .popbox .openpopbox
  52                 {
  53                 color: #fff;
  54                 display: block;
  55                 min-width: 70px;
  56                 max-width: 115px;
  57                 text-decoration: none
  58         }
  59
  60         a {
  61                 -webkit-transition: all .3s ease-out;
  62                 -moz-transition: all .3s ease-out;
  63                 transition: all .3s ease-out
  64         }
  65
  66         a:active,a:hover {
  67                 outline: 0
  68         }
  69
  70         b,strong {
  71                 font-weight: 700
  72         }
  73
  74         .thirdMenuContainer {
  75                 width: 100%;
  76                 overflow: auto;
  77                 margin-top: 101px;
  78                 position: fixed;
  79                 z-index: 3000;
  80                 min-height: 140px;
  81                 max-height: 500px;
  82                 opacity: 1;
  83                 background-color: rgb(255, 255, 255);
  84         }
  85 </style>
  86         <div style="position:relative; z-index:999;">
  87                 <div class="headerContainer" id="headerContainer" >
  88                         <div class="headerContentContainer">
  89                                 <div class="primaryMenuContainer">
  90                                         <div style="background: url(static/ebz/images/att_logo.png) no-repeat scroll -10px -10px transparent; !important;"></div>
  91                                         <div class="attHomeContainer">
  92                                                 <div class="businessCenterR">
  93                                                         <a id="attBusinessCenter" href="">OpenECOMP Portal</a>
  94                                                 </div>
  95                                         </div>
  96                                         <div class="primaryMenuOptionsContainer" >
  97
  98                                            <div class="primaryMenuOption">
  99                                                         <a class="primaryMenuOptionLink" href="javascript:openSecondLevel('m')">Manage</a>
 100                                                 </div>
 101                                            <div class="primaryMenuOption">
 102                                                         <a  id="supportFirstLevel" class="primaryMenuOptionLink" href="javascript:openSecondLevel('s')">Support</a>
 103
 104                                            </div>
 105                                                 <div id="indicator" class="selectedOptionIndicator" style="display:none"></div>
 106                                         </div>
 107                                         <div class="headerIconContainer">
 108                                                 <%-- <div class="loginName" style="width:107px;">
 109                                                         <span class="popbox" >
 110                                                                 <a style="color:#ffffff;display: block;min-width: 70px;max-width: 115;" class="openpopbox" href="#" >
 111                                                                         <div id="headerLoginIcon" class="loginIcon"><span id="userIcon" style="font-size:19px;" class="icon-user"></span> </div>
 112                                                                         <div id="headerNameEllipsis" class="ellipsis-header-name">${ociUserName}</div>
 113                                                                 </a>
 114                                                                 <div class="box1" style="line-height: normal; right: 167px; min-height: 200px; height: auto; width: 390px !important; display: none; top: 0px; left: -230.5px;" target="auth">
 115                                                                         <div class="arrow" style="left: 230px;"></div>
 116                                                                         <div id="reg-header-snippet">
 117                                                                                 <div class="reg-profilePicture" style="min-height: 215px;" id="reg-profile-links">
 118                                                                                         <div id="reg-profileImage">
 119                                                                                                 <div style="clear: both; height: 80px; position: relative; width: 80px;" class="">
 120                                                                                                         <img id="reg-userProfilePicture-id" style="height: 80px; width: 80px; float: left;" src="" alt="">
 121                                                                                                         <span style="  background-position: -1px -1px; height: 81px;left: 0;position: absolute;top: 0;width: 81px;">&nbsp;</span>
 122                                                                                                 </div>
 123                                                                                         </div>
 124                                                                                         <div id="reg-myprofile-link">
 125                                                                                                 <a href="">My Profile</a>
 126                                                                                         </div>
 127                                                                                         <div id="reg-companyProfile-link">
 128                                                                                                 <a href="">Company Profile</a>
 129                                                                                         </div>
 130                                                                                         <div id="reg-logout-div">
 131                                                                                                 <a class="reg-logout-btn" href="ebiz_logout.htm">Log Out</a>
 132                                                                                         </div>
 133                                                                                 </div>
 134                                                                                 <div tabindex="0" class="reg-profileDetails" id="reg-profiledetails-id">
 135                                                                                 <ul class="reg-Details-table">
 136                                                                                         <li><div class="reg-userName-table"><div id="reg-userName-table-row"><div id="reg-userName-table-cell"><h3 class="att-global-fonts" id="reg-userName">${ociUserName}&nbsp;</h3><span class="visuallyhidden">.</span></div></div></div></li>
 137                                                                                         <li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn">EMAIL<span class="visuallyhidden">:</span></span></div></li>
 138                                                                                         <li><div class="reg-userEmail-value"><span class="reg-userEmail-value-spn">${email}<span class="visuallyhidden">.</span></span></div></li>
 139                                                                                         <li><div class="reg-userRole-label"><span class="reg-userRole-label-spn">PROFILE ID<span class="visuallyhidden">:</span></span></div></li>
 140                                                                                         <li><div class="reg-userRole-value"><span class="reg-userRole-value-spn">${groupId}<span class="visuallyhidden">.</span></span></div></li>
 141                                                                                         <li><div class="reg-userCompany-label"><span class="reg-userCompany-spn"> ENTERPRISE NAME<span class="visuallyhidden">:</span></span></div></li>
 142                                                                                         <li><div class="reg-userCompany-value"><span class="reg-userCompany-spn">${serviceProviderId}<span class="visuallyhidden">.</span></span></div></li>
 143                                                                                 </ul>
 144                                                                                 </div>
 145                                                                         </div>
 146                                                                 </div>
 147                                                         </span>
 148                                                 </div> --%>
 149                                                 <!-- Chat -->
 150
 151
 152                                         <!-- <div id="headerChatIcon" class='chatIcon' style="background: url(static/images/headerChatIcon.png) no-repeat -3px -3px;"></div>
 153                                                 <div class="chatBox">
 154                                                         <div class='arrow'></div>
 155                                                         <div class="chatBox-header">
 156                                                                 <span class="chatBox-heading">Live Chat</span>
 157                                                                 <i class="icon-erase circle_close_chat"></i>
 158                                                         </div>
 159
 160                                                 </div>  -->
 161                                         </div>
 162                                   </div>
 163                         </div>
 164                            <!-- HTML for the secondary menu for dashboard. -->
 165                         <div id="secondLevel" class="secondaryMenuContainer secondaryMenuContainerForDashboard" style="display:none;">
 166                                 <div id="secondaryMenuContentContainer" class="secondaryMenuContentContainer" style="">
 167                                         <c:forEach items="${menu}" var="menuItem">
 168                                         <div class="secondaryMenuOption" style="margin-left:20px; font-size:16px !important;">
 169                                                 <a id="${menuItem.id}"   href="${menuItem.action}" class="secondaryMenuOptionLink selectedSecondaryMenuOption">${menuItem.label}</a>
 170                                         </div>
 171                                         </c:forEach>
 172                                 </div>
 173                         </div>
 174                         <c:forEach items="${menu}" var="menuItem">
 175                                 <c:if test="${!empty menuItem.childMenus}">
 176                                         <div id="thirdLevel${menuItem.id}" class="secondaryMenuContainer secondaryMenuContainerForDashboard" style="display:none;">
 177                                                 <div id="secondaryMenuContentContainer${menuItem.id}" class="secondaryMenuContentContainer" style="">
 178                                                 <c:forEach items="${menuItem.childMenus}" var="subMenuItem">
 179                                                         <div class="secondaryMenuOption" style="margin-left:20px; font-size:16px !important;">
 180                                                                 <a  id="${subMenuItem.id}"  href="${subMenuItem.action}" class="thirdMenuOptionLink selectedSecondaryMenuOption">${subMenuItem.label}</a>
 181                                                         </div>
 182                                                 </c:forEach>
 183                                                 </div>
 184                                         </div>
 185                                 </c:if>
 186                         </c:forEach>
 187                         <%-- <c:forEach items="${menu}" var="menuItem">
 188                                 <c:if test="${!empty menuItem.childMenus}">
 189                                         <div id="thirdLevel${menuItem.id}" class="secondaryMenuContainer secondaryMenuContainerForDashboard" style="display:none;">
 190                                                 <div id="secondaryMenuContentContainer${menuItem.id}" class="secondaryMenuContentContainer" style="">
 191                                                 <c:forEach items="${menuItem.childMenus}" var="subMenuItem">
 192                                                         <div class="secondaryMenuOption" style="margin-left:20px; font-size:16px !important;">
 193                                                                 <a  id="${subMenuItem.id}"  href="${subMenuItem.action}" class="thirdMenuOptionLink selectedSecondaryMenuOption">${subMenuItem.label}</a>
 194                                                         </div>
 195                                                 </c:forEach>
 196                                                 </div>
 197                                         </div>
 198                                 </c:if>
 199                         </c:forEach> --%>
 200                 </div>
 201                 </div>
 202
 203                 <c:forEach items="${menu}" var="menuItem">
 204                         <c:if test="${!empty menuItem.childMenus}">
 205                                 <c:forEach items="${menuItem.childMenus}" var="subMenuItem">
 206                                         <div id="megaMenu${subMenuItem.id}" class="megaMenuContainer" style="right:0px; margin-top:145px; display:none;">
 207                                                 <div class="megaMenuContentContainer">
 208                                                         <ul class="megaMenuTable"  id="megaMenuTable" style="padding:0px;">
 209                                                                 <li class="megaMenuFirstRow megaMenuRow" >
 210                                                                         <ul style=" display: flex;   flex-direction: column;   flex-wrap: wrap; height:500px;">
 211                                                                                 <li class="categoryContainerColumn" style="margin-right:30px;">
 212                                                                                         <div class="categoryContainer" align="left" style="margin-top:10px; margin-left:40px;">
 213                                                                                                 <c:forEach items="${subMenuItem.childMenus}"    var="childSubMenuItem">
 214                                                                                                         <div class="categoryOption" style="margin-bottom:13px; width:500px; ">
 215                                                                                                                 <a class="categoryOptionLink" style="margin-bottom:0px; font-size:16px;" href="${childSubMenuItem.action}">${childSubMenuItem.label}</a>
 216                                                                                                         </div>
 217                                                                                                 </c:forEach>
 218                                                                                         </div>
 219                                                                                 </li>
 220                                                                         </ul>
 221                                                                 </li>
 222                                                         </ul>
 223                                                 </div>
 224                                         </div>
 225                                 </c:forEach>
 226                         </c:if>
 227                 </c:forEach>
 228                 <div id="megaMenuContainerTemp" class="megaMenuContainer" style="right:0px; margin-top:89px; display:none;">
 229                         <div class="megaMenuContentContainer">
 230                                 <ul class="megaMenuTable"  id="megaMenuTable" style="padding:0px;">
 231                                         <li class="megaMenuFirstRow megaMenuRow" >
 232                                                 <ul style=" display: flex;   flex-direction: column;   flex-wrap: wrap; height:500px;">
 233                                                         <li class="categoryContainerColumn" style="margin-right:30px;">
 234                                                                 <div class="categoryContainer" align="left" style="margin-bottom:0px; margin-left:40px;">
 235                                                                         <div class="categoryTitle" style="margin-top:10px; min-width:160px;"></div>
 236                                                                         <div class="categoryOption" style="margin-bottom:13px;">
 237                                                                                 <a class="categoryOptionLink" style="margin-bottom:0px;" href="#"></a>
 238                                                                         </div>
 239                                                                 </div>
 240                                                         </li>
 241                                                 </ul>
 242                                         </li>
 243                                         <li class="megaMenuSecondRow megaMenuRow" style="display:none"></li>
 244                                 </ul>
 245                         </div>
 246                 </div>
 247
 248
 249         <script>
 250
 251                 $(document).ready(function() {
 252                         $(document).on('mouseleave', '#megaMenuContainer', function() {
 253                                  $("#thirdLevel").css("display", "none");
 254                                  $("#megaMenuContainerTemp").css("display", "none");
 255
 256                         });
 257                         $(document).on('mouseleave', '#megaMenuContainerTemp', function() {
 258                                  $("#megaMenuContainerTemp").css("display", "none");
 259                         });
 260
 261                         $(document).on('mouseenter', '#secondLevel', function() {
 262                                 <c:forEach items="${menu}" var="menuItem">
 263                                         <c:choose>
 264                                                 <c:when test="${!empty menuItem.childMenus}">
 265                                                         $("#${menuItem.id}").hover(function() {
 266                                                                 <c:forEach items="${menu}" var="menuItem2">
 267                                                                         <c:if test="${!empty menuItem2.childMenus}">
 268                                                                                 $("#thirdLevel${menuItem2.id}").css("display", "none");
 269                                                                         </c:if>
 270                                                                 </c:forEach>
 271                                                                 $(".megaMenuContainer").css("display", "none");
 272                                                                 $("#thirdLevel${menuItem.id}").css("display", "inline");
 273                                                         });
 274                                                 </c:when>
 275                                                 <c:otherwise>
 276                                                 $("#${menuItem.id}").hover(function() {
 277                                                         <c:forEach items="${menu}" var="menuItem2">
 278                                                                 <c:if test="${!empty menuItem2.childMenus}">
 279                                                                         $("#thirdLevel${menuItem2.id}").css("display", "none");
 280                                                                 </c:if>
 281                                                         </c:forEach>
 282                                                         $(".megaMenuContainer").css("display", "none");
 283                                                 });
 284                                                 </c:otherwise>
 285                                         </c:choose>
 286                                 </c:forEach>
 287                         });
 288
 289                         $('.thirdMenuOptionLink').hover(function() {
 290                                 $(".megaMenuContainer").css("display", "none");
 291
 292                                 var id= "#megaMenu"+this.id;
 293                                 $(id).css("display", "inline");
 294                         });
 295                 });
 296                 function openSecondLevel(item){
 297                         if(item=='m'){
 298                                 $("#secondLevel").css("display", "inline");
 299                         }
 300                 }
 301
 302
 303         </script>