"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
+ "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"rxjs": "^5.5.2",
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Router } from '@angular/router'; // Debugging
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { EgBaseComponent } from './base.component';
import { EgBaseRoutingModule } from './base-routing.module';
],
imports: [
EgBaseRoutingModule,
- BrowserModule
+ BrowserModule,
+ NgbModule.forRoot()
],
providers: [],
bootstrap: [EgBaseComponent]
import { EgBcSearchComponent } from './bcsearch.component';
const routes: Routes = [
+ { path: '',
+ component: EgBcSearchComponent
+ },
{ path: ':barcode',
component: EgBcSearchComponent
},
).subscribe(
x => console.log(x),
e => console.log('echo event: ' + e),
- () => console.log('done');
+ () => console.log('done')
)
}
--- /dev/null
+<!--
+loads new page
+href="./stuff"
+direct routing
+routerLink="/suff"
+-->
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+ <div class="collapse navbar-collapse">
+ <ul class="navbar-nav">
+ <li class="nav-item active">
+ <a i18n class="nav-link" routerLink="/staff">Home</a>
+ </li>
+ <li ngbDropdown class="nav-item dropdown">
+ <a ngbDropdownToggle i18n class="nav-link dropdown-toggle">
+ Dropdown link
+ </a>
+ <div class="dropdown-menu" ngbDropdownMenu>
+ <a i18n class="dropdown-item" routerLink="/staff">Action</a>
+ <a i18n class="dropdown-item" routerLink="/staff">Another action</a>
+
+ <a i18n class="dropdown-item"
+ href="./staff/circ/patron/bcsearch">
+ <!--
+ routerLink="/staff/circ/patron/bcsearch/">
+ -->
+ Checkout
+ </a>
+ </div>
+ </li>
+ </ul>
+ </div>
+</nav>
+
--- /dev/null
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+ selector: 'eg-staff-nav-bar';
+ templateUrl: 'nav.component.html'
+})
+
+export class EgStaffNavComponent implements OnInit {
+ constructor(private route: ActivatedRoute) {}
+
+ ngOnInit() {
+
+ }
+}
+
+
-<h1>Nav Bar Goes Here</h1>
-
-<h2>Staff Module</h2>
+<!-- top navigation bar -->
+<eg-staff-nav-bar></eg-staff-nav-bar>
+<!-- page content -->
<router-outlet></router-outlet>
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-//import { FormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { EgStaffComponent } from './staff.component';
import { EgStaffRoutingModule } from './staff-routing.module';
+import { EgStaffNavComponent } from './nav.component';
@NgModule({
declarations: [
- EgStaffComponent
+ EgStaffComponent,
+ EgStaffNavComponent
],
imports: [
EgStaffRoutingModule,
- //FormsModule,
+ FormsModule,
+ NgbModule
],
providers: []
})
-<div style="text-align: center; margin-top: 50px;">
-
- <h1 i18n="Welcome Message">Welcome to Webby</h1>
-
- <strong i18n="Welcome Status OK">
- If you see this page, you're probably in good shape...
- </strong>
-
- <p i18n="Welcome Recommendations">
- But maybe you meant to go to the <a routerLink="/staff">staff page</a>
- or <a routerLink="/catalog">the catalog.</a>
- </p>
+<div class="jumbotron">
+ <h1 i18n class="display-3">Welcome to Webby</h1>
+ <p i18n class="lead">
+ If you see this page, you're probably in good shape...
+ </p>
+ <hr class="my-4"/>
+ <p i18n>
+ But maybe you meant to go to the <a routerLink="/staff">staff page</a>
+ or <a routerLink="/catalog">the catalog.</a>
+ </p>
</div>
-
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
+ <!-- link to bootstrap manually for the time being. With
+ ng-bootstrap, we only need the CSS, not the JS -->
+ <link rel="stylesheet"
+ href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
+ integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
+ crossorigin="anonymous">
</head>
<body>
<eg-root></eg-root>