fixed delete bug, code refactoring, improved UI

This commit is contained in:
GotPPay
2018-01-10 13:27:09 +01:00
parent 84c11f1b2f
commit 3214a2bea4
12 changed files with 268 additions and 85 deletions

View File

@@ -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"

View File

@@ -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 (
<div className="App">
@@ -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}>
</IntentList>
<LaunchRequest invocationName={this.state.invocationName}
invocationAnswer={this.state.invocationAnswer}
onSaveClick={this.handleSaveLaunchRequestClick}> </LaunchRequest>
onSaveClick={this.handleSaveLaunchRequestClick}
waiting={this.state.waiting}>
</LaunchRequest>
</div>
);
}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}>
</IntentList>
<IntentDetails selectedIntent={this.state.selectedIntent}
onDeleteIntentClick={this.handleDeleteIntentClick}
onSaveIntentClick={this.handleSaveIntentClick}>
onSaveIntentClick={this.handleSaveIntentClick}
waiting={this.state.waiting}>
</IntentDetails>
</div>
);
@@ -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;

View File

@@ -71,9 +71,10 @@ class IntentDetails extends Component {
}
<br></br>
<br></br>
<Button style={{float:'left', marginLeft: '25px'}} flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}}>Delete intent</Button>
<Button style={{float:'left', marginLeft: '22%'}} flat primary swapTheming onClick={this.addQuestion}>Add question</Button>
<Button style={{float:'left', marginLeft: '20px'}} flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}}>Save</Button>
<Button style={{float:'left', marginLeft: '25px'}} flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}} disabled={this.props.waiting}>Delete intent</Button>
<Button style={{float:'left', marginLeft: '22%'}} flat primary swapTheming onClick={this.addQuestion} disabled={this.props.waiting}>Add question</Button>
<Button style={{float:'left', marginLeft: '20px'}} flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}} disabled={this.props.waiting}>Save</Button>
</div>
);
}

View File

@@ -21,9 +21,10 @@ class IntentItem extends Component {
<Button className={this.props.selectedIndex===this.state.index ? 'IntentItem-selected' : 'IntentItem'}
onClick={()=>{this.state.onClick(this.state.intent,this.state.index)}}
flat
disabled={this.props.waiting}
tooltipDelay={INTENT_TITLE_TOOLTIP_DELAY}
tooltipLabel={this.state.intent.intentName.length>INTENT_TITLE_MAX_LENGTH ? this.state.intent.questions[0] : ''}>
{this.state.index+1}. {buttonTitle}
{buttonTitle}
</Button>
<br></br>
</div>

View File

@@ -18,21 +18,25 @@ class IntentList extends Component {
return (
<div className="IntentList">
<Button className={this.props.selectedIndex===-2 ? "LaunchRequest-selected" : "LaunchRequest"} flat primary
onClick={this.props.onLaunchRequestClick}>Launch request</Button>
onClick={this.props.onLaunchRequestClick}
disabled={this.props.waiting} >Launch request</Button>
<div className="IntentList-title">
<h3>Intents</h3>
</div>
{
this.state.intents.map((intent,index)=>{
return <IntentItem
key={index} intent={intent} index={index}
key={intent.intentName} intent={intent} index={index}
selectedIndex={this.props.selectedIndex}
onClick={this.state.onIntentClick}>
onClick={this.state.onIntentClick}
waiting={this.props.waiting}>
</IntentItem>
})
}
<br></br>
<Button className={"AddIntent"} flat primary swapTheming onClick={this.props.onAddIntentClick}>Add intent</Button>
<Button className={"AddIntent"} flat primary swapTheming
onClick={this.props.onAddIntentClick}
disabled={this.props.waiting}>Add intent</Button>
</div>
);
}

View File

@@ -45,7 +45,9 @@ class LaunchRequest extends Component {
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>
<Button style={{float:'right', marginRight: '20px'}} flat primary swapTheming
onClick={()=>{this.props.onSaveClick(this.state.invocationName, this.state.invocationAnswer)}}
disabled={this.props.waiting}>Save</Button>
</div>
);
}

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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;
}

View File

@@ -2,7 +2,6 @@
@include react-md-everything;
body {
margin: 0;
padding: 0;

174
web/src/css/popup.scss Normal file
View File

@@ -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; } }