diff options
Diffstat (limited to 'ui/imports/ui/components/accordion-nav-menu')
3 files changed, 209 insertions, 0 deletions
diff --git a/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.html b/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.html new file mode 100644 index 0000000..d4cf5de --- /dev/null +++ b/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.html @@ -0,0 +1,43 @@ +<!-- +######################################################################################## +# 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="accordionNavMenu"> + <nav class="os-accordion-nav-menu"> + <div id="left-nav-menu" class="left-nav-menu"> + <div class="menu-header"> + <p> + {{ envName }} + </p> + <a href="#"><i class="material-icons">menu</i></a> + </div> + <ul class="sm-menu-items-list"> + <li> + <a class="sm-toggle-graph-button toggleGraph" href="#"> + <span><i class="material-icons">share</i>Toggle Graph</span> + </a> + </li> + <li> + <a class="sm-btn-dashboard"> + <span><i class="material-icons">home</i>Dashboard</span> + </a> + </li> + + {{#if mainNode }} + <div class="sm-inventory-tree"> + {{>TreeNode (argsTreeNode mainNode) }} + </div> + {{/if }} + + <li><a href="#"><i class="fa fa-envelope"> </i> Contact</a></li> + </ul> + <div class="menu-footer"> Cisco Systems inc. All rights reserved.</div> + </div> + </nav> +</template> diff --git a/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.js b/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.js new file mode 100644 index 0000000..b3bafa2 --- /dev/null +++ b/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.js @@ -0,0 +1,155 @@ +///////////////////////////////////////////////////////////////////////////////////////// +// 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: accordionNavMenu + */ + +/* eslint indent: "off" */ + +import * as R from 'ramda'; +import { Template } from 'meteor/templating'; +import { ReactiveDict } from 'meteor/reactive-dict'; +//import { Tracker } from 'meteor/tracker'; +//import { Session } from 'meteor/session'; +//import { InventoryTreeNodeBehavior } from '/imports/ui/lib/inventory-tree-node-behavior'; +import { EnvironmentTreeNodeBehavior } from '/imports/ui/lib/environment-tree-node-behavior'; +//import { Inventory } from '/imports/api/inventories/inventories'; +import { SimpleSchema } from 'meteor/aldeed:simple-schema'; + +import '/imports/ui/components/tree-node/tree-node'; +import '/imports/ui/components/accordionTreeNode/accordionTreeNode'; +import '/imports/ui/components/d3graph/d3graph'; + +import { store } from '/imports/ui/store/store'; +import { + resetEnvTreeNodeChildren, + addUpdateEnvTreeNode, + addUpdateChildrenEnvTreeNode, + startOpenEnvTreeNode, + startCloseEnvTreeNode, + endCloseEnvTreeNode, + setEnvChildDetectedTreeNode, +} from '/imports/ui/actions/environment-panel.actions'; + +import './accordion-nav-menu.html'; + +Template.accordionNavMenu.onCreated(function () { + let instance = this; + + instance.state = new ReactiveDict(); + instance.state.setDefault ({}); + + createAttachedFns(instance); + + instance.autorun(function () { + let data = Template.currentData(); + + new SimpleSchema({ + envName: { type: String }, + mainNode: { type: Object, blackbox: true }, + onOpeningDone: { type: Function }, + onNodeSelected: { type: Function }, + onToggleGraphReq: { type: Function }, + onResetSelectedNodeReq: { type: Function }, + onPositionRetrieved: { type: Function }, + onScrollToNodePerformed: { type: Function }, + onOpenLinkReq: { type: Function }, + onResetNeedChildDetection: { type: Function }, + }).validate(data); + }); + +}); + + +Template.accordionNavMenu.rendered = function () { +}; + +Template.accordionNavMenu.onDestroyed(function () { +}); + +/* + * Events + */ + +Template.accordionNavMenu.events({ + 'click .sm-btn-dashboard': function (_event, _instance) { + let data = Template.currentData(); + data.onResetSelectedNodeReq(); + }, + + 'click .sm-toggle-graph-button': function (_event, _instance) { + let data = Template.currentData(); + data.onToggleGraphReq(); + } +}); + +/* + * Helpers + */ + +Template.accordionNavMenu.helpers({ + argsTreeNode: function (node) { + let instance = Template.instance(); + let data = Template.currentData(); + + return { + behavior: EnvironmentTreeNodeBehavior, + showDetailsLine: false, + openState: node.openState, + node: node.nodeInfo, + children: node.children, + childDetected: node.childDetected, + needChildDetection: node.needChildDetection, + linkDetected: node.linkDetected, + level: node.level, + positionNeeded: node.positionNeeded, + scrollToNodeIsNeeded: node.scrollToNodeIsNeeded, + onResetChildren: instance._fns.onResetChildren, + onChildRead: instance._fns.onChildRead, + onChildrenRead: instance._fns.onChildrenRead, + onStartOpenReq: instance._fns.onStartOpenReq, + onStartCloseReq: instance._fns.onStartCloseReq, + onClosingDone: instance._fns.onClosingDone, + onChildDetected: instance._fns.onChildDetected, + onOpeningDone: data.onOpeningDone, + onNodeSelected: data.onNodeSelected, + onPositionRetrieved: data.onPositionRetrieved, + onScrollToNodePerformed: data.onScrollToNodePerformed, + onOpenLinkReq: data.onOpenLinkReq, + onResetNeedChildDetection: data.onResetNeedChildDetection, + }; + } +}); // end: helpers + +function createAttachedFns(instance) { + + instance._fns = { + onResetChildren: function (nodePath) { + store.dispatch(resetEnvTreeNodeChildren(R.tail(nodePath))); + }, + onChildRead: function (nodePath, childNode) { + store.dispatch(addUpdateEnvTreeNode(R.tail(nodePath), childNode)); + }, + onChildrenRead: function (nodePath, childrenInfo) { + store.dispatch(addUpdateChildrenEnvTreeNode(R.tail(nodePath), childrenInfo)); + }, + onStartOpenReq: (nodePath) => { + store.dispatch(startOpenEnvTreeNode(R.tail(nodePath))); + }, + onStartCloseReq: (nodePath) => { + store.dispatch(startCloseEnvTreeNode(R.tail(nodePath))); + }, + onClosingDone: (nodePath) => { + store.dispatch(endCloseEnvTreeNode(R.tail(nodePath))); + }, + onChildDetected: (nodePath) => { + store.dispatch(setEnvChildDetectedTreeNode(R.tail(nodePath))); + }, + }; +} diff --git a/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.styl b/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.styl new file mode 100644 index 0000000..b3c9ef1 --- /dev/null +++ b/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.styl @@ -0,0 +1,11 @@ +.os-accordion-nav-menu + .sm-btn-dashboard + cursor: pointer; + + .sm-inventory-tree + float: left; + width: 100%; + + display: flex; + flex-flow: column; + align-items: stretch; |