Updated the GUI2 archetype with real gui code
Change-Id: If0fb2a6cb38bff69a978a7a23dd2e3a6212d67f3
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename
index 0d28862..50cada3 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename
@@ -190,7 +190,7 @@
" See bazel-genfiles/apps/${artifactId}/web/${artifactId}-gui/${artifactId}-gui-lib-test.log for more details' >&2;" +
" exit 1;" +
" fi;",
- message = "Angular ${appNameCap}${appNameEnd} Lib lint and test",
+ message = "Angular ${appNameTitle} Lib lint and test",
)
"""
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/README.md b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/README.md
index a06c138..3c87895 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/README.md
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/README.md
@@ -1,4 +1,4 @@
-# ${appNameCap}${appNameEnd}GuiLib
+# ${appNameTitle}GuiLib
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.0.4.
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-gui-lib.module.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-gui-lib.module.ts
index 6a20ad8..06a05c7 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-gui-lib.module.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-gui-lib.module.ts
@@ -15,17 +15,19 @@
*/
import { NgModule } from '@angular/core';
+import {CommonModule} from '@angular/common';
import { Gui2FwLibModule } from 'gui2-fw-lib';
-import { ${appNameCap}${appNameEnd}Component } from './${artifactId}/${artifactId}.component';
-import { ${appNameCap}${appNameEnd}RoutingModule } from './${artifactId}-routing.module';
+import { ${appNameTitle}Component } from './${artifactId}/${artifactId}.component';
+import { ${appNameTitle}RoutingModule } from './${artifactId}-routing.module';
import { WelcomeComponent } from './welcome/welcome.component';
@NgModule({
- declarations: [${appNameCap}${appNameEnd}Component, WelcomeComponent],
+ declarations: [${appNameTitle}Component, WelcomeComponent],
imports: [
- ${appNameCap}${appNameEnd}RoutingModule,
- Gui2FwLibModule
+ ${appNameTitle}RoutingModule,
+ Gui2FwLibModule,
+ CommonModule
],
- exports: [${appNameCap}${appNameEnd}Component, WelcomeComponent]
+ exports: [${appNameTitle}Component, WelcomeComponent]
})
-export class ${appNameCap}${appNameEnd}GuiLibModule { }
+export class ${appNameTitle}GuiLibModule { }
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-routing.module.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-routing.module.ts
index 07a1621..255633c 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-routing.module.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-routing.module.ts
@@ -15,17 +15,17 @@
*/
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
-import { ${appNameCap}${appNameEnd}Component } from './${artifactId}/${artifactId}.component';
+import { ${appNameTitle}Component } from './${artifactId}/${artifactId}.component';
const appRoutes: Routes = [
{
path: '',
- component: ${appNameCap}${appNameEnd}Component
+ component: ${appNameTitle}Component
},
];
/**
- * ONOS GUI -- ${appNameCap}${appNameEnd} View Feature Routing Module - allows it to be lazy loaded
+ * ONOS GUI -- ${appNameTitle} View Feature Routing Module - allows it to be lazy loaded
*
* See https://angular.io/guide/lazy-loading-ngmodules
*/
@@ -33,4 +33,4 @@
imports: [RouterModule.forChild(appRoutes)],
exports: [RouterModule]
})
-export class ${appNameCap}${appNameEnd}RoutingModule { }
+export class ${appNameTitle}RoutingModule { }
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.css b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.css
index 9be9aeb..1ec2298 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.css
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.css
@@ -13,3 +13,32 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
+#ov-${appNameAllLower} {
+ padding: 20px;
+ color: navy;
+}
+
+#ov-${appNameAllLower} .button-panel {
+ margin: 10px;
+ width: 200px;
+ background-color: #ccf;
+}
+
+#ov-${appNameAllLower} .my-button {
+ cursor: pointer;
+ padding: 4px;
+ text-align: center;
+ color: white;
+ background-color: #99d;
+}
+
+#ov-${appNameAllLower} .number {
+ font-size: 140%;
+ text-align: right;
+}
+
+#ov-${appNameAllLower} .quote {
+ margin: 10px 20px;
+ font-style: italic;
+}
\ No newline at end of file
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.html b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.html
index 4891ab3..626e2d7 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.html
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.html
@@ -14,4 +14,41 @@
~ limitations under the License.
-->
-<p>${artifactId} works!</p>
+<div id="ov-${appNameAllLower}">
+ <div class="button-panel">
+ <div class="my-button" (click)="getData()">Fetch Data</div>
+ </div>
+
+ <div class="data-panel">
+ <table>
+ <tr>
+ <td> Number </td>
+ <td class="number"> {{socketData.number}} </td>
+ </tr>
+ <tr>
+ <td> Square </td>
+ <td class="number"> {{socketData.square}} </td>
+ </tr>
+ <tr>
+ <td> Cube </td>
+ <td class="number"> {{socketData.cube}} </td>
+ </tr>
+ </table>
+ <onos-icon [iconId]="'bird'" [iconSize]="40" [toolTip]="'ONOS bird icon'" [classes]="'enabled'"></onos-icon>
+ <p>
+ A message from our sponsors:
+ </p>
+ <p>
+ <span class="quote"> {{socketData.message}} </span>
+ </p>
+ <p>Request Number: {{requestNumber}}</p>
+ </div>
+</div>
+<!-- Create an instance of a component passing it lteral value for colour and bind to the socketData.number-->
+<${artifactId}-app-welcome [message]="socketData.number" [colour]="'magenta'" (welcomeEventEmitter)="childClicked($event)"></${artifactId}-app-welcome>
+<${artifactId}-app-welcome [message]="socketData.square" [colour]="'aqua'" (welcomeEventEmitter)="childClicked($event)"></${artifactId}-app-welcome>
+<${artifactId}-app-welcome [message]="socketData.cube" [colour]="'orange'" (welcomeEventEmitter)="childClicked($event)"></${artifactId}-app-welcome>
+
+
+<p>Click one of the circles: </p>
+<p [ngStyle]="{'background-color': childSelected }">Child selected: {{childSelected}}</p>
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts
index 5d0c76a..86954c8 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts
@@ -15,8 +15,10 @@
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ${appNameCap}${appNameEnd}Component } from './${artifactId}.component';
+import { ${appNameTitle}Component } from './${artifactId}.component';
+import { WelcomeComponent } from '../welcome/welcome.component';
import {ActivatedRoute, Params} from '@angular/router';
+import {CommonModule} from '@angular/common';
import { of } from 'rxjs';
import { } from 'jasmine';
import {
@@ -41,13 +43,13 @@
loadIconDef() { }
}
-describe('${appNameCap}${appNameEnd}Component', () => {
+describe('${appNameTitle}Component', () => {
let fs: FnService;
let ar: MockActivatedRoute;
let windowMock: Window;
let logServiceSpy: jasmine.SpyObj<LogService>;
- let component: ${appNameCap}${appNameEnd}Component;
- let fixture: ComponentFixture<${appNameCap}${appNameEnd}Component>;
+ let component: ${appNameTitle}Component;
+ let fixture: ComponentFixture<${appNameTitle}Component>;
beforeEach(async(() => {
const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
@@ -67,8 +69,11 @@
fs = new FnService(ar, logSpy, windowMock);
TestBed.configureTestingModule({
- imports: [BrowserAnimationsModule, FormsModule, RouterTestingModule],
- declarations: [ ${appNameCap}${appNameEnd}Component ],
+ imports: [BrowserAnimationsModule, CommonModule, FormsModule, RouterTestingModule],
+ declarations: [
+ ${appNameTitle}Component,
+ WelcomeComponent
+ ],
providers: [
{ provide: FnService, useValue: fs },
{ provide: LogService, useValue: logSpy },
@@ -81,7 +86,7 @@
}));
beforeEach(() => {
- fixture = TestBed.createComponent(${appNameCap}${appNameEnd}Component);
+ fixture = TestBed.createComponent(${appNameTitle}Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts
index d510867..d7107c4 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts
@@ -13,46 +13,90 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
import {LogService, WebSocketService} from 'gui2-fw-lib';
-const SAMPLE_CUSTOM_DATA_REQ = 'sampleCustomDataRequest';
-const SAMPLE_CUSTOM_DATA_RESP = 'sampleCustomDataResponse';
+const SAMPLE_CUSTOM_DATA_REQ = '${appNameAllLower}DataRequest';
+const SAMPLE_CUSTOM_DATA_RESP = '${appNameAllLower}DataResponse';
+
+/**
+ * Model of the data sent in ${appNameAllLower}DataResponse from ${appNameTitle}DataRequestHandler
+ */
+export interface ${appNameTitle}Data {
+ number: number;
+ square: number;
+ cube: number;
+ message: string;
+}
+
+export interface ${appNameTitle}Req {
+ reqnumber: number;
+}
@Component({
selector: '${artifactId}-app-sample',
templateUrl: './${artifactId}.component.html',
styleUrls: ['./${artifactId}.component.css']
})
-export class ${appNameCap}${appNameEnd}Component implements OnInit {
- private handlers: string[] = [];
+export class ${appNameTitle}Component implements OnInit, OnDestroy {
private openListener: any;
+ socketData: ${appNameTitle}Data = <${appNameTitle}Data>{
+ number: 0,
+ square: 0,
+ cube: 0,
+ message: undefined
+ };
+ requestNumber: number = 0;
+ childSelected: string = '(none)';
+
constructor(
protected log: LogService,
protected wss: WebSocketService
) {
- this.log.debug('${appNameCap}${appNameEnd}Component constructed');
+ this.log.debug('${appNameTitle}Component constructed');
}
ngOnInit() {
this.wss.bindHandlers(new Map<string, (data) => void>([
[SAMPLE_CUSTOM_DATA_RESP, (data) => {
- this.log.debug(SAMPLE_CUSTOM_DATA_RESP, data);
+ this.socketData = <${appNameTitle}Data>data;
+ this.log.debug(SAMPLE_CUSTOM_DATA_RESP, this.socketData);
}
]
]));
- this.handlers.push(SAMPLE_CUSTOM_DATA_RESP);
-
// in case we fail over to a new server,
// listen for wsock-open events
- this.openListener = this.wss.addOpenListener(() => this.wsOpen);
+ this.openListener = this.wss.addOpenListener((h, u) => this.wsOpen(h, u));
+ }
+
+ ngOnDestroy(): void {
+ this.wss.unbindHandlers([SAMPLE_CUSTOM_DATA_RESP]);
}
wsOpen(host: string, url: string) {
this.log.debug(SAMPLE_CUSTOM_DATA_RESP, ': WSopen - cluster node:', host, 'URL:', url);
// tell the server we are ready to receive topo events
- this.wss.sendEvent(SAMPLE_CUSTOM_DATA_REQ, {});
+ const requestObj = <${appNameTitle}Req>{
+ reqnumber: this.requestNumber
+ };
+ this.wss.sendEvent(SAMPLE_CUSTOM_DATA_REQ, requestObj);
+ }
+
+ // When the FetchData button is clicked
+ getData() {
+ this.requestNumber++;
+ const requestObj = <${appNameTitle}Req>{
+ reqnumber: this.requestNumber
+ };
+ this.wss.sendEvent(SAMPLE_CUSTOM_DATA_REQ, requestObj);
+ this.log.debug('Getting data', this.requestNumber);
+ }
+
+ // when we recieve an event from the child
+ childClicked(colour: string) {
+ this.log.debug('Received event', colour);
+ this.childSelected = colour;
}
}
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.html b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.html
index 819f7e2..9e6bb90 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.html
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.html
@@ -14,4 +14,12 @@
~ limitations under the License.
-->
-<p>welcome works!</p>
+<svg:svg xmlns:svg="http://www.w3.org/2000/svg">
+ <svg:g (click)="welcomeClicked(colour)">
+ <svg:circle r="50" cx="100" cy="55" [attr.fill]="colour">
+ </svg:circle>
+ <svg:text x="100" y="60" width="200" text-anchor="middle" style="font-weight:bold;">Welcome: {{message}}</svg:text>
+ <svg:use [attr.xlink:href]="'#bird'" style="fill-opacity:0.2" width="80" height="80" x="60" y="10">
+ </svg:use>
+ </svg:g>
+</svg:svg>
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.ts
index db3a2f3..728d716 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.ts
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import {LogService} from 'gui2-fw-lib';
@Component({
@@ -22,6 +22,9 @@
styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {
+ @Input() message: string = 'Welcome';
+ @Input() colour: string;
+ @Output() welcomeEventEmitter = new EventEmitter<string>();
constructor(
protected log: LogService,
@@ -30,6 +33,11 @@
}
ngOnInit() {
+ this.log.debug('WelcomeComponent initialized', this.message, this.colour);
}
+ welcomeClicked(colour: string) {
+ this.log.debug(colour, 'WelcomeComponent clicked - sending event to parent');
+ this.welcomeEventEmitter.emit(colour);
+ }
}
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/tslint.json b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/tslint.json
index 6ddb6b2..9a19c5e 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/tslint.json
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/tslint.json
@@ -60,7 +60,7 @@
"no-empty-interface": true,
"no-eval": true,
"no-inferrable-types": [
- true,
+ false,
"ignore-params"
],
"no-misused-new": true,