in frontend chart highlight current users line

Co-authored-by: Moritz Bergmann <[email protected]>

public/auth/sign_in.html

@@ -29,13 +29,15 @@
 
     <script type="module">
         import {sign_in} from "../scripts/auth.js";
+        import {setCookie} from "../scripts/helper.js";
 
         document.getElementById("submit").addEventListener("click", async () => {
             const username = document.getElementById("username").value;
             const password1 = document.getElementById("password").value;
 
             try {
-                await sign_in(username, password1);
+                const user_obj = await sign_in(username, password1);
+                setCookie('uid', user_obj.id, 365);
                 window.location = "/home.html";
             } catch (_) {
                 alert("SignIn not successful");

public/home.js

@@ -1,6 +1,7 @@
 import {get_activities} from "./scripts/activity.js";
 import {get_user_by_id} from "./scripts/user.js";
-import {ping} from "./scripts/requests.js"
+import {ping} from "./scripts/requests.js";
+import {getCookie} from "./scripts/helper.js";
 
 /// @source: https://stackoverflow.com/a/31810991/11186407
 Date.prototype.getWeek = function() {
@@ -160,6 +161,7 @@ function init_chart(activities_per_user, user_by_id) {
     // display the chart
     const x_axis_labels = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
 
+    let color;
     // prepare for each user the y-Axis
     let activities_per_day = [];
     for (const [author_id, activities] of activities_per_user) {
@@ -178,13 +180,20 @@ function init_chart(activities_per_user, user_by_id) {
             amounts[activity_weekday] += activities[i].amount;
         }
 
+
+        if (getCookie('uid') === author_id) {
+            color = 'Red';
+        } else {
+            color = 'rgb(75, 192, 192)';
+        }
+
         activities_per_day.push({
             // todo: replace with author name
             label: user_by_id.get(author_id).name,
             data: amounts,
             fill: false,
             // todo: random color
-            borderColor: 'rgb(75, 192, 192)',
+            borderColor: color,
             tension: 0.1
         });
     }
@@ -203,14 +212,15 @@ function init_chart(activities_per_user, user_by_id) {
         label: "Goal",
         data: [140, 140, 140, 140, 140, 140, 140],
         fill: false,
-        borderColor: 'Red',
+        borderColor: 'Green',
         tension: 0.1
     });
 
     // first destroy char, so we can recreate it if it was already initialized
     if (global_chart) {
         global_chart.destroy();
     }
+
     // create the chart
     global_chart = new Chart("graph-comparison-canvas", {
         type: "line",

public/scripts/auth.js

@@ -1,4 +1,5 @@
 import {BASE_AUTH_URL} from "./variables.js";
+import {do_request} from "./requests.js";
 
 /// sign up a user
 export async  function sign_up(username, password) {
@@ -50,23 +51,7 @@ export async  function sign_in(username, password) {
         credentials: 'include',
     });
 
-    return await fetch(request)
-        .then((response) => {
-            if (response.status === 200) {
-                return response;
-            } else {
-                throw new Error("Something went wrong on API server!");
-            }
-        })
-        .then((response) => {
-            console.debug("Sucessfull SignIn");
-            console.debug(response);
-            return response;
-        })
-        .catch((error) => {
-            console.error(error);
-            throw error;
-        });
+    return await do_request(request);
 }
 
 /// sign out a user

public/scripts/helper.js

@@ -0,0 +1,25 @@
+// https://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript
+export function setCookie(name,value,days) {
+    let expires = "";
+    if (days) {
+        let date = new Date();
+        date.setTime(date.getTime() + (days*24*60*60*1000));
+        expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
+}
+
+export function getCookie(name) {
+    let nameEQ = name + "=";
+    let ca = document.cookie.split(';');
+    for (let i=0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0)==' ') c = c.substring(1,c.length);
+        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+    }
+    return null;
+}
+
+function eraseCookie(name) {   
+    document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+}