changeset 13:b538f811931e

Refactor chart and start on index page
author Lewin Bormann <lbo@spheniscida.de>
date Sun, 10 Jul 2022 19:05:01 -0700
parents 064a22ca49a7
children 195d92c0e106
files assets/index.html.hbs src/main.rs
diffstat 2 files changed, 43 insertions(+), 28 deletions(-) [+]
line wrap: on
line diff
--- a/assets/index.html.hbs	Sun Jul 10 15:42:40 2022 -0700
+++ b/assets/index.html.hbs	Sun Jul 10 19:05:01 2022 -0700
@@ -1,18 +1,31 @@
+<!DOCTYPE html>
 <html>
     <head>
         <title>Analyrics Login</title>
+
+        <style>
+            #logo { color: #22bb22; font-size: 20pt; font-style: bold; }
+            #header { color: #bb2222; }
+            .useraction { float: right;  padding: 3pt; }
+            #logout { float: right; padding: 3pt; }
+            #flashtext {  }
+            #flash { text-align: center; border-style: solid; border-color: #22aa22; margin-left: 30%; margin-right: 30%; }
+        </style>
+
     </head>
     <body>
-        Welcome to anaLyrics.
-
-{{#if flash}}<div class="flash">{{flash}}</div>{{/if}}
+    <div id="header">
+        <span id="logo">AnaLyrics</span>
 {{#if loggedin}}
-        <div>Logged in as {{username}}.</div>
-        <form action="/logout" method="POST">
+        <form id="logout" action="/logout" method="POST">
             <input type="submit" value="Log out" />
         </form>
+        <div class="useraction">Logged in as <b>{{username}}</b>.</div>
 {{else}}
-        <a href="/login">Log in</a>
+        <a class="useraction" href="/login">Log in</a>
 {{/if}}
+    </div>
+    {{#if flash}}<div id="flash"><span id="flashtext">{{flash}}<span></div>{{/if}}
+
     </body>
 </html>
--- a/src/main.rs	Sun Jul 10 15:42:40 2022 -0700
+++ b/src/main.rs	Sun Jul 10 19:05:01 2022 -0700
@@ -8,6 +8,7 @@
 use rocket::request::{self, FlashMessage, FromRequest, Outcome, Request};
 use rocket::response::{self, Flash, Redirect, Responder};
 use rocket::serde::json::{json, Value};
+use rocket::serde::{self, Serialize};
 
 use rocket_db_pools::sqlx::{self, Executor, Row, Sqlite, SqlitePool};
 use rocket_db_pools::{Connection, Database, Pool};
@@ -198,11 +199,11 @@
 }
 
 #[rocket::post("/logout")]
-fn route_logout(cookies: &CookieJar<'_>) -> Redirect {
+fn route_logout(cookies: &CookieJar<'_>) -> Flash<Redirect> {
     if let Some(cookie) = cookies.get_private(USER_ID_COOKIE_KEY) {
         cookies.remove_private(cookie);
     }
-    Redirect::to(rocket::uri!("/"))
+    Flash::success(Redirect::to(rocket::uri!("/")), format!("Logged out. Goodbye!"))
 }
 
 #[derive(rocket::FromForm)]
@@ -344,7 +345,10 @@
 
 #[rocket::get("/testchart")]
 async fn route_testchart() -> Template {
-    Template::render("testchart", context![ chartconfig: create_linechart([1,2,3,4].iter(), [3,2,5,4].iter(), "Series".into()).to_string() ])
+    Template::render(
+        "testchart",
+        context![ chartconfig: create_chart(vec!["1", "2", "3", "4"], vec![("Series A".into(), vec![1,4,3,8]), ("Series B".into(), vec![5,2,3,9])], "line".into()).to_string() ],
+    )
 }
 
 #[rocket::get("/static/<path>")]
@@ -364,28 +368,27 @@
     }
 }
 
-fn create_linechart<
-    S1: std::string::ToString,
-    I1: Iterator<Item = S1>,
-    S2: std::string::ToString,
-    I2: Iterator<Item = S2>,
->(
-    labels: I1,
-    values: I2,
-    name: String,
+fn create_chart<S1: Serialize, S2: Serialize>(
+    labels: Vec<S1>,
+    values: Vec<(String, Vec<S2>)>,
+    typ: String,
 ) -> Value {
-    let labels = labels.map(|s| s.to_string()).collect::<Vec<String>>();
-    let values = values.map(|s| s.to_string()).collect::<Vec<String>>();
-
+    let colors = vec![
+        "red", "blue", "orange", "green", "gray", "purple", "black", "brown",
+    ];
+    if values.len() > colors.len() {
+        error!("Not enough colors for line chart!");
+    }
+    let datasets: Vec<Value> = values
+        .iter()
+        .zip(colors)
+        .map(|((name, val), col)| json!({"label": name, "data": val, "borderColor": col}))
+        .collect();
     let inner = json!({
-        "type": "line",
+        "type": typ,
         "data": {
             "labels": labels,
-            "datasets": [{
-                "label": name,
-                "data": values,
-                "borderColor": "red",
-            }],
+            "datasets": datasets,
         },
         "options": {
             "scales": { "y": { "beginAtZero": true }},
@@ -419,7 +422,6 @@
                 route_login_form,
                 route_login_post,
                 route_log,
-
                 route_testchart,
             ],
         )