Initial OpenECOMP SDC commit

Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b
Signed-off-by: Michael Lando <ml636r@att.com>

5 files changed, 393 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/directives/tutorial/image-template.html b/catalog-ui/app/scripts/directives/tutorial/image-template.html
new file mode 100644
index 0000000000..7e7f7af356
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/tutorial/image-template.html
@@ -0,0 +1,7 @@
+<perfect-scrollbar include-padding="true" class="sdc-tutorial-container-content sdc-tutorial-image-template">
+    <div class="{{pageObject.data.imageClass}}"></div>
+    <div class="sdc-tutorial-image-template-text">
+        <h1 translate="{{pageObject.data.title}}"></h1>
+        <p class="sdc-welcome-page-description2" translate="{{pageObject.data.description}}"></p>
+    </div>
+</perfect-scrollbar>
diff --git a/catalog-ui/app/scripts/directives/tutorial/text-template.html b/catalog-ui/app/scripts/directives/tutorial/text-template.html
new file mode 100644
index 0000000000..dc1173be64
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/tutorial/text-template.html
@@ -0,0 +1,4 @@
+<perfect-scrollbar include-padding="true" class="sdc-tutorial-container-content sdc-tutorial-text-template">
+    <h1 translate="{{pageObject.data.title}}"></h1>
+    <p class="sdc-welcome-page-description2" translate="{{pageObject.data.description}}"></p>
+</perfect-scrollbar>
diff --git a/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.html b/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.html
new file mode 100644
index 0000000000..191752fc1f
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.html
@@ -0,0 +1,22 @@
+<div class="sdc-tutorial-page" data-ng-if="showTutorial">
+    <div class="sdc-tutorial-container-wrapper">
+        <div class="sdc-tutorial-skip" translate="{{isFirstTime?'TUTRIAL_GENERAL_SKIP_BUTTON':'TUTRIAL_GENERAL_CLOSE_BUTTON'}}" data-ng-click="closeTutorial()"></div>
+        <div class="sdc-tutorial-container">
+            <div class="sdc-tutorial-container-tabs">
+                <div class="sdc-tutorial-container-tab" data-ng-repeat="tab in tabs" data-ng-class="{'selected': tab.id===pageObject.tab}">
+                    <span translate="{{tab.name}}" data-ng-click="initPage(tab.defaultPage)"></span>
+                </div>
+            </div>
+            <ng-include src="templateUrl"></ng-include>
+        </div>
+
+        <div class="sdc-tutorial-footer">
+            <div class="sdc-tutorial-footer-prev-button"><span data-ng-show="hasPrevious()" translate="TUTRIAL_GENERAL_PREVIOUS_BUTTON" data-ng-click="previous()"></span></div>
+            <div class="sdc-tutorial-footer-page-counter"><span class="selected" data-ng-bind="currentPageIndex+1"></span>/<span class="total" data-ng-bind="totalPages"></span></div>
+            <div class="sdc-tutorial-footer-next-button">
+                <span data-ng-if="hasNext()" translate="TUTRIAL_GENERAL_NEXT_BUTTON" data-ng-click="next()"></span>
+                <span data-ng-if="(currentPageIndex+1) === totalPages" translate="TUTRIAL_GENERAL_NEXT_BUTTON_END" data-ng-click="closeAndShowLastPage()"></span>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.less b/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.less
new file mode 100644
index 0000000000..410a54e9c1
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.less
@@ -0,0 +1,213 @@
+.sdc-tutorial-page {
+
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.8);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 3000;
+
+    .sdc-tutorial-container-wrapper {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .sdc-tutorial-container {
+        .bg_c;
+        width: 830px;
+        height: 466px;
+        box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.35);
+    }
+
+    .sdc-tutorial-container-tabs {
+        height: 56px;
+        display: flex;
+        flex-direction: row;
+    }
+
+    .sdc-tutorial-container-tab {
+        .a_6;
+        flex-grow: 1;
+        align-items: center;
+        justify-content: center;
+        display: flex;
+        height: 56px;
+        position: relative;
+        opacity: 0.8;
+
+        span {
+            .hand;
+        }
+
+        &::after {
+            content: '';
+            display: block;
+            border-right: solid 1px ;
+            border-color: rgba(59, 123, 155, 0.31);
+            height: 28px;
+            right: 0;
+            position: absolute;
+            top: 14px; //(56-28)/2
+            width: 1px;
+        }
+
+        &:last-child:after {
+            display: none;
+        }
+
+        &.selected {
+            opacity: 1;
+            .bold;
+        }
+
+    }
+
+    .sdc-tutorial-container-content {
+        .bg_a;
+        .perfect-scrollbar;
+        display: flex;
+        align-items: center;
+        height: 410px;
+    }
+
+    .sdc-tutorial-skip {
+        .c_1;
+        .hand;
+        text-align: right;
+        margin-bottom: 9px;
+    }
+
+    .sdc-tutorial-footer {
+        .c_4;
+        margin-top: 9px;
+
+        .sdc-tutorial-footer-prev-button {
+            float: left;
+            position: relative;
+            padding-left: 14px;
+            .noselect;
+
+            span {
+                .hand;
+                &::before {
+                    content: '<';
+                    display: block;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                }
+            }
+        }
+
+        .sdc-tutorial-footer-page-counter {
+            .e_3;
+            position: absolute;
+            left: 50%;
+            margin-top: 2px;
+            cursor: default;
+            .noselect;
+
+            .selected {
+                .c_3;
+                .bold;
+                margin-right: 2px;
+            }
+
+            .total {
+                margin-left: 2px;
+            }
+        }
+
+        .sdc-tutorial-footer-next-button {
+            float: right;
+            position: relative;
+            padding-right: 14px;
+            .noselect;
+
+            span {
+                .hand;
+
+                &::after {
+                    content: '>';
+                    display: block;
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                }
+            }
+        }
+
+    }
+
+}
+
+///////////////// TEXT TEMPLATE
+.sdc-tutorial-text-template {
+
+    padding: 20px 65px;
+
+    h1 {
+        .c_15;
+        margin-top: 0;
+    }
+
+    p {
+        .c_10;
+    }
+}
+
+///////////////// IMAGE TEMPLATE
+.sdc-tutorial-image-template {
+
+    .sdc-tutorial-image-template-text {
+        padding: 16px 38px;
+        height: 118px;
+        h1 {
+            .c_11;
+            margin: 0 0 4px 0;
+        }
+
+        p {
+            .c_4;
+            font-weight: 300;
+            line-height: 21px;
+        }
+
+    }
+
+    .sdc-tutorial-page-2-image  { background: transparent url('../../../styles/images/tutorial/2.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-3-image  { background: transparent url('../../../styles/images/tutorial/3.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-4-image  { background: transparent url('../../../styles/images/tutorial/4.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-5-image  { background: transparent url('../../../styles/images/tutorial/5.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-6-image  { background: transparent url('../../../styles/images/tutorial/6.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-7-image  { background: transparent url('../../../styles/images/tutorial/7.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-8-image  { background: transparent url('../../../styles/images/tutorial/8.png') no-repeat 0 0; width: 830px; height: 292px;}
+
+    .sdc-tutorial-page-10-image { background: transparent url('../../../styles/images/tutorial/10.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-11-image { background: transparent url('../../../styles/images/tutorial/11.png') no-repeat 0 0; width: 830px; height: 292px;}
+
+    .sdc-tutorial-page-13-image { background: transparent url('../../../styles/images/tutorial/13.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-14-image { background: transparent url('../../../styles/images/tutorial/14.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-15-image { background: transparent url('../../../styles/images/tutorial/15.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-16-image { background: transparent url('../../../styles/images/tutorial/16.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-17-image { background: transparent url('../../../styles/images/tutorial/17.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-18-image { background: transparent url('../../../styles/images/tutorial/18.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-19-image { background: transparent url('../../../styles/images/tutorial/19.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-20-image { background: transparent url('../../../styles/images/tutorial/20.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-21-image { background: transparent url('../../../styles/images/tutorial/21.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-22-image { background: transparent url('../../../styles/images/tutorial/22.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-23-image { background: transparent url('../../../styles/images/tutorial/23.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-24-image { background: transparent url('../../../styles/images/tutorial/24.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-25-image { background: transparent url('../../../styles/images/tutorial/25.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-26-image { background: transparent url('../../../styles/images/tutorial/26.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-27-image { background: transparent url('../../../styles/images/tutorial/27.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-28-image { background: transparent url('../../../styles/images/tutorial/28.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-29-image { background: transparent url('../../../styles/images/tutorial/29.png') no-repeat 0 0; width: 830px; height: 292px;}
+    .sdc-tutorial-page-30-image { background: transparent url('../../../styles/images/tutorial/30.png') no-repeat 0 0; width: 830px; height: 292px;}
+
+}
diff --git a/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.ts b/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.ts
new file mode 100644
index 0000000000..7df35cade9
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.ts
@@ -0,0 +1,147 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.Directives {
+    'use strict';
+    export interface ITutorialScope extends ng.IScope {
+        showTutorial:boolean;
+        isFirstTime:boolean;
+        templateUrl:string;
+        totalPages: number;
+        currentPageIndex: number;
+        page:number;
+        tabs:Array<string>;
+        tutorialData:any;
+        pageObject:any;
+
+        initPage:Function;
+        next:Function;
+        previous:Function;
+        hasNext():boolean;
+        hasPrevious():boolean;
+        closeTutorial:Function;
+        closeAndShowLastPage:Function;
+    }
+
+    export class TutorialDirective implements ng.IDirective {
+
+        constructor(
+            private $templateCache:ng.ITemplateCacheService,
+            private sdcConfig:Models.IAppConfigurtaion,
+            private $state:ng.ui.IStateService
+        ) {
+        }
+
+        scope = {
+            page: '=',
+            showTutorial: '=',
+            isFirstTime: '='
+        };
+
+        replace = false;
+        restrict = 'EA';
+        template = ():string => {
+            return this.$templateCache.get('/app/scripts/directives/tutorial/tutorial-directive.html');
+        };
+
+        link = (scope:ITutorialScope, $elem:any) => {
+
+            let findPageIndex:Function = (pageId:number):number=> {
+                for (let i:number=0;i<scope.totalPages;i++){
+                    if (scope.tutorialData.pages[i].id===pageId){
+                        return i;
+                    }
+                }
+                return -1;
+            }
+
+            let showCurrentPage:Function = ():void=> {
+                scope.pageObject = scope.tutorialData.pages[scope.currentPageIndex];
+                scope.templateUrl = '/app/scripts/directives/tutorial/' + scope.pageObject.template + '.html';
+            }
+
+            scope.tutorialData = this.sdcConfig.tutorial;
+
+            scope.closeTutorial = ()=> {
+                scope.showTutorial = false;
+                if(scope.isFirstTime){
+                    scope.isFirstTime=false;
+                }
+            }
+
+            scope.closeAndShowLastPage = ()=> {
+                if(scope.isFirstTime){
+                    this.$state.go('dashboard.tutorial-end');
+                }
+                scope.closeTutorial();
+            }
+
+            let init:Function = ():void => {
+                scope.tabs = scope.tutorialData.tabs;
+                scope.totalPages = scope.tutorialData.pages.length;
+                scope.initPage(scope.page);
+
+            }
+
+            scope.initPage = (pageId) => {
+                scope.currentPageIndex = findPageIndex(pageId);
+                showCurrentPage();
+            }
+
+            scope.next = ():void => {
+                if (scope.hasNext()){
+                    scope.currentPageIndex++;
+                    showCurrentPage();
+                }
+            }
+
+            scope.previous = ():void => {
+                if (scope.hasPrevious()){
+                    scope.currentPageIndex--;
+                    showCurrentPage();
+                }
+            }
+
+            scope.hasNext = ():boolean => {
+                return (scope.currentPageIndex+1) < scope.totalPages;
+            }
+
+            scope.hasPrevious = ():boolean => {
+                return scope.currentPageIndex>0;
+            }
+
+            angular.element(document).ready(function () {
+                init();
+            });
+
+            scope.$watch('showTutorial', (showTutorial:any):void => {
+                scope.initPage(scope.page);
+            });
+
+        };
+
+        public static factory = ($templateCache:ng.ITemplateCacheService, sdcConfig:Models.IAppConfigurtaion, $state:ng.ui.IStateService)=> {
+            return new TutorialDirective($templateCache, sdcConfig, $state);
+        };
+
+    }
+
+    TutorialDirective.factory.$inject = ['$templateCache', 'sdcConfig', '$state'];
+}