adding calipso ui

Change-Id: Ifa6f63daebb07f45580f747341960e898fdb00c4
Signed-off-by: Koren Lev <korenlev@gmail.com>

3 files changed, 169 insertions, 0 deletions

diff --git a/ui/imports/ui/components/pager/pager.html b/ui/imports/ui/components/pager/pager.html
new file mode 100644
index 0000000..2e14bbd
--- /dev/null
+++ b/ui/imports/ui/components/pager/pager.html
@@ -0,0 +1,42 @@
+<!-- 
+########################################################################################
+# Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others #
+#                                                                                      #
+# All rights reserved. This program and the accompanying materials                     #
+# are made available under the terms of the Apache License, Version 2.0                #
+# which accompanies this distribution, and is available at                             #
+# http://www.apache.org/licenses/LICENSE-2.0                                           #
+########################################################################################
+ -->
+<template name="Pager">
+<div class="os-pager">
+  <nav aria-label="Page navigation">
+		<ul class="pagination">
+			<li class="{{#if disablePrev}}disabled{{/if}}">
+				<a class="sm-first-button" aria-label="First">
+					<span aria-hidden="true">first</span>
+				</a>
+			</li>
+			<li class="{{#if disablePrev}}disabled{{/if}}">
+				<a class="sm-prev-button" aria-label="Previous">
+					<span aria-hidden="true">previous</span>
+				</a>
+			</li>
+      {{#each pageButton in pagesButtons }}
+			<li class="{{#if (isCurrentPage pageButton.number currentPage)}}active{{/if}}"><a class="sm-page-button" data-page-number="{{ pageButton.number }}"
+            >{{ pageButton.label }}</a></li>
+      {{/each }}
+			<li class="{{#if disableNext}}disabled{{/if}}">
+				<a class="sm-next-button" aria-label="Next">
+					<span aria-hidden="true">next</span>
+				</a>
+			</li>
+			<li class="{{#if disableNext}}disabled{{/if}}">
+				<a class="sm-last-button" aria-label="Next">
+					<span aria-hidden="true">last</span>
+				</a>
+			</li>
+		</ul>
+	</nav>	
+</div>
+</template>
diff --git a/ui/imports/ui/components/pager/pager.js b/ui/imports/ui/components/pager/pager.js
new file mode 100644
index 0000000..19b2789
--- /dev/null
+++ b/ui/imports/ui/components/pager/pager.js
@@ -0,0 +1,123 @@
+/////////////////////////////////////////////////////////////////////////////////////////
+// Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others /
+//                                                                                      /
+// All rights reserved. This program and the accompanying materials                     /
+// are made available under the terms of the Apache License, Version 2.0                /
+// which accompanies this distribution, and is available at                             /
+// http://www.apache.org/licenses/LICENSE-2.0                                           /
+/////////////////////////////////////////////////////////////////////////////////////////
+/*
+ * Template Component: Pager 
+ */
+    
+//import { Meteor } from 'meteor/meteor'; 
+import * as R from 'ramda';
+import { Template } from 'meteor/templating';
+import { SimpleSchema } from 'meteor/aldeed:simple-schema';
+import { ReactiveDict } from 'meteor/reactive-dict';
+        
+import './pager.html';     
+    
+/*  
+ * Lifecycles
+ */   
+  
+Template.Pager.onCreated(function() {
+  var instance = this;
+  instance.state = new ReactiveDict();
+  instance.state.setDefault({
+    pagesButtons: [{ label: '1', number: 1 }],
+    currentPage: 1,
+  });
+
+  instance.autorun(function () {
+    let data = Template.currentData();
+    new SimpleSchema({
+      disableNext: { type: Boolean },
+      disablePrev: { type: Boolean },
+      totalPages: { type: Number },
+      currentPage: { type: Number },
+      onReqNext: { type: Function },
+      onReqPrev: { type: Function },
+      onReqPage: { type: Function },
+      onReqFirst: { type: Function },
+      onReqLast: { type: Function },
+    }).validate(data);
+
+    instance.state.set('totalPages', data.totalPages);
+    instance.state.set('currentPage', data.currentPage);
+  });
+
+  instance.autorun(function () {
+    let numOfPagesInPager = 5;
+    let totalPages = instance.state.get('totalPages');
+    let currentPage = instance.state.get('currentPage');
+    let first = R.ifElse((x) => x < 1, R.always(1), R.identity)(currentPage - numOfPagesInPager + 1);
+    let last = R.ifElse((x) => x > totalPages, R.always(totalPages + 1), R.identity)(
+      first + numOfPagesInPager);
+
+    let pagesButtons = R.map((pageNumber) => { 
+      return { 
+        label: R.toString(pageNumber), number: pageNumber
+      }; 
+    }, R.range(first, last));
+
+    instance.state.set('pagesButtons', pagesButtons);
+  });
+});  
+
+/*
+Template.Pager.rendered = function() {
+};  
+*/
+
+/*
+ * Events
+ */
+
+Template.Pager.events({
+  'click .sm-prev-button': function (_event, _instance) {
+    let data = Template.currentData(); 
+    data.onReqPrev();
+  }, 
+
+  'click .sm-next-button': function (_event, _instance) {
+    let data = Template.currentData(); 
+    data.onReqNext();
+  }, 
+
+  'click .sm-first-button': function (_event, _instance) {
+    let data = Template.currentData(); 
+    data.onReqFirst();
+  }, 
+
+  'click .sm-last-button': function (_event, _instance) {
+    let data = Template.currentData(); 
+    data.onReqLast();
+  }, 
+
+  'click .sm-page-button': function (event, _instance) {
+    let data = Template.currentData();
+    let pageNumber = parseInt(event.target.dataset.pageNumber);
+    data.onReqPage(pageNumber);
+  },
+
+
+});
+   
+/*  
+ * Helpers
+ */
+
+Template.Pager.helpers({    
+  pagesButtons: function () {
+    let instance = Template.instance();
+    return instance.state.get('pagesButtons');
+  },
+
+  isCurrentPage: function (pageNum, currentPage) {
+    return pageNum === currentPage;
+  },
+}); // end: helpers
+
+
diff --git a/ui/imports/ui/components/pager/pager.styl b/ui/imports/ui/components/pager/pager.styl
new file mode 100644
index 0000000..3843ccd
--- /dev/null
+++ b/ui/imports/ui/components/pager/pager.styl
@@ -0,0 +1,4 @@
+.os-pager
+  .cl-disabled
+    color: gray;
+