Change UI

README.md

@@ -67,7 +67,7 @@ Prerequests for step 3 (run on server):
 requires running mongodb service
 
 	Database (tellall) with collection (skill_list)
-		* Insert dummy skill with : db.skill_list.insert({"skillID" : "amzn1.ask.skill.efbf0564-a732-4ba9-958f-57939138adae", "intents" : [ 	{ 	"intentName" : "GetFirstQuestion", 	"questions" : [ 	"tell me something about projects", 	"tell me all about projects" ], 	"answer" : "blablabla bla bla" }, 	{ 	"intentName" : "GetThirdQuestion", 	"questions" : [ 	"Give me third question" ], 	"answer" : "This is answer to the third question" } ], "invocationName" : "Saburly", "invocationAnswer" : "We are Saburly team one" })
+		* Insert dummy skill with : db.skill_list.insert({"skillID" : "amzn1.ask.skill.efbf0564-a732-4ba9-958f-57939138adae", "intents" : [ 	{ 	"intentName" : "GetFirstQuestion", "questionExplanation" : "",	"questions" : [ 	"tell me something about projects", 	"tell me all about projects" ], 	"answer" : "blablabla bla bla" }, 	{ 	"intentName" : "GetThirdQuestion", "questionExplanation" : "",	"questions" : [ 	"Give me third question" ], 	"answer" : "This is answer to the third question" } ], "invocationName" : "Saburly", "invocationAnswer" : "We are Saburly team one" })
 		
         *obtain _id and change in web/src/App.js, and also skill_db_id in backend/config.js
 		*enter web/ dir and run "npm run build"

web/src/App.js

@@ -6,43 +6,56 @@ 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'
+  RESULT_CODES,
+} from './config/constants';
 
 class App extends Component {
-
   constructor (props) {
     super (props);
 
-    this.state={_id:'5a232fb86ce046c749739455',
+    this.state = {
+      _id: '5a232fb86ce046c749739455',
       skillID: '',
       skillName: '',
       invocationName: 'Saburly',
       invocationAnswer: 'We are saburly',
       allIntents: [],
-                selectedIntent: {intentName:'',questions:[''],answer:''}, 
+      selectedIntent: {
+        intentName: '',
+        intentExplanation: '',
+        questions: [''],
+        answer: '',
+      },
       selectedIndex: NEW_INTENT_SELECTED_INDEX,
       contactEmail: '',
-                waiting: false
+      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,
+      this.setState ({
+        skillID: result.skillID,
+        skillName: result.skillName,
+        invocationName: result.invocationName,
         invocationAnswer: result.invocationAnswer,
-                      allIntents: result.intents, contactEmail: result.contactEmail})
+        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.handleSaveLaunchRequestClick = this.handleSaveLaunchRequestClick.bind (
+      this
+    );
     this.createSkill = this.createSkill.bind (this);
     this.sendSkill = this.sendSkill.bind (this);
     this.handleContactClick = this.handleContactClick.bind (this);
@@ -53,21 +66,33 @@ class App extends Component {
     let rightPanel;
     switch (this.state.selectedIndex) {
       case LAUNCH_REQUEST_SELECTED_INDEX:
-        rightPanel = <LaunchRequest  invocationName={this.state.invocationName}
+        rightPanel = (
+          <LaunchRequest
+            invocationName={this.state.invocationName}
             invocationAnswer={this.state.invocationAnswer}
             onSaveClick={this.handleSaveLaunchRequestClick}
-                                  waiting={this.state.waiting}/> ;
+            waiting={this.state.waiting}
+          />
+        );
         break;
       case CONTACT_SELECTED_INDEX:
-        rightPanel =  <Contact contactEmail={this.state.contactEmail}
+        rightPanel = (
+          <Contact
+            contactEmail={this.state.contactEmail}
             onSaveEmailClick={this.handleSaveEmailClick}
-                            waiting={this.state.waiting}/> ;
+            waiting={this.state.waiting}
+          />
+        );
         break;
       default:
-        rightPanel = <IntentDetails  selectedIntent={this.state.selectedIntent}
+        rightPanel = (
+          <IntentDetails
+            selectedIntent={this.state.selectedIntent}
             onDeleteIntentClick={this.handleDeleteIntentClick}
             onSaveIntentClick={this.handleSaveIntentClick}
-                                  waiting={this.state.waiting}/>;
+            waiting={this.state.waiting}
+          />
+        );
     }
 
     return (
@@ -76,13 +101,15 @@ class App extends Component {
         <div className="App-header">
           <h1> Tell All </h1>
         </div>
-        <IntentList allIntents={this.state.allIntents} 
+        <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}/>
+          waiting={this.state.waiting}
+        />
 
         {rightPanel}
       </div>
@@ -97,12 +124,16 @@ 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});
+    this.setState ({
+      selectedIntent: selectedIntent,
+      selectedIndex: index,
+      launchRequest: false,
+    });
   }
 
   handleLaunchRequestClick () {
@@ -110,24 +141,49 @@ class App extends Component {
   }
 
   handleContactClick () {
-    this.setState({selectedIndex: CONTACT_SELECTED_INDEX})
+    this.setState ({selectedIndex: CONTACT_SELECTED_INDEX});
   }
 
   handleSaveLaunchRequestClick (name, answer) {
-    this.setState({waiting:true, invocationName:name, invocationAnswer: answer});
+    this.setState ({
-    this.sendSkill(this.state.allIntents,true,{waiting:false},{waiting:false},name,answer,this.state.contactEmail,true);
+      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);
+    this.sendSkill (
+      this.state.allIntents,
+      true,
+      {contactEmail: email, waiting: false},
+      {waiting: false},
+      this.state.invocationName,
+      this.state.invocationAnswer,
+      email,
+      false
+    );
   }
 
   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)))
+      if (
+        id === -1 &&
+        JSON.stringify (selectedIntent) === JSON.stringify (intent)
+      )
         id = index;
     });
 
@@ -138,16 +194,27 @@ class App extends Component {
         newAllIntents.splice (id, 1);
         this.setState ({waiting: true});
 
-        let newState = {allIntents: newAllIntents, selectedIntent: {intentName:'', questions:[''],answer:''}, waiting:false};
+        let newState = {
-        this.sendSkill(newAllIntents,true,newState,{waiting:false},this.state.invocationName,this.state.invocationAnswer,this.state.contactEmail,true);
+          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);
+        console.log ('error : ' + e);
       }
     }
   }
 
-  
   handleSaveIntentClick (selectedIntent) {
     let newAllIntentsJSON = JSON.stringify (this.state.allIntents);
     let newAllIntents = JSON.parse (newAllIntentsJSON);
@@ -156,25 +223,68 @@ class App extends Component {
     if (this.state.selectedIndex === NEW_INTENT_SELECTED_INDEX) {
       //new intent
       newAllIntents.push (selectedIntent);
-      newState = {allIntents: newAllIntents, selectedIntent: selectedIntent, selectedIndex: newAllIntents.length-1, waiting:false};
+      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.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:''}});
+    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){
+  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=>{
+      updateSkill (
+        this.createSkill (
+          newAllIntents,
+          newName,
+          newAnswer,
+          email,
+          updateOnAmazon
+        )
+      )
+        .then (l => l.json ())
+        .then (result => {
           if (result.result !== RESULT_CODES.OK) {
-	        console.log(result.result);
+            console.log (result);
-          if (showPopUp) Popup.alert('Model was not saved. Please try again');
+            if (showPopUp)
+              Popup.alert ('Model was not saved. Please try again');
             this.setState (rejectState);
             //reject('Error code : ' + jResult.result);
           } else {
@@ -182,7 +292,8 @@ class App extends Component {
             this.setState (resolveState);
             resolve ();
           }
-      }).catch(e=>{
+        })
+        .catch (e => {
           console.log ('error : ' + e);
           if (showPopUp) Popup.alert ('Model was not saved. Please try again');
           this.setState (rejectState);

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;

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;