Initial OpenECOMP Portal commit

[portal.git] / ecomp-portal-FE / client / app / views / home / widgets-home / widgets-home.tpl.html

diff --git a/ecomp-portal-FE/client/app/views/home/widgets-home/widgets-home.tpl.html b/ecomp-portal-FE/client/app/views/home/widgets-home/widgets-home.tpl.html
new file mode 100644 (file)
index 0000000..8e385c1
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/home/widgets-home/widgets-home.tpl.html
@@ -0,0 +1,123 @@
+<div class="w-ecomp-widgets-home" id="contentId">
+    <div class="widgets-home-container">
+        <div id="widgets-home-title" class="widgets-home-title">Widgets</div>
+
+
+        <div class="portals-list">
+            <div class="gridster-container override_background">
+                <span class="ecomp-spinner" ng-show="widgetsHome.isLoading"></span>
+                <div ng-hide="widgetsHome.isEnlarged" att-gridster
+                     att-gridster-options="widgetsHome.gridsterOpts" >
+                    <div att-gridster-item='item' ng-repeat="item in widgetsViewData">
+                        <div id="widget-grips-{{item.headerText.split(' ').join('-')}}"
+                             att-gridster-item-header
+                             grips-img-path="assets/images/grips.png"
+                             header-text={{item.headerText}}
+                             class="widget-gridster-header">
+                        </div>
+                        <div att-gridster-item-body ng-if="item.headerText=='News'">
+                               <div id="newsContainer" class="information-section-gridsterContent">
+                                                               <div class="news">
+                                                                       <ul id="newsContent" ng-show="newsData.length!=0">                                                      
+                                                                               <li ng-repeat="news in newsData"><a href="{{news.href}}"  target="_blank" ng-bind="news.title"></a></li>
+                                                                       </ul>
+                                                                       <div ng-hide="newsData.length!=0">                                                                              
+                                                                               <div class="activity-error-container" style="background: rgb(255, 255, 255);     overflow: auto!important; width: 100%;">
+                                                                       <div class="activity-error-block">
+                                                                            <i class="ion-information-circled full-linear-ion-information-circled" style="margin-left:125px; font-size: 90px"></i>  <br>
+                                                                            <div class="activity-error-msg1">There's currently no news available.</div>
+                                                                       </div>
+                                                                       </div>
+                                                                       </div>
+                                                               </div>
+                                                       </div>                      
+                        </div>
+                        <div  att-gridster-item-body ng-if="item.headerText=='Events'">
+                               <div class="information-section-gridsterContent">
+                                                               <div class="events">
+                                                                               <ul ng-show="eventData.length!=0">
+                                                                               <li ng-repeat="event in eventData">
+                                                                                       <div ng-click="event_content_show=!event_content_show">
+                                                                                               <div class="events-date">{{event.mon}}/{{event.day}}/{{event.year}}     </div>
+                                                                                               <div>
+                                                                                                       <div class="event-title-div">
+                                                                                                               <p ng-bind="event.title"></p>
+                                                                                                       </div>
+                                                                                                       <div>
+                                                                                                               <span class="ion-ios-arrow-up" ng-if="event_content_show" style="color: #888;     font-size: 22px;"></span>
+                                                                                                               <span class="ion-ios-arrow-down" ng-if="!event_content_show"  style="color: #888;     font-size: 22px;"></span>
+                                                                                               
+                                                                                                       </div>
+                                                                                                       <div style="clear: both;"></div> 
+                                                                                               </div>                                                          
+                                                                                       </div>                  
+                                                                                       <div  class="events-content" ng-show="event_content_show">
+                                                                                               <div class="events-content-body">
+                                                                                                       <a class="events-link" ng-href="{{event.href}}" target="_blank">
+                                                                                                               <span ng-bind="event.content"></span>
+                                                                                                       </a>
+                                                                                               </div>
+                                                                                               <div></div>
+                                                                                       </div>                  
+                                                                               </li>
+                                                                               
+                                                                               
+                                                                       </ul> 
+                                                                       <div ng-hide="eventData.length!=0">                                                                             
+                                                                               <div class="activity-error-container" style="background: rgb(255, 255, 255);     overflow: hidden!important; width: 100%;">
+                                                                               <div class="activity-error-block">
+                                                                                    <i class="ion-information-circled full-linear-ion-information-circled" style="margin-left:125px; font-size: 90px"></i>  <br>
+                                                                                     <div class="activity-error-msg1">There's currently no event available.</div>
+                                                                               </div>
+                                                                       </div>
+                                                                       </div>                  
+                                                               </div>
+                                                       </div>              
+                        </div>
+                        
+                        <div att-gridster-item-body ng-if="item.headerText=='Resources'">
+                               <div class="">
+                                                               <div class="resources">
+                                                                       <ul ng-show="importResData.length!=0">                                                                                                  
+                                                                               <li ng-repeat="item in importResData"><a href="{{item.href}}"  target="_blanl">{{item.title}}</a></li>  
+                                                                       </ul>
+                                                                       <div ng-hide="importResData.length!=0">                                                                         
+                                                                               <div class="activity-error-container" style="background: rgb(255, 255, 255);     overflow: hidden!important; width: 100%;">
+                                                                       <div class="activity-error-block">
+                                                                            <i class="ion-information-circled full-linear-ion-information-circled" style="margin-left:125px; font-size: 90px"></i>  <br>
+                                                                            <div class="activity-error-msg1">There's currently no links available.</div>
+                                                                       </div>
+                                                                       </div>
+                                                                       </div>
+                                                               </div>  
+                                                       </div>
+                        </div>
+                        
+                        <div att-gridster-item-body ng-if="item.headerText!='News' && item.headerText!='Events' && item.headerText!='Resources'">
+                            <iframe id="widget-iframe-{{item.headerText.split(' ').join('-')}}"
+                                    class="widget-iframe"
+                                    ng-src="{{item.url | trusted}}"
+                                    refresh-iframe
+                                    is-enlarged="{{widgetsHome.isEnlarged}}">
+                            </iframe>
+                        </div>
+                        <div id="widget-footer-{{item.headerText.split(' ').join('-')}}"
+                             att-gridster-item-footer class="widget-gridster-footer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div ng-show="widgetsHome.isEnlarged"  >
+                <div id="widgets-button-enlarge-close" class="enlarge-close-button" ng-click="widgetsHome.isEnlarged=false">X</div>
+                <iframe id="iframe-widget-enlarge-close" ng-src="{{widgetsHome.enlargeURL | trusted}}" class="enlarge-content" >
+                </iframe>
+            </div>
+
+        </div>
+        
+        <div id="widgets-disclaimer"  class="w-ecomp-main-disclaimer">
+            To request access to an application, please visit the <a
+                                       ng-href="getAccess">Get Access</a> page.
+        </div>
+    </div>
+</div>