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,57 +1,70 @@
 <!DOCTYPE html>
-<html  xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+    <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>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>
 
-<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">
-
-        <div class="hero-head">
-            <nav class="navbar">
-                <div class="container">
-                    <div id="navbarMenuHeroA" class="navbar-menu">
-                        <div class="navbar-end">
-                            <a href="{{ url_for('main.index') }}" class="navbar-item">
-                                Home
-                            </a>
-			    {% if current_user.is_authenticated %}
-                            <a href="{{ url_for('main.profile') }}" class="navbar-item">
-                                Profile
-                            </a>
-                            <a href="{{ url_for('main.quotes') }}" class="navbar-item">
-                                Quotes
-                            </a>
-			    {% endif %}
-			    {% if not current_user.is_authenticated %}
-                            <a href="{{ url_for('auth.login') }}" class="navbar-item">
-                                Login
-                            </a>
-			    {% endif %}
-			    {% if current_user.is_authenticated %}
-                            <a href="{{ url_for('auth.logout') }}" class="navbar-item">
-                                Logout
-                            </a>
-			    {% endif %}
+    <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">
+                        <div id="navbarMenuHeroA" class="navbar-menu">
+                            <div class="navbar-end">
+                                <a href="{{ url_for('main.index') }}" class="navbar-item">
+                                    Home
+                                </a>
+                    {% if current_user.is_authenticated %}
+                                <a href="{{ url_for('main.profile') }}" class="navbar-item">
+                                    Profile
+                                </a>
+                                <a href="{{ url_for('main.quotes') }}" class="navbar-item">
+                                    Quotes
+                                </a>
+                    {% endif %}
+                    {% if not current_user.is_authenticated %}
+                                <a href="{{ url_for('auth.login') }}" class="navbar-item">
+                                    Login
+                                </a>
+                    {% endif %}
+                    {% if current_user.is_authenticated %}
+                                <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>
                     </div>
-                </div>
-            </nav>
-        </div>
-
-        <div class="hero-body">
-            <div class="container has-text-centered">
-               {% block content %}
-               {% endblock %}
+                </nav>
             </div>
-        </div>
-    </section>
-    
-</body>
 
+            <div class="hero-body">
+                <div class="container has-text-centered">
+                    {% block content %}
+                    {% 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>
 </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