Include alertify cdn on add-page;

Refactor variables;
Fix reactions from db;

addReactions.html

@@ -65,5 +65,29 @@
 <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script src="addReponse.js"></script>
+
+<!-- JavaScript -->
+<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>
+
+<!-- CSS -->
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css"/>
+<!-- Default theme -->
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css"/>
+<!-- Semantic UI theme -->
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/semantic.min.css"/>
+<!-- Bootstrap theme -->
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/bootstrap.min.css"/>
+
+<!--
+    RTL version
+-->
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.rtl.min.css"/>
+<!-- Default theme -->
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.rtl.min.css"/>
+<!-- Semantic UI theme -->
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/semantic.rtl.min.css"/>
+<!-- Bootstrap theme -->
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/bootstrap.rtl.min.css"/>
+
 </body>
 </html>

addReponse.js

@@ -5,12 +5,22 @@ let responses = new Vue({
         activeTheme: 'slate',
         addModal: {
             includeAll: false,
-            keywords: '',
+            keywords: 'keyword',
+            responses: [
+                'Answer #1'
+            ]
+        },
+        defaultAddModal: {
+            includeAll: false,
+            keywords: 'keyword',
             responses: [
                 'Answer #1'
             ]
         }
     },
+    mounted() {
+        this.addModal = this.defaultAddModal;
+    },
     methods: {
         addMessage(body, bot, me = false) {
             this.messages.push({
@@ -38,9 +48,11 @@ let responses = new Vue({
             axios.post('/reactions/create', {
                 reaction: newReaction
             }).then((response) => {
-                console.log(response);
+                alertify.notify('Reaction saved!', 'success');
+                this.addModal = this.defaultAddModal;
             }).catch((error) => {
                 console.log(error);
+                alertify.notify(error, 'danger');
             });
         },
         cleanupMessage(message) {

app.js

@@ -31,30 +31,7 @@ let kara = new Vue({
             location: ''
         },
         notes: [],
-        reactions: [
-            {
-                includeAll: false,
-                keywords: [
-                    'hi', 'hallo', 'servas', 'servus', 'hello'
-                ],
-                responses: [
-                    'Hey! :)',
-                    'Hello!',
-                    'How are you?'
-                ]
-            },
-            {
-                includeAll: true,
-                keywords: [
-                    'how', 'are', 'you'
-                ],
-                responses: [
-                    'I\'m good! Thanks for asking! :) How about you?',
-                    'A bit tired from trying to do that think called "thinking".. i\'ll figure it out one day.',
-                    'Wooo! I\'m hyped for party! You\'re in?'
-                ]
-            }
-        ]
+        reactions: []
     },
     mounted() {
         this.getSavedData();
@@ -207,25 +184,25 @@ let kara = new Vue({
         getReaction(message) {
             message = this.cleanupMessage(message);
 
-            let phrases = message.split(' ');
+            let keywords = message.split(' ');
             let answer = undefined;
 
-            if (this.lastMessageData.joke && this.includesOneOf(phrases, ['another', 'more'])) {
+            if (this.lastMessageData.joke && this.includesOneOf(keywords, ['another', 'more'])) {
                 this.tellJoke(this.lastMessageData.category);
                 return false;
             }
 
             this.lastMessageData = {};
 
-            if (this.includesAllOf(phrases, ['change', 'my', 'name'])) {
+            if (this.includesAllOf(keywords, ['change', 'my', 'name'])) {
                 this.askedForName = true;
                 return "Please tell me how i should call you.";
             }
 
-            if (this.includesAllOf(phrases, ['new', 'note']) ||
-                this.includesAllOf(phrases, ['new', 'task']) ||
-                this.includesAllOf(phrases, ['take', 'note']) ||
-                this.includesAllOf(phrases, ['save', 'to', 'clipboard'])
+            if (this.includesAllOf(keywords, ['new', 'note']) ||
+                this.includesAllOf(keywords, ['new', 'task']) ||
+                this.includesAllOf(keywords, ['take', 'note']) ||
+                this.includesAllOf(keywords, ['save', 'to', 'clipboard'])
             ) {
                 this.takeNote = true;
                 return this.oneOf([
@@ -235,56 +212,56 @@ let kara = new Vue({
                 ]);
             }
 
-            if (this.includesAllOf(phrases, ['clear', 'chat'])) {
+            if (this.includesAllOf(keywords, ['clear', 'chat'])) {
                 this.clearChat();
                 return false;
             }
 
-            if (this.includesAllOf(phrases, ['weather']) &&
-                this.includesOneOf(phrases, ['how', 'whats'])
+            if (this.includesAllOf(keywords, ['weather']) &&
+                this.includesOneOf(keywords, ['how', 'whats'])
             ) {
                 this.checkWeather();
                 return false;
             }
 
-            if (this.includesAllOf(phrases, ['knock', 'joke'])) {
+            if (this.includesAllOf(keywords, ['knock', 'joke'])) {
                 this.tellJoke('knock-knock');
                 return false;
             }
 
-            if (this.includesAllOf(phrases, ['joke']) && this.includesOneOf(phrases, ['coding', 'programming', 'code', 'it'])) {
+            if (this.includesAllOf(keywords, ['joke']) && this.includesOneOf(keywords, ['coding', 'programming', 'code', 'it'])) {
                 this.tellJoke('programming');
                 return false;
             }
 
-            if (this.includesAllOf(phrases, ['tell', 'joke']) ||
-                this.includesAllOf(phrases, ['something', 'funny']) ||
-                this.includesAllOf(phrases, ['cheer', 'me', 'up'])
+            if (this.includesAllOf(keywords, ['tell', 'joke']) ||
+                this.includesAllOf(keywords, ['something', 'funny']) ||
+                this.includesAllOf(keywords, ['cheer', 'me', 'up'])
             ) {
                 this.tellJoke('general');
                 return false;
             }
 
-            if (this.includesAllOf(phrases, ['whats', 'the', 'time']) || this.includesAllOf(phrases, ['how', 'late'])) {
+            if (this.includesAllOf(keywords, ['whats', 'the', 'time']) || this.includesAllOf(keywords, ['how', 'late'])) {
                 return "It's " + moment().format('LT');
             }
 
-            if (this.includesAllOf(phrases, ['what', 'day', 'it'])) {
+            if (this.includesAllOf(keywords, ['what', 'day', 'it'])) {
                 return "It's " + moment().format('dddd') + ".";
             }
 
-            if (this.includesAllOf(phrases, ['what', 'date', 'it']) || this.includesAllOf(phrases, ['whats', 'the', 'date'])) {
+            if (this.includesAllOf(keywords, ['what', 'date', 'it']) || this.includesAllOf(keywords, ['whats', 'the', 'date'])) {
                 return "It's " + moment().format('dddd') + ", " + moment().format('MMMM Do YYYY') + ".";
             }
 
-            this.reactions.forEach((answerOption) => {
-                if (answerOption.includeAll === true) {
-                    if (this.includesAllOf(phrases, answerOption.keywords)) {
-                        answer = this.oneOf(answerOption.responses);
+            this.reactions.forEach((reactionOption) => {
+                if (reactionOption.includeAll === true) {
+                    if (this.includesAllOf(keywords, reactionOption.keywords)) {
+                        answer = this.oneOf(reactionOption.responses);
                     }
                 } else {
-                    if (this.includesOneOf(phrases, answerOption.keywords)) {
-                        answer = this.oneOf(answerOption.responses);
+                    if (this.includesOneOf(keywords, reactionOption.keywords)) {
+                        answer = this.oneOf(reactionOption.responses);
                     }
                 }
             });
@@ -389,7 +366,6 @@ let kara = new Vue({
 
             axios.get(url)
                 .then(function (response) {
-                    console.log(response);
                     let joke = response.data[0];
 
                     vue.botMessage(joke.setup);
@@ -463,9 +439,6 @@ let kara = new Vue({
             let savedMessages = JSON.parse(localStorage.getItem('messages'));
             this.messages = savedMessages ? savedMessages : [];
 
-            let savedAnswers = JSON.parse(localStorage.getItem('answers'));
-            this.reactions = savedAnswers !== [] ? savedAnswers : this.reactions;
-
             let savedNotes = JSON.parse(localStorage.getItem('notes'));
             this.notes = savedNotes ? savedNotes : [];
 
@@ -549,27 +522,27 @@ let kara = new Vue({
 
             this.updateStorage();
         },
-        includesOneOf(phrases, wordsToSearch) {
+        includesOneOf(keywords, wordsToSearch) {
             let includes = false;
 
             wordsToSearch.forEach((searchWord) => {
-                if (phrases.includes(searchWord)) {
+                if (keywords.includes(searchWord)) {
                     includes = true;
                 }
             })
 
             return includes;
         },
-        includesAllOf(phrases, wordsToSearch) {
-            let includesAllPhrases = true;
+        includesAllOf(keywords, wordsToSearch) {
+            let includesAllkeywords = true;
 
             wordsToSearch.forEach((searchWord) => {
-                if (!phrases.includes(searchWord)) {
-                    includesAllPhrases = false;
+                if (!keywords.includes(searchWord)) {
+                    includesAllkeywords = false;
                 }
             })
 
-            return includesAllPhrases;
+            return includesAllkeywords;
         },
 
         // Ajax calls for saving/receiving reactions & themes
@@ -588,7 +561,9 @@ let kara = new Vue({
             let vue = this;
 
             axios.get('/reactions/get').then((response) => {
-                this.reactions = response.data;
+                response.data.forEach((reaction) => {
+                    vue.reactions.push(JSON.parse(reaction.reaction));
+                });
             }).catch((error) => {
                 console.log(error);
             });