diff options
Diffstat (limited to 'ui/imports/ui/components/top-navbar-menu')
3 files changed, 211 insertions, 0 deletions
diff --git a/ui/imports/ui/components/top-navbar-menu/top-navbar-menu.html b/ui/imports/ui/components/top-navbar-menu/top-navbar-menu.html new file mode 100644 index 0000000..0b87521 --- /dev/null +++ b/ui/imports/ui/components/top-navbar-menu/top-navbar-menu.html @@ -0,0 +1,59 @@ +<!-- +######################################################################################## +# 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="TopNavbarMenu"> + + <nav class="os-topnavbarmenu navbar navbar-inverse navbar-custom navbar-fixed-top"> + <div class="container-fluid"> + <div class="sm-navbar-header navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + + <div class="sm-navbar-brand-container navbar-brand navbar-custom"> + <img class="cl-item sm-cisco-logo" src="/logo-cisco.svg" > + <img class="cl-item sm-calipso-logo" src="/images/calipso-logo.jpg" > + <p class="cl-item sm-project-label" href="/">Project Calipso </p> + </div> + </div> + <div id="navbar" class="navbar-collapse collapse"> + <div class="navbar-form navbar-right"> + <div class="search"> + <div class="search-input-group"> + <span class="fa fa-search"></span> + <input id="search" placeholder="Search ..."> + </div> + <div class="search-auto-complete"> + {{>SearchAutoCompleteList (argsSearch envId searchTerm) }} + </div> + </div> + </div> + <ul class="nav navbar-nav navbar-right"> + <li class="dropdown os-nav-link"> + {{> envForm argsEnvForm }} + </li> + <li><a class="sm-dashboard-link os-nav-link"> + <i class="material-icons">home</i> + Dashboard + </a></li> + <li><a class="sm-get-started-link os-nav-link">Get started</a></li> + <li><a class="sm-login-buttons-link os-nav-link" href="#" + >{{> loginButtons}}</a></li> + </ul> + </div> + </div> + </nav> + + {{> alarmIcons}} + +</template> diff --git a/ui/imports/ui/components/top-navbar-menu/top-navbar-menu.js b/ui/imports/ui/components/top-navbar-menu/top-navbar-menu.js new file mode 100644 index 0000000..6968060 --- /dev/null +++ b/ui/imports/ui/components/top-navbar-menu/top-navbar-menu.js @@ -0,0 +1,129 @@ +///////////////////////////////////////////////////////////////////////////////////////// +// 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: TopNavbarMenu + */ + +import { Template } from 'meteor/templating'; +import { ReactiveDict } from 'meteor/reactive-dict'; +//import * as R from 'ramda'; + +import { store } from '/imports/ui/store/store'; +//import { setSearchTerm } from '/imports/ui/actions/search-interested-parties'; +//import { notifySearchAutoCompleteTermChanged } from '/imports/ui/actions/search-interested-parties'; +import { idToStr } from '/imports/lib/utilities'; +import factory from 'reactive-redux'; + +import '/imports/ui/components/search-auto-complete-list/search-auto-complete-list'; +import '/imports/ui/components/get-started/get-started'; +import '/imports/ui/components/env-form/env-form'; +import '/imports/ui/components/alarm-icons/alarm-icons'; + +import './top-navbar-menu.html'; + +/* + * Lifecycles + */ + +Template.TopNavbarMenu.onCreated(function () { + let instance = this; + + instance.state = new ReactiveDict(); + instance.state.setDefault({ + isAutoCompleteOpen: false, + searchTerm: null + }); + + const mainEnvIdSelector = (state) => (state.components.mainApp.selectedEnvironment._id); + instance.rdxMainEnvId = factory(mainEnvIdSelector, store); + + instance.tempSearchTerm = null; + instance.searchDebounced = _.debounce(function () { + instance.state.set('searchTerm', instance.tempSearchTerm); + instance.state.set('isAutoCompleteOpen', true); + }, 250); +}); + +Template.TopNavbarMenu.onDestroyed(function () { + //let instance = this; +}); + +Template.TopNavbarMenu.events = { + 'keyup #search': function (event) { + let instance = Template.instance(); + let searchTerm = instance.$(event.target).val(); + + instance.tempSearchTerm = searchTerm; + instance.searchDebounced(); + }, + + 'click .os-nav-link': function () { + let instance = Template.instance(); + instance.state.set('isAutoCompleteOpen', false); + }, + + 'click .sm-dashboard-link': function () { + Router.go('Dashboard'); + }, + + 'click .sm-get-started-link': function () { + Router.go('getstarted'); + } +}; + +Template.TopNavbarMenu.helpers({ + envId: function () { + let instance = Template.instance(); + return instance.rdxMainEnvId.get(); + }, + + searchTerm: function () { + let instance = Template.instance(); + return instance.state.get('searchTerm'); + }, + + argsSearch: function (envId, searchTerm) { + let instance = Template.instance(); + + return { + isOpen: instance.state.get('isAutoCompleteOpen'), + envId: envId, + searchTerm: searchTerm, + onResultSelected(node) { + instance.state.set('isAutoCompleteOpen', false); + + let searchInput = instance.$('input#search'); + searchInput.val(node.name_path); + + Router.go('environment', { _id: idToStr(node._envId) }, { + query: { selectedNodeId: idToStr(node._id) } + }); + }, + onCloseReq() { + instance.state.set('isAutoCompleteOpen', false); + + let searchInput = instance.$('input#search'); + searchInput.val(null); + }, + }; + }, + + argsEnvForm: function () { + let instance = Template.instance(); + let selectedEnvironment = instance.state.get('selectedEnvironment'); + + return { + selectedEnvironment: selectedEnvironment, + onEnvSelected: function (env) { + Router.go('environment', { _id: idToStr(env._id) }, { }); + } + }; + } + +}); // end: helpers diff --git a/ui/imports/ui/components/top-navbar-menu/top-navbar-menu.styl b/ui/imports/ui/components/top-navbar-menu/top-navbar-menu.styl new file mode 100644 index 0000000..0a49678 --- /dev/null +++ b/ui/imports/ui/components/top-navbar-menu/top-navbar-menu.styl @@ -0,0 +1,23 @@ +.os-topnavbarmenu + .os-nav-link + cursor: pointer; + + .sm-dashboard-link + display: flex; + + .sm-navbar-header + .sm-navbar-brand-container + display: flex; + + .sm-cisco-logo + width: 40px; + + .sm-calipso-logo + width: 40px; + + .sm-project-label + color: white; + font-size: medium; + + .cl-item + margin: 0px 10px |