Initial import of Angular5 components services and modules
Change-Id: I3953f1fbf7d5697a1c6d432808dd17d816ec285a
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav.module.ts b/web/gui2/src/main/webapp/app/fw/nav/nav.module.ts
new file mode 100644
index 0000000..95a3c31
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav.module.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2015-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { SvgModule } from '../svg/svg.module';
+
+import { NavComponent } from './nav/nav.component';
+import { NavService } from './nav.service';
+
+import { AppsComponent } from '../../view/apps/apps.component';
+import { DeviceComponent } from '../../view/device/device.component';
+
+/**
+ * ONOS GUI -- Navigation Module
+ */
+@NgModule({
+ imports: [
+ CommonModule,
+ RouterModule,
+ SvgModule
+ ],
+ declarations: [
+ NavComponent
+ ],
+ exports: [
+ NavComponent
+ ],
+ providers: [
+ NavService
+ ]
+})
+export class NavModule { }
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav.service.ts b/web/gui2/src/main/webapp/app/fw/nav/nav.service.ts
new file mode 100644
index 0000000..22a903e
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav.service.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2015-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Injectable } from '@angular/core';
+import { FnService } from '../util/fn.service';
+import { LogService } from '../../log.service';
+
+/**
+ * ONOS GUI -- Navigation Service
+ */
+@Injectable()
+export class NavService {
+ public showNav = false;
+
+ constructor(
+ private _fn_: FnService,
+ private log: LogService
+ ) {
+ this.log.debug('NavService constructed');
+ }
+
+ hideNav() {
+ this.showNav = !this.showNav;
+ if (!this.showNav) {
+ this.log.debug('Hiding Nav menu');
+ }
+ }
+
+ toggleNav() {
+ this.showNav = !this.showNav;
+ if (this.showNav) {
+ this.log.debug('Showing Nav menu');
+ } else {
+ this.log.debug('Hiding Nav menu');
+ }
+ }
+
+}
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.css b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.css
new file mode 100644
index 0000000..3d2f646
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.css
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2015-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Navigation (layout) -- CSS file
+ */
+
+#nav {
+ position: absolute;
+ top: 48px;
+ left: 0;
+ padding: 0;
+ z-index: 3000;
+ visibility: hidden;
+}
+
+html[data-platform='iPad'] #nav {
+ top: 60px;
+}
+
+#nav .nav-hdr {
+ font-weight: bold;
+ font-variant: small-caps;
+ text-transform: uppercase;
+ font-size: 12pt;
+ padding: 8px 15px;
+}
+
+#nav a {
+ text-decoration: none;
+ font-size: 12pt;
+ font-weight: lighter;
+ display: block;
+ padding: 6px 10px;
+ margin: 0 7px;
+}
+
+#nav a div {
+ display: inline-block;
+ vertical-align: middle;
+ padding-right: 4px;
+}
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.html b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.html
new file mode 100644
index 0000000..a612214
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.html
@@ -0,0 +1,10 @@
+<nav id="nav" [@navState]="ns.showNav?'active':'inactive'">
+ <div class="nav-hdr">Platform</div>
+ <a (click)="ns.hideNav()" routerLink="/apps" routerLinkActive="active">
+ <!--<div onosIcon iconId="nav_apps"></div>
+ Using the new IconComponent rather than the directive -->
+ <onos-icon iconId="nav_apps"></onos-icon>Apps</a>
+ <div class="nav-hdr">Network</div>
+ <a (click)="ns.hideNav()" routerLink="/devices" routerLinkActive="active">
+ <onos-icon iconId="nav_devs"></onos-icon>Devices</a>
+</nav>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.ts b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.ts
new file mode 100644
index 0000000..27ae8de
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.ts
@@ -0,0 +1,56 @@
+/*
+ * Copyright 2015-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Component, OnInit } from '@angular/core';
+import { LogService } from '../../../log.service';
+import { NavService } from '../nav.service';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+
+/**
+ * ONOS GUI -- Navigation Module
+ */
+@Component({
+ selector: 'onos-nav',
+ templateUrl: './nav.component.html',
+ styleUrls: ['./nav.theme.css', './nav.component.css'],
+ animations: [
+ trigger('navState', [
+ state('inactive', style({
+ visibility: 'hidden',
+ transform: 'translateX(-100%)'
+ })),
+ state('active', style({
+ visibility: 'visible',
+ transform: 'translateX(0%)'
+ })),
+ transition('inactive => active', animate('100ms ease-in')),
+ transition('active => inactive', animate('100ms ease-out'))
+ ])
+ ]
+})
+export class NavComponent implements OnInit {
+
+ constructor(
+ private log: LogService,
+ public ns: NavService
+ ) {
+ this.log.debug('NavComponent constructed');
+ }
+
+ ngOnInit() {
+ this.log.debug('NavComponent initialized');
+ }
+
+}
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.theme.css b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.theme.css
new file mode 100644
index 0000000..1a308ac
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.theme.css
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2016-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Navigation (theme) -- CSS file
+ */
+
+#nav {
+ background-color: #231f20;
+}
+
+#nav .nav-hdr {
+ color: #716b6a;
+ background-color: #3c3a3a;
+}
+
+#nav a {
+ color: #c7c7c0;
+ border-bottom: solid #3c3a3a 1px;
+}
+
+#nav a:hover {
+ color: #ffffff;
+}
+
+/* With component styles isolation in Angular 6 these no longer work */
+#nav a div svg.embeddedIcon g.icon .glyph {
+ fill: #007dc4;
+}
+
+#nav a:hover div svg.embeddedIcon g.icon .glyph {
+ fill: #20b2ff;
+}