From b88c78e3cf2bef22aa2f1c4d0bf305e303bc15f0 Mon Sep 17 00:00:00 2001
From: Koren Lev <korenlev@gmail.com>
Date: Thu, 27 Jul 2017 16:42:15 +0300
Subject: adding calipso ui

Change-Id: Ifa6f63daebb07f45580f747341960e898fdb00c4
Signed-off-by: Koren Lev <korenlev@gmail.com>
---
 .../ui/components/list-info-box/list-info-box.html |  60 +++++++++++
 .../ui/components/list-info-box/list-info-box.js   | 111 +++++++++++++++++++++
 .../ui/components/list-info-box/list-info-box.styl |   4 +
 3 files changed, 175 insertions(+)
 create mode 100644 ui/imports/ui/components/list-info-box/list-info-box.html
 create mode 100644 ui/imports/ui/components/list-info-box/list-info-box.js
 create mode 100644 ui/imports/ui/components/list-info-box/list-info-box.styl

(limited to 'ui/imports/ui/components/list-info-box')

diff --git a/ui/imports/ui/components/list-info-box/list-info-box.html b/ui/imports/ui/components/list-info-box/list-info-box.html
new file mode 100644
index 0000000..8fa552f
--- /dev/null
+++ b/ui/imports/ui/components/list-info-box/list-info-box.html
@@ -0,0 +1,60 @@
+<!-- 
+########################################################################################
+# 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="ListInfoBox">
+<div class="os-list-info-box cards-450 white flex-box-1">
+  <div class="flex-box ">
+    <div class="flex-box-1">
+      {{> Icon type=icon.type name=icon.name }}
+    </div>
+    <div class="flex-box-2">
+      <h3>{{ header }}</h3>
+    <table class="table table-striped">
+      <tbody>
+        <tr>
+          <th>Last Scanning</th>
+          <td>{{ lastScanning }}</td>
+        </tr>
+        <tr>
+          <th>Number of {{ header }}:</th>
+          <td>{{ itemsCount }}</td>
+        </tr>
+        <tr>
+          <th>{{ header }}:</th>
+          <td>
+            <div class="dropdown">
+                <button class="btn btn-default dropdown-toggle" 
+                  type="button" 
+                  data-toggle="dropdown" 
+                  aria-haspopup="true" 
+                  aria-expanded="true"
+                  >
+                    Select from dropdown
+                    <span class="caret"></span>
+                </button>
+
+                <ul class="sm-items-dropdown-menu dropdown-menu" 
+                  aria-labelledby="dropdownMenu1">
+                    {{#each option in (options list listItemFormat) }}
+                        <li>
+                          <a data-value="{{ option.value }}" 
+                            class="os-list-item">{{option.label}}</a>
+                        </li>
+                    {{/each}}
+                </ul>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    </div>
+  </div>
+</div>
+</template>
diff --git a/ui/imports/ui/components/list-info-box/list-info-box.js b/ui/imports/ui/components/list-info-box/list-info-box.js
new file mode 100644
index 0000000..3fe4542
--- /dev/null
+++ b/ui/imports/ui/components/list-info-box/list-info-box.js
@@ -0,0 +1,111 @@
+/////////////////////////////////////////////////////////////////////////////////////////
+// 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: ListInfoBox 
+ */
+    
+//import { Meteor } from 'meteor/meteor'; 
+import { Template } from 'meteor/templating';
+//import { ReactiveDict } from 'meteor/reactive-dict';
+import { SimpleSchema } from 'meteor/aldeed:simple-schema';
+import * as R from 'ramda';
+import { LocalCollection } from 'meteor/minimongo';
+import { Icon } from '/imports/lib/icon';
+        
+import './list-info-box.html';     
+    
+/*  
+ * Lifecycles
+ */   
+  
+Template.ListInfoBox.onCreated(function() {
+  let instance = this;
+  instance.autorun(function () {
+    let data = Template.currentData();
+    new SimpleSchema({
+      header: { type: String },
+      list: { type: LocalCollection.Cursor, blackbox: true },
+      icon: { type: Icon, blackbox: true },
+      listItemFormat: {
+        type: {
+          getLabelFn: { type: Function },
+          getValueFn: { type: Function },
+        },
+        blackbox: true
+      },
+      onItemSelected: { type: Function },
+
+    }).validate(data);
+
+  });
+});  
+
+/*
+Template.ListInfoBox.rendered = function() {
+};  
+*/
+
+/*
+ * Events
+ */
+
+Template.ListInfoBox.events({
+  'click .os-list-item'(event) {
+    let instance = Template.instance();
+    let val = event.target.attributes['data-value'].value;
+    instance.data.onItemSelected(val);
+  }
+});
+   
+/*  
+ * Helpers
+ */
+
+Template.ListInfoBox.helpers({    
+  options: function (list, listItemFormat) {
+    //let instance = Template.instance();
+
+    let options = R.map((listItem) => {
+      return { 
+        label: listItemFormat.getLabelFn(listItem), 
+        value: listItemFormat.getValueFn(listItem) 
+      };
+    }, list.fetch());
+
+    return options;
+  },
+
+  itemsCount: function () {
+    let instance = Template.instance();
+    return instance.data.list.count();
+  },
+
+  argsSelect: function (list, listItemFormat) {
+    let instance = Template.instance();
+
+    let options = R.map((listItem) => {
+      return { 
+        label: listItemFormat.getLabelFn(listItem), 
+        value: listItemFormat.getValueFn(listItem) 
+      };
+    }, list.fetch());
+
+    return {
+      values: [],
+      options: options,
+      showNullOption: true,
+      nullOptionLabel: 'Select from dropdown',
+      setModel: function (val) {
+        instance.data.onItemSelected(val);
+      },
+    };
+  }
+});
+
+
diff --git a/ui/imports/ui/components/list-info-box/list-info-box.styl b/ui/imports/ui/components/list-info-box/list-info-box.styl
new file mode 100644
index 0000000..43c8d0a
--- /dev/null
+++ b/ui/imports/ui/components/list-info-box/list-info-box.styl
@@ -0,0 +1,4 @@
+.os-list-info-box
+  .sm-items-dropdown-menu
+    li
+      cursor: pointer
-- 
cgit 1.2.3-korg