Guest User

Untitled

a guest
Nov 24th, 2017
63
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.65 KB | None | 0 0
  1. <template>
  2. <require from="nav-bar.html"></require>
  3.  
  4. <nav-bar router.bind="router"></nav-bar>
  5.  
  6. <div class="page-host">
  7. <div class="row">
  8. <router-view swap-order="after" class="col-md-12"></router-view>
  9. </div>
  10. </div>
  11.  
  12. </template>
  13.  
  14. import {Redirect} from 'aurelia-router';
  15. import {Router, RouterConfiguration} from 'aurelia-router';
  16. import {EventAggregator} from 'aurelia-event-aggregator';
  17. import {inject} from 'aurelia-framework';
  18. import {NavBarSpinner} from './nav-bar-spinner';
  19.  
  20.  
  21. @inject(EventAggregator)
  22. export class App
  23. {
  24.  
  25. navBarSpinner;
  26.  
  27. constructor(private ea: EventAggregator)
  28. {
  29. this.navBarSpinner = new NavBarSpinner('hello world')
  30. }
  31.  
  32. router : Router;
  33.  
  34. configureRouter(config: RouterConfiguration, router: Router)
  35. {
  36. config.title = 'bbv AmbientMonitor';
  37. config.map([
  38. { route: '', name: 'login', moduleId: './login', nav: true, title: 'Anmeldung' },
  39. { route: 'live-view-all', name: 'live-view-all', moduleId: './live-view-all', nav: true, title: 'Live-Ansicht' },
  40. { route: 'live-view-zg', name: 'live-view-zg', moduleId: './live-view-zg', nav: true, title: 'Live-Ansicht' },
  41. .
  42. .
  43. .
  44. .
  45. .
  46. .
  47. { route: 'historical-view', name: 'historical-view', moduleId: './historical-view', nav: true, title: 'Historie-Ansicht'}
  48. ]);
  49.  
  50. this.router = router;
  51. }
  52.  
  53. attached()
  54. {
  55. this.ea.subscribe('nav::toggleLogin', (data) =>
  56. {
  57. console.log('Subscribe data is: ' + data.nav);
  58. this.router.navigateToRoute(data.nav);
  59. });
  60. }
  61. }
  62.  
  63. <template bindable="router">
  64.  
  65.  
  66. <require from="./nav-bar-spinner"></require>
  67. <!-- <require from="nav-bar-spinner.html"></require> -->
  68. <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  69. <div class="navbar-header">
  70. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse">
  71. <span class="sr-only">Toggle Navigation</span>
  72. <span class="icon-bar"></span>
  73. <span class="icon-bar"></span>
  74. <span class="icon-bar"></span>
  75. </button>
  76. <a class="navbar-brand" href="#">
  77. <i class="fa fa-home"></i>
  78. <span>${router.title}</span>
  79. </a>
  80. </div>
  81.  
  82. <div class="collapse navbar-collapse" id="skeleton-navigation-navbar-collapse">
  83.  
  84. <ul class="nav navbar-nav">
  85. <div class="pull-left">
  86. <compose class="nav navbar-nav" view="nav-bar-spinner.html" view-model.bind="navBarSpinner"></compose>
  87. </div>
  88. <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
  89. <a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a>
  90. </li>
  91. </ul>
  92.  
  93. <!-- <ul class="nav navbar-nav navbar-right">
  94. <li class="loader" if.bind="router.isNavigating">
  95. <i class="fa fa-spinner fa-spin fa-2x"></i>
  96. </li>
  97. </ul> -->
  98. </div>
  99. </nav>
  100. </template>
  101.  
  102. nav-bar-spinner.html
  103.  
  104. <template bindable="navBarSpinner">
  105. <li class="dropdown">
  106. <div as-element="compose" view-model.bind="navBarSpinner"></div>
  107. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Standort <span class="caret"></span></a>
  108. <ul class="dropdown-menu">
  109. <li><a href="#" click.trigger="publishNavLocation('live-view-zg')">Zug</a></li>
  110. <li><a href="#" click.trigger="publishNavLocation('live-view-zh')">Zürich</a></li>
  111. <li><a href="#" click.trigger="publishNavLocation('live-view-be')">Bern</a></li>
  112. <li><a href="#" click.trigger="publishNavLocation('live-view-lu')">Luzern</a></li>
  113. <li><a href="#" click.trigger="publishNavLocation('live-view-mu')">München</a></li>
  114. <li><button type="button" click.delegate="clickTest(120)" class="btn btn-default" view.model.bind="navBarSpinner">Click Test</button></li>
  115. </ul>
  116. </li>
  117. </template>
  118.  
  119. import { EventAggregator } from 'aurelia-event-aggregator';
  120. import { inject } from 'aurelia-framework';
  121. import { View } from "aurelia-framework";
  122.  
  123. @inject(EventAggregator)
  124. export class NavBarSpinner {
  125.  
  126. ea;
  127.  
  128. constructor(msg) {
  129. this.ea = new EventAggregator();
  130. }
  131.  
  132. clickTest(data) {
  133. console.log("Jetzt wurde Click Test gedr�ckt... " + data);
  134. }
  135.  
  136. publishNavLocation(navToCity) {
  137. this.ea.publish('nav::toggleLogin', {nav: navToCity});
  138. console.log("Method call publishLocationZug()");
  139. }
  140. }
Add Comment
Please, Sign In to add comment