Added basic space selector, need to integrate it into the page

Reviewed-on: #21

priceybot2/main.py

@@ -1,6 +1,7 @@
 from flask import Blueprint, render_template
 from flask_login import login_required, current_user
 from .models import Quote
+from .chatbot import chat as bot
 
 main = Blueprint('main', __name__)
 
@@ -24,5 +25,13 @@ def profile():
 @main.route('/quotes')
 @login_required
 def quotes():
-    quotes = [q.quote for q in Quote.query.all()]
-    return render_template("quotes.html", quotes=quotes)
+    spaces = bot.spaces().list().execute()['spaces']
+    space_list = list()
+    for space in spaces:
+        if space.get('singleUserBotDm'):
+            continue
+        else:
+            space_list.append([space['name'].split('/')[1], space['displayName']])
+
+    quotes = [[q.quote, q.id] for q in Quote.query.all()]
+    return render_template("quotes.html", quotes=quotes, space_list=space_list)

priceybot2/sass/branding.scss

@@ -1,3 +1,5 @@
+@import "../node_modules/bulma/sass/utilities/functions.sass";
+
 //brand colors
 $nexi-white: #f8fafb; // Made up
 $nexi-lighter-black: #353535; // Made up
@@ -14,11 +16,10 @@ $nexi-orange: #F17C25;
 $nexi-darker-orange: #F44336;
 $nexi-yellow: #FFC107;
 
-$custom-colors:
-    (
-        "nexi-white": ($nexi-white, findColorInvert($nexi-white)),
+$custom-colors: (
+        "nexi-white": ($nexi-white, $nexi-black),
         "nexi-lighter-black": ($nexi-lighter-black, findColorInvert($nexi-lighter-black)),
-        "nexi-black": ($nexi-black, findColorInvert($nexi-black)),
+        "nexi-black": ($nexi-black, $nexi-white),
         "nexi-lighter-red": ($nexi-lighter-red, findColorInvert($nexi-lighter-red)),
         "nexi-red": ($nexi-red, findColorInvert($nexi-red)),
         "nexi-darker-red": ($nexi-darker-red, findColorInvert($nexi-darker-red)),
@@ -30,7 +31,7 @@ $custom-colors:
         "nexi-orange": ($nexi-orange, findColorInvert($nexi-orange)),
         "nexi-darker-orange": ($nexi-darker-orange, findColorInvert($nexi-darker-orange)),
         "nexi-yellow": ($nexi-yellow, findColorInvert($nexi-yellow)),
-    );
+);
 
 // Used for texts etc.
 $grey: $nexi-lighter-black;
@@ -48,6 +49,7 @@ $red: $nexi-red;
 
 // https://github.com/jgthms/bulma/blob/master/sass/utilities/derived-variables.sass
 $primary: $nexi-black;
+$primary-invert: $nexi-white;
 
 //$info: $cyan;
 //$success: $green;
@@ -73,6 +75,6 @@ $box-background-color: $nexi-grey;
 $input-background-color: $nexi-darker-grey;
 $input-color: $nexi-black;
 
-$table-background-color: $nexi-black;
-$table-striped-row-even-background-color: $nexi-lighter-black;
-$table-color: $nexi-white;
+// $table-background-color: $primary;
+// $table-striped-row-even-background-color: $nexi-lighter-black;
+// $table-color: $nexi-white;

priceybot2/sass/dark-mode.scss

@@ -0,0 +1,39 @@
+.dark-toggle {
+    --size: 2rem;
+
+    appearance: none;
+    outline: none;
+    cursor: pointer;
+
+    width: var(--size);
+    height: var(--size);
+    box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
+    border-radius: 999px;
+    color: hsl(240, 100%, 95%);
+
+    transition: all 500ms;
+
+    &:checked {
+        --ray-size: calc(var(--size) * -0.4);
+        --offset-orthogonal: calc(var(--size) * 0.65);
+        --offset-diagonal: calc(var(--size) * 0.45);
+
+        transform: scale(0.75);
+        color: hsl(40, 100%, 50%);
+        box-shadow:
+            inset 0 0 0 var(--size),
+            calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),
+            var(--offset-orthogonal) 0 0 var(--ray-size),
+            0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),
+            0 var(--offset-orthogonal) 0 var(--ray-size),
+            calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),
+            var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size),
+            calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size),
+            var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),
+    ;
+    }
+}
+
+.dark-toggle-animation {
+    transition: background 500ms;
+}

priceybot2/sass/main.scss

@@ -2,6 +2,7 @@
 
 // Our scss files
 @import "branding";
+@import "dark-mode";
 
 // Import after our branding so colors work.
 @import "../node_modules/bulma/bulma.sass";

priceybot2/static/scripts/dark-mode.js

@@ -0,0 +1,72 @@
+// Set theme on load.
+function init() {
+    // Default to light theme.
+    let theme = 'light'
+
+    // Check media query prefer and set it as dark.
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        theme = 'dark';
+    }
+
+    // Add event handler so if they change media query it'll update. overkill? yes.
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+        let theme = event.matches ? "dark" : "light";
+
+        applyTheme(theme);
+    });
+
+    // If they have manually changed it use that theme instead.
+    theme = localStorage.getItem("theme") ?? theme
+
+    // Set it on body.
+    document.body.dataset.theme = theme;
+
+    // If dark-mode was toggle above we need to fix the icon.
+    let toggle = document.getElementsByName("dark-mode-toggle")[0];
+
+    // if it's already dark check it.
+    toggle.checked = theme === 'dark';
+
+    applyTheme(theme);
+}
+
+// Toggle the theme.
+function darkLight() {
+    // Get current theme.
+    let element = document.body;
+
+    // Invert it.
+    switch (element.dataset.theme) {
+        case "light":
+            element.dataset.theme = "dark";
+            break;
+        case "dark":
+            element.dataset.theme = "light";
+            break;
+    }
+    localStorage.setItem("theme", element.dataset.theme);
+
+    applyTheme(element.dataset.theme);
+}
+
+// Apply theme
+function applyTheme(theme) {
+    let primaryElements
+    // Find elements and update class.
+    switch (theme) {
+        case 'dark':
+            primaryElements = Array.from(document.querySelectorAll('.is-primary-invert'));
+            primaryElements.forEach((element) => {
+                element.classList.remove('is-primary-invert');
+                element.classList.add('is-primary');
+            });
+            break;
+        case 'light':
+            primaryElements = Array.from(document.querySelectorAll('.is-primary'));
+            primaryElements.forEach((element) => {
+                element.classList.remove('is-primary');
+                element.classList.add('is-primary-invert');
+            });
+            break;
+    }
+}

priceybot2/templates/base.html

@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-
-<head>
+    <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Flask Auth Example</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css', version='0.3') }}">
-</head>
-
-<body>
-    <section class="hero is-primary is-fullheight">
+        <title>Pricey Bot</title>
+        <script type="application/javascript" src="{{ url_for('static', filename='scripts/dark-mode.js', version='0.1') }}"></script>
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css', version='0.1') }}">
+    </head>
 
+    <body data-theme="light" onload="init()">
+        <section class="hero is-primary is-fullheight dark-toggle-animation">
             <div class="hero-head">
                 <nav class="navbar">
                     <div class="container">
@@ -37,6 +36,16 @@
                                 <a href="{{ url_for('auth.logout') }}" class="navbar-item">
                                     Logout
                                 </a>
+                                {% if space_list is defined %}
+                                <div class="select is-primary" >
+                                <select name="space" id="space">
+                                    
+                                    {% for i in space_list %}
+                                        <option value="{{ i[0] }}">{{ i[1] }}</option>
+                                    {% endfor %}
+                                </select>
+                            </div>
+                                {% endif %}
                     {% endif %}
                             </div>
                         </div>
@@ -50,8 +59,12 @@
                     {% endblock %}
                 </div>
             </div>
+
+            <div class="hero-foot">
+                <label class="is-pulled-right p-4">
+                    <input name="dark-mode-toggle" class="dark-toggle" onclick="darkLight()" type="checkbox">
+                </label>
+            </div>
         </section>
-    
-</body>
-
+    </body>
 </html>

priceybot2/templates/quotes.html

@@ -1,6 +1,12 @@
 {% extends "base.html" %}
 
 {% block content %}
+<script>
+	function sendquote(id) {
+		let space="AAAAi8Ave9c";
+		alert("{{ url_for('chatbot.send_quote', space='AAAAi8Ave9c', _external=True) }}");
+	}
+</script>
 <div >
     <h3 class="title">Quotes</h3>
     <div >
@@ -11,21 +17,18 @@
 		</div>
 	{% endif %}
 	{% endwith %}
-	<table class="table is-striped">
+	<table class="table">
 			{% for quote in quotes %}
 			<tr>
-			<td style="text-align: left">
-				{{ quote }}
+			<td class=" is-primary" style="text-align: left">
+				{{ quote[0] }}
 			</td>
+			<td class="is-primary"><button class="is-primary button" onclick='sendquote({{ quote[1] }})' type="submit">Send</button></td>
 		</tr>
 			{% endfor %}
 		
 	</table>
-	<!-- <ul>
-        {% for quote in quotes %}
-        <li style="text-align: left">{{ quote }}</li>
-        {% endfor %}
-    </ul> -->
     </div>
 </div>
+
 {% endblock %}

start.sh

@@ -0,0 +1,2 @@
+export FLASK_APP=priceybot2
+flask run --host=0.0.0.0