Feat/incidences javascript (#77)

Implement Incidence controller methods, views, and routes

- Created `index`, `findall`, and `get` methods in `CIncidence`
controller.
- Added routes for viewing and creating incidents.
- Designed `Incidence` , `Incidence/Create` and `Incidence/All` 
- Enhanced table layout and main menu with responsive styling and
interactive buttons.

src/app/Controllers/CIncidence.php

@@ -4,17 +4,42 @@
 
 use App\Core\View;
 use App\Models\MIncidence;
+use App\Models\MElement;
 
 class CIncidence
 {
     public function index()
     {
-        $incidences = MIncidence::findAll();
         View::render([
             "view" => "Incidence",
             "title" => "Incidences",
             "layout" => "MainLayout",
+        ]);
+    }
+
+    public function findall()
+    {
+        $incidences = MIncidence::findAll();
+
+        View::render([
+            "view" => "Incidence/SeeAllIncidences",
+            "title" => "Incidences",
+            "layout" => "MainLayout",
             "data" => ["incidences" => $incidences]
         ]);
     }
+
+    public function get()
+    {
+        $elements = MElement::findAll();
+
+        View::render([
+            "view" => "Incidence/Create",
+            "title" => "Create Incidence",
+            "layout" => "MainLayout",
+            "data" => [
+                "elements" => $elements,
+            ]
+        ]);
+    }
 }

src/app/Views/Incidence.php

@@ -1,26 +1,13 @@
-<div class="overflow-x-auto">
-    <table class="min-w-full bg-white border border-gray-300 rounded-lg shadow-md">
-        <thead>
-            <tr class="bg-gray-100 text-left">
-                <th class="px-4 py-2 border-b">ID</th>
-                <th class="px-4 py-2 border-b">Element Name</th>
-                <th class="px-4 py-2 border-b">Name</th>
-                <th class="px-4 py-2 border-b">Description</th>
-                <th class="px-4 py-2 border-b">Photo</th>
-                <th class="px-4 py-2 border-b">Incident Date</th>
-            </tr>
-        </thead>
-        <tbody>
-            <?php foreach ($incidences as $incidence): ?>
-                <tr class="hover:bg-gray-50">
-                    <td class="px-4 py-2 border-b"><?php echo $incidence->getId(); ?></td>
-                    <td class="px-4 py-2 border-b"><?php echo $incidence->name; ?></td>
-                    <td class="px-4 py-2 border-b"><?php echo $incidence->element()->name; ?></td>
-                    <td class="px-4 py-2 border-b"><?php echo $incidence->description; ?></td>
-                    <td class="px-4 py-2 border-b"><?php echo $incidence->photo; ?></td>
-                    <td class="px-4 py-2 border-b"><?php echo $incidence->getCreatedAt(); ?></td>
-                </tr>
-            <?php endforeach; ?>
-        </tbody>
-    </table>
-</div>
+<div class="overflow-x-auto px-8 py-6 bg-gray-50 rounded-lg shadow-lg">
+    <h1 class="text-5xl font-extrabold text-center text-gray-800">Incidencias</h1>
+    <h3 class="text-lg mt-2 text-slate-600 font-semibold text-center">Here you can see your incidences 😁</h3>
+    <div class="mt-8 flex justify-center space-x-6">
+        <button onclick="window.location.href='/incidence/all'" class="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 font-medium rounded-lg text-lg px-6 py-3 transition-transform transform hover:scale-110 duration-200">
+            Ver Incidencias
+        </button>
+
+        <button onclick="window.location.href='/incidence/create'" class="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 font-medium rounded-lg text-lg px-6 py-3 transition-transform transform hover:scale-110 duration-200">
+            Crear Incidencia
+        </button>
+    </div>
+</div>

src/app/Views/Incidence/Create.php

@@ -0,0 +1,35 @@
+<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-full max-w-3xl mx-auto">
+    <h1 class="text-3xl font-bold mb-6 text-center text-gray-700">Crear Incidencia</h1>
+    <form action="/path/to/your/controller" method="POST" enctype="multipart/form-data">
+        <div class="mb-6">
+            <label for="element_id" class="block text-gray-700 text-sm font-bold mb-2">Elemento</label>
+            <select id="element_id" name="element_id" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring focus:border-blue-500" required>
+                <option value="" disabled selected>Selecciona un elemento</option>
+                <?php foreach ($elements as $element): ?>
+                    <?php echo '<option value="' . $element->getId() . '">' . $element->name . '</option>'; ?>
+                <?php endforeach; ?>
+            </select>
+        </div>
+
+        <div class="mb-6">
+            <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Nombre de la incidencia</label>
+            <input type="text" id="name" name="name" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring focus:border-blue-500" placeholder="Ejemplo: Rama caída" required>
+        </div>
+
+        <div class="mb-6">
+            <label for="description" class="block text-gray-700 text-sm font-bold mb-2">Descripción</label>
+            <textarea id="description" name="description" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring focus:border-blue-500" placeholder="Describe la incidencia" rows="6" required></textarea>
+        </div>
+
+        <div class="mb-6">
+            <label for="photo" class="block text-gray-700 text-sm font-bold mb-2">Foto (opcional)</label>
+            <input type="file" id="photo" name="photo" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring focus:border-blue-500">
+        </div>
+
+        <div class="flex items-center justify-center">
+            <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline">
+                Crear Incidencia
+            </button>
+        </div>
+    </form>
+</div>

src/app/Views/Incidence/SeeAllIncidences.php

@@ -0,0 +1,27 @@
+<div class="overflow-x-auto px-8 py-6 bg-gray-50 rounded-lg shadow-lg">
+    <h1 class="text-3xl font-extrabold text-center text-gray-800 mb-6">Todas las Incidencias</h1>
+    <table class="min-w-full bg-white border border-gray-300 rounded-lg shadow-md">
+        <thead>
+            <tr class="bg-gradient-to-r from-cyan-500 to-blue-500 text-white">
+
+                <th class="px-6 py-4 text-left font-semibold">Element Name</th>
+                <th class="px-6 py-4 text-left font-semibold">Name</th>
+                <th class="px-6 py-4 text-left font-semibold">Description</th>
+                <th class="px-6 py-4 text-left font-semibold">Photo</th>
+                <th class="px-6 py-4 text-left font-semibold">Incident Date</th>
+            </tr>
+        </thead>
+        <tbody>
+            <?php foreach ($incidences as $incidence): ?>
+                <tr class="hover:bg-gray-50 transition-all duration-200 ease-in-out">
+
+                    <td class="px-6 py-4 border-b text-sm text-gray-700"><?php echo $incidence->name; ?></td>
+                    <td class="px-6 py-4 border-b text-sm text-gray-700"><?php echo $incidence->element()->name; ?></td>
+                    <td class="px-6 py-4 border-b text-sm text-gray-700"><?php echo $incidence->description; ?></td>
+                    <td class="px-6 py-4 border-b text-sm text-gray-700"><?php echo $incidence->photo ?? 'No photo'; ?></td>
+                    <td class="px-6 py-4 border-b text-sm text-gray-700"><?php echo $incidence->getCreatedAt(); ?></td>
+                </tr>
+            <?php endforeach; ?>
+        </tbody>
+    </table>
+</div>

src/app/routes.php

@@ -15,6 +15,7 @@
 
 use App\Controllers\CHome;
 use App\Controllers\CAuth;
+use App\Controllers\CIncidence;
 
 return $routes = [
     "GET" => [
@@ -25,6 +26,18 @@
         "/login" => [
             "controller" => CAuth::class,
             "method" => "index"
+        ],
+        "/incidence" => [
+            "controller" => CIncidence::class,
+            "method"=> "index"
+        ],
+        "/incidence/create" => [
+            "controller" => CIncidence::class,
+            "method"=> "get"
+        ],
+        "/incidence/all" => [
+            "controller" => CIncidence::class,
+            "method"=> "findall"
         ]
     ],
 ];