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

4a. import content from WP ; change design to reflect 4a

Browse Source
This commit is contained in:
GotPPay
2018-03-30 10:54:15 +02:00
parent 5484a9a461
commit 443dc53dbd
17 changed files with 3581 additions and 875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2099
web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

68
web/src/App.js
View File

@@ -17,6 +17,7 @@ import {
INTENT_NAME_MIN_LENGTH,
QUESTION_MIN_LENGTH,
ANSWER_MIN_LENGTH,
ANSWER_TYPE,
} from './config/constants';
class App extends Component {
@@ -24,7 +25,7 @@ class App extends Component {
super (props);
this.state = {
_id: '5a232fb86ce046c749739455',
_id: '5abd461329f85e4ec728d945',
skillID: '',
skillName: '',
invocationName: 'Saburly',
@@ -35,6 +36,8 @@ class App extends Component {
intentExplanation: '',
questions: [''],
answer: '',
answerType: ANSWER_TYPE.PREDEFINED,
externalAnswerSource: '',
},
selectedIndex: NEW_INTENT_SELECTED_INDEX,
contactEmail: '',
@@ -149,8 +152,7 @@ class App extends Component {
}
handleSaveLaunchRequestClick (name, answer) {
if (name.length < INVOCATION_NAME_MIN_LENGTH){
if (name.length < INVOCATION_NAME_MIN_LENGTH) {
Popup.alert ('Invocation name should be at least 2 characters long');
return;
}
@@ -173,7 +175,7 @@ class App extends Component {
}
handleSaveEmailClick (email) {
if (isEmailValid(email)){
if (isEmailValid (email)) {
this.setState ({waiting: true});
this.sendSkill (
this.state.allIntents,
@@ -185,7 +187,7 @@ class App extends Component {
email,
false
);
}else{
} else {
Popup.alert ('Please enter valid email');
}
}
@@ -230,37 +232,46 @@ class App extends Component {
}
handleSaveIntentClick (selectedIntent) {
if (selectedIntent.intentName.length < INTENT_NAME_MIN_LENGTH){
if (selectedIntent.intentName.length < INTENT_NAME_MIN_LENGTH) {
Popup.alert ('Question name should have at least 2 characters');
return;
}
if (selectedIntent.answer.length < ANSWER_MIN_LENGTH){
Popup.alert('Answer should have at least 2 characters');
if (
selectedIntent.answerType === ANSWER_TYPE.PREDEFINED &&
selectedIntent.answer.length < ANSWER_MIN_LENGTH
) {
Popup.alert ('Answer should have at least 2 characters');
return;
}
for(let i=0;i<selectedIntent.questions.length;i++){
if (selectedIntent.questions[i].length < QUESTION_MIN_LENGTH){
Popup.alert('Question variant should have at least 2 characters');
for (let i = 0; i < selectedIntent.questions.length; i++) {
if (selectedIntent.questions[i].length < QUESTION_MIN_LENGTH) {
Popup.alert ('Question variant should have at least 2 characters');
return;
}
}
//Check for same question variants and same question name in other intents
for (let i=0;i<this.state.allIntents.length;i++){
if (i!==this.state.selectedIndex){
if (selectedIntent.intentName === this.state.allIntents[i].intentName){
Popup.alert('Question name already exists');
for (let i = 0; i < this.state.allIntents.length; i++) {
if (i !== this.state.selectedIndex) {
if (selectedIntent.intentName === this.state.allIntents[i].intentName) {
Popup.alert ('Question name already exists');
return;
}
for(let j=0;j<selectedIntent.questions.length;j++){
for (let k=0;k<this.state.allIntents[i].questions.length;k++){
if (selectedIntent.questions[j] === this.state.allIntents[i].questions[k]){
Popup.alert('Question variant already exists (in question :' + this.state.allIntents[i].intentName + ')');
for (let j = 0; j < selectedIntent.questions.length; j++) {
for (let k = 0; k < this.state.allIntents[i].questions.length; k++) {
if (
selectedIntent.questions[j] ===
this.state.allIntents[i].questions[k]
) {
Popup.alert (
'Question variant already exists (in question :' +
this.state.allIntents[i].intentName +
')'
);
return;
}
}
@@ -268,13 +279,11 @@ class App extends Component {
}
}
let newAllIntentsJSON = JSON.stringify (this.state.allIntents);
let newAllIntents = JSON.parse (newAllIntentsJSON);
let resolveState = null;
let rejectState = {waiting:false}
let rejectState = {waiting: false};
if (this.state.selectedIndex === NEW_INTENT_SELECTED_INDEX) {
//new intent
@@ -290,7 +299,7 @@ class App extends Component {
resolveState = {
allIntents: newAllIntents,
selectedIntent: selectedIntent,
waiting:false,
waiting: false,
};
}
this.setState ({waiting: true});
@@ -311,7 +320,14 @@ class App extends Component {
allIntents: this.state.allIntents,
selectedIndex: NEW_INTENT_SELECTED_INDEX,
launchRequest: false,
selectedIntent: {intentName: '', questions: [''], answer: '', intentExplanation:''},
selectedIntent: {
intentName: '',
questions: [''],
answer: '',
intentExplanation: '',
answerType: ANSWER_TYPE.PREDEFINED,
externalAnswerSource: '',
},
});
}

92
web/src/components/AnswerSource.js
View File

@@ -1,57 +1,97 @@
import React, { Component } from 'react';
import { Button, SelectionControlGroup } from 'react-md';
import React, {Component} from 'react';
import {Button, SelectionControlGroup} from 'react-md';
import Modal from './modal/Modal';
import {
ANSWER_TYPE
} from '../config/constants';
class AnswerSource extends Component {
constructor(props){
super(props);
constructor (props) {
super (props);
this.state = {
isModalOpen: false
isModalOpen: false,
answerType: this.props.answerType
};
}
onOpen() {
this.setState({
isModalOpen: true
onOpen () {
this.setState ({
isModalOpen: true,
answerType: this.props.answerType
});
}
onClose() {
this.setState({
isModalOpen: false
onClose () {
this.setState ({
isModalOpen: false,
});
}
render() {
onSave(){
this.onClose();
this.props.onSaveHandle(this.state.answerType);
}
onSourceChange(value, event){
this.setState({answerType:parseInt(value)});
}
render () {
let modal;
if (this.state.isModalOpen) {
modal = (
<Modal
title="Predefined answers"
title="Answer type"
actions={[
<Button flat swapTheming onClick={this.onClose.bind(this)} key="cancel">Cancel</Button>,
<Button flat primary swapTheming key="save">Save</Button>
]}>
<Button
flat
swapTheming
onClick={this.onClose.bind (this)}
key="cancel"
>
Cancel
</Button>,
<Button
flat
primary
swapTheming
key="save"
onClick={this.onSave.bind(this)}
>
Save
</Button>,
]}
>
<SelectionControlGroup
id="answer-source"
name="answer-source"
type="radio"
label="Import answer from:"
controls={[{
label: 'RSS feed - latest',
value: 'latest',
}]}>
</SelectionControlGroup>
onChange={this.onSourceChange.bind(this)}
controls={[
{
label: 'Predefined answer',
value: '0'
},
{
label: 'WordPress titles',
value: '1',
},
{
label: 'RSS feed - latest',
value: '2',
},
]}
defaultValue={String(this.state.answerType)}
/>
</Modal>
)
);
}
return (
<div>
<Button flat primary swapTheming
onClick={this.onOpen.bind(this)}>
Predefined answers
<Button flat primary swapTheming onClick={this.onOpen.bind (this)}>
Answer type
</Button>
{modal}
</div>

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

@@ -1,72 +1,43 @@
import React, { Component } from 'react';
import React, {Component} from 'react';
import {Button, SVGIcon, TextField} from 'react-md';
import AnswerSource from './AnswerSource.js';
import '../css/components/IntentDetails.css';
import '../css/Common.css';
import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH, INTENT_EXPLANATION_MAX_LENGTH} from '../config/constants';
import {
QUESTION_MAX_LENGTH,
ANSWER_MAX_LENGTH,
INTENT_NAME_MAX_LENGTH,
INTENT_EXPLANATION_MAX_LENGTH,
ANSWER_TYPE,
} from '../config/constants';
class IntentDetails extends Component {
constructor(props){
super(props);
constructor (props) {
super (props);
this.state= {intent: props.selectedIntent};
this.state = {intent: props.selectedIntent};
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);
this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind(this);
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.handleAnswerSourceEdit = this.handleAnswerSourceEdit.bind (this);
this.handleIntentNameEdit = this.handleIntentNameEdit.bind (this);
this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind (
this
);
this.handleExternalSourceSave = this.handleExternalSourceSave.bind (this);
}
componentWillReceiveProps(props){
this.setState({intent: props.selectedIntent});
componentWillReceiveProps (props) {
this.setState ({intent: props.selectedIntent});
}
render() {
return (
<div className="RightPanelBox">
<div className="QuestionBox">
<h5 className="PanelSubTitle"> In introduction, Alexa will help users to ask her the right questions about your business. For Example, she will say : "To ask us about our services, say : What do you do ? ". What do you do ? is defined in question field. Alexa will use first variation of question in intro.</h5>
<TextField
id="intent explanation"
lineDirection="center"
placeholder="To ask us about our services, say "
className="md-cell md-cell--bottom IntentDetailsInputBoxes"
onChange={this.handleIntentExplanationEdit}
maxLength={INTENT_EXPLANATION_MAX_LENGTH}
value={this.state.intent.intentExplanation} />
<br/>
<TextField
id="intent name"
lineDirection="center"
label="Question name"
className="md-cell md-cell--bottom IntentDetailsInputBoxes"
onChange={this.handleIntentNameEdit}
maxLength={INTENT_NAME_MAX_LENGTH}
value={this.state.intent.intentName} />
</div>
<AnswerSource />
<h5 className="QuestionTitle">Question variants</h5>
{
this.state.intent.questions.map((question, index)=>{
return (
<div key={index} className="QuestionBox">
<TextField
id="intent question"
lineDirection="center"
placeholder="Question"
className="md-cell md-cell--bottom IntentDetailsInputBoxes"
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>
);
})
}
<br></br>
{
render () {
let answerBox;
switch (this.state.intent.answerType) {
case ANSWER_TYPE.PREDEFINED:
answerBox = (
<div className="QuestionBox">
<TextField
id="intent answer"
@@ -76,60 +47,188 @@ class IntentDetails extends Component {
maxLength={ANSWER_MAX_LENGTH}
className="md-cell md-cell--bottom IntentDetailsInputBoxes"
onChange={this.handleAnswerEdit}
value={this.state.intent.answer}/>
value={this.state.intent.answer}
/>
</div>
}
<br></br>
<br></br>
<Button className="IntentDetailsButton" flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}} disabled={this.props.waiting}>Delete question</Button>
<Button className="IntentDetailsButton" flat primary swapTheming onClick={this.addQuestion} disabled={this.props.waiting}>Add variant</Button>
<Button className="IntentDetailsButton" flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}} disabled={this.props.waiting}>Save</Button>
);
break;
case ANSWER_TYPE.EXTERNAL_SOURCE_WP_JSON:
case ANSWER_TYPE.EXTERNAL_SOURCE_RSS:
answerBox = (
<div className="QuestionBox">
<TextField
id="intent answer"
lineDirection="center"
label="Answer source"
placeholder="Answer source"
maxLength={ANSWER_MAX_LENGTH}
className="md-cell md-cell--bottom IntentDetailsInputBoxes"
onChange={this.handleAnswerSourceEdit}
value={this.state.intent.externalAnswerSource}
/>
</div>
);
break;
}
return (
<div className="RightPanelBox">
<div className="QuestionBox">
<h5 className="PanelSubTitle">
{' '}
In introduction, Alexa will help users to ask her the right questions about your business. For Example, she will say : "To ask us about our services, say : What do you do ? ". What do you do ? is defined in question field. Alexa will use first variation of question in intro.
</h5>
<TextField
id="intent explanation"
lineDirection="center"
placeholder="To ask us about our services, say "
className="md-cell md-cell--bottom IntentDetailsInputBoxes"
onChange={this.handleIntentExplanationEdit}
maxLength={INTENT_EXPLANATION_MAX_LENGTH}
value={this.state.intent.intentExplanation}
/>
<br />
<TextField
id="intent name"
lineDirection="center"
label="Question name"
className="md-cell md-cell--bottom IntentDetailsInputBoxes"
onChange={this.handleIntentNameEdit}
maxLength={INTENT_NAME_MAX_LENGTH}
value={this.state.intent.intentName}
/>
</div>
<h5 className="QuestionTitle">Question variants</h5>
{this.state.intent.questions.map ((question, index) => {
return (
<div key={index} className="QuestionBox">
<TextField
id="intent question"
lineDirection="center"
placeholder="Question"
className="md-cell md-cell--bottom IntentDetailsInputBoxes"
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>
);
})}
<Button
className="AddQuestionVariantButton"
icon
primary
onClick={this.addQuestion}
disabled={this.props.waiting}
>
add
</Button>
<AnswerSource
className="QuestionTypeButton"
onSaveHandle={this.handleExternalSourceSave}
answerType={this.state.intent.answerType}
/>
{answerBox}
<Button
className="IntentDetailsButton-firstInRow"
flat
primary
swapTheming
onClick={() => {
this.props.onSaveIntentClick (this.state.intent);
}}
disabled={this.props.waiting}
>
Save
</Button>
<Button
className="IntentDetailsButton"
flat
primary
onClick={() => {
this.props.onDeleteIntentClick (this.state.intent);
}}
disabled={this.props.waiting}
>
Delete
</Button>
</div>
);
}
addQuestion(){
addQuestion () {
let newIntent = this.state.intent;
newIntent.questions.push('');
this.setState({intent: newIntent});
newIntent.questions.push ('');
this.setState ({intent: newIntent});
}
deleteQuestion(question){
let newIntent = this.state.intent;
let removeId = newIntent.questions.indexOf(question);
if (removeId !== -1)
newIntent.questions.splice(removeId,1);
this.setState({intent: newIntent});
deleteQuestion (question) {
if (this.state.intent.questions.length > 1) {
let newIntent = this.state.intent;
let removeId = newIntent.questions.indexOf (question);
if (removeId !== -1) newIntent.questions.splice (removeId, 1);
this.setState ({intent: newIntent});
}
}
handleQuestionEdit(e,index){
if (e.length === QUESTION_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
handleQuestionEdit (e, index) {
if (e.length === QUESTION_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e)) return;
let newIntent = this.state.intent;
newIntent.questions[index] = e;
this.setState({intent: newIntent});
this.setState ({intent: newIntent});
}
handleIntentExplanationEdit(e,index){
if (e.length === INTENT_EXPLANATION_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
handleIntentExplanationEdit (e, index) {
if (e.length === INTENT_EXPLANATION_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e))
return;
let newIntent = this.state.intent;
newIntent.intentExplanation = e;
this.setState({intent: newIntent});
this.setState ({intent: newIntent});
}
handleAnswerEdit(e){
if (e.length === ANSWER_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
handleAnswerEdit (e) {
if (e.length === ANSWER_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e)) return;
let newIntent = this.state.intent;
newIntent.answer = e;
this.setState({intent: newIntent});
this.setState ({intent: newIntent});
}
handleIntentNameEdit(e){
if (e.length === INTENT_NAME_MAX_LENGTH || !(/^[a-z]*$/i.test(e))) return;
handleAnswerSourceEdit (e) {
if (e.length === ANSWER_MAX_LENGTH) return;
let newIntent = this.state.intent;
newIntent.externalAnswerSource = e;
this.setState ({intent: newIntent});
}
handleIntentNameEdit (e) {
if (e.length === INTENT_NAME_MAX_LENGTH || !/^[a-z]*$/i.test (e)) return;
let newIntent = this.state.intent;
newIntent.intentName = e;
this.setState({intent: newIntent});
this.setState ({intent: newIntent});
}
handleExternalSourceSave (answerType) {
let newIntent = this.state.intent;
newIntent.answerType = answerType;
this.setState ({intent: newIntent});
}
}

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

@@ -25,7 +25,7 @@ class LaunchRequest extends Component {
<TextField
id="invocation name"
lineDirection="center"
placeholder="Saburly"
placeholder="saburly"
label="Invocation name"
className="md-cell md-cell--bottom InvocationInputBoxes"
maxLength={INVOCATION_NAME_MAX_LENGTH}
@@ -52,7 +52,7 @@ class LaunchRequest extends Component {
}
handleNameEdit(e){
if (e.length === INVOCATION_NAME_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
if (e.length === INVOCATION_NAME_MAX_LENGTH || !(/^[a-z,.' ]*$/.test(e))) return;
this.setState({invocationName: e});
}

6
web/src/config/constants.js
View File

@@ -22,6 +22,12 @@ export const NEW_INTENT_SELECTED_INDEX = -1;
export const LAUNCH_REQUEST_SELECTED_INDEX = -2;
export const CONTACT_SELECTED_INDEX = -3;
export const ANSWER_TYPE = {
PREDEFINED: 0,
EXTERNAL_SOURCE_WP_JSON : 1,
EXTERNAL_SOURCE_RSS : 2
}
export const RESULT_CODES = {
OK: 0,
ERROR: -1,

19
web/src/css/components/IntentDetails.scss
View File

@@ -9,10 +9,25 @@
}
.IntentDetailsInputBoxes{
width: 60%;
width: 90%;
}
.IntentDetailsButton{
float: right;
margin-right: 25px;
}
.IntentDetailsButton-firstInRow{
float: right;
margin-right: 10%;
}
.AddQuestionVariantButton{
float: right;
margin-right: 10%;
}
.QuestionTypeButton{
float: left;
margin-left: 25px;
margin-left: 30px;
}