Skip to content

#52 Delete button for activities #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CoderTobi merged 5 commits into from
Sep 9, 2025
Merged

#52 Delete button for activities #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0afd428
#52 Updated plant details page design and added delete buttons for ac…
CoderTobi Sep 9, 2025
27afb20
#53 updated none static details page to new design
CoderTobi Sep 9, 2025
1fe3cd2
#52 implemented necessary frontend functions for activity deletion bu…
CoderTobi Sep 9, 2025
17e40b9
Fixed activities deletion API endpoint
CoderTobi Sep 9, 2025
a5ccff9
Merge branch 'main' into 52-delete-button-for-activities
CoderTobi Sep 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions backend/services/activities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
3 changes: 1 addition & 2 deletions frontend/public/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
6 changes: 3 additions & 3 deletions frontend/public/detailseite_pflanze.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
68 changes: 50 additions & 18 deletions frontend/public/js/detailseite_pflanze.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,46 +59,55 @@ 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);
}

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;
}

Expand Down Expand Up @@ -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;
Expand All @@ -148,6 +157,29 @@ async function onButtonDeletePlantClick(plant) {
navigation.showPlantOverviewPage()
}

async function onButtonDeleteActivityClick(activity, domElement) {
// Confirm action
if(!confirm("Möchtest du die Activity wirklich löschen?"))
{
return;
}
console.log(activity);
console.log(activity.id);
// Delete activity
try {
await backend.deleteActivity(activity.id);
} catch (error) {
error_handler.handleError(error);
return;
}

// Remove card
domElement.remove();

// Reload Plant Details
updatePlantDetails(activity.plant_id);
}

function onPlantImageClick(plant) {
if(plant.image){
navigation.showPlantImage(plant.image);
Expand All @@ -169,7 +201,7 @@ function registerEventHandlers(plant){
});

$('#compost-button').on('click', function() {
onButtonDeletePlantClick(plant);
onButtonCompostPlantClick(plant);
});

$('#plant-image').on('click', function() {
Expand Down
27 changes: 27 additions & 0 deletions frontend/public/mjs/backend_api.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 2 additions & 0 deletions frontend/public/mjs/error_handler.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")) {
Expand Down
3 changes: 1 addition & 2 deletions frontend_static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
48 changes: 30 additions & 18 deletions frontend_static/detailseite_pflanze.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/>
Expand Down Expand Up @@ -100,59 +100,71 @@ <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>
</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-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>
Expand Down