Displaying service coarse graph
Change-Id: Iee05e9114255a20ebf600337768d180514239299
diff --git a/views/ngXosViews/serviceGrid/src/js/sidePanel.component.js b/views/ngXosViews/serviceGrid/src/js/sidePanel.component.js
new file mode 100644
index 0000000..4421ee7
--- /dev/null
+++ b/views/ngXosViews/serviceGrid/src/js/sidePanel.component.js
@@ -0,0 +1,74 @@
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 7/18/16.
+ */
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.uiComponents')
+ .directive('xosSidePanel', function(){
+ return {
+ restrict: 'E',
+ scope: {
+ config: '=',
+ show: '='
+ },
+ template: `
+ <div class="xos-side-panel-content {{vm.classes.join(' ')}}">
+ <div class="row">
+ <div class="col-xs-12">
+ <button type="button" class="close" ng-click="vm.dismiss()">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-xs-12" ng-transclude></div>
+ </div>
+ </div>
+ `,
+ transclude: true,
+ bindToController: true,
+ controllerAs: 'vm',
+ controller: function($scope, $timeout, _){
+ console.log(this.show);
+
+ this.classes = [];
+
+ this.classes.push(this.config.position);
+
+ this.dismiss = () => {
+ this.show = false;
+ this.classes = this.toggleClass(this.classes);
+ $timeout(() => {
+ return _.remove(this.classes, c => c === 'out');
+ }, 500);
+ };
+
+ this.toggleClass = (classes) => {
+ if(classes.indexOf('in') > -1){
+ _.remove(this.classes, c => c === 'in');
+ this.classes.push('out');
+ return classes;
+ }
+ _.remove(this.classes, c => c === 'out');
+ this.classes.push('in');
+ return classes;
+ };
+
+ $scope.$watch(() => this.show, val => {
+ if (angular.isDefined(val)){
+ if (val && val === true){
+ this.classes = this.toggleClass(this.classes);
+ }
+ }
+ })
+ }
+ }
+ });
+})();
+