Initial import of Angular5 components services and modules
Change-Id: I3953f1fbf7d5697a1c6d432808dd17d816ec285a
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast.module.ts b/web/gui2/src/main/webapp/app/fw/mast/mast.module.ts
new file mode 100644
index 0000000..99c986d
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast.module.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2014-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 { SvgModule } from '../svg/svg.module';
+
+import { MastComponent } from './mast/mast.component';
+
+import { MastService } from './mast.service';
+
+/**
+ * ONOS GUI -- Masthead Module
+ */
+@NgModule({
+ imports: [
+ CommonModule,
+ SvgModule // For the IconComponent
+ ],
+ declarations: [
+ MastComponent
+ ],
+ exports: [
+ MastComponent
+ ],
+ providers: [
+ MastService
+ ]
+})
+export class MastModule { }
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast.service.ts b/web/gui2/src/main/webapp/app/fw/mast/mast.service.ts
new file mode 100644
index 0000000..d357458
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast.service.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2014-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';
+
+const padMobile = 16;
+
+/**
+ * ONOS GUI -- Masthead Service
+ */
+@Injectable()
+export class MastService {
+
+ public mastHeight = 48;
+
+ constructor(
+ private fs: FnService,
+ private log: LogService
+ ) {
+ if (this.fs.isMobile()) {
+ this.mastHeight += padMobile;
+ }
+
+ this.log.debug('MastService constructed');
+ }
+
+}
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.css b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.css
new file mode 100644
index 0000000..b5f1e5f
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.css
@@ -0,0 +1,122 @@
+/*
+ * Copyright 2014-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 -- Masthead (layout) -- CSS file
+ */
+
+#mast {
+ height: 48px;
+ padding: 0;
+}
+
+#mast a:hover {
+ text-decoration: none;
+}
+
+html[data-platform='iPad'] #mast {
+ padding-top: 16px;
+}
+
+#mast .nav-menu-button {
+ display: inline-block;
+ vertical-align: middle;
+ text-align: center;
+ line-height: 48px;
+ padding: 0 12px;
+ cursor: pointer; cursor: hand;
+ /* Needed to removed 3px space at the bottom of img tags */
+ font-size: 0;
+}
+
+#mast .nav-menu-button img {
+ width: 25px;
+ vertical-align: middle;
+}
+
+#mast .logo {
+ height: 47px;
+ width: 511px;
+ vertical-align: bottom;
+}
+
+#mast-right {
+ display: inline-block;
+ float: right;
+ position: relative;
+ top: 0;
+ padding-right: 15px;
+ line-height: 48px;
+}
+
+/*
+ MAST HEAD DROPDOWN MENU
+*/
+
+#mast-right div.ctrl-btns {
+ float: right;
+}
+
+#mast-right div.icon {
+ box-sizing: border-box;
+ position: relative;
+ height: 48px;
+ width: 48px;
+ padding: 9px;
+}
+
+#mast .dropdown-parent {
+ position: relative;
+ float: right;
+}
+
+#mast .dropdown-parent i.dropdown-icon {
+ display: inline-block;
+ height: 7px;
+ width: 9px;
+ margin-left: 10px;
+ background: url('/data/img/dropdown-icon.png') no-repeat;
+}
+
+#mast .dropdown {
+ position: absolute;
+ top: 40px;
+ right: -8px;
+ display: none;
+ min-width: 100px;
+ line-height: 16px;
+ font-size: 12pt;
+ z-index: 1000;
+}
+
+#mast .dropdown a {
+ text-decoration: none;
+ font-size: 12px;
+ display: block;
+ padding: 8px 16px 6px 12px;
+}
+
+#mast .dropdown-parent:hover .dropdown {
+ display: block;
+}
+
+#mast .dropdown-parent:hover i.dropdown-icon {
+ background-position-x: -14px
+}
+
+html[data-platform='iPad'] #mast .dropdown {
+ top: 57px;
+}
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.html b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.html
new file mode 100644
index 0000000..94d8ce0
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.html
@@ -0,0 +1,25 @@
+<div id="mast" align="left">
+ <span class="nav-menu-button clickable" (click)="ns.toggleNav()">
+ <img src="data/img/nav-menu-mojo.png"/>
+ </span>
+ <img class="logo" src="data/img/masthead-logo-mojo.png">
+ <div id="mast-right">
+ <nav>
+ <div class="dropdown-parent">
+ <a class="clickable user-menu__name">{{username}} <i class="dropdown-icon"></i></a>
+ <div class="dropdown">
+ <!--<a href="rs/logout"> {{getLion('logout')}} </a> !!FIXME-->
+ <a href="rs/logout">logout</a>
+ </div>
+ </div>
+ <div class="ctrl-btns">
+ <div class="active clickable icon"
+ tooltip tt-msg="helpTip"
+ ng-click="directTo()">
+ <onos-icon iconId="query" iconSize="32"></onos-icon>
+ </div>
+ </div>
+ </nav>
+
+ </div>
+</div>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.ts b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.ts
new file mode 100644
index 0000000..a8b85a4
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.ts
@@ -0,0 +1,66 @@
+/*
+ * Copyright 2014-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 { DialogService } from '../../layer/dialog.service';
+import { LionService } from '../../util/lion.service';
+import { LogService } from '../../../log.service';
+import { NavService } from '../../nav/nav.service';
+import { WebSocketService } from '../../remote/websocket.service';
+
+/**
+ * ONOS GUI -- Masthead Component
+ */
+@Component({
+ selector: 'onos-mast',
+ templateUrl: './mast.component.html',
+ styleUrls: ['./mast.component.css', './mast.theme.css']
+})
+export class MastComponent implements OnInit {
+ public username;
+
+ constructor(
+ private ds: DialogService,
+ private ls: LionService,
+ private log: LogService,
+ public ns: NavService,
+ private wss: WebSocketService
+ ) {
+ this.log.debug('MastComponent constructed');
+
+ }
+
+ ngOnInit() {
+ // onosUser is a global set via the index.html generated source
+ // TODO: Fix onosuser below to get it from index.html like before
+ // TODO: Fix the lionService
+ this.username = 'onosUser'; // || this.getLion('unknown_user');
+
+ this.log.debug('MastComponent initialized');
+ }
+
+
+
+ /* In the case of Masthead, we cannot cache the lion bundle, because we
+ * call too early (before the lion data is uploaded from the server).
+ * So we'll dig into the lion service for each request...
+ */
+ getLion(x: string): string {
+ // lion is a function that takes a string and returns a string
+ const lion: (string) => string = this.ls.bundle('core.fw.Mast');
+ return lion(x);
+ }
+
+}
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.theme.css b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.theme.css
new file mode 100644
index 0000000..6b92beb
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.theme.css
@@ -0,0 +1,51 @@
+/*
+ * 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 -- Masthead (theme) -- CSS file
+ */
+
+#mast {
+ background-color: #231f20;
+}
+
+#mast .nav-menu-button:hover {
+ background-color: #888;
+}
+
+#mast-right a {
+ color: #009fdb;
+}
+
+#mast nav {
+ color: #009fdb;
+}
+
+/* Theme styles for drop down menu */
+
+#mast .dropdown {
+ background-color: #231f20;
+ border: 1px solid #dddddd;
+}
+
+#mast .dropdown a {
+ color: #009fdb;
+ border-bottom: solid #444 1px;
+}
+
+#mast .dropdown a:hover {
+ color: #fff;
+}