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

functional application without amazon update

Browse Source
This commit is contained in:
GotPPay
2017-12-02 22:48:45 +01:00
parent 0e193fa5a8
commit d5120a1ba2
12 changed files with 375 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
web/src/components/IntentDetails.js
View File

@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import {Button, SVGIcon, TextField} from 'react-md';
import '../css/Intent.css'
import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH} from '../config';
class IntentDetails extends Component {
constructor(props){
@@ -10,6 +11,9 @@ class IntentDetails extends Component {
this.addQuestion = this.addQuestion.bind(this);
this.deleteQuestion = this.deleteQuestion.bind(this);
this.handleQuestionEdit = this.handleQuestionEdit.bind(this);
this.handleAnswerEdit = this.handleAnswerEdit.bind(this);
this.handleIntentNameEdit = this.handleIntentNameEdit.bind(this);
}
componentWillReceiveProps(props){
@@ -19,18 +23,32 @@ class IntentDetails extends Component {
render() {
return (
<div className="IntentDetails">
<div className="QuestionBox">
<TextField
id="intent name"
lineDirection="center"
placeholder="Intent name"
label="Intent name"
className="md-cell md-cell--bottom"
style={{width:'60%'}}
onChange={this.handleIntentNameEdit}
maxLength={INTENT_NAME_MAX_LENGTH}
value={this.state.intent.intentName} />
</div>
<h5 style={{marginTop:'20px', marginLeft: '30px', float: 'left'}}>Questions</h5>
{
this.state.intent.questions.map((question, index)=>{
return (
<div key={index} className="QuestionBox">
<TextField
id="floating-center-title"
id="intent question"
lineDirection="center"
placeholder="Question"
className="md-cell md-cell--bottom"
style={{width:'60%'}}
maxLength={QUESTION_MAX_LENGTH}
rightIcon={<SVGIcon onClick={()=>{this.deleteQuestion(question)}}> <path fill="#000000" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/> </SVGIcon>}
onChange={(e)=>{this.handleQuestionEdit(e,index)}}
value={question}/>
</div>
);
@@ -40,12 +58,14 @@ class IntentDetails extends Component {
{
<div className="QuestionBox">
<TextField
id="floating-center-title"
id="intent answer"
lineDirection="center"
label="Answer"
placeholder="Answer"
style={{width:'60%'}}
maxLength={ANSWER_MAX_LENGTH}
className="md-cell md-cell--bottom"
onChange={this.handleAnswerEdit}
value={this.state.intent.answer}/>
</div>
}
@@ -60,7 +80,7 @@ class IntentDetails extends Component {
addQuestion(){
let newIntent = this.state.intent;
newIntent.questions.push('New question');
newIntent.questions.push('');
this.setState({intent: newIntent});
}
@@ -72,6 +92,28 @@ class IntentDetails extends Component {
this.setState({intent: newIntent});
}
handleQuestionEdit(e,index){
if (e.length === QUESTION_MAX_LENGTH) return;
let newIntent = this.state.intent;
newIntent.questions[index] = e;
this.setState({intent: newIntent});
}
handleAnswerEdit(e){
if (e.length === ANSWER_MAX_LENGTH) return;
let newIntent = this.state.intent;
newIntent.answer = e;
this.setState({intent: newIntent});
}
handleIntentNameEdit(e){
if (e.length === INTENT_NAME_MAX_LENGTH) return;
//e.replace(/\s/g,'');
let newIntent = this.state.intent;
newIntent.intentName = e;
this.setState({intent: newIntent});
}
}
export default IntentDetails;

17
web/src/components/IntentItem.js
View File

@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import {Button} from 'react-md';
import '../css/Intent.css'
import {INTENT_TITLE_MAX_LENGTH, INTENT_TITLE_TOOLTIP_DELAY} from '../config'
class IntentItem extends Component {
@@ -11,18 +12,18 @@ class IntentItem extends Component {
}
render() {
/*
<div className={this.props.selectedIndex===this.state.index ? 'IntentItem-selected' : 'IntentItem'} onClick={()=>{this.state.onClick(this.state.intent,this.state.index)}}>
<Button className={"IntentItem"} flat swapTheming>OK</Button>
<p> {this.state.index+1}. {this.state.intent.questions[0]} </p>
</div>
*/
let buttonTitle = this.state.intent.intentName;
if (buttonTitle.length > INTENT_TITLE_MAX_LENGTH){
buttonTitle = this.state.intent.intentName.substr(0,INTENT_TITLE_MAX_LENGTH-1) + '. . .';
}
return (
<div>
<Button className={this.props.selectedIndex===this.state.index ? 'IntentItem-selected' : 'IntentItem'}
onClick={()=>{this.state.onClick(this.state.intent,this.state.index)}}
flat>
{this.state.index+1}. {this.state.intent.questions[0]}
flat
tooltipDelay={INTENT_TITLE_TOOLTIP_DELAY}
tooltipLabel={this.state.intent.questions[0].length>INTENT_TITLE_MAX_LENGTH ? this.state.intent.questions[0] : ''}>
{this.state.index+1}. {buttonTitle}
</Button>
<br></br>
</div>

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

@@ -17,6 +17,8 @@ class IntentList extends Component {
render() {
return (
<div className="IntentList">
<Button className={this.props.selectedIndex===-2 ? "LaunchRequest-selected" : "LaunchRequest"} flat primary
onClick={this.props.onLaunchRequestClick}>Launch request</Button>
<div className="IntentList-title">
<h3>Intents</h3>
</div>
@@ -30,7 +32,7 @@ class IntentList extends Component {
})
}
<br></br>
<Button className={"AddIntent"} flat primary swapTheming onClick={this.props.handleAddIntentClick}>Add intent</Button>
<Button className={"AddIntent"} flat primary swapTheming onClick={this.props.onAddIntentClick}>Add intent</Button>
</div>
);
}

64
web/src/components/LaunchRequest.js Normal file
View File

@@ -0,0 +1,64 @@
import React, { Component } from 'react';
import {Button, TextField} from 'react-md';
import '../css/Intent.css'
import { INVOCATION_NAME_MAX_LENGTH, INVOCATION_ANSWER_MAX_LENGTH } from '../config';
class LaunchRequest extends Component {
constructor(props){
super(props);
this.state = {invocationName: props.invocationName, invocationAnswer: props.invocationAnswer};
this.handleNameEdit = this.handleNameEdit.bind(this);
this.handleAnswerEdit = this.handleAnswerEdit.bind(this);
}
componentWillReceiveProps(props){
this.setState({invocationName: props.invocationName, invocationAnswer: props.invocationAnswer});
}
render() {
return (
<div className="LaunchRequestBox">
<h5 style={{textAlign:'left', marginTop: '30px', marginLeft: '20px'}}> Invocation name customers use to activate the skill. For example "Open Saburly" or "Talk to Saburly" </h5>
<TextField
id="invocation name"
lineDirection="center"
placeholder="Saburly"
label="Invocation name"
className="md-cell md-cell--bottom"
style={{width:'60%', marginLeft: '20px'}}
maxLength={INVOCATION_NAME_MAX_LENGTH}
onChange={this.handleNameEdit}
value={this.state.invocationName}/>
<br></br>
<h5 style={{textAlign:'left', marginLeft: '20px', marginTop: '30px'}}>Answer customers get from Alexa when they activate the skill.</h5>
<TextField
id="invocation answer"
lineDirection="center"
placeholder="We are Saburly, ask us something about us"
label="Answer"
className="md-cell md-cell--bottom"
style={{width:'60%', marginLeft: '20px'}}
maxLength={INVOCATION_ANSWER_MAX_LENGTH}
onChange={this.handleAnswerEdit}
value={this.state.invocationAnswer}/>
<br></br>
<br></br>
<Button style={{float:'right', marginRight: '20px'}} flat primary swapTheming onClick={()=>{this.props.onSaveClick(this.state.invocationName, this.state.invocationAnswer)}}>Save</Button>
</div>
);
}
handleNameEdit(e){
if (e.length === INVOCATION_NAME_MAX_LENGTH) return;
this.setState({invocationName: e});
}
handleAnswerEdit(e){
if (e.length === INVOCATION_ANSWER_MAX_LENGTH) return;
this.setState({invocationAnswer: e});
}
}
export default LaunchRequest;