diff options
author | Koren Lev <korenlev@gmail.com> | 2017-07-27 16:42:15 +0300 |
---|---|---|
committer | Koren Lev <korenlev@gmail.com> | 2017-07-27 16:42:15 +0300 |
commit | b88c78e3cf2bef22aa2f1c4d0bf305e303bc15f0 (patch) | |
tree | ffa30a6e1511d72562d8772b8700cda52b2752a1 /ui/imports/ui/components/list-info-box | |
parent | b70483739d1f6f4f0d31987ed2e4d1e30d71d579 (diff) |
adding calipso ui
Change-Id: Ifa6f63daebb07f45580f747341960e898fdb00c4
Signed-off-by: Koren Lev <korenlev@gmail.com>
Diffstat (limited to 'ui/imports/ui/components/list-info-box')
3 files changed, 175 insertions, 0 deletions
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 |