Updated quotes page and started profile page

priceybot2/main.py

@@ -15,10 +15,7 @@ def index():
 @login_required
 def profile():
     return render_template(
-        'profile.html',
+        'profile.html'
-        name=current_user.name,
-        google_id=current_user.google_id,
-        is_admin=current_user.administrator
     )
 
 

priceybot2/sass/branding.scss

@@ -77,4 +77,7 @@ $input-color: $nexi-black;
 
 // $table-background-color: $primary;
 // $table-striped-row-even-background-color: $nexi-lighter-black;
-// $table-color: $nexi-white;
+// $table-color: $nexi-white;
+
+$button-border-color: $nexi-darker-red;
+$button-border-width: 1px;

priceybot2/sass/dark-mode.scss

@@ -36,4 +36,11 @@
 
 .dark-toggle-animation {
     transition: background 500ms;
+}
+
+.dark-position {
+    position: fixed;
+    bottom: 2em;
+    right: 2em;
+
 }

priceybot2/sass/flex.scss

@@ -0,0 +1,49 @@
+.fcontainer {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .innercontainer {
+        display: flex;
+        flex-direction: row;
+        background-color: #E4E4E4;
+        border-radius: 1em;
+    }
+
+    .innercontainer-dark {
+        display: flex;
+        flex-direction: row;
+        background-color: #353535;
+        border-radius: 1em;
+    }
+
+    .fquote {
+        display: flex;
+        flex-grow: 8;
+    }
+
+    .fbuttons {
+        display: flex;
+        align-self: flex-end;
+        
+    }
+
+    .del-button {
+        border-color: #F44336 !important;
+        color: #F44336 !important;
+    }
+
+    .sel-button {
+        border-color: #353535 !important;
+        color: #353535 !important;
+    }
+
+    .del-button-dark {
+        border-color: #F44336 !important;
+        color: #F44336 !important;
+    }
+
+    .sel-button-dark {
+        border-color: #f8fafb !important;
+        color: #f8fafb !important;
+    }

priceybot2/sass/main.scss

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

priceybot2/static/css/main.css

@@ -20,6 +20,51 @@
 .dark-toggle-animation {
   transition: background 500ms; }
 
+.dark-position {
+  position: fixed;
+  bottom: 2em;
+  right: 2em; }
+
+.fcontainer {
+  display: flex;
+  flex-direction: column; }
+
+.innercontainer {
+  display: flex;
+  flex-direction: row;
+  background-color: #E4E4E4;
+  border-radius: 1em; }
+
+.innercontainer-dark {
+  display: flex;
+  flex-direction: row;
+  background-color: #353535;
+  border-radius: 1em; }
+
+.fquote {
+  display: flex;
+  flex-grow: 8; }
+
+.fbuttons {
+  display: flex;
+  align-self: flex-end; }
+
+.del-button {
+  border-color: #F44336 !important;
+  color: #F44336 !important; }
+
+.sel-button {
+  border-color: #353535 !important;
+  color: #353535 !important; }
+
+.del-button-dark {
+  border-color: #F44336 !important;
+  color: #F44336 !important; }
+
+.sel-button-dark {
+  border-color: #f8fafb !important;
+  color: #f8fafb !important; }
+
 /*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
 /* Bulma Utilities */
 .button, .input, .textarea, .select select, .file-cta,
@@ -428,7 +473,7 @@ a.box:active {
 
 .button {
   background-color: white;
-  border-color: #D2D2D2;
+  border-color: #EB302D;
   border-width: 1px;
   color: #363636;
   cursor: pointer;

priceybot2/static/scripts/dark-mode.js

@@ -55,18 +55,27 @@ function applyTheme(theme) {
     // Find elements and update class.
     switch (theme) {
         case 'dark':
-            primaryElements = Array.from(document.querySelectorAll('.is-primary-invert'));
+            test = Array('.is-primary-invert|is-primary', '.sel-button|sel-button-dark' , '.innercontainer|innercontainer-dark')
-            primaryElements.forEach((element) => {
+            test.forEach((t) => {
-                element.classList.remove('is-primary-invert');
+                let c = t.split('|')
-                element.classList.add('is-primary');
+                primaryElements = Array.from(document.querySelectorAll(c[0]));
-            });
+                primaryElements.forEach((element) => {
+                    element.classList.remove(c[0].split('.')[1]);
+                    element.classList.add(c[1]);
+                });
+            })
             break;
         case 'light':
-            primaryElements = Array.from(document.querySelectorAll('.is-primary'));
+            test = Array('.is-primary|is-primary-invert', '.sel-button-dark|sel-button' , '.innercontainer-dark|innercontainer')
-            primaryElements.forEach((element) => {
+            test.forEach((t) => {
-                element.classList.remove('is-primary');
+                let c = t.split('|')
-                element.classList.add('is-primary-invert');
+                primaryElements = Array.from(document.querySelectorAll(c[0]));
-            });
+                primaryElements.forEach((element) => {
+                    element.classList.remove(c[0].split('.')[1]);
+                    element.classList.add(c[1]);
+                    
+                });
+            })
             break;
     }
 }

priceybot2/templates/base.html

@@ -28,7 +28,7 @@
                             </div>
                             <div class="navbar-end">
                                 {% if space_list is defined %}
-                                <div class="select is-primary navbar-item m-4 p-4" >
+                                <div class="select is-primary is-normal is-rounded m-4" >
                                 <select  name="space" id="space_option">
                                     <option selected="selected" value="NaN">Please selelct a space!</option>
                                     {% for i in space_list %}
@@ -74,7 +74,7 @@
 
             <div class="hero-foot">
                 <label class="is-pulled-right p-4">
-                    <input name="dark-mode-toggle" class="dark-toggle" onclick="darkLight()" type="checkbox">
+                    <input name="dark-mode-toggle" class="dark-toggle dark-position" onclick="darkLight()" type="checkbox">
                 </label>
             </div>
         </section>

priceybot2/templates/profile.html

@@ -1,9 +1,23 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1 class="title">
+<div class="fcontainer is-primary has-text-left" style="flex-direction: column; align-content: flex-start">
-	Welcome, {{ name }}! <p/>
+    <div style="display: flex; flex-grow: 2;">
-	Your google ID is {{ google_id }} <p/>
+        <img src="https://benjamyn.love/frannodders.gif" width="256" height="256">
-	Admin?: {{ "yes" if is_admin else "no" }} <p/>
+    </div>
-</h1>
+    <div style="display: flex; flex-grow: 8; flex-direction: column;">
+        <p>1</p>
+        <p>2</p>
+        <p>3</p>
+        <p>4</p>
+        <p>5</p>
+        <p>6</p>
+    </div>
+
+
+    <!-- <p class="fquote">Welcome, {{ current_user.name }}!</p>
+    <p class="fquote">Your google ID is {{ current_user.google_id }}</p>
+    <p class="fquote">Admin?: {{ "yes" if current_user.administrator else "no" }}</p> -->
+</div>
+
 {% endblock %}

priceybot2/templates/quotes.html

@@ -2,7 +2,7 @@
 
 {% block content %}
 <script>
-	function sendquote(id) {
+    function sendquote(id) {
 		select = document.getElementById("space_option");
 		space_id = select[select.selectedIndex].value;
 		space_name = select[select.selectedIndex].text;
@@ -21,30 +21,20 @@
 
 	}
 </script>
-<div >
-    <h3 class="title">Quotes</h3>
-    <div >
-	{% with messages = get_flashed_messages() %}
-	{% if messages %}
-		<div class="notification is-danger">
-			{{ messages[0] }}
-		</div>
-	{% endif %}
-	{% endwith %}
-	<table class="table">
-			{% for quote in quotes %}
-			<tr>
-			<td class=" is-primary" style="text-align: left">
-				{{ quote[0] }}
-			</td>
-			{% if current_user.administrator %}
-				<td class="is-primary"><button class="is-primary button" onclick='sendquote({{ quote[1] }})' type="submit">Send</button></td>
-			{% endif %}
-		</tr>
-			{% endfor %}
-		
-	</table>
-    </div>
-</div>
 
+<div class="fcontainer" >
+{% for i in quotes %}
+    <div class=" has-text-left m-1 innercontainer p-4">
+        <div class="fquote" id="quote_{{ i[1] }}">
+            {{ i[0] }}
+        </div>
+
+        <div class="fbuttons">
+            <button class="button is-primary is-outlined m-1 sel-button" {% if not current_user.administrator %} disabled title="Administrator Privs required" {% endif %} onclick="sendquote({{ i[1] }})">Send</button>
+            <button class="button is-primary is-outlined m-1 del-button" {% if not current_user.administrator %} disabled title="Administrator Privs required" {% endif %} onclick="sendquote({{ i[1] }})">Delete</button>
+        </div>
+    </div>
+{% endfor %}
+</div>
 {% endblock %}
+

priceybot2/templates/quotes_old.html

@@ -0,0 +1,50 @@
+{% extends "base.html" %}
+
+{% block content %}
+<script>
+	function sendquote(id) {
+		select = document.getElementById("space_option");
+		space_id = select[select.selectedIndex].value;
+		space_name = select[select.selectedIndex].text;
+		if (space_id === "NaN") {
+			alert("Please select a space");
+			return
+		}
+
+		let confirmation = confirm(`Send quote to ${space_name}`)
+		if (confirmation === true) {
+			let send_url = "{{ url_for('chatbot.send_quote', space='AAAAAA', _external=True) }}"
+			send_url = send_url.replace("AAAAAA",space_id)
+			fetch(send_url, {method: "POST",headers: {"Content-Type": "application/json"},body: JSON.stringify({"quote_id": id})})
+			.then((response) => console.log(response))
+		}
+
+	}
+</script>
+<div >
+    <h3 class="title">Quotes</h3>
+    <div >
+	{% with messages = get_flashed_messages() %}
+	{% if messages %}
+		<div class="notification is-danger">
+			{{ messages[0] }}
+		</div>
+	{% endif %}
+	{% endwith %}
+	<table class="table">
+			{% for quote in quotes %}
+			<tr>
+			<td class=" is-primary" style="text-align: left">
+				{{ quote[0] }}
+			</td>
+			{% if current_user.administrator %}
+				<td class="is-primary"><button class="is-primary button" onclick='sendquote({{ quote[1] }})' type="submit">Send</button></td>
+			{% endif %}
+		</tr>
+			{% endfor %}
+		
+	</table>
+    </div>
+</div>
+
+{% endblock %}