Add weather;

.idea/workspace.xml

@@ -4,7 +4,7 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="e3f098f0-e98c-435a-af04-d153c9525633" name="Default Changelist" comment="">
+    <list default="true" id="e3f098f0-e98c-435a-af04-d153c9525633" name="Default Changelist" comment="Add weather command;">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/app.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
@@ -52,7 +52,7 @@
       <workItem from="1597530844649" duration="131000" />
       <workItem from="1597577497243" duration="3353000" />
       <workItem from="1597583294362" duration="11703000" />
-      <workItem from="1600432025720" duration="2553000" />
+      <workItem from="1600432025720" duration="4503000" />
     </task>
     <task id="LOCAL-00001" summary="Adds gitignore.">
       <created>1597348071361</created>
@@ -327,14 +327,20 @@
       <option name="project" value="LOCAL" />
       <updated>1600434244194</updated>
     </task>
-    <option name="localTasksCounter" value="40" />
+    <task id="LOCAL-00040" summary="Add lastmessage;">
+      <created>1600434611694</created>
+      <option name="number" value="00040" />
+      <option name="presentableId" value="LOCAL-00040" />
+      <option name="project" value="LOCAL" />
+      <updated>1600434611694</updated>
+    </task>
+    <option name="localTasksCounter" value="41" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="3" />
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="Adds gitignore." />
     <MESSAGE value="Add message filters;&#10;Add responsiveness;&#10;Remove disabled input while Kara types;&#10;Does not send empty messages;" />
     <MESSAGE value="Restyling." />
     <MESSAGE value="New responsive design which is mobile first." />
@@ -359,18 +365,19 @@
     <MESSAGE value="Fix error with new messages." />
     <MESSAGE value="Add fix for username detection." />
     <MESSAGE value="Add notes;" />
-    <option name="LAST_COMMIT_MESSAGE" value="Add notes;" />
+    <MESSAGE value="Add lastmessage;" />
+    <option name="LAST_COMMIT_MESSAGE" value="Add lastmessage;" />
   </component>
   <component name="WindowStateProjectService">
     <state x="278" y="2" width="800" height="718" key="#Plugins" timestamp="1597350105557">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
     <state x="278" y="2" width="800" height="718" key="#Plugins/0.0.1366.720@0.0.1366.720" timestamp="1597350105557" />
-    <state x="312" y="0" width="912" height="720" key="CommitChangelistDialog2" timestamp="1600434243677">
+    <state x="312" y="0" width="912" height="720" key="CommitChangelistDialog2" timestamp="1600435908264">
       <screen x="0" y="0" width="1920" height="1160" />
     </state>
     <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2/0.0.1366.720@0.0.1366.720" timestamp="1597611480863" />
-    <state x="312" y="0" key="CommitChangelistDialog2/0.0.1920.1160/-1920.0.1920.1040@0.0.1920.1160" timestamp="1600434243677" />
+    <state x="312" y="0" key="CommitChangelistDialog2/0.0.1920.1160/-1920.0.1920.1040@0.0.1920.1160" timestamp="1600435908264" />
     <state x="466" y="118" width="424" height="490" key="FileChooserDialogImpl" timestamp="1597353496276">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
@@ -387,11 +394,11 @@
       <screen x="0" y="0" width="1366" height="720" />
     </state>
     <state x="172" y="0" key="SettingsEditor/0.0.1366.720@0.0.1366.720" timestamp="1597530949459" />
-    <state x="391" y="148" width="800" height="542" key="Vcs.Push.Dialog.v2" timestamp="1600434249548">
+    <state x="391" y="148" width="800" height="542" key="Vcs.Push.Dialog.v2" timestamp="1600434613552">
       <screen x="0" y="0" width="1920" height="1160" />
     </state>
     <state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2/0.0.1366.720@0.0.1366.720" timestamp="1597611482295" />
-    <state x="391" y="148" key="Vcs.Push.Dialog.v2/0.0.1920.1160/-1920.0.1920.1040@0.0.1920.1160" timestamp="1600434249548" />
+    <state x="391" y="148" key="Vcs.Push.Dialog.v2/0.0.1920.1160/-1920.0.1920.1040@0.0.1920.1160" timestamp="1600434613552" />
     <state x="0" y="0" width="616" height="720" key="find.popup" timestamp="1597346688624">
       <screen x="0" y="0" width="1366" height="720" />
     </state>

app.js

@@ -4,6 +4,7 @@ let kara = new Vue({
         messages: [],
         lastMessage: null,
         name: 'Kara',
+        location: null,
         chatbox: null,
         isTyping: false,
         askedForName: false,
@@ -20,7 +21,8 @@ let kara = new Vue({
         },
         settingsModal: {
             name: null,
-            username: null
+            username: null,
+            location: ''
         },
         notes: [],
         answers: [
@@ -54,7 +56,8 @@ let kara = new Vue({
 
         this.settingsModal = {
             name: this.name,
-            username: this.username
+            username: this.username,
+            location: this.location
         };
 
         if (!this.username || this.username === "null") {
@@ -131,6 +134,8 @@ let kara = new Vue({
                     this.saveNote(noteToSave);
                 } else if (this.checkForCommands(message, 'clear')) {
                     this.clearChat();
+                } else if (this.checkForCommands(message, 'weather')) {
+                    this.checkWeather();
                 } else if (this.askedForName === true) {
                     this.setName(message)
                 } else if (this.takeNote === true) {
@@ -334,6 +339,7 @@ let kara = new Vue({
             localStorage.setItem('answers', JSON.stringify(this.answers));
             localStorage.setItem('notes', JSON.stringify(this.notes));
             localStorage.setItem('lastMessage', JSON.stringify(this.lastMessage));
+            localStorage.setItem('location', JSON.stringify(this.location));
         },
         getSavedData() {
             let savedName = localStorage.getItem('name');
@@ -358,6 +364,9 @@ let kara = new Vue({
             let savedLastMessage = JSON.parse(localStorage.getItem('lastMessage'));
             this.lastMessage = savedLastMessage ? savedLastMessage : null;
 
+            let savedLocation = JSON.parse(localStorage.getItem('location'));
+            this.location = savedLocation ? savedLocation : null;
+
             this.scrollDown();
         },
         askForName() {
@@ -407,6 +416,7 @@ let kara = new Vue({
         saveSettings() {
             this.name = this.settingsModal.name;
             this.username = this.settingsModal.username;
+            this.location = this.settingsModal.location;
             this.updateStorage();
 
             this.botMessage('Settings saved! :)');
@@ -417,6 +427,28 @@ let kara = new Vue({
             this.botMessage('Chat cleared.');
             this.updateStorage();
         },
+        checkWeather() {
+            let vue = this;
+
+            if (!vue.location) {
+                vue.botMessage('Please set your location in the settings.');
+                return;
+            }
+
+            let city = this.location.toLowerCase();
+            let url = 'http://api.openweathermap.org/data/2.5/weather?q=' + city + '&appid=8a1aa336da8899c1038bf6bd808d8961&units=metric';
+
+            axios.get(url)
+                .then(function (response) {
+                    vue.botMessage('In ' + response.data.name + ' it\'s ' + response.data.main.temp.toFixed() + '°C with ' + response.data.weather[0].description + '.');
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    vue.botMessage('I couldn\'t check the weather for your location.');
+                })
+
+            this.updateStorage();
+        },
         clearStorage() {
             localStorage.clear();
             location.reload();

index.html

@@ -4,6 +4,7 @@
     <title>
         Kara
     </title>
+    <meta charset="utf8">
     <link href="https://bootswatch.com/4/slate/bootstrap.min.css" rel="stylesheet" type="text/css"/>
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" name="viewport">
 </head>
@@ -151,6 +152,10 @@
                         <label for="username">What's your name?</label>
                         <input type="text" class="form-control" id="username" v-model="settingsModal.username">
                     </div>
+                    <div class="form-group">
+                        <label for="location">What city do you live in? <small class="text-muted">(for weather-reports only)</small> </label>
+                        <input type="text" class="form-control" id="location" v-model="settingsModal.location">
+                    </div>
                     <div class="form-group">
                         <label for="theme">Pick a theme</label>
                         <select name="theme" class="form-control" id="theme" v-model="activeTheme" @change="updateStorage()">