Add ui for answers from source

backend/models/alexa.js

@@ -3,7 +3,9 @@ const config = require ('../config/config');
 var databaseHelper = require ('../helpers/database');
 var emailHelper = require ('../helpers/email');
 const constants = require ('../config/constants');
+let Parser = require('rss-parser');
 
+let parser = new Parser();
 var handlers = {};
 var destinationEmail;
 
@@ -69,6 +71,15 @@ module.exports = {
             if (this.attributes['LaunchRequestYesNo']){
               this.attributes['LaunchRequestYesNo'] = false;
             }
+            if (intent.predefinedAnswer) {
+              const url = 'https://www.klix.ba/rss/naslovnica';
+              let feed = await parser.parseURL(url);
+              console.log(feed.title);
+             
+              feed.items.forEach(item => {
+                console.log(item.title + ':' + item.link)
+              });
+            }
             this.response
               .speak (intent.answer)
               .listen (constants.voiceResponseStrings.GENERIC_CONTINUE); //Phrase from listen doesn't work !!!

backend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "example",
+  "name": "tellall",
   "version": "1.0.0",
   "description": "",
   "main": "test.js",
@@ -10,9 +10,9 @@
     "express": "^4.13.0",
     "isomorphic-fetch": "^2.2.1",
     "mongodb": "^2.2.33",
+    "nodejs-text-summarizer": "^2.0.3",
     "nodemailer": "^4.4.1",
-    "request": "^2.83.0"
-  },
-  "author": "Matt Kruse <github@mattkruse.com> (http://mattkruse.com/)",
-  "license": "MIT"
+    "request": "^2.83.0",
+    "rss-parser": "^3.1.1",
+  }
 }

web/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "keymaster": "^1.6.2",
+    "node-sass-chokidar": "0.0.3",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-md": "^1.2.8",
@@ -17,7 +18,7 @@
     "watch-css": "nodemon -e scss -x \"npm run watch-css-mine\"",
     "start-js": "react-scripts start",
     "start": "npm-run-all -p watch-css start-js",
-    "react-build" : "react-scripts build",
+    "react-build": "react-scripts build",
     "build": "npm-run-all -p build-css react-build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

web/src/components/AnswerSource.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { Button, SelectionControlGroup } from 'react-md';
+import Modal from './modal/Modal';
+
+class AnswerSource extends Component {
+  constructor(props){
+    super(props);
+
+    this.state = {
+      isModalOpen: false
+    };
+  }
+
+  onOpen() {
+    this.setState({
+      isModalOpen: true
+    });
+  }
+
+  onClose() {
+    this.setState({
+      isModalOpen: false
+    });
+  }
+
+  render() {
+    let modal;
+    if (this.state.isModalOpen) {
+      modal = (
+        <Modal
+          title="Predefined answers"
+          actions={[
+            <Button flat swapTheming onClick={this.onClose.bind(this)} key="cancel">Cancel</Button>,
+            <Button flat primary swapTheming key="save">Save</Button>
+          ]}>
+          <SelectionControlGroup
+            id="answer-source"
+            name="answer-source"
+            type="radio"
+            label="Import answer from:"
+            controls={[{
+              label: 'RSS feed - latest',
+              value: 'latest',
+            }]}>
+
+          </SelectionControlGroup>
+        </Modal>
+        )
+    }
+    return (
+      <div>
+        <Button flat primary swapTheming 
+                onClick={this.onOpen.bind(this)}>
+          Predefined answers
+        </Button>
+        {modal}
+      </div>
+    );
+  }
+}
+
+export default AnswerSource;

web/src/components/IntentDetails.js

@@ -1,5 +1,6 @@
 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';
@@ -45,6 +46,7 @@ class IntentDetails extends Component {
             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)=>{

web/src/components/modal/Modal.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import '../../css/components/Modal.css';
+
+class Modal extends Component {
+    render() {
+        const { title, children, actions } = this.props;
+        return (
+            <div className="modal">
+                <div className="modal-content">
+                    <h2 className="header">
+                        {title}
+                    </h2>
+                    {children}
+                    <div className="actions">
+                        {actions}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Modal;

web/src/css/components/Modal.scss

@@ -0,0 +1,32 @@
+.modal {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(37, 37, 37, .7);
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	.modal-content {
+		color: black;
+		padding: 20px;
+		padding-bottom: 0px;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		height: auto;
+		background-color: #FFF;
+		min-width: 500px;
+		.actions {
+			border-top: 1px solid #bebebe;
+			width: 100%;
+			display: flex;
+			justify-content: flex-end;
+			min-width: 500px;
+			margin: 0 -20px;
+			padding: 10px;
+		}
+	}
+}

web/src/css/index.css

@@ -115,10 +115,10 @@ h5, .md-subheading-1 {
   line-height: 24px; }
 
 p, .md-body-1 {
-  line-height: 1.42857; }
+  line-height: 20px; }
 
 h6, .md-body-2 {
-  line-height: 1.42857; }
+  line-height: 24px; }
 
 caption, .md-caption {
   font-size: 12px; }
@@ -1378,7 +1378,7 @@ tbody .md-table-row {
     line-height: inherit; }
 
 .md-table-checkbox .md-selection-control-label {
-  display: block; }
+  display: flex; }
 
 .md-table-checkbox .md-selection-control-container {
   margin-left: 12px;