S4 search

api/fetch-all-plants.php

@@ -0,0 +1,11 @@
+<?php
+
+require_once '../classes/Plant.php';
+require_once '../utils/db_connection.php';
+
+$pdo = getDBConnection();
+$plantCollection = new Plant($pdo);
+
+$all_plants = $plantCollection->fetchAllPlants();
+
+echo json_encode($all_plants);

classes/Plant.php

@@ -22,7 +22,8 @@ public function fetchAllPlants(): array
             FROM `plants`
             LEFT JOIN `types_of_plant`
             ON `plants`.`plant_type` = `types_of_plant`.`id`
-            WHERE `plants`.`deleted`="0"'
+            WHERE `plants`.`deleted`="0"
+            ORDER BY `plants`.`id` DESC;'
         );
 
         $query->execute();
@@ -56,7 +57,11 @@ public function addPlantType($plantType): void
             "INSERT INTO `types_of_plant` (`plant_type`) VALUES (?);"
         );
 
-        $query->execute($plantType);
+        $params = [
+            $plantType
+        ];
+
+        $query->execute($params);
     }
 
     public function addNewPlant($plantType, $plantCultivar, $datePlanted, $projectedHarvest, $imgURL): void

components/navbar.php

@@ -1,6 +1,6 @@
 <nav>
     <div class="nav-container">
-        <a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
+        <a href="search.php"><i class="fa-solid fa-magnifying-glass"></i></a>
         <a href="index.php"><i class="fa-solid fa-house home-button"></i></a>
         <a href="addplant.php"><i class="fa-solid fa-plus"></i></a>
     </div>

css/styles.css

@@ -441,8 +441,112 @@ label {
   gap: 1rem;
 }
 
+.search-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  margin-top: 8rem;
+}
+
+.search-input {
+  display: flex;
+  width: 30rem;
+}
+
+.search-input > select {
+  width: 10rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.search-input > input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 0;
+  padding-left: .5rem;
+}
+
+.search-result {
+  width: 30rem;
+  display: flex;
+  border: 1px solid #dddddd;
+  border-radius: 5px;
+  margin-top: .5rem;
+  background-color: #a7e7c1;
+}
+
+.search-result.no-result {
+  padding: 1rem;
+}
+
+.search-result.no-result span {
+  font-weight: 700;
+}
+
+.result-img {
+  width: 6rem;
+  height: 6rem;
+  background-color: #a7e7c1;
+  background-size: cover;
+  background-position: center;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+}
+
+.result-details {
+  font-size: 1.5rem;
+  font-weight: 400;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: space-between;
+  padding: .5rem;
+}
+
+.result-cultivar {
+  font-size: 1.2rem;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.result-name {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.result-name > button {
+  font-size: .8rem;
+}
+
 @media only screen and (max-width: 600px) {
   .container {
     grid-template-columns: 1fr;
   }
+
+  .search-input {
+    width: 100%;
+    padding: .5rem;
+  }
+
+  .search-input > select {
+    width: auto;
+  }
+
+  .search-result {
+    width: 100%;
+  }
+
+  .result-container {
+    padding: .5rem;
+  }
+
+  .result-cultivar {
+    font-size: 1rem;
+  }
+
 }

forms/process-new-plant.php

@@ -18,3 +18,4 @@
 $plant->addNewPlant($plantName, $plantCultivar, $datePlanted, $projectedHarvest, $imgURL);
 
 header('Location: ../index.php');
+

js/search.js

@@ -0,0 +1,69 @@
+let plants;
+
+const searchInput = document.querySelector("#search-input");
+const resultContainer = document.querySelector(".result-container");
+const searchParams = document.querySelector("#search-params");
+let params = searchParams.value;
+
+searchParams.addEventListener("change", () => {
+    params = searchParams.value;
+})
+
+const fetchAllPlants = async () => {
+    try {
+        const response = await fetch('api/fetch-all-plants.php');
+        return await response.json();
+    } catch {
+        console.error("Could not fetch plants.")
+    }
+}
+
+const searchPlants = (searchTerm) => {
+    if (searchTerm === "") {
+        resultContainer.innerHTML = "";
+    } else {
+        const regex = new RegExp(`^${searchTerm}`, 'gi');
+        const results = plants.filter((plant) => {
+            return params === "type" ? plant.plant_type.match(regex) : plant.cultivar.match(regex);
+        })
+        showSearchResults(results, searchTerm);
+    }
+}
+
+const showSearchResults = (results, searchQuery) => {
+    if (results.length === 0) {
+        resultContainer.innerHTML = `<div class="search-result no-result">
+                                     No results matching&nbsp<span>${searchQuery}</span></div>`;
+    } else {
+        const resultHTML = results.map((result) => {
+            return `<div class="search-result">
+        <div class="result-img" style="background-image: url(${result.img_src})">
+        </div>
+        <div class="result-details">
+            <div class="result-name">
+                ${result.plant_type}
+                <button class="btn-primary">View plant</button>
+            </div>
+            <div class="result-cultivar">
+                <span>Cultivar: ${result.cultivar}</span>
+                <span>Planted: ${result.date_planted}</span>
+            </div>
+        </div>
+    </div>`
+        }).join("")
+
+        resultContainer.innerHTML = resultHTML;
+    }
+}
+
+window.addEventListener("DOMContentLoaded", async () => {
+   try {
+       plants = await fetchAllPlants();
+   } catch {
+       console.error("Error")
+   }
+})
+
+searchInput.addEventListener("input", () => {
+    searchPlants(searchInput.value);
+})

search.php

@@ -0,0 +1,55 @@
+<?php
+
+require_once 'components/navbar.php';
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+
+    <title>Plant Manager</title>
+
+    <meta name="description" content="Plant manager app."/>
+    <meta name="author" content="Severin Odic"/>
+
+    <link rel="stylesheet" href="css/normalize.css"/>
+    <link rel="stylesheet" href="css/styles.css"/>
+
+    <link rel="icon" href="images/favicon.png" sizes="192x192"/>
+    <link rel="shortcut icon" href="images/favicon.png"/>
+    <link rel="apple-touch-icon" href="images/favicon.png"/>
+
+    <script defer src="js/search.js"></script>
+
+    <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Nunito:300,400,700&display=swap"
+    />
+    <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+            integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+    />
+</head>
+<body>
+<?php
+require_once 'components/navbar.php' ?>
+<div class="search-container">
+    <div class="search-input">
+        <select id="search-params">
+            <option value="type">Plant type</option>
+            <option value="cultivar">Plant cultivar</option>
+        </select>
+        <input type="text" id="search-input" placeholder="Start typing to search...">
+
+    </div>
+    <div class="result-container">
+
+    </div>
+</div>
+</body>
+</html>

test.php

@@ -2,4 +2,4 @@
 
 require_once 'utils/harvest_countdown.php';
 
-echo getDaysToHarvest("2023-11-12");
+echo getDaysToHarvest("2023-09-29");

utils/harvest_countdown.php

@@ -7,11 +7,13 @@ function getDaysToHarvest(string $projectedHarvest): string
     $days_to_harvest = $projected_harvest->diff($current_date);
     $date_to_string = $days_to_harvest->format('%m %d');
 
-    if ($date_to_string[0] === "0") {
-        if (substr($date_to_string, -1) <= 1) {
-            return substr($date_to_string, -1) . " DAY";
+    if (explode(" ", $date_to_string)[0] === "0") {
+        if (explode(" ", $date_to_string)[1] == 0) {
+            return explode(" ", $date_to_string)[1] . " DAYS";
+        } else if (explode(" ", $date_to_string)[1] <= 1) {
+            return explode(" ", $date_to_string)[1] . " DAY";
         } else {
-            return substr($date_to_string, -1) . " DAYS";
+            return explode(" ", $date_to_string)[1] . " DAYS";
         }
     } else {
         if (explode(" ", $date_to_string)[1] <= 1) {