Change UI

2018-01-19 22:42:37 +01:00
parent e2d648980b
commit 48578d3ffe
4 changed files with 252 additions and 122 deletions
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import './css/App.css';
 import './css/popup.css';
 import IntentList from './components/IntentList';
@@ -6,90 +6,117 @@ 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 {getSkill, updateSkill} from './lib/api';
 import {
-          NEW_INTENT_SELECTED_INDEX,
-          LAUNCH_REQUEST_SELECTED_INDEX,
-          CONTACT_SELECTED_INDEX,
-          RESULT_CODES} from './config/constants'
+  NEW_INTENT_SELECTED_INDEX,
+  LAUNCH_REQUEST_SELECTED_INDEX,
+  CONTACT_SELECTED_INDEX,
+  RESULT_CODES,
+} from './config/constants';

 class App extends Component {
+  constructor (props) {
+    super (props);

-  constructor(props){
-    super(props);
+    this.state = {
+      _id: '5a232fb86ce046c749739455',
+      skillID: '',
+      skillName: '',
+      invocationName: 'Saburly',
+      invocationAnswer: 'We are saburly',
+      allIntents: [],
+      selectedIntent: {
+        intentName: '',
+        intentExplanation: '',
+        questions: [''],
+        answer: '',
+      },
+      selectedIndex: NEW_INTENT_SELECTED_INDEX,
+      contactEmail: '',
+      waiting: false,
+    };

-    this.state={_id:'5a232fb86ce046c749739455',
-                skillID:'',
-                skillName:'',
-                invocationName:'Saburly',
-                invocationAnswer:'We are saburly', 
-                allIntents:[], 
-                selectedIntent: {intentName:'',questions:[''],answer:''}, 
-                selectedIndex:NEW_INTENT_SELECTED_INDEX, 
-                contactEmail:'',
-                waiting: false
-              };
+    getSkill (this.state._id).then (l => l.json ()).then (result => {
+      if (result === undefined) return;
+      this.setState ({
+        skillID: result.skillID,
+        skillName: result.skillName,
+        invocationName: result.invocationName,
+        invocationAnswer: result.invocationAnswer,
+        allIntents: result.intents,
+        contactEmail: result.contactEmail,
+      });
+    });

-    getSkill(this.state._id).then(l=>l.json()).then(result=>{
-      if (result===undefined) return;
-      this.setState({ skillID:result.skillID,skillName:result.skillName, invocationName: result.invocationName,
-                      invocationAnswer: result.invocationAnswer, 
-                      allIntents: result.intents, contactEmail: result.contactEmail})
-    })
-
-    this.handleIntentClick = this.handleIntentClick.bind(this);
-    this.handleLaunchRequestClick = this.handleLaunchRequestClick.bind(this);
-    this.handleDeleteIntentClick = this.handleDeleteIntentClick.bind(this);
-    this.handleSaveIntentClick = this.handleSaveIntentClick.bind(this);
-    this.handleAddIntentClick = this.handleAddIntentClick.bind(this);
-    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);
+    this.handleIntentClick = this.handleIntentClick.bind (this);
+    this.handleLaunchRequestClick = this.handleLaunchRequestClick.bind (this);
+    this.handleDeleteIntentClick = this.handleDeleteIntentClick.bind (this);
+    this.handleSaveIntentClick = this.handleSaveIntentClick.bind (this);
+    this.handleAddIntentClick = this.handleAddIntentClick.bind (this);
+    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() {
+  render () {
    let rightPanel;
    switch (this.state.selectedIndex) {
      case LAUNCH_REQUEST_SELECTED_INDEX:
-        rightPanel = <LaunchRequest  invocationName={this.state.invocationName}
-                                  invocationAnswer={this.state.invocationAnswer}
-                                  onSaveClick={this.handleSaveLaunchRequestClick}
-                                  waiting={this.state.waiting}/> ;
+        rightPanel = (
+          <LaunchRequest
+            invocationName={this.state.invocationName}
+            invocationAnswer={this.state.invocationAnswer}
+            onSaveClick={this.handleSaveLaunchRequestClick}
+            waiting={this.state.waiting}
+          />
+        );
        break;
      case CONTACT_SELECTED_INDEX:
-        rightPanel =  <Contact contactEmail={this.state.contactEmail}
-                            onSaveEmailClick={this.handleSaveEmailClick}
-                            waiting={this.state.waiting}/> ;
+        rightPanel = (
+          <Contact
+            contactEmail={this.state.contactEmail}
+            onSaveEmailClick={this.handleSaveEmailClick}
+            waiting={this.state.waiting}
+          />
+        );
        break;
      default:
-        rightPanel = <IntentDetails  selectedIntent={this.state.selectedIntent}
-                                  onDeleteIntentClick={this.handleDeleteIntentClick}
-                                  onSaveIntentClick={this.handleSaveIntentClick}
-                                  waiting={this.state.waiting}/>;
+        rightPanel = (
+          <IntentDetails
+            selectedIntent={this.state.selectedIntent}
+            onDeleteIntentClick={this.handleDeleteIntentClick}
+            onSaveIntentClick={this.handleSaveIntentClick}
+            waiting={this.state.waiting}
+          />
+        );
    }

-    return(
+    return (
      <div className="App">
-      <Popup/>
+        <Popup />
        <div className="App-header">
          <h1> Tell All </h1>
        </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
+          allIntents={this.state.allIntents}
+          onLaunchRequestClick={this.handleLaunchRequestClick}
+          onContactClick={this.handleContactClick}
+          onIntentClick={this.handleIntentClick}
+          onAddIntentClick={this.handleAddIntentClick}
+          selectedIndex={this.state.selectedIndex}
+          waiting={this.state.waiting}
+        />
+
        {rightPanel}
      </div>
    );
  }

-  createSkill(intents, name, answer, email, updateOnAmazon){
+  createSkill (intents, name, answer, email, updateOnAmazon) {
    return {
      _id: this.state._id,
      skillID: this.state.skillID,
@@ -97,97 +124,181 @@ class App extends Component {
      invocationName: name,
      invocationAnswer: answer,
      contactEmail: email,
-      updateOnAmazon: updateOnAmazon
+      updateOnAmazon: updateOnAmazon,
    };
  }

-  handleIntentClick(selectedIntent, index){
-    this.setState({selectedIntent:selectedIntent, selectedIndex: index, launchRequest:false});
+  handleIntentClick (selectedIntent, index) {
+    this.setState ({
+      selectedIntent: selectedIntent,
+      selectedIndex: index,
+      launchRequest: false,
+    });
  }

-  handleLaunchRequestClick(){
-    this.setState({selectedIndex: LAUNCH_REQUEST_SELECTED_INDEX});
+  handleLaunchRequestClick () {
+    this.setState ({selectedIndex: LAUNCH_REQUEST_SELECTED_INDEX});
  }

-  handleContactClick(){
-    this.setState({selectedIndex: CONTACT_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.state.contactEmail,true);
+  handleSaveLaunchRequestClick (name, answer) {
+    this.setState ({
+      waiting: true,
+      invocationName: name,
+      invocationAnswer: 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);
+  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){
+  handleDeleteIntentClick (selectedIntent) {
    let id = -1;
    //TODO : Change comparsion method ! Same object with different proeprty sorting will not be same string
-    this.state.allIntents.map((intent,index)=>{
-      if ((id===-1) && (JSON.stringify(selectedIntent)===JSON.stringify(intent)))
-          id = index;
+    this.state.allIntents.map ((intent, index) => {
+      if (
+        id === -1 &&
+        JSON.stringify (selectedIntent) === JSON.stringify (intent)
+      )
+        id = index;
    });

-    if (id!==-1){
-      try{
-        let newAllIntentsJSON = JSON.stringify(this.state.allIntents);
-        let newAllIntents = JSON.parse(newAllIntentsJSON);
-        newAllIntents.splice(id,1);
-        this.setState({waiting:true});
+    if (id !== -1) {
+      try {
+        let newAllIntentsJSON = JSON.stringify (this.state.allIntents);
+        let newAllIntents = JSON.parse (newAllIntentsJSON);
+        newAllIntents.splice (id, 1);
+        this.setState ({waiting: true});

-        let newState = {allIntents: newAllIntents, selectedIntent: {intentName:'', questions:[''],answer:''}, 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);
+        let newState = {
+          allIntents: newAllIntents,
+          selectedIntent: {intentName: '', questions: [''], answer: ''},
+          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);
      }
    }
  }

-  
-  handleSaveIntentClick(selectedIntent){
-    let newAllIntentsJSON = JSON.stringify(this.state.allIntents);
-    let newAllIntents = JSON.parse(newAllIntentsJSON);
+  handleSaveIntentClick (selectedIntent) {
+    let newAllIntentsJSON = JSON.stringify (this.state.allIntents);
+    let newAllIntents = JSON.parse (newAllIntentsJSON);

    let newState = null;
-    if (this.state.selectedIndex === NEW_INTENT_SELECTED_INDEX){
+    if (this.state.selectedIndex === NEW_INTENT_SELECTED_INDEX) {
      //new intent
-      newAllIntents.push(selectedIntent);
-      newState = {allIntents: newAllIntents, selectedIntent: selectedIntent, selectedIndex: newAllIntents.length-1, waiting:false};
-    }else{
+      newAllIntents.push (selectedIntent);
+      newState = {
+        allIntents: newAllIntents,
+        selectedIntent: selectedIntent,
+        selectedIndex: newAllIntents.length - 1,
+        waiting: false,
+      };
+    } else {
      newAllIntents[this.state.selectedIndex] = selectedIntent;
-      newState = {allIntents: newAllIntents, selectedIntent: selectedIntent, waiting: false};
+      newState = {
+        allIntents: newAllIntents,
+        selectedIntent: selectedIntent,
+        waiting: false,
+      };
    }
-    this.setState({waiting:true});
-    this.sendSkill(newAllIntents, true, newState, {waiting:false}, this.state.invocationName,this.state.invocationAnswer,this.state.contactEmail, true);
+    this.setState ({waiting: true});
+    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: NEW_INTENT_SELECTED_INDEX,launchRequest:false,selectedIntent: {intentName:'',questions:[''], answer:''}});
+  handleAddIntentClick () {
+    this.setState ({
+      allIntents: this.state.allIntents,
+      selectedIndex: NEW_INTENT_SELECTED_INDEX,
+      launchRequest: false,
+      selectedIntent: {intentName: '', questions: [''], answer: ''},
+    });
  }

-  sendSkill(newAllIntents, showPopUp, resolveState, rejectState, newName, newAnswer, email, updateOnAmazon){
-    return new Promise((resolve,reject)=>{
-      updateSkill(this.createSkill(newAllIntents,newName,newAnswer,email,updateOnAmazon)).then(l=>l.json()).then(result=>{
-        if (result.result !== RESULT_CODES.OK){
-	        console.log(result.result);
-          if (showPopUp) Popup.alert('Model was not saved. Please try again');
-          this.setState(rejectState);
-          //reject('Error code : ' + jResult.result);
-        }else{
-          if (showPopUp) Popup.alert('Saved');
-          this.setState(resolveState);
-          resolve();
-        }
-      }).catch(e=>{
-	      console.log('error : ' + e);
-        if (showPopUp) Popup.alert('Model was not saved. Please try again');
-        this.setState(rejectState);
-        //reject(e);
-      });
+  sendSkill (
+    newAllIntents,
+    showPopUp,
+    resolveState,
+    rejectState,
+    newName,
+    newAnswer,
+    email,
+    updateOnAmazon
+  ) {
+    return new Promise ((resolve, reject) => {
+      updateSkill (
+        this.createSkill (
+          newAllIntents,
+          newName,
+          newAnswer,
+          email,
+          updateOnAmazon
+        )
+      )
+        .then (l => l.json ())
+        .then (result => {
+          if (result.result !== RESULT_CODES.OK) {
+            console.log (result);
+            if (showPopUp)
+              Popup.alert ('Model was not saved. Please try again');
+            this.setState (rejectState);
+            //reject('Error code : ' + jResult.result);
+          } else {
+            if (showPopUp) Popup.alert ('Saved');
+            this.setState (resolveState);
+            resolve ();
+          }
+        })
+        .catch (e => {
+          console.log ('error : ' + e);
+          if (showPopUp) Popup.alert ('Model was not saved. Please try again');
+          this.setState (rejectState);
+          //reject(e);
+        });
    });
  }
 }
--- a/web/src/components/IntentDetails.js
+++ b/web/src/components/IntentDetails.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import {Button, SVGIcon, TextField} from 'react-md';
 import '../css/components/IntentDetails.css';
-import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH} from '../config/constants';
+import '../css/Common.css';
+import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH, INTENT_EXPLANATION_MAX_LENGTH} from '../config/constants';

 class IntentDetails extends Component {
  constructor(props){
@@ -14,6 +15,7 @@ class IntentDetails extends Component {
    this.handleQuestionEdit = this.handleQuestionEdit.bind(this);
    this.handleAnswerEdit = this.handleAnswerEdit.bind(this);
    this.handleIntentNameEdit = this.handleIntentNameEdit.bind(this);
+    this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind(this);
  }

  componentWillReceiveProps(props){
@@ -24,10 +26,19 @@ class IntentDetails extends Component {
    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"
-            placeholder="Intent name"
            label="Question name"
            className="md-cell md-cell--bottom IntentDetailsInputBoxes"
            onChange={this.handleIntentNameEdit}
@@ -98,6 +109,13 @@ class IntentDetails extends Component {
    this.setState({intent: newIntent});
  }

+  handleIntentExplanationEdit(e,index){
+    if (e.length === INTENT_EXPLANATION_MAX_LENGTH) return;
+    let newIntent = this.state.intent;
+    newIntent.intentExplanation = e;
+    this.setState({intent: newIntent});
+  }
+
  handleAnswerEdit(e){
    if (e.length === ANSWER_MAX_LENGTH) return;
    let newIntent = this.state.intent;
--- a/web/src/config/constants.js
+++ b/web/src/config/constants.js
@@ -1,4 +1,5 @@
 export const INTENT_NAME_MAX_LENGTH = 30;
+export const INTENT_EXPLANATION_MAX_LENGTH = 70;
 export const QUESTION_MAX_LENGTH = 150;
 export const ANSWER_MAX_LENGTH = 150;