Commit 921d74cc authored by Daniel Bluhm's avatar Daniel Bluhm

Minor cleanup of rse-renderer-client-test

Experiment with more specific Person representation in TypeScript
Signed-off-by: Daniel Bluhm's avatarDaniel Bluhm <bluhmdj@ornl.gov>
parent bac2200f
/**
* Person DataElement
*/
import { DataElement } from "./data-element";
export class Person extends DataElement {
age: number;
firstName: string;
lastName: string;
constructor() {
super();
this.age = -1;
this.firstName = "";
this.lastName = "";
}
}
\ No newline at end of file
......@@ -4,14 +4,26 @@
* *Move DataElement<T> to its ts file. It would be really nice to put this in the data structures project since it shadows a class there.
* *Add a unit test?
*/
import {v4 as uuidv4} from 'uuid';
export class DataElement<T> {
export class DataElement {
privateId: string;
id: number;
name: string;
description: string;
data!: T;
comment: string;
context: string;
required: boolean;
secret: boolean;
constructor() {
this.privateId = uuidv4();
this.id = 0;
this.name = 'name';
this.description = 'description';
}
this.comment = 'comment';
this.context = 'context';
this.required = false;
this.secret = true;
}
}
\ No newline at end of file
import {css, customElement, html, LitElement, property} from 'lit-element';
import '@vaadin/vaadin-text-field';
import { DataElement } from './data-element'
import { Person } from './Person';
/**
* Tasks:
......@@ -15,14 +15,14 @@ class Renderer extends LitElement {
/**
* This is the default data value. It is the empty string and indicates that the JSON has not yet been received from the server.
*/
dataElement = new DataElement<string>();
person = new Person();
@property({type: String})
dataElementJSON = '';
static styles = css`
h1 {
color: hotpink;
color: blue;
text-transform: uppercase;
}
`;
......@@ -32,33 +32,33 @@ class Renderer extends LitElement {
console.log("Constructed");
}
/**
* This operation updates the content of the template from the contents of the data element.
*/
updateDataElement(e: {target: HTMLInputElement}) {
console.log("dataElementJSON on update call = " + this.dataElementJSON);
console.log("dataElement on update call = " + this.dataElement);
updateFirstName(e: {target: HTMLInputElement}) {
// First, the event data needs to be read into the local structure
this.dataElement.data = e.target.value;
this.person.firstName = e.target.value;
// Second, dump into the JSON property
this.dataElementJSON = JSON.stringify(this.dataElement);
console.log("dataElementJSON = " + this.dataElementJSON);
this.dataElementJSON = JSON.stringify(this.person);
// Notify the listeners of the change.
this.dispatchEvent(new CustomEvent('data-changed', {bubbles: true, composed: true, detail: e.target.value}))
return;
this.dispatchEvent(new CustomEvent(
'data-changed',
{bubbles: true, composed: true, detail: e.target.value}
));
}
updateLastName(e: {target: HTMLInputElement}) {
this.person.lastName = e.target.value;
this.dataElementJSON = JSON.stringify(this.person);
this.dispatchEvent(new CustomEvent(
'data-changed',
{bubbles: true, composed: true, detail: e.target.value}
));
}
loadData() {
this.dataElement = <DataElement<string>> JSON.parse(this.dataElementJSON);
this.person = <Person> JSON.parse(this.dataElementJSON);
console.log("dEJ-ld = ");
console.log(this.dataElementJSON);
console.log("dataElement-ld = ")
console.log(this.dataElement);
console.log(this.dataElement.data);
console.log(this.person);
console.log(this.person.firstName, this.person.lastName);
}
render() {
......@@ -66,20 +66,25 @@ class Renderer extends LitElement {
return html`
<script>${this.loadData()}</script>
<h1>Greetings ${this.dataElement.name}!</h1>
<h1>Greetings ${this.person.firstName}!</h1>
<div>
<vaadin-text-field
label="Name"
.value=${this.dataElement.data}
@input=${this.updateDataElement}
label="First Name"
.value=${this.person.firstName}
@input=${this.updateFirstName}
></vaadin-text-field>
<vaadin-text-field
label="Last Name"
.value=${this.person.lastName}
@input=${this.updateLastName}
></vaadin-text-field>
</div>
<h2>${this.dataElementJSON}</h2>
<pre>${JSON.stringify(this.person, null, 2)}</pre>
<h2>${this.dataElement.description}</h2>
<h2>${this.dataElement.name}</h2>
<h2>${this.person.description}</h2>
<h2>${this.person.name}</h2>
`;
}
......
......@@ -1163,6 +1163,11 @@
"integrity": "sha512-oVeL12C6gQS/GAExndigSaLxTrKpQPxewx9bOcwfvJiJge4rr7wNaph4J+ns5hrmIV2as5qxqN8YKthn9qh0jw==",
"dev": true
},
"@types/uuid": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.0.1.tgz",
"integrity": "sha512-2kE8rEFgJpbBAPw5JghccEevQb0XVU0tewF/8h7wPQTeCtoJ6h8qmBIwuzUVm2MutmzC/cpCkwxudixoNYDp1A=="
},
"@vaadin/flow-deps": {
"version": "file:target/frontend",
"requires": {
......@@ -9256,6 +9261,14 @@
"requires": {
"faye-websocket": "^0.10.0",
"uuid": "^3.0.1"
},
"dependencies": {
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
}
}
},
"sockjs-client": {
......@@ -10098,10 +10111,9 @@
"dev": true
},
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.0.tgz",
"integrity": "sha512-fX6Z5o4m6XsXBdli9g7DtWgAx+osMsRRZFKma1mIUsLCz6vRvv+pz5VNbyu9UEDzpMWulZfvpgb/cmDXVulYFQ=="
},
"v8-compile-cache": {
"version": "2.0.3",
......@@ -10661,6 +10673,14 @@
"requires": {
"ansi-colors": "^3.0.0",
"uuid": "^3.3.2"
},
"dependencies": {
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
}
}
},
"webpack-merge": {
......
......@@ -3,9 +3,11 @@
"license": "UNLICENSED",
"dependencies": {
"@polymer/polymer": "3.2.0",
"@webcomponents/webcomponentsjs": "^2.2.10",
"@types/uuid": "^8.0.1",
"@vaadin/flow-deps": "./target/frontend",
"lit-element": "^2.2.0"
"@webcomponents/webcomponentsjs": "^2.2.10",
"lit-element": "^2.2.0",
"uuid": "^8.3.0"
},
"devDependencies": {
"copy-webpack-plugin": "5.1.0",
......
......@@ -159,6 +159,10 @@
<artifactId>javax.inject</artifactId>
<version>1</version>
</dependency>
<dependency>
<groupId>javax.annotation</groupId>
<artifactId>javax.annotation-api</artifactId>
</dependency>
</dependencies>
<build>
......
/*******************************************************************************
* Copyright (c) 2020- UT-Battelle, LLC.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
* http://www.eclipse.org/legal/epl-v10.html
*
* Contributors:
* Initial API and implementation and/or initial documentation -
* Jay Jay Billings
*******************************************************************************/
package gov.ornl.rse.renderer.client.test;
import org.eclipse.ice.renderer.DataElement;
/**
* @author Jay Jay Billings
*
*/
public class DataFile extends DataElement<String> {
}
/*******************************************************************************
* Copyright (c) 2020- UT-Battelle, LLC.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
* http://www.eclipse.org/legal/epl-v10.html
*
* Contributors:
* Initial API and implementation and/or initial documentation -
* Jay Jay Billings
*******************************************************************************/
package gov.ornl.rse.renderer.client.test;
import java.io.Serializable;
import org.springframework.stereotype.Service;
@Service
public class GreetService implements Serializable {
public String greet(String name) {
if (name == null || name.isEmpty()) {
return "Hello anonymous user";
} else {
return "Hello " + name;
}
}
}
......@@ -11,12 +11,9 @@
*******************************************************************************/
package gov.ornl.rse.renderer.client.test;
import java.io.Serializable;
import org.eclipse.ice.data.IDataElement;
import org.eclipse.ice.renderer.DataElement;
public interface IRendererClient<T extends IDataElement> {
public interface IRendererClient<T extends IDataElement<T>> {
/**
* This operation sets the data that should be rendered.
......
......@@ -14,16 +14,10 @@ package gov.ornl.rse.renderer.client.test;
import java.util.function.BiConsumer;
import javax.annotation.PostConstruct;
import javax.inject.Inject;
import org.eclipse.ice.data.IDataElement;
import org.eclipse.ice.renderer.DataElement;
import org.eclipse.ice.renderer.JavascriptValidator;
import org.eclipse.ice.renderer.Renderer;
import org.eclipse.ice.renderer.Person;
import org.eclipse.ice.renderer.PersonImplementation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
......@@ -49,7 +43,8 @@ public class MainView extends VerticalLayout {
// Nothing to do here - just sample setup
Person ross = new PersonImplementation();
try {
ross.setName("Ross Whitfield");
ross.setFirstName("Ross");
ross.setLastName("Whitfield");
ross.setDescription("Ross' name described by a generated IDataElement");
} catch (Exception e) {
// TODO Auto-generated catch block
......
......@@ -14,20 +14,13 @@
*******************************************************************************/
package gov.ornl.rse.renderer.client.test;
import java.io.Serializable;
import org.eclipse.ice.data.IDataElement;
import org.eclipse.ice.renderer.DataElement;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.mongodb.util.JSON;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import elemental.json.JsonObject;
/**
* This is a base class for renderer clients tailored to Vaadin. It provides
* the basic accessors for the data member.
......@@ -36,7 +29,9 @@ import elemental.json.JsonObject;
*/
@Tag("renderer-template")
@JsModule("./src/renderer.ts")
public class VaadinRendererClient<T extends IDataElement> extends Component implements IRendererClient<T> {
public class VaadinRendererClient<T extends IDataElement<T>> extends Component implements IRendererClient<T> {
public static final String DATA_ELEMENT_JSON = "dataElementJSON";
/**
* version UID
......@@ -53,8 +48,8 @@ public class VaadinRendererClient<T extends IDataElement> extends Component impl
*/
public VaadinRendererClient() {
// This function updates the data every time the client posts and update.
getElement().addPropertyChangeListener("dataElementJSON", "data-changed", e -> {
String value = getElement().getProperty("dataElementJSON");
getElement().addPropertyChangeListener(DATA_ELEMENT_JSON, "data-changed", e -> {
String value = getElement().getProperty(DATA_ELEMENT_JSON);
data.fromJson(value);
});
}
......@@ -68,7 +63,7 @@ public class VaadinRendererClient<T extends IDataElement> extends Component impl
@Override
public void setData(T otherData) {
data = otherData;
getElement().setProperty("dataElementJSON", data.toJson());
getElement().setProperty(DATA_ELEMENT_JSON, data.toJson());
}
/**
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment