From 0afd4285092e9d266373642a98bc2da7cde52352 Mon Sep 17 00:00:00 2001
From: CoderTobi <77673526+CoderTobi@users.noreply.github.com>
Date: Tue, 9 Sep 2025 14:35:49 +0200
Subject: [PATCH 1/4] #52 Updated plant details page design and added delete
 buttons for activities

---
 frontend_static/css/style.css            |  3 +-
 frontend_static/detailseite_pflanze.html | 48 +++++++++++++++---------
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/frontend_static/css/style.css b/frontend_static/css/style.css
index 7f35275..8ba31f8 100644
--- a/frontend_static/css/style.css
+++ b/frontend_static/css/style.css
@@ -55,8 +55,7 @@ main {
     backdrop-filter: blur(10px);
 }
 
-.btn-delete-plant:hover {
-    background-color: rgba(255, 255, 255, 0.5);
+.text-red-hover:hover {
     color: red;
 }
 
diff --git a/frontend_static/detailseite_pflanze.html b/frontend_static/detailseite_pflanze.html
index 64eb05b..54023ae 100644
--- a/frontend_static/detailseite_pflanze.html
+++ b/frontend_static/detailseite_pflanze.html
@@ -54,11 +54,11 @@
 					<div class="col-12 col-md-7 col-lg-8">
 						<div class="card-body h-100 d-flex flex-column">
 
-							<button class="btn btn-delete-plant position-absolute top-0 end-0 p-2 m-2">
+							<button class="btn btn-delete-plant text-red-hover position-absolute top-0 end-0 p-2 m-2">
 								<i class="bi bi-recycle"></i>
 							</button>
 
-							<h5 class="card-title fs-3">Pflanziska</h5>
+							<h3 class="card-title">Pflanziska</h3>
 							
 							<p class="card-subtitle mb-2 text-muted fs-5">
 								Glücksfeder - Zamioculcas <br/>
@@ -100,39 +100,47 @@ <h5 class="card-title fs-3">Pflanziska</h5>
 
 			<div class="col mb-2">
 				<div class="card">
-					<div class="card-body d-flex align-items-center">
-						<span class="border d-flex justify-content-center align-items-center rounded-2 bg-water" style="width: 100px; height: 100px;">
-							<i class="bi bi-droplet-fill" style="font-size: 3rem; color: white;"></i>
+					<div class="d-flex align-items-center">
+						<span class="d-flex justify-content-center align-items-center rounded-start bg-water" style="width: 100px; height: 100px;">
+							<i class="bi bi-droplet-fill text-white" style="font-size: 3rem;"></i>
 						</span>
 
 						<div class="ms-3">
-							<p class="card border-0 text-water mb-2 fs-3">
+							<h3 class="text-water mb-2">
 								Gegossen
-							</p>
+							</h3>
 
-							<p class="card border-0 card-subtitle mb-2 text-muted">
+							<p class="card-subtitle text-muted">
 								24.03.2025 - vor 3 Tagen
 							</p>
 						</div>
+
+						<button class="btn text-red-hover position-absolute end-0 top-0 p-2 m-2">
+							<i class="bi bi-x-lg"></i>
+						</button>
 					</div>
 				</div>
 			</div>
 
 			<div class="col mb-2">
 				<div class="card">
-					<div class="card-body d-flex align-items-center">
-						<span class="border d-flex justify-content-center align-items-center rounded-2 bg-water" style="width: 100px; height: 100px;">
+					<div class="d-flex align-items-center">
+						<span class="d-flex justify-content-center align-items-center rounded-start bg-water" style="width: 100px; height: 100px;">
 							<i class="bi bi-droplet-fill" style="font-size: 3rem; color: white;"></i>
 						</span>
 
 						<div class="ms-3">
-							<p class="card border-0 text-water mb-2 fs-3">
+							<h3 class="text-water mb-2">
 								Gegossen
-							</p>
+							</h3>
 
-							<p class="card border-0 card-subtitle mb-2 text-muted">
+							<p class="card-subtitle text-muted">
 								20.03.2025 - vor 7 Tagen
 							</p>
+
+							<button class="btn text-red-hover position-absolute end-0 top-0 p-2 m-2">
+								<i class="bi bi-x-lg"></i>
+							</button>
 						</div>
 					</div>
 				</div>
@@ -140,19 +148,23 @@ <h5 class="card-title fs-3">Pflanziska</h5>
 
 			<div class="col mb-2">
 				<div class="card">
-					<div class="card-body d-flex align-items-center">
-						<span class="border d-flex justify-content-center align-items-center rounded-2 bg-repot" style="width: 100px; height: 100px;">
+					<div class="d-flex align-items-center">
+						<span class="d-flex justify-content-center align-items-center rounded-start bg-repot" style="width: 100px; height: 100px;">
 							<i class="bi bi-trash2-fill" style="font-size: 3rem; color: white;"></i>
 						</span>
 
 						<div class="ms-3">
-							<p class="card border-0 text-repot mb-2 fs-3">
+							<h3 class="text-repot mb-2">
 								Umgetopft
-							</p>
+							</h3>
 
-							<p class="card border-0 card-subtitle mb-2 text-muted">
+							<p class="card-subtitle text-muted">
 								12.08.2024 - vor 10 Tagen
 							</p>
+
+							<button class="btn text-red-hover position-absolute end-0 top-0 p-2 m-2">
+								<i class="bi bi-x-lg"></i>
+							</button>
 						</div>
 					</div>
 				</div>

From 27afb209554afd1e673edf5e5d1a201f6fdc12ef Mon Sep 17 00:00:00 2001
From: CoderTobi <77673526+CoderTobi@users.noreply.github.com>
Date: Tue, 9 Sep 2025 15:02:06 +0200
Subject: [PATCH 2/4] #53 updated none static details page to new design

---
 frontend/public/css/style.css              |  3 +-
 frontend/public/detailseite_pflanze.html   |  6 +--
 frontend/public/js/detailseite_pflanze.mjs | 60 +++++++++++++++-------
 3 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/frontend/public/css/style.css b/frontend/public/css/style.css
index 7f35275..8ba31f8 100644
--- a/frontend/public/css/style.css
+++ b/frontend/public/css/style.css
@@ -55,8 +55,7 @@ main {
     backdrop-filter: blur(10px);
 }
 
-.btn-delete-plant:hover {
-    background-color: rgba(255, 255, 255, 0.5);
+.text-red-hover:hover {
     color: red;
 }
 
diff --git a/frontend/public/detailseite_pflanze.html b/frontend/public/detailseite_pflanze.html
index 87aef9d..de3a125 100644
--- a/frontend/public/detailseite_pflanze.html
+++ b/frontend/public/detailseite_pflanze.html
@@ -63,16 +63,16 @@
 					<div class="col-12 col-md-7 col-lg-8">
 						<div class="card-body h-100 d-flex flex-column">
 
-							<button class="btn btn-delete-plant position-absolute top-0 end-0 p-2 m-2" id="compost-button">
+							<button class="btn btn-delete-plant text-red-hover position-absolute top-0 end-0 p-2 m-2" id="compost-button">
 								<i class="bi bi-recycle"></i>
 							</button>
 
-							<h5 class="card-title fs-3" id="plant-name">
+							<h3 class="card-title" id="plant-name">
 								<div class="spinner-border text-primary" role="status">
 									<span class="visually-hidden">Loading...</span>
 								</div>
 								Lade Pflanze
-							</h5>
+							</h3>
 							
 							<p class="card-subtitle mb-2 text-muted fs-5" id="species-name">-</p>
 
diff --git a/frontend/public/js/detailseite_pflanze.mjs b/frontend/public/js/detailseite_pflanze.mjs
index 5aa8989..5179418 100644
--- a/frontend/public/js/detailseite_pflanze.mjs
+++ b/frontend/public/js/detailseite_pflanze.mjs
@@ -59,27 +59,27 @@ async function reloadActivities(plantId) {
 
     // Display fetched activities to the user
     for (const activity of activities) {
-        let createdActivityCard = await createActivityCard(activity.type, activity.date, activity.days_since);
+        let createdActivityCard = await createActivityCard(activity);
         activitiesContainer.append(createdActivityCard);
     }
 }
 
-function createActivityCard(type, date, days_since) {
-    let col = $('<div class="col mb-2" activity-card>');
+function createActivityCard(activity) {
+    let col = $('<div class="col mb-2">');
     let card = $('<div class="card">');
     col.append(card);
 
-    let cardBody = $('<div class="card-body d-flex align-items-center">');
+    let cardBody = $('<div class="d-flex align-items-center">');
     card.append(cardBody);
     
-    if (type == 0) {
-        let iconContainer = $('<span class="border d-flex justify-content-center align-items-center rounded-2 bg-water" style="width: 100px; height: 100px;">');
-        let icon = $('<i class="bi bi-droplet-fill" style="font-size: 3rem; color: white;"></i>');
+    if (activity.type == 0) {
+        let iconContainer = $('<span class="d-flex justify-content-center align-items-center rounded-start bg-water" style="width: 100px; height: 100px;">');
+        let icon = $('<i class="bi bi-droplet-fill text-white" style="font-size: 3rem;"></i>');
         iconContainer.append(icon);
         cardBody.append(iconContainer);
-    } else if (type == 1) {
-        let iconContainer = $('<span class="border d-flex justify-content-center align-items-center rounded-2 bg-repot" style="width: 100px; height: 100px;">');
-        let icon = $('<i class="bi bi-trash2-fill" style="font-size: 3rem; color: white;"></i>');
+    } else if (activity.type == 1) {
+        let iconContainer = $('<span class="d-flex justify-content-center align-items-center rounded-start bg-repot" style="width: 100px; height: 100px;">');
+        let icon = $('<i class="bi bi-trash2-fill text-white" style="font-size: 3rem;"></i>');
         iconContainer.append(icon);
         cardBody.append(iconContainer);
     }
@@ -87,18 +87,27 @@ function createActivityCard(type, date, days_since) {
     let textContainer = $('<div class="ms-3">');
     cardBody.append(textContainer);
     
-    if(type == 0) {
-        let title = $('<p class="card border-0 text-water mb-2 fs-3">Gegossen</p>');
+    if(activity.type == 0) {
+        let title = $('<h3 class="text-water mb-2">Gegossen</h3>');
         textContainer.append(title);
-    } else if(type == 1) {
-        let title = $('<p class="card border-0 text-repot mb-2 fs-3">Umgetopft</p>');
+    } else if(activity.type == 1) {
+        let title = $('<h3 class="text-repot">Umgetopft</h3>');
         textContainer.append(title);
     }
     
-    let dateText = `${utils.convertSqlDateToGermanFormat(date)} - vor ${days_since} Tagen`;
-    let subtitle = $('<p class="card border-0 card-subtitle mb-2 text-muted">' + dateText + '</p>');
+    let dateText = `${utils.convertSqlDateToGermanFormat(activity.date)} - vor ${activity.days_since} Tagen`;
+    let subtitle = $('<p class="card-subtitle mb-2 text-muted">' + dateText + '</p>');
     textContainer.append(subtitle);
 
+    let activityDeleteButton = $("<button>");
+    activityDeleteButton.prop("class", "btn text-red-hover position-absolute end-0 top-0 p-2 m-2");
+    activityDeleteButton.append($('<i class="bi bi-x-lg">'));
+    textContainer.append(activityDeleteButton);
+
+    activityDeleteButton.on("click", () => {
+        onButtonDeleteActivityClick(activity, col)
+    });
+
     return col;
 }
 
@@ -131,7 +140,7 @@ async function onButtonRepotPlantClick(plant) {
     updatePlantDetails(plant.plant_id);
 }
 
-async function onButtonDeletePlantClick(plant) {
+async function onButtonCompostPlantClick(plant) {
     if(!confirm("Willst du die Pflanze wirklich kompostieren?"))
     {
         return;
@@ -148,6 +157,21 @@ async function onButtonDeletePlantClick(plant) {
     navigation.showPlantOverviewPage()
 }
 
+async function onButtonDeleteActivityClick(activity, domElement) {
+    // Confirm action
+    // TODO
+
+    // Delete activity
+    // TODO
+
+    // Remove card
+    domElement.remove();
+
+    // Reload Plant Details
+    updatePlantDetails(activity.plant_id);
+
+}
+
 function registerEventHandlers(plant){
     // Event listener for edit-button using jQuery
     $('#edit-button').on('click', function() {
@@ -163,7 +187,7 @@ function registerEventHandlers(plant){
     });
 
     $('#compost-button').on('click', function() {
-        onButtonDeletePlantClick(plant);
+        onButtonCompostPlantClick(plant);
     });
 }
 

From 1fe3cd27e8baf5baf0280cf71f05b2686a19a6fa Mon Sep 17 00:00:00 2001
From: CoderTobi <77673526+CoderTobi@users.noreply.github.com>
Date: Tue, 9 Sep 2025 15:30:33 +0200
Subject: [PATCH 3/4] #52 implemented necessary frontend functions for activity
 deletion button - backend function deletes plant instead of activity, still
 need to fix that!

---
 frontend/public/js/detailseite_pflanze.mjs | 15 +++++++++---
 frontend/public/mjs/backend_api.mjs        | 27 ++++++++++++++++++++++
 frontend/public/mjs/error_handler.mjs      |  2 ++
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/frontend/public/js/detailseite_pflanze.mjs b/frontend/public/js/detailseite_pflanze.mjs
index 5179418..c5afe67 100644
--- a/frontend/public/js/detailseite_pflanze.mjs
+++ b/frontend/public/js/detailseite_pflanze.mjs
@@ -159,10 +159,19 @@ async function onButtonCompostPlantClick(plant) {
 
 async function onButtonDeleteActivityClick(activity, domElement) {
     // Confirm action
-    // TODO
-
+    if(!confirm("Möchtest du die Activity wirklich löschen?"))
+    {
+        return;
+    }
+    console.log(activity);
+    console.log(activity.id);
     // Delete activity
-    // TODO
+    try {
+        await backend.deleteActivity(activity.id);
+    } catch (error) {
+        error_handler.handleError(error);
+        return;
+    }
 
     // Remove card
     domElement.remove();
diff --git a/frontend/public/mjs/backend_api.mjs b/frontend/public/mjs/backend_api.mjs
index 51d7a69..183d7ff 100644
--- a/frontend/public/mjs/backend_api.mjs
+++ b/frontend/public/mjs/backend_api.mjs
@@ -105,6 +105,33 @@ export async function repotPlant(plant_id)
 	await createActivity(plant_id, 1);
 }
 
+/**
+ * async function to delete an activity on the backend.
+ * Throws an exception on error.
+ * 
+ * @param {int} id The id of the activity
+ */
+export async function deleteActivity(id) {
+	try {
+		const res = await fetch(backendUrl_api + '/activities/' + id, {
+			method: 'DELETE'
+		});
+
+		// check if it was successful
+		if(res.status !== 200) {
+			const errorResponse = await res.text();
+			throw new Error(`Failed to delete activity - Error ${res.status}: ${errorResponse}`);
+		}
+		else
+		console.log("Activity deleted successfully");
+	} 
+	catch (exception) 
+	{
+		console.error("Error deleting activity:", exception);
+        throw exception;
+	}
+}
+
 /**
  * async function to fetch all plants from the backend.
  * Throws an exception on error.
diff --git a/frontend/public/mjs/error_handler.mjs b/frontend/public/mjs/error_handler.mjs
index ca3b26c..8a8aa56 100644
--- a/frontend/public/mjs/error_handler.mjs
+++ b/frontend/public/mjs/error_handler.mjs
@@ -31,6 +31,8 @@ export function handleError(error) {
                 mainMessage = "Fehler beim Hochladen des Bildes";
             } else if (error.message.includes("Failed to delete plant")) {
                 mainMessage = "Fehler beim Löschen der Pflanze";
+            } else if (error.message.includes("Failed to delete activity")) {
+                mainMessage = "Fehler beim Löschen der Aktivität";
             } else if (error.message.includes("Failed to update plant")) {
                 mainMessage = "Fehler beim aktualisieren der Pflanze";
             } else if (error.message.includes("Failed to create activity")) {

From 17e40b9e4a00a2fad184d5e8efcf3f9aa11f56c1 Mon Sep 17 00:00:00 2001
From: CoderTobi <77673526+CoderTobi@users.noreply.github.com>
Date: Tue, 9 Sep 2025 16:07:57 +0200
Subject: [PATCH 4/4] Fixed activities deletion API endpoint

---
 backend/services/activities.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/services/activities.js b/backend/services/activities.js
index 2ea9715..c6562f3 100644
--- a/backend/services/activities.js
+++ b/backend/services/activities.js
@@ -146,11 +146,11 @@ serviceRouter.get('/activities/all/:plant_id', function(request, response) {
 serviceRouter.delete('/activities/:id', function(request, response) {
     console.log('Service activities: Client requested deletion of activity, id=' + request.params.id);
 
-    const plantsDaoInstance = new plantsDao(request.app.locals.dbConnection);
+    const activitiesDaoInstance = new activitiesDao(request.app.locals.dbConnection);
 
     try {
-        if (plantsDaoInstance.exists(request.params.id)) {
-            plantsDaoInstance.delete(request.params.id);
+        if (activitiesDaoInstance.exists(request.params.id)) {
+            activitiesDaoInstance.delete(request.params.id);
             console.log('Service activities: Deletion of activity successfull, id=' + request.params.id);
             response.status(200).json({ 'fehler': false, 'nachricht': 'Activity deleted' });
         } else {