From a63b582fe586499c84e7216b78a8693ca127476e Mon Sep 17 00:00:00 2001
From: Max <m.giller.dev@gmail.com>
Date: Thu, 17 Dec 2020 23:32:01 +0100
Subject: [PATCH] Last commit before vue-version

---
 juggl-server/index.html   | 36 +++++++++++++++++++++---------------
 juggl-server/js/api.js    | 39 +++++++++++++++++++++++++++++++++++++++
 juggl-server/js/auth.js   |  1 -
 juggl-server/js/helper.js | 34 ++++++++++++++++++++++++++++++++++
 4 files changed, 94 insertions(+), 16 deletions(-)

diff --git a/juggl-server/index.html b/juggl-server/index.html
index 369a8e7..62b91ad 100644
--- a/juggl-server/index.html
+++ b/juggl-server/index.html
@@ -17,6 +17,7 @@
 
     <script>
         var intervallId = undefined;
+
         window.onblur = () => {
             stopBackgroundUpdates();
         }
@@ -27,21 +28,20 @@
             // Create Callbacks
             callbacks.entering[States.RECORDING] = () => {
                 updateProgess();
+                loadRecordTags();
+            };
+            callbacks.entering[States.IDLE] = () => {
+                loadProjectList().then(() => {
+                    checkForUpdate();
+                });
             };
             
             initState();
-            onLogIn();
             updateVisibility();
             updateAuthBtnText();
             startBackgroundUpdates();
         }
-        
-        function onLogIn() {
-            loadProjectList().then(() => {
-                checkForUpdate();
-            });
-        }
-        
+
         function checkForUpdate() {
             if (currentRecord !== undefined) {
                 updateProgess();
@@ -53,7 +53,7 @@
                 });
             }
         }
-                
+
         function updateProgess () {
             if (currentRecord === undefined) {
                 return;
@@ -98,20 +98,26 @@
         </ul>
     </header>
     <main>
-        <div class="idle hidden" style="text-align: center;">
+        <div class="recording hidden" style="text-align: center;">
+            <h1>
+                Currently Tracking
+            </h1>
+            <div id="tracking-list">
+            </div>
+        </div>
+        <div class="idle recording hidden" style="text-align: center;">
             <h1>
                 Select project to track
             </h1>
             <div id="project-list">
             </div>
         </div>
-        <div class="recording hidden" style="text-align: center;">
+        <div class="idle recording hidden" style="text-align: center;">
             <h1>
-                Tracking <span id="current-project-name"></span>
+                Records
             </h1>
-            <h2 id="current-record-duration" style="color: red;"></h2>
-            <small id="update-notice" >Updated every 30 seconds</small><br/>
-            <button id="stop-btn" onclick="stopRecord()">Stop</button>
+            <div id="record-list">
+            </div>
         </div>
     </main>
 </body>
diff --git a/juggl-server/js/api.js b/juggl-server/js/api.js
index d19b355..8ab9878 100644
--- a/juggl-server/js/api.js
+++ b/juggl-server/js/api.js
@@ -14,6 +14,19 @@ const api = {
         return {};
       });
   },
+  getRecordTags() {
+    return request("/getRecordTags.php")
+      .then((r) => {
+        return r.json();
+      })
+      .then((j) => {
+        return j.record_tags;
+      })
+      .catch((e) => {
+        console.log(e);
+        return {};
+      });
+  },
   startRecord(projectId, startTime = new Date()) {
     return request("/startRecord.php", {
       project_id: projectId,
@@ -72,6 +85,32 @@ const api = {
       return undefined;
     });
   },
+  addTagToRecord(tagId, recordId) {
+    return request("/addTagToRecord.php", {
+      tag_id: tagId,
+      record_id: recordId,
+    }).catch((e) => {
+      console.log(e);
+      return undefined;
+    });
+  },
+  removeTagFromRecord(tagId, recordId) {
+    return request("/removeTagFromRecord.php", {
+      tag_id: tagId,
+      record_id: recordId,
+    }).catch((e) => {
+      console.log(e);
+      return undefined;
+    });
+  },
+  addRecordTag(tagName) {
+    return request("/addRecordTag.php", {
+      tag_name: tagName,
+    }).catch((e) => {
+      console.log(e);
+      return undefined;
+    });
+  },
 };
 
 function request(path, json = {}, options = {}) {
diff --git a/juggl-server/js/auth.js b/juggl-server/js/auth.js
index c39728e..9b73566 100644
--- a/juggl-server/js/auth.js
+++ b/juggl-server/js/auth.js
@@ -37,7 +37,6 @@ function handleAuthBtn() {
     }
 
     logIn(apiKey, userId);
-    onLogIn();
   }
   u("#api-key").first().value = "";
   updateAuthBtnText();
diff --git a/juggl-server/js/helper.js b/juggl-server/js/helper.js
index 2c7abbf..8ca41af 100644
--- a/juggl-server/js/helper.js
+++ b/juggl-server/js/helper.js
@@ -4,6 +4,7 @@ const PROJECT_META = "p";
 let currentRecord = undefined;
 let currentProject = undefined;
 let projectList = undefined;
+let recordTags = undefined;
 
 function loadProjectList() {
   return api.getProjects().then((projects) => {
@@ -38,6 +39,39 @@ function loadProjectList() {
   });
 }
 
+function loadRecordTags() {
+  return api.getRecordTags().then((tags) => {
+    projectList = Object.values(projects);
+
+    var container = u(u("#project-list").first());
+    container.children().remove();
+    Object.values(projects).forEach((project) => {
+      var obj = createNode(PROJECT_OBJECT);
+      var data = undefined;
+
+      data = createNode(PROJECT_TITLE);
+      append(obj, data);
+      u(data).text(project["name"]);
+
+      var duration = Number((parseFloat(project["duration"]) / 60 / 60).toFixed(2));
+      var unit = "hours";
+      data = createNode(PROJECT_META);
+      append(obj, data);
+      u(data).text(duration + " " + unit);
+
+      data = createNode(PROJECT_META);
+      append(obj, data);
+      u(data).text(project["record_count"] + " records");
+
+      obj = u(obj);
+      obj.data("project-id", project["project_id"]);
+      obj.on("click", projectClicked);
+
+      container.append(obj);
+    });
+  });
+}
+
 // Created new DOM object
 // element: Type of DOM object (div, p, ...)
 function createNode(element) {