Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <require from="nav-bar.html"></require>
- <nav-bar router.bind="router"></nav-bar>
- <div class="page-host">
- <div class="row">
- <router-view swap-order="after" class="col-md-12"></router-view>
- </div>
- </div>
- </template>
- import {Redirect} from 'aurelia-router';
- import {Router, RouterConfiguration} from 'aurelia-router';
- import {EventAggregator} from 'aurelia-event-aggregator';
- import {inject} from 'aurelia-framework';
- import {NavBarSpinner} from './nav-bar-spinner';
- @inject(EventAggregator)
- export class App
- {
- navBarSpinner;
- constructor(private ea: EventAggregator)
- {
- this.navBarSpinner = new NavBarSpinner('hello world')
- }
- router : Router;
- configureRouter(config: RouterConfiguration, router: Router)
- {
- config.title = 'bbv AmbientMonitor';
- config.map([
- { route: '', name: 'login', moduleId: './login', nav: true, title: 'Anmeldung' },
- { route: 'live-view-all', name: 'live-view-all', moduleId: './live-view-all', nav: true, title: 'Live-Ansicht' },
- { route: 'live-view-zg', name: 'live-view-zg', moduleId: './live-view-zg', nav: true, title: 'Live-Ansicht' },
- .
- .
- .
- .
- .
- .
- { route: 'historical-view', name: 'historical-view', moduleId: './historical-view', nav: true, title: 'Historie-Ansicht'}
- ]);
- this.router = router;
- }
- attached()
- {
- this.ea.subscribe('nav::toggleLogin', (data) =>
- {
- console.log('Subscribe data is: ' + data.nav);
- this.router.navigateToRoute(data.nav);
- });
- }
- }
- <template bindable="router">
- <require from="./nav-bar-spinner"></require>
- <!-- <require from="nav-bar-spinner.html"></require> -->
- <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse">
- <span class="sr-only">Toggle Navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">
- <i class="fa fa-home"></i>
- <span>${router.title}</span>
- </a>
- </div>
- <div class="collapse navbar-collapse" id="skeleton-navigation-navbar-collapse">
- <ul class="nav navbar-nav">
- <div class="pull-left">
- <compose class="nav navbar-nav" view="nav-bar-spinner.html" view-model.bind="navBarSpinner"></compose>
- </div>
- <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
- <a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a>
- </li>
- </ul>
- <!-- <ul class="nav navbar-nav navbar-right">
- <li class="loader" if.bind="router.isNavigating">
- <i class="fa fa-spinner fa-spin fa-2x"></i>
- </li>
- </ul> -->
- </div>
- </nav>
- </template>
- nav-bar-spinner.html
- <template bindable="navBarSpinner">
- <li class="dropdown">
- <div as-element="compose" view-model.bind="navBarSpinner"></div>
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Standort <span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#" click.trigger="publishNavLocation('live-view-zg')">Zug</a></li>
- <li><a href="#" click.trigger="publishNavLocation('live-view-zh')">Zürich</a></li>
- <li><a href="#" click.trigger="publishNavLocation('live-view-be')">Bern</a></li>
- <li><a href="#" click.trigger="publishNavLocation('live-view-lu')">Luzern</a></li>
- <li><a href="#" click.trigger="publishNavLocation('live-view-mu')">München</a></li>
- <li><button type="button" click.delegate="clickTest(120)" class="btn btn-default" view.model.bind="navBarSpinner">Click Test</button></li>
- </ul>
- </li>
- </template>
- import { EventAggregator } from 'aurelia-event-aggregator';
- import { inject } from 'aurelia-framework';
- import { View } from "aurelia-framework";
- @inject(EventAggregator)
- export class NavBarSpinner {
- ea;
- constructor(msg) {
- this.ea = new EventAggregator();
- }
- clickTest(data) {
- console.log("Jetzt wurde Click Test gedr�ckt... " + data);
- }
- publishNavLocation(navToCity) {
- this.ea.publish('nav::toggleLogin', {nav: navToCity});
- console.log("Method call publishLocationZug()");
- }
- }
Add Comment
Please, Sign In to add comment