From 896e2db27f7a881a6360e268a7ac44ea93af8c8f Mon Sep 17 00:00:00 2001
From: CoderTobi <77673526+CoderTobi@users.noreply.github.com>
Date: Tue, 9 Sep 2025 12:37:19 +0200
Subject: [PATCH] View image in Fullscreen Fixes #64

---
 frontend/public/js/detailseite_pflanze.mjs | 14 ++++++++++++--
 frontend/public/mjs/navigation.mjs         | 11 +++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/frontend/public/js/detailseite_pflanze.mjs b/frontend/public/js/detailseite_pflanze.mjs
index 5aa8989..4636a84 100644
--- a/frontend/public/js/detailseite_pflanze.mjs
+++ b/frontend/public/js/detailseite_pflanze.mjs
@@ -116,7 +116,7 @@ async function onButtonWaterPlantClick(plant) {
     reloadActivities(plant.plant_id);
 }
 
-async function onButtonRepotPlantClick(plant) {
+async function onButtonRePotPlantClick(plant) {
     // call Backend
     try{
         await backend.repotPlant(plant.plant_id);
@@ -148,6 +148,12 @@ async function onButtonDeletePlantClick(plant) {
     navigation.showPlantOverviewPage()
 }
 
+function onPlantImageClick(plant) {
+    if(plant.image){
+        navigation.showPlantImage(plant.image);
+    }
+}
+
 function registerEventHandlers(plant){
     // Event listener for edit-button using jQuery
     $('#edit-button').on('click', function() {
@@ -159,12 +165,16 @@ function registerEventHandlers(plant){
     });
 
     $('#repot-button').on('click', function() {
-        onButtonRepotPlantClick(plant);
+        onButtonRePotPlantClick(plant);
     });
 
     $('#compost-button').on('click', function() {
         onButtonDeletePlantClick(plant);
     });
+
+    $('#plant-image').on('click', function() {
+        onPlantImageClick(plant);
+    });
 }
 
 function showCompostInfo(date){
diff --git a/frontend/public/mjs/navigation.mjs b/frontend/public/mjs/navigation.mjs
index 3d5571f..f9835c1 100644
--- a/frontend/public/mjs/navigation.mjs
+++ b/frontend/public/mjs/navigation.mjs
@@ -1,3 +1,5 @@
+import {backendUrl_plantImages} from "./config.mjs";
+
 /**
  * Redirects the user to the plants details page.
  * The plant that should be displayed will be passed to the page via the url.
@@ -29,4 +31,13 @@ export function showPlantEditPage(plant_id)
 export function showPlantOverviewPage()
 {
 	window.location.href = 'meine_pflanzen.html';
+}
+
+/**
+ * Redirects the user to the plant image specified
+ * @param {string} image the filename of the plant image
+ */
+export function showPlantImage(image)
+{
+	window.location.href = backendUrl_plantImages + '/' + image;
 }
\ No newline at end of file