From f3510305ab2ade334b46291b3c7b72098fb8f1cc Mon Sep 17 00:00:00 2001
From: Nero Ignis <neroignis@gmail.com>
Date: Sun, 16 Aug 2020 22:26:06 +0200
Subject: [PATCH] Adds setting for themes

---
 .idea/workspace.xml | 23 +++++++++++++++++------
 app.css             |  7 ++-----
 app.js              | 19 +++++++++++++++++++
 index.html          | 33 ++++++++++++++++++---------------
 4 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 7e18621..f146966 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,9 +4,11 @@
     <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="Adds setting for themes">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/app.css" beforeDir="false" afterPath="$PROJECT_DIR$/app.css" 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" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -47,7 +49,7 @@
       <workItem from="1597348092890" duration="8205000" />
       <workItem from="1597530844649" duration="131000" />
       <workItem from="1597577497243" duration="3353000" />
-      <workItem from="1597583294362" duration="7162000" />
+      <workItem from="1597583294362" duration="9156000" />
     </task>
     <task id="LOCAL-00001" summary="Adds gitignore.">
       <created>1597348071361</created>
@@ -287,7 +289,14 @@
       <option name="project" value="LOCAL" />
       <updated>1597607090595</updated>
     </task>
-    <option name="localTasksCounter" value="35" />
+    <task id="LOCAL-00035" summary="Adds answers for telling the time, day of the week and the date.">
+      <created>1597607586663</created>
+      <option name="number" value="00035" />
+      <option name="presentableId" value="LOCAL-00035" />
+      <option name="project" value="LOCAL" />
+      <updated>1597607586663</updated>
+    </task>
+    <option name="localTasksCounter" value="36" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -314,17 +323,19 @@
     <MESSAGE value="Adds wildcards for chat." />
     <MESSAGE value="Change wildcards in html" />
     <MESSAGE value="Adds js for bootstrap &amp; moment.js;" />
-    <option name="LAST_COMMIT_MESSAGE" value="Adds js for bootstrap &amp; moment.js;" />
+    <MESSAGE value="Adds answers for telling the time, day of the week and the date." />
+    <MESSAGE value="Adds setting for themes" />
+    <option name="LAST_COMMIT_MESSAGE" value="Adds setting for themes" />
   </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="222" y="0" width="912" height="720" key="CommitChangelistDialog2" timestamp="1597607090553">
+    <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2" timestamp="1597609457255">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
-    <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2/0.0.1366.720@0.0.1366.720" timestamp="1597607090553" />
+    <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2/0.0.1366.720@0.0.1366.720" timestamp="1597609457255" />
     <state x="466" y="118" width="424" height="490" key="FileChooserDialogImpl" timestamp="1597353496276">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
diff --git a/app.css b/app.css
index ad9d379..1d82a77 100644
--- a/app.css
+++ b/app.css
@@ -7,7 +7,6 @@ body {
 	margin: 0;
 	padding: 0;
 	width: auto;
-	color: white;
 }
 
 .message {
@@ -19,12 +18,12 @@ body {
 }
 
 .bot-message {
-	border-radius: 0px 15px 15px 15px;
+	border-radius: 0 15px 15px 15px;
 	background-color: lightgreen;
 }
 
 .user-message {
-	border-radius: 15px 0px 15px 15px;
+	border-radius: 15px 0 15px 15px;
 	background-color: lightblue;
 }
 
@@ -41,7 +40,6 @@ body {
 	bottom: 0;
 	left: 0;
 	right: 0;
-	background-color: #515960;
 }
 
 #kara-banner {
@@ -52,7 +50,6 @@ body {
 	right: 0;
 	text-align: center;
 	padding: 0.7em;
-	background-color: #515960;
 }
 
 #kara-banner .btn, .add-response-input-button {
diff --git a/app.js b/app.js
index 316b099..28ab701 100644
--- a/app.js
+++ b/app.js
@@ -7,6 +7,8 @@ let kara = new Vue({
         isTyping: false,
         askedForName: false,
         username: '',
+        themes: null,
+        activeTheme: 'slate',
         addModal: {
             includeAll: false,
             keywords: '',
@@ -45,6 +47,7 @@ let kara = new Vue({
     },
     mounted() {
         this.getSavedData();
+        this.getBootswatchThemes();
 
         this.settingsModal = {
             name: this.name,
@@ -281,6 +284,7 @@ let kara = new Vue({
         updateStorage() {
             localStorage.setItem('name', this.name);
             localStorage.setItem('username', this.username);
+            localStorage.setItem('activeTheme', this.activeTheme);
             localStorage.setItem('messages', JSON.stringify(this.messages));
             localStorage.setItem('answers', JSON.stringify(this.answers));
         },
@@ -292,6 +296,9 @@ let kara = new Vue({
             let savedUsername = localStorage.getItem('username');
             this.username = savedUsername ? savedUsername : null;
 
+            let savedActiveTheme = localStorage.getItem('activeTheme');
+            this.activeTheme = savedActiveTheme ? savedActiveTheme : 'slate';
+
             let savedMessages = JSON.parse(localStorage.getItem('messages'));
             this.messages = savedMessages ? savedMessages : [];
 
@@ -337,6 +344,18 @@ let kara = new Vue({
         clearChat() {
             this.messages = [];
             this.botMessage('Chat cleared.');
+        },
+        getBootswatchThemes() {
+            let vue = this;
+
+            axios.get('https://bootswatch.com/api/4.json')
+                .then(function (response) {
+                    console.log(response.data.themes);
+                    vue.themes = response.data.themes;
+                })
+                .catch(function (error) {
+                    console.log(error);
+                })
         }
     }
 })
\ No newline at end of file
diff --git a/index.html b/index.html
index 2732d67..673e4f9 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <title>
         Kara
     </title>
     <link href="https://bootswatch.com/4/slate/bootstrap.min.css" rel="stylesheet" type="text/css"/>
-    <link href="app.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">
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" name="viewport">
 </head>
 <body>
 <div class="container-fluid" id="kara">
-    <h5 id="kara-banner">
+    <div id="kara-banner" class="bg-dark text-light">
         <div class="float-right">
             <div class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#settingsModal">
                 <i class="fas fa-sliders-h"></i>
@@ -24,7 +22,7 @@
             </div>
         </div>
         {{ this.name }}
-    </h5>
+    </div>
 
     <div id="chat-box">
         <template v-for="message in messages">
@@ -56,9 +54,8 @@
         </div>
     </div>
 
-    <div id="chatbox-wrapper">
+    <div id="chatbox-wrapper" class="bg-dark">
         <input
-                autofocus="true"
                 class="form-control"
                 id="chatinput"
                 type="text"
@@ -83,10 +80,10 @@
                         <input type="text" id="keywords" v-model="addModal.keywords" class="form-control">
                     </div>
                     <div class="form-group">
-                        <label for="responses">Responses</label>
+                        <label>Responses</label>
                         <small>(Wildcards: $username$, $botname$)</small>
-                        <template v-for="(key, responseOption) in addModal.responses">
-                            <input type="text" v-model="addModal.responses[responseOption]" class="form-control response-input">
+                        <template v-for="(responseOptionKey, responseOption) in addModal.responses">
+                            <input type="text" v-model="addModal.responses[responseOptionKey]" class="form-control response-input">
                         </template>
                         <div class="float-right">
                             <button class="btn-sm btn-success" @click="addResponseToInput">+</button>
@@ -116,6 +113,12 @@
                         <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="theme">Pick a theme</label>
+                        <select name="theme" class="form-control" id="theme" v-model="activeTheme" @change="updateStorage()">
+                            <option v-for="theme in themes" :value="theme.name.toLowerCase()" v-text="theme.name"></option>
+                        </select>
+                    </div>
                     <div class="form-group">
                         <label>Data</label>
                         <div class="row">
@@ -139,6 +142,8 @@
             </div>
         </div>
     </div>
+    <link rel="stylesheet" :href="'https://maxcdn.bootstrapcdn.com/bootswatch/4.3.1/' + activeTheme + '/bootstrap.min.css'">
+    <link href="app.css" rel="stylesheet" type="text/css"/>
 </div>
 
 
@@ -148,10 +153,8 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-<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="https://code.jquery.com/jquery-3.5.1.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script src="app.js">
 </script>
 </body>