diff --git a/backend/config.js b/backend/config.js index 5c41336..3edee7d 100644 --- a/backend/config.js +++ b/backend/config.js @@ -8,8 +8,8 @@ config.REFRESH_TOKEN = 'Atzr|IwEBICA3kDhfSJxlwvnQp9AD1o115AC_KBbFd5GBg8oN_QHWn2o config.TOKEN_EXPIRES_IN = 1515100500; config.SKILL_ID = 'amzn1.ask.skill.efbf0564-a732-4ba9-958f-57939138adae'; -config.SKILL_DB_ID = '5a5016e775becaef2015da10'; //for server -//config.SKILL_DB_ID = '5a232fb86ce046c749739455'; //for local +//config.SKILL_DB_ID = '5a5016e775becaef2015da10'; //for server +config.SKILL_DB_ID = '5a232fb86ce046c749739455'; //for local config.CLIENT_ID = 'amzn1.application-oa2-client.c748ca56ded04a95b236979898585ff7'; config.CLIENT_SECRET = '6dea8125cecd049d3c4cff7bb5bdfd3ff17bc6fed246c4c8f6b519d9ed08d0b3'; diff --git a/web/README.md b/web/README.md index 41ca12f..c13f2f0 100644 --- a/web/README.md +++ b/web/README.md @@ -29,8 +29,8 @@ Send a POST request to https://api.amazon.com/auth/o2/token with the following p Response : { - "access_token": "Atza|...", - "refresh_token": "Atzr|...", + "access_token": "Atza|IwEBIBe6gDqrrowEEav6N-_6s4NztYeP3oG8PGWmu8ZiZw6lbOh3wNla3TK6pY-VEpT1d8an-dVf_n3kXJzVFsNo_4xBfZyFHGoCTDTFjs3yBRul4PVdBOhwwiH3-sgRLcUofZbe2oE06GmTcbfYtaStfXpQI5dfpldfnsJg_CvhSA6AHb_snJT3F6lyXzbV076d_3cYUMJxFldJGnYcviNHHxjjmuQTD06hhGzCbAxxe9eBmkuopRsNfyedLT2UlKP_ublah9CUGA3AdIX_3Iuke82jMwGnNl9gv7pbaDNEjAbj7IQSl3B08uuREtJq-oTBOjALNXRvFxTJmQjZwXNf9eHC7fSHJDdEPdZQU0AcffRQObAyAkUuL6Jv39OHzhb3Q64-zzoyODqnJyLP5SQZ2JVF53Kc_cTBqjIc9pXljqe7yEVk6JDs7q1zKbBibx_AQm57TO79IzWyLBzBMlYL5HdTsqEfRzLeDw2tws-hGMgkx2HWfdbYnmf5Qb4SyIhzvmmdfPLg3MVKTxjIBu1rx0xf3n0PLZP1EO6jsJPoMRPg77Gm4oit5Zp6s37ek3A3Vxh-ntoASpkrkxGTG9kVtRNt", + "refresh_token": "Atzr|IwEBICA3kDhfSJxlwvnQp9AD1o115AC_KBbFd5GBg8oN_QHWn2or5xFQ09BruuK6a07tGHtTt_9q2Y21mnOMH4RDtYXTVG9ADgLE6mHWKZFxYVwt3kHMiUJdY5lJcsOtWLoblrS-bJ0BEXXK5nVDt_bSI5IB7NUf-9QVZxhovRH_ANSxdTjJT0_rMIAZY3WEj68FEap49q_pg72BhnxHVZD2TC3zvX96_DN65HE5SoSgT7OiMAeiJewB_SyemW_HxBwaB-_X-G1ifOtnrzZ4gXTpOrEUlHI2YPuvRMBMtmz1h-nXDZYv3vwU3RA57Qj_ZNVcScj8_RXf2xq8w48v0PzZFXYBSalfnqPq6eUvSSbAJUp6bB8y596JlvR5dFQe_Z--X0Gkfo85IcyrI9D44vK9sJhrGhCVi2FDDa8pHczmNSen99JYZvDif-zpYzgbcymAkOV0gC7JvYMxlZfETT3NTBy7eVA7fJI1SZaeA_qW49xRcBkZBu5gkqTpeGWUU1cGr2aXRVVmXGM22NfV5E7KzvEBsCeHml_tCfxZeKY8Msd8hJb0Cd59u-_hsuc8oNjsOpIdFF976dY3uTmAgHWpG2PH", "token_type": "bearer", "expires_in": 3600 } @@ -55,8 +55,8 @@ Send a POST request to https://api.amazon.com/auth/o2/token with the following p Response : { - "access_token": "Atza|...", - "refresh_token": "Atzr|...", + "access_token": "Atza|IwEBILtBe3hrHovrMx7Oivng-RB2EKzvCm_epXJE2HXPMQzXTFqK10Zrqt-Z8paeRoLQBqbLCmqWvcr5RTNgw9qjtfzOTsOrXC1VKqKmxpqHTrJyn2TLGsCzFjBDfADNjCyufWTf2ZlsSzjxW2GiqCHlwoPSd9pFrLavtRThrm1J-5KvnFrj-yD-tYTSwrgX5W5p2SrjQxoE3aP5b96z6p8GvCL9lM1pddafAxkHb22A3IzR-pYGmEijb4ksRuaIf4WCNwssWV6GBIB2oJA5CU-Dtd2mOZZ5-dYpSSeCHyGumTYecTxxMVSdiVjCqB8WT6AtvvutWFQQoldHjJmIwBsTZP-iQcl-UyajOZJ03GqRUym5Hp-49uByzVG-MfR_Z5qVmYjjsLQEOLCY9kPVnmRGnOTj6YPjrHXibd6P8TQOMh4VTcgFpg-afKKABP6EeDwok1t2ivuYh5OJju-B1A6gzhMi4vQJYKq107e0QMYBBhrf_OqCgMbfnQZ8j40qocVGID5YWv8uk5wKyI61LrbzrTltmzxzNemzqbSBzwAlfNS6GW-jVjg8svsi1lb_EVRbhyOoWJWX3mEd-5GDYyUcyInleiAR0aIHVP94pZxqdiCamA", + "refresh_token": "Atzr|IwEBICA3kDhfSJxlwvnQp9AD1o115AC_KBbFd5GBg8oN_QHWn2or5xFQ09BruuK6a07tGHtTt_9q2Y21mnOMH4RDtYXTVG9ADgLE6mHWKZFxYVwt3kHMiUJdY5lJcsOtWLoblrS-bJ0BEXXK5nVDt_bSI5IB7NUf-9QVZxhovRH_ANSxdTjJT0_rMIAZY3WEj68FEap49q_pg72BhnxHVZD2TC3zvX96_DN65HE5SoSgT7OiMAeiJewB_SyemW_HxBwaB-_X-G1ifOtnrzZ4gXTpOrEUlHI2YPuvRMBMtmz1h-nXDZYv3vwU3RA57Qj_ZNVcScj8_RXf2xq8w48v0PzZFXYBSalfnqPq6eUvSSbAJUp6bB8y596JlvR5dFQe_Z--X0Gkfo85IcyrI9D44vK9sJhrGhCVi2FDDa8pHczmNSen99JYZvDif-zpYzgbcymAkOV0gC7JvYMxlZfETT3NTBy7eVA7fJI1SZaeA_qW49xRcBkZBu5gkqTpeGWUU1cGr2aXRVVmXGM22NfV5E7KzvEBsCeHml_tCfxZeKY8Msd8hJb0Cd59u-_hsuc8oNjsOpIdFF976dY3uTmAgHWpG2PH", "token_type": "bearer", "expires_in": 3600 } @@ -68,14 +68,15 @@ Prerequests for step 3 : 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" }) - obtain _id and change in web/src/App.js + 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" Database (tellall) with collection (token_list) Insert tokens with : db.token_list.insert({"id" : 1, "refresh_token" : "...", "access_token" : "...", "expires_in" : 1515173601.754 }) (Change refresh_token and access_token dots with real ones) - Set skill_id, client_id and client_secret to appropriate values + Set skill_id, client_id and client_secret to appropriate values in backend/config.js + Set base_url to "tellall.saburly.com" in web/src/config. Start backend service from backend/ running "node express.js" diff --git a/web/src/App.js b/web/src/App.js index 044d6aa..856efac 100644 --- a/web/src/App.js +++ b/web/src/App.js @@ -13,7 +13,7 @@ class App extends Component { constructor(props){ super(props); - this.state={_id:'5a5016e775becaef2015da10', + this.state={_id:'5a232fb86ce046c749739455', skillID:'', skillName:'', invocationName:'Saburly', @@ -21,7 +21,9 @@ class App extends Component { allIntents:[], selectedIntent: {intentName:'',questions:[''],answer:''}, selectedIndex:-1, - launchRequest:false}; + launchRequest:false, + waiting: false + }; getSkill(this.state._id).then(l=> l.text()).then(result=>{ let jResult = JSON.parse(result)[0]; @@ -38,9 +40,11 @@ class App extends Component { this.handleAddIntentClick = this.handleAddIntentClick.bind(this); this.handleSaveLaunchRequestClick = this.handleSaveLaunchRequestClick.bind(this); this.createSkill = this.createSkill.bind(this); + this.sendSkill = this.sendSkill.bind(this); } render() { + if(this.state.launchRequest){ return (
@@ -52,11 +56,14 @@ class App extends Component { onLaunchRequestClick={this.handleLaunchRequestClick} onIntentClick={this.handleIntentClick} onAddIntentClick={this.handleAddIntentClick} - selectedIndex={this.state.selectedIndex}> + selectedIndex={this.state.selectedIndex} + waiting={this.state.waiting}> + onSaveClick={this.handleSaveLaunchRequestClick} + waiting={this.state.waiting}> +
); }else{ @@ -70,11 +77,13 @@ class App extends Component { onLaunchRequestClick={this.handleLaunchRequestClick} onIntentClick={this.handleIntentClick} onAddIntentClick={this.handleAddIntentClick} - selectedIndex={this.state.selectedIndex}> + selectedIndex={this.state.selectedIndex} + waiting={this.state.waiting}> + onSaveIntentClick={this.handleSaveIntentClick} + waiting={this.state.waiting}> ); @@ -100,43 +109,27 @@ class App extends Component { } handleSaveLaunchRequestClick(name, answer){ - this.setState({invocationName: name, invocationAnswer: answer}); - console.log("handleSaveLaunchRequest"); - updateSkill(this.createSkill(this.state.allIntents,name,answer)).then(l=>l.text()).then(result=>{ - let jResult = JSON.parse(result); - if (jResult.result !== 0){ - Popup.alert('Model was not saved. Please try again'); - }else{ - Popup.alert('Saved'); - } - console.log(jResult.message); - }).catch(e=>{ - console.log("Error :" + e); - Popup.alert('Model was not saved. Please try again'); - }); + this.setState({waiting:true, invocationName:name, invocationAnswer: answer}); + this.sendSkill(this.state.allIntents,true,{waiting:false},{waiting:false},name,answer); } handleDeleteIntentClick(selectedIntent){ - let id = this.state.allIntents.indexOf(selectedIntent); + let id = -1; + this.state.allIntents.map((intent,index)=>{ + if ((id===-1) && (JSON.stringify(selectedIntent)===JSON.stringify(intent))) + id = index; + }); + if (id!==-1){ try{ - //I don't like this, state in database is different than component state, for some time - //TODO : move database operation in componentWillUpdate or componentDidUpdate - let newAllIntents = this.state.allIntents; + let newAllIntentsJSON = JSON.stringify(this.state.allIntents); + let newAllIntents = JSON.parse(newAllIntentsJSON); newAllIntents.splice(id,1); - this.setState({allIntents: newAllIntents, selectedIntent: {intentName:'', questions:[''],answer:''}}); - updateSkill(this.createSkill(newAllIntents)).then(l=>l.text()).then(result=>{ - let jResult = JSON.parse(result); - if (jResult.result !== 0){ - Popup.alert('Model was not saved. Please try again'); - }else{ - Popup.alert('Saved'); - } - console.log(jResult.message); - }).catch(e=>{ - console.log("error : " + e); - Popup.alert('Model was not saved. Please try again'); - }); + this.setState({waiting:true}); + + let newState = {allIntents: newAllIntents, selectedIntent: {intentName:'', questions:[''],answer:''}, waiting:false}; + this.sendSkill(newAllIntents,true,newState,{waiting:false}); + }catch(e){ console.log("error : " + e); } @@ -145,34 +138,46 @@ class App extends Component { handleSaveIntentClick(selectedIntent){ - let newAllIntents = this.state.allIntents; + let newAllIntentsJSON = JSON.stringify(this.state.allIntents); + let newAllIntents = JSON.parse(newAllIntentsJSON); + + let newState = null; if (this.state.selectedIndex === -1){ //new intent newAllIntents.push(selectedIntent); - this.setState({allIntents: newAllIntents, selectedIntent: selectedIntent, selectedIndex: newAllIntents.length-1}); + newState = {allIntents: newAllIntents, selectedIntent: selectedIntent, selectedIndex: newAllIntents.length-1, waiting:false}; }else{ newAllIntents[this.state.selectedIndex] = selectedIntent; - this.setState({allIntents: newAllIntents, selectedIntent: selectedIntent}); + newState = {allIntents: newAllIntents, selectedIntent: selectedIntent, waiting: false}; } - - updateSkill(this.createSkill(newAllIntents)).then(l=>l.text()).then(result=>{ - let jResult = JSON.parse(result); - if (jResult.result !== 0){ - Popup.alert('Model was not saved. Please try again'); - }else{ - Popup.alert('Saved'); - } - console.log(jResult.message); - }).catch(e=>{ - Popup.alert('Model was not saved. Please try again'); - console.log("error : " + e); - }); - + this.setState({waiting:true}); + this.sendSkill(newAllIntents, true, newState, {waiting:false}); } handleAddIntentClick(){ this.setState({allIntents: this.state.allIntents, selectedIndex: -1,launchRequest:false,selectedIntent: {intentName:'',questions:[''], answer:''}}); } + + sendSkill(newAllIntents, showPopUp, resolveState, rejectState, newName, newAnswer){ + return new Promise((resolve,reject)=>{ + updateSkill(this.createSkill(newAllIntents,newName,newAnswer)).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'); + this.setState(rejectState); + //reject('Error code : ' + jResult.result); + }else{ + if (showPopUp) Popup.alert('Saved'); + this.setState(resolveState); + resolve(); + } + }).catch(e=>{ + if (showPopUp) Popup.alert('Model was not saved. Please try again'); + this.setState(rejectState); + //reject(e); + }); + }); + } } export default App; diff --git a/web/src/components/IntentDetails.js b/web/src/components/IntentDetails.js index 9eb0b0d..3919e99 100644 --- a/web/src/components/IntentDetails.js +++ b/web/src/components/IntentDetails.js @@ -71,9 +71,10 @@ class IntentDetails extends Component { }



- - - + + + + ); } diff --git a/web/src/components/IntentItem.js b/web/src/components/IntentItem.js index 435da7a..0aa29a5 100644 --- a/web/src/components/IntentItem.js +++ b/web/src/components/IntentItem.js @@ -21,9 +21,10 @@ class IntentItem extends Component {

diff --git a/web/src/components/IntentList.js b/web/src/components/IntentList.js index b97f990..53943c3 100644 --- a/web/src/components/IntentList.js +++ b/web/src/components/IntentList.js @@ -18,21 +18,25 @@ class IntentList extends Component { return (
+ onClick={this.props.onLaunchRequestClick} + disabled={this.props.waiting} >Launch request

Intents

{ this.state.intents.map((intent,index)=>{ return + onClick={this.state.onIntentClick} + waiting={this.props.waiting}> }) }

- +
); } diff --git a/web/src/components/LaunchRequest.js b/web/src/components/LaunchRequest.js index 28d5099..c713aa3 100644 --- a/web/src/components/LaunchRequest.js +++ b/web/src/components/LaunchRequest.js @@ -45,7 +45,9 @@ class LaunchRequest extends Component { value={this.state.invocationAnswer}/>



- + ); } diff --git a/web/src/config.js b/web/src/config.js index 180ca60..1a4de76 100644 --- a/web/src/config.js +++ b/web/src/config.js @@ -1,4 +1,4 @@ -export const BASE_URL = 'tellall.saburly.com'; +export const BASE_URL = 'localhost:5000'; export const INTENT_NAME_MAX_LENGTH = 30; export const QUESTION_MAX_LENGTH = 150; diff --git a/web/src/css/Intent.css b/web/src/css/Intent.css index 62b35e2..2556df7 100644 --- a/web/src/css/Intent.css +++ b/web/src/css/Intent.css @@ -1,8 +1,7 @@ /*IntentList and IntentItem CSS*/ .IntentList { width: 30%; - min-height: 9999px; - height: 9999px; + min-height: calc(100vh - 80px); float: left; background-color: #eff0f0; } @@ -49,8 +48,7 @@ .IntentDetails { float: left; width: 70%; - min-height: 9999px; - height: 9999px; + min-height: calc(100vh - 80px); background-color: #f5f5f5; } .QuestionBox { @@ -60,8 +58,7 @@ .LaunchRequestBox { float: left; width: 70%; - min-height: 9999px; - height: 9999px; + min-height: calc(100vh - 80px); background-color: #f5f5f5; } .ExplanationText { diff --git a/web/src/css/Intent.scss b/web/src/css/Intent.scss index b35497e..d755d26 100644 --- a/web/src/css/Intent.scss +++ b/web/src/css/Intent.scss @@ -1,9 +1,10 @@ +$minHeight : calc(100vh - 80px); + /*IntentList and IntentItem CSS*/ .IntentList{ width: 30%; - min-height:9999px; - height:9999px; + min-height:$minHeight; float:left; background-color: #eff0f0; } @@ -59,8 +60,7 @@ .IntentDetails{ float: left; width: 70%; - min-height:9999px; - height:9999px; + min-height:$minHeight; background-color: #f5f5f5; } @@ -73,8 +73,7 @@ .LaunchRequestBox{ float: left; width:70%; - min-height: 9999px; - height: 9999px; + min-height:$minHeight; background-color: #f5f5f5; } diff --git a/web/src/css/index.scss b/web/src/css/index.scss index 1055bc3..61a13a4 100644 --- a/web/src/css/index.scss +++ b/web/src/css/index.scss @@ -2,7 +2,6 @@ @include react-md-everything; - body { margin: 0; padding: 0; diff --git a/web/src/css/popup.scss b/web/src/css/popup.scss new file mode 100644 index 0000000..7f750bf --- /dev/null +++ b/web/src/css/popup.scss @@ -0,0 +1,174 @@ +.mm-popup { + display: none; } + +.mm-popup--visible { + display: block; } + +.mm-popup__overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1000; + overflow: auto; + background: rgba(0, 0, 0, 0.1); } + +.mm-popup__close { + position: absolute; + top: 15px; + right: 20px; + padding: 0; + width: 20px; + height: 20px; + cursor: pointer; + outline: none; + text-align: center; + border-radius: 10px; + border: none; + text-indent: -9999px; + background: transparent url("data:image/png;base64,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") no-repeat center center; + background-size: 100%; + margin: 0; } + +.mm-popup__input { + display: block; + width: 100%; + height: 30px; + border-radius: 3px; + background: #f5f5f5; + border: 1px solid #e9ebec; + outline: none; + -moz-box-sizing: border-box !important; + -webkit-box-sizing: border-box !important; + box-sizing: border-box !important; + font-size: 14px; + padding: 0 12px; + color: #808080; } + +.mm-popup__btn { + border-radius: 3px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 0 10px; + margin: 0; + line-height: 32px; + height: 32px; + border: 1px solid #666; + text-align: center; + display: inline-block; + font-size: 12px; + font-weight: 400; + color: #333; + background: transparent; + outline: none; + text-decoration: none; + cursor: pointer; + font-family: "Open Sans", sans-serif; } + +.mm-popup__btn--success { + background-color: #27ae60; + border-color: #27ae60; + color: #fff; } + +.mm-popup__btn--danger { + background-color: #c5545c; + border-color: #c5545c; + color: #fff; } + +.mm-popup__box { + width: 350px; + position: fixed; + top: 10%; + left: 50%; + margin-left: -175px; + background: #fff; + box-shadow: 0px 5px 20px 0px rgba(126, 137, 140, 0.2); + border-radius: 5px; + border: 1px solid #B8C8CC; + overflow: hidden; + z-index: 1001; } + +.mm-popup__box__header { + padding: 15px 20px; + background: #EDF5F7; + color: #454B4D; } + +.mm-popup__box__header__title { + margin: 0; + font-size: 16px; + text-align: left; + font-weight: 600; } + +.mm-popup__box__body { + padding: 20px; + line-height: 1.4; + font-size: 14px; + color: #454B4D; + background: #fff; + position: relative; + z-index: 2; } + +.mm-popup__box__body p { + margin: 0 0 5px; } + +.mm-popup__box__footer { + overflow: hidden; + padding: 40px 20px 20px; } + +.mm-popup__box__footer__right-space { + float: right; } + +.mm-popup__box__footer__right-space .mm-popup__btn { + margin-left: 5px; } + +.mm-popup__box__footer__left-space { + float: left; } + +.mm-popup__box__footer__left-space .mm-popup__btn { + margin-right: 5px; } + +.mm-popup__box--popover { + width: 300px; + margin-left: -150px; } + +.mm-popup__box--popover .mm-popup__close { + position: absolute; + top: 5px; + right: 5px; + padding: 0; + width: 20px; + height: 20px; + cursor: pointer; + outline: none; + text-align: center; + border-radius: 10px; + border: none; + text-indent: -9999px; + background: transparent url("data:image/png;base64,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") no-repeat center center; + background-size: 100%; + margin: 0; + z-index: 3; } + +.mm-popup__box--popover .mm-popup__box__body { + padding: 20px; } + +@media (max-width: 420px) { + .mm-popup__box { + width: auto; + left: 10px; + right: 10px; + top: 10px; + margin-left: 0; } + .mm-popup__box__footer__left-space { + float: none; } + .mm-popup__box__footer__right-space { + float: none; } + .mm-popup__box__footer { + padding-top: 30px; } + .mm-popup__box__footer .mm-popup__btn { + display: block; + width: 100%; + text-align: center; + margin-top: 10px; } }