adding more style for a better look

mobergmann · Nov 6, 2023 · 1bf824a · 1bf824a
1 parent f2c97a1
commit 1bf824a
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 27 deletions.
diff --git a/public/home.html b/public/home.html
@@ -60,39 +60,38 @@ <h2>Log</h2>
         </div>
 
         <div>
-            <label>Activities</label>
-            <ul id="template-log-activities">
-                <!-- Here goes the activities constructed from the template -->
-            </ul>
-            <button class="button-down">
+            <button class="log-activities-button-down" id="logentry-i1">
                 <img src="images/down.svg" alt="Show Activities" width="15rem" height="15rem">
             </button>
-            <button class="button-up">
-                <img src="images/up.svg" alt="Hide Activities" width="15rem" height="15rem">
-            </button>
+
+            <div class="log-activities"  id="logentry-i2">
+                <ul id="template-log-activities">
+                    <!-- Here goes the activities constructed from the template -->
+                </ul>
+
+                <button class="log-activities-button-up" id="logentry-i3">
+                    <img src="images/up.svg" alt="Hide Activities" width="15rem" height="15rem">
+                </button>
+            </div>
         </div>
     </div>
 </template>
 
 <template id="template-log-activity">
-    <div>
-        <div>
+    <div class="logactivity">
+        <div class="logactivity-starttime logactivity-propertie">
             <label>
-                Start Time
-                <input type="datetime-local" id="template-log-activity-start-time" disabled>
+                Start Time:&nbsp;
+                <input type="datetime-local" id="template-log-activity-starttime" disabled>
             </label>
         </div>
-        <div>
-            <label>
-                Duration
-                <input type="number" id="template-log-activity-duration" disabled>
-            </label>
+        <div class="logactivity-duration logactivity-propertie">
+            Duration:&nbsp;
+            <div id="template-log-activity-duration"></div>
         </div>
-        <div>
-            <label>
-                Amount
-                <input type="number" id="template-log-activity-amount" disabled>
-            </label>
+        <div class="logactivity-amount logactivity-propertie">
+            Amount:&nbsp;
+            <div id="template-log-activity-amount"></div>
         </div>
     </div>
 </template>

diff --git a/public/home.js b/public/home.js
@@ -170,19 +170,35 @@ function init_log(activities_per_user) {
     let place = 1;
     for (const [author_id, activities] of activities_per_user) {
         const clone = template.content.cloneNode(true);
+
+        // add collapsable functionality to buttons
+        let button_down = clone.querySelector("#logentry-i1");
+        button_down.id = `logentry-down-${author_id}`;
+        let button_up = clone.querySelector("#logentry-i3");
+        button_up.id = `logentry-up-${author_id}`;
+        let activities_container = clone.querySelector("#logentry-i2");
+        activities_container.id = `logentry-container-${author_id}`;
+        button_down.onclick = () => {
+            button_down.style.display = "none";
+            activities_container.style.display = "block";
+        };
+        button_up.onclick = () => {
+            button_down.style.display = "block";
+            activities_container.style.display = "none";
+        };
+
         // add the data to the log entry
         clone.querySelector("#template-log-place").innerHTML = place;
         clone.querySelector("#template-log-username").innerHTML = author_id;
-        clone.querySelector("#template-log-amount").innerHTML = activities.sum("amount"); // todo: issue
-                                                                 // (a, b) => a.amount + b.amount,
+        clone.querySelector("#template-log-amount").innerHTML = activities.sum("amount");
         // add the activities to the log entry
         let activities_list = clone.querySelector("#template-log-activities");
         let activity_template = document.querySelector("#template-log-activity");
         for (const activity of activities) {
             const clone = activity_template.content.cloneNode(true);
-            clone.querySelector("#template-log-activity-start-time").value = activity.start_time.toISOString().slice(0,16);
-            clone.querySelector("#template-log-activity-duration").value = activity.end_time - activity.start_time;
-            clone.querySelector("#template-log-activity-amount").value = activity.amount;
+            clone.querySelector("#template-log-activity-starttime").value = activity.start_time.toISOString().slice(0,16);
+            clone.querySelector("#template-log-activity-duration").innerHTML = activity.end_time - activity.start_time;
+            clone.querySelector("#template-log-activity-amount").innerHTML = activity.amount;
 
             activities_list.appendChild(clone);
         }

diff --git a/public/style/home.css b/public/style/home.css
@@ -3,6 +3,10 @@ body {
     margin: auto;
 }
 
+header {
+    margin: 1rem;
+}
+
 main {
     margin: 1rem;
     margin-bottom: 5em; /* space for the add activiy button*/
@@ -42,3 +46,29 @@ main {
     justify-content: flex-end;
     margin-right: 1rem;
 }
+
+.log-activities {
+    display: none;
+}
+.logactivity {
+    padding: 0.1rem;
+    border: 1px solid;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+.logactivity-propertie {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    margin: 1rem;
+}
+.logactivity-starttime {
+
+}
+.logactivity-duration {
+
+}
+.logactivity-amount {
+
+}