senaduka/old-tellall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial step 4 for online test

Browse Source
This commit is contained in:
GotPPay
2018-01-11 04:24:16 +01:00
parent 3214a2bea4
commit 7d79c03d15
8 changed files with 328 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
web/src/App.js
View File

@@ -4,9 +4,13 @@ import './css/popup.css';
import IntentList from './components/IntentList';
import IntentDetails from './components/IntentDetails';
import LaunchRequest from './components/LaunchRequest';
import Contact from './components/Contact';
import Popup from 'react-popup';
import {getSkill, updateSkill} from './lib/api'
import {
NEW_INTENT_SELECTED_INDEX,
LAUNCH_REQUEST_SELECTED_INDEX,
CONTACT_SELECTED_INDEX} from './config'
class App extends Component {
@@ -20,8 +24,8 @@ class App extends Component {
invocationAnswer:'We are saburly',
allIntents:[],
selectedIntent: {intentName:'',questions:[''],answer:''},
selectedIndex:-1,
launchRequest:false,
selectedIndex:NEW_INTENT_SELECTED_INDEX,
contactEmail:'',
waiting: false
};
@@ -30,7 +34,7 @@ class App extends Component {
if (jResult===undefined) return;
this.setState({ skillID:jResult.skillID,skillName:jResult.skillName, invocationName: jResult.invocationName,
invocationAnswer: jResult.invocationAnswer,
allIntents: jResult.intents})
allIntents: jResult.intents, contactEmail: jResult.contactEmail})
})
this.handleIntentClick = this.handleIntentClick.bind(this);
@@ -41,62 +45,67 @@ class App extends Component {
this.handleSaveLaunchRequestClick = this.handleSaveLaunchRequestClick.bind(this);
this.createSkill = this.createSkill.bind(this);
this.sendSkill = this.sendSkill.bind(this);
this.handleContactClick = this.handleContactClick.bind(this);
this.handleSaveEmailClick = this.handleSaveEmailClick.bind(this);
}
render() {
if(this.state.launchRequest){
return (
<div className="App">
<Popup/>
<div className="App-header">
<h1> Tell All </h1>
</div>
<IntentList allIntents={this.state.allIntents}
onLaunchRequestClick={this.handleLaunchRequestClick}
onIntentClick={this.handleIntentClick}
onAddIntentClick={this.handleAddIntentClick}
selectedIndex={this.state.selectedIndex}
waiting={this.state.waiting}>
</IntentList>
<LaunchRequest invocationName={this.state.invocationName}
invocationAnswer={this.state.invocationAnswer}
onSaveClick={this.handleSaveLaunchRequestClick}
waiting={this.state.waiting}>
</LaunchRequest>
return(
<div className="App">
<Popup/>
<div className="App-header">
<h1> Tell All </h1>
</div>
);
}else{
return (
<div className="App">
<Popup/>
<div className="App-header">
<h1> Tell All </h1>
</div>
<IntentList allIntents={this.state.allIntents}
onLaunchRequestClick={this.handleLaunchRequestClick}
onIntentClick={this.handleIntentClick}
onAddIntentClick={this.handleAddIntentClick}
selectedIndex={this.state.selectedIndex}
waiting={this.state.waiting}>
</IntentList>
<IntentDetails selectedIntent={this.state.selectedIntent}
onDeleteIntentClick={this.handleDeleteIntentClick}
onSaveIntentClick={this.handleSaveIntentClick}
waiting={this.state.waiting}>
</IntentDetails>
</div>
);
}
<IntentList allIntents={this.state.allIntents}
onLaunchRequestClick={this.handleLaunchRequestClick}
onContactClick={this.handleContactClick}
onIntentClick={this.handleIntentClick}
onAddIntentClick={this.handleAddIntentClick}
selectedIndex={this.state.selectedIndex}
waiting={this.state.waiting}>
</IntentList>
{(
()=>{
if (this.state.selectedIndex===LAUNCH_REQUEST_SELECTED_INDEX){
return (
<LaunchRequest invocationName={this.state.invocationName}
invocationAnswer={this.state.invocationAnswer}
onSaveClick={this.handleSaveLaunchRequestClick}
waiting={this.state.waiting}>
</LaunchRequest>
);
}else if (this.state.selectedIndex===CONTACT_SELECTED_INDEX){
return (
<Contact
contactEmail={this.state.contactEmail}
onSaveEmailClick={this.handleSaveEmailClick}
waiting={this.state.waiting}>
</Contact>
);
}else{
return(
<IntentDetails selectedIntent={this.state.selectedIntent}
onDeleteIntentClick={this.handleDeleteIntentClick}
onSaveIntentClick={this.handleSaveIntentClick}
waiting={this.state.waiting}>
</IntentDetails>
);
}
}
)()}
</div>
);
}
createSkill(intents, name, answer){
createSkill(intents, name, answer, email, updateOnAmazon){
return {
_id: this.state._id,
skillID: this.state.skillID,
intents: intents,
invocationName: (name===undefined) ? this.state.invocationName : name,
invocationAnswer: (answer===undefined)? this.state.invocationAnswer: answer
invocationName: name,
invocationAnswer: answer,
contactEmail: email,
updateOnAmazon: updateOnAmazon
};
}
@@ -105,12 +114,21 @@ class App extends Component {
}
handleLaunchRequestClick(){
this.setState({selectedIndex: -2, launchRequest:true});
this.setState({selectedIndex: LAUNCH_REQUEST_SELECTED_INDEX});
}
handleContactClick(){
this.setState({selectedIndex: CONTACT_SELECTED_INDEX})
}
handleSaveLaunchRequestClick(name, answer){
this.setState({waiting:true, invocationName:name, invocationAnswer: answer});
this.sendSkill(this.state.allIntents,true,{waiting:false},{waiting:false},name,answer);
this.sendSkill(this.state.allIntents,true,{waiting:false},{waiting:false},name,answer,this.state.contactEmail,true);
}
handleSaveEmailClick(email){
this.setState({waiting:true});
this.sendSkill(this.state.allIntents,true,{contactEmail: email, waiting:false},{waiting:false},this.state.invocationName,this.state.invocationAnswer,email,false);
}
handleDeleteIntentClick(selectedIntent){
@@ -128,7 +146,7 @@ class App extends Component {
this.setState({waiting:true});
let newState = {allIntents: newAllIntents, selectedIntent: {intentName:'', questions:[''],answer:''}, waiting:false};
this.sendSkill(newAllIntents,true,newState,{waiting:false});
this.sendSkill(newAllIntents,true,newState,{waiting:false},this.state.invocationName,this.state.invocationAnswer,this.state.contactEmail,true);
}catch(e){
console.log("error : " + e);
@@ -142,7 +160,7 @@ class App extends Component {
let newAllIntents = JSON.parse(newAllIntentsJSON);
let newState = null;
if (this.state.selectedIndex === -1){
if (this.state.selectedIndex === NEW_INTENT_SELECTED_INDEX){
//new intent
newAllIntents.push(selectedIntent);
newState = {allIntents: newAllIntents, selectedIntent: selectedIntent, selectedIndex: newAllIntents.length-1, waiting:false};
@@ -151,16 +169,16 @@ class App extends Component {
newState = {allIntents: newAllIntents, selectedIntent: selectedIntent, waiting: false};
}
this.setState({waiting:true});
this.sendSkill(newAllIntents, true, newState, {waiting:false});
this.sendSkill(newAllIntents, true, newState, {waiting:false}, this.state.invocationName,this.state.invocationAnswer,this.state.contactEmail, true);
}
handleAddIntentClick(){
this.setState({allIntents: this.state.allIntents, selectedIndex: -1,launchRequest:false,selectedIntent: {intentName:'',questions:[''], answer:''}});
this.setState({allIntents: this.state.allIntents, selectedIndex: NEW_INTENT_SELECTED_INDEX,launchRequest:false,selectedIntent: {intentName:'',questions:[''], answer:''}});
}
sendSkill(newAllIntents, showPopUp, resolveState, rejectState, newName, newAnswer){
sendSkill(newAllIntents, showPopUp, resolveState, rejectState, newName, newAnswer, email, updateOnAmazon){
return new Promise((resolve,reject)=>{
updateSkill(this.createSkill(newAllIntents,newName,newAnswer)).then(l=>l.text()).then(result=>{
updateSkill(this.createSkill(newAllIntents,newName,newAnswer,email,updateOnAmazon)).then(l=>l.text()).then(result=>{
let jResult = JSON.parse(result);
if (jResult.result !== 0){
if (showPopUp) Popup.alert('Model was not saved. Please try again');

48
web/src/components/Contact.js Normal file
View File

@@ -0,0 +1,48 @@
import React, { Component } from 'react';
import {Button, TextField} from 'react-md';
import '../css/Intent.css'
import {EMAIL_MAX_LENGTH} from '../config';
class Contact extends Component {
constructor(props){
super(props);
this.state = {contactEmail: props.contactEmail};
this.handleEmailEdit = this.handleEmailEdit.bind(this);
}
componentWillReceiveProps(props){
this.setState({contactEmail: props.contactEmail});
}
render() {
return (
<div className="LaunchRequestBox">
<h5 style={{textAlign:'left', marginTop: '30px', marginLeft: '20px'}}> Contact address will be used for direct messaging through Alexa </h5>
<TextField
id="contact email"
lineDirection="center"
label="Contact email"
className="md-cell md-cell--bottom"
style={{width:'60%', marginLeft: '20px'}}
maxLength={EMAIL_MAX_LENGTH}
onChange={this.handleEmailEdit}
value={this.state.contactEmail}/>
<br></br>
<br></br>
<br></br>
<Button style={{float:'right', marginRight: '20px'}} flat primary swapTheming
onClick={()=>{this.props.onSaveEmailClick(this.state.contactEmail)}}
disabled={this.props.waiting}>Save</Button>
</div>
);
}
handleEmailEdit(e){
if (e.length === EMAIL_MAX_LENGTH) return;
this.setState({contactEmail: e});
}
}
export default Contact;

11
web/src/components/IntentList.js
View File

@@ -2,6 +2,9 @@ import React, { Component } from 'react';
import {Button} from 'react-md';
import IntentItem from './IntentItem';
import '../css/Intent.css'
import {
LAUNCH_REQUEST_SELECTED_INDEX,
CONTACT_SELECTED_INDEX} from '../config'
class IntentList extends Component {
constructor (props){
@@ -17,9 +20,15 @@ class IntentList extends Component {
render() {
return (
<div className="IntentList">
<Button className={this.props.selectedIndex===-2 ? "LaunchRequest-selected" : "LaunchRequest"} flat primary
<Button className={this.props.selectedIndex===LAUNCH_REQUEST_SELECTED_INDEX ? "LaunchRequest-selected" : "LaunchRequest"} flat primary
onClick={this.props.onLaunchRequestClick}
disabled={this.props.waiting} >Launch request</Button>
<Button className={this.props.selectedIndex===CONTACT_SELECTED_INDEX ? "Contact-selected" : "Contact"} flat primary
onClick={this.props.onContactClick}
disabled={this.props.waiting} >Contact</Button>
<div className="IntentList-title">
<h3>Intents</h3>
</div>

6
web/src/config.js
View File

@@ -9,3 +9,9 @@ export const INTENT_TITLE_TOOLTIP_DELAY = 700;
export const INVOCATION_NAME_MAX_LENGTH = 15;
export const INVOCATION_ANSWER_MAX_LENGTH = 100;
export const EMAIL_MAX_LENGTH = 100;
export const NEW_INTENT_SELECTED_INDEX = -1;
export const LAUNCH_REQUEST_SELECTED_INDEX = -2;
export const CONTACT_SELECTED_INDEX = -3;

14
web/src/css/Intent.css
View File

@@ -24,6 +24,20 @@
height: 50px;
background-color: #f5f5f5; }
.Contact {
text-align: left;
color: #009b8a;
width: 100%;
height: 50px;
background-color: #d8d8d8; }
.Contact-selected {
text-align: left;
color: #009b8a;
width: 100%;
height: 50px;
background-color: #f5f5f5; }
.AddIntent {
float: right;
margin: 12px; }

16
web/src/css/Intent.scss
View File

@@ -31,6 +31,22 @@ $minHeight : calc(100vh - 80px);
background-color: #f5f5f5;
}
.Contact{
text-align: left;
color: #009b8a;
width: 100%;
height: 50px;
background-color: #d8d8d8
}
.Contact-selected{
text-align: left;
color: #009b8a;
width: 100%;
height: 50px;
background-color: #f5f5f5;
}
.AddIntent{
float: right;
margin: 12px;