From 9a952e7e84731ed78237baa2bf9d549302cb856a Mon Sep 17 00:00:00 2001
From: Azerothwav <azerothwaav@proton.me>
Date: Mon, 2 Dec 2024 11:04:54 +0100
Subject: [PATCH] feat: add database support

---
 app/Http/Controllers/TodoController.php       |  22 +++-
 app/Models/Todo.php                           |  33 ++++++
 database/database.sqlite                      | Bin 86016 -> 90112 bytes
 .../2024_12_02_093518_create_todo_table.php   |  28 +++++
 public/js/todo.js                             | 105 +++++++++++------
 resources/js/todo.js                          | 107 ++++++++++++------
 resources/views/todo.blade.php                |  12 +-
 routes/web.php                                |   4 +-
 8 files changed, 242 insertions(+), 69 deletions(-)
 create mode 100644 app/Models/Todo.php
 create mode 100644 database/migrations/2024_12_02_093518_create_todo_table.php

diff --git a/app/Http/Controllers/TodoController.php b/app/Http/Controllers/TodoController.php
index 2e2c65e..481fc4f 100644
--- a/app/Http/Controllers/TodoController.php
+++ b/app/Http/Controllers/TodoController.php
@@ -3,10 +3,30 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use App\Models\Todo;
 
 class TodoController extends Controller
 {
     public function index() {
-        return view('todo');
+        $todos = Todo::all();
+        return view('todo', ['todos' => $todos]);
+    }
+
+    public function store(Request $request) {
+        $validated = $request->validate([
+            'task' => 'required|string|max:255'
+        ]);
+
+        $todo = Todo::create([
+            'task' => $validated['task']
+        ]);
+
+        return response()->json($todo);
+    }
+
+    public function destroy($id) {
+        $todo = Todo::findOrFail($id);
+        $todo->delete();
+        return response()->json(['message' => 'Task deleted successfully']);
     }
 }
diff --git a/app/Models/Todo.php b/app/Models/Todo.php
new file mode 100644
index 0000000..b2404bf
--- /dev/null
+++ b/app/Models/Todo.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Todo extends Model
+{
+    use HasFactory;
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array<int, string>
+     */
+    protected $fillable = [
+        'task',
+        'completed'
+    ];
+
+    /**
+     * Get the attributes that should be cast.
+     *
+     * @return array<string, string>
+     */
+    protected function casts(): array
+    {
+        return [
+            'completed' => 'boolean'
+        ];
+    }
+}
diff --git a/database/database.sqlite b/database/database.sqlite
index b348b9661ef62b5ce4acd8ab36b27c6398824929..c242be778ab8ed53ba7c0713c10b3c9bf7fbb52b 100644
GIT binary patch
delta 442
zcmZutJ4-835T3K=tVWYP;|j?l7Oo=by(DsW*LM|_6vDO9G#0W(4YK$My4wmq&`vaN
zsfFPdX|AB|AF%WXTrT(nyrqvqQi$M5z|LW2if@MR`(}18)!jSwv{SzafRwDS(93Bj
zaSsE_MAMESNw3OlKNNa(Q!!|IuQ%Cj7zWwz3kpl?#h|oO@*6ERHJh8r=gj=X<gc9B
zQ^!J#4YQ!&uZ3GY8KRa7UwJCZv+H<*;XL3!{DTKLAL(t=__JSSFh^`*54x7^3YlZh
zkTvQqZx;(e(XI2j4M`<D=-P`Z_z3udkCARZU}uX$4bredIicNT!&}`h1YT*=S8oN$
z#`!T2jf2KDF4Yt*;yXK}>F^DJ_&1djNwnf$AXo*gVpUR}V^}@OF!_*lxzc}@Wif*9
zfbUp~bn%4kEsO$DTIHNz4X}pK6911}ufH%x8Cjh<d{b@(%l>8}8!_?G6~_y?>;Zb{
oNe>G+Vo?=394BA&19Pl?c*e3b!Zs~2E}U^|@Eb_7uaql`pBp}J$N&HU

delta 517
zcmZoTz}m2Yb%L~D4g&*&C=kN{-$Wf_o*V|fWJX@zHU<%vkcruvn*{|9FmDcF*}%=k
z%-_twe~o_)fAeNRg;M^>&GL<GjQk%M_&;nGG<e1@z{kj}$e5d%UX)mpnV(n8yvcyk
zfg5Nx6E7bFUoS5o&?qL}&3v`BjAk|cO$Cgcu?+H!lFg|sE`b(_$%!G6>BZ^g!7fJr
zSp}w!mEIO*p_YaD0cCEb9-)4&e#N1llbvey7!4;E*2)6O{#qro;B3p#u<(L{5O>Rh
zq}-h1(2zibz);J?K%*R&piq;FL_;^%u$&;@5LZK^V3!>4(7bG;q{_+9YxV0xvduhm
zGYnEZ9L;<xEy{he97}zjP0IbV(#w5a95elm4XgaKBF#K=EOV3G-Kr9uJ<TIS@+<xG
zN`T_NK)sg5Q4q0mpqOQHReqI!rdMfHL~^FTk*k@nOM!V>grQ}+#>WCKP#EwpXW+jA
zB%olkq{3wW$;<n7Ewq_qIf)Gbh)LfW`2X;K2Zs4;eo+=?21X`kW(H1()O!a0AN=ou
jQjhrsIha`((|v3Dnb?_GI6>|J#m8bs1BcCw2LI&&-|LlV

diff --git a/database/migrations/2024_12_02_093518_create_todo_table.php b/database/migrations/2024_12_02_093518_create_todo_table.php
new file mode 100644
index 0000000..4b2878d
--- /dev/null
+++ b/database/migrations/2024_12_02_093518_create_todo_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('todos', function (Blueprint $table) {
+            $table->id();
+            $table->string('task');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('todos');
+    }
+};
diff --git a/public/js/todo.js b/public/js/todo.js
index 9b0fe64..a2f57c1 100644
--- a/public/js/todo.js
+++ b/public/js/todo.js
@@ -9,50 +9,89 @@ function ajoutTache() {
     return;
   }
 
-  // Créer un élément <div> pour la nouvelle tâche
-  var tacheDiv = document.createElement("div");
-  tacheDiv.className = "task"; //mise en forme css
+  // Envoyer la tâche au serveur
+  fetch('/todo', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
+    },
+    body: JSON.stringify({
+      task: tache
+    })
+  })
+  .then(response => response.json())
+  .then(todo => {
+    console.log(todo)
+    // Créer un élément <div> pour la nouvelle tâche
+    var tacheDiv = document.createElement("div");
+    tacheDiv.className = "task";
+    tacheDiv.dataset.id = todo.id;
 
-  // Créer une checkbox pour marquer la tâche comme terminée
-  var checkbox = document.createElement("input");
-  checkbox.type = "checkbox";
-  checkbox.onchange = function () {
-    toggleTaskCompletion(tacheDiv, checkbox);
-  };
-  tacheDiv.appendChild(checkbox);
+    // Créer une checkbox pour marquer la tâche comme terminée
+    var checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.onchange = function () {
+      toggleTaskCompletion(tacheDiv, checkbox);
+    };
+    tacheDiv.appendChild(checkbox);
 
-  // Créer un élément <span> pour afficher la tâche
-  var tacheSpan = document.createElement("span");
-  tacheSpan.textContent = tache; //récupère texte saisi dans la zone de texte tacheInput
-  tacheDiv.appendChild(tacheSpan); //pour afficher à la suite
+    // Créer un élément <span> pour afficher la tâche
+    var tacheSpan = document.createElement("span");
+    tacheSpan.textContent = todo.task;
+    tacheDiv.appendChild(tacheSpan);
 
-  // Ajouter un bouton "Supprimer"
-  var suppButton = document.createElement("button");
-  suppButton.textContent = "Supprimer";
-  suppButton.className = "supp";
-  suppButton.onclick = suppTache; // Associer la fonction de suppression
-  tacheDiv.appendChild(suppButton);
+    // Ajouter un bouton "Supprimer"
+    var suppButton = document.createElement("button");
+    suppButton.textContent = "Supprimer";
+    suppButton.className = "supp";
+    suppButton.onclick = suppTache;
+    tacheDiv.appendChild(suppButton);
 
-  // Ajouter un bouton "Modifier"
-  var modifButton = document.createElement("button");
-  modifButton.textContent = "Modifier";
-  modifButton.className = "modif";
-  modifButton.onclick = function () {
-    modifTache(tacheDiv, tacheSpan);
-  };
-  tacheDiv.appendChild(modifButton);
+    // Ajouter un bouton "Modifier"
+    var modifButton = document.createElement("button");
+    modifButton.textContent = "Modifier";
+    modifButton.className = "modif";
+    modifButton.onclick = function () {
+      modifTache(tacheDiv, tacheSpan);
+    };
+    tacheDiv.appendChild(modifButton);
 
-  // Ajouter la tâche au conteneur
-  document.getElementById("listeTache").appendChild(tacheDiv);
+    // Ajouter la tâche au conteneur
+    document.getElementById("listeTache").appendChild(tacheDiv);
 
-  // Réinitialiser le champ de saisie
-  document.getElementById("tacheInput").value = "";
+    // Réinitialiser le champ de saisie
+    document.getElementById("tacheInput").value = "";
+  })
+  .catch(error => {
+    console.error('Erreur:', error);
+    alert("Une erreur est survenue lors de l'ajout de la tâche.");
+  });
 }
 
 // Fonction pour supprimer une tâche
 function suppTache() {
   var tacheDiv = this.parentElement;
-  tacheDiv.remove();
+  var taskId = tacheDiv.dataset.id;
+
+  fetch('/todo/' + taskId, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
+    }
+  })
+  .then(response => {
+    if (response.ok) {
+      tacheDiv.remove();
+    } else {
+      throw new Error('Erreur lors de la suppression');
+    }
+  })
+  .catch(error => {
+    console.error('Erreur:', error);
+    alert("Une erreur est survenue lors de la suppression de la tâche.");
+  });
 }
 
 // Fonction pour marquer une tâche comme terminée (avec la checkbox)
diff --git a/resources/js/todo.js b/resources/js/todo.js
index 9b0fe64..53395ee 100644
--- a/resources/js/todo.js
+++ b/resources/js/todo.js
@@ -9,50 +9,91 @@ function ajoutTache() {
     return;
   }
 
-  // Créer un élément <div> pour la nouvelle tâche
-  var tacheDiv = document.createElement("div");
-  tacheDiv.className = "task"; //mise en forme css
+  console.log('Here')
 
-  // Créer une checkbox pour marquer la tâche comme terminée
-  var checkbox = document.createElement("input");
-  checkbox.type = "checkbox";
-  checkbox.onchange = function () {
-    toggleTaskCompletion(tacheDiv, checkbox);
-  };
-  tacheDiv.appendChild(checkbox);
+  // Envoyer la tâche au serveur
+  fetch('/todo', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
+    },
+    body: JSON.stringify({
+      task: tache
+    })
+  })
+  .then(response => response.json())
+  .then(todo => {
+    console.log(todo)
+    // Créer un élément <div> pour la nouvelle tâche
+    var tacheDiv = document.createElement("div");
+    tacheDiv.className = "task";
+    tacheDiv.dataset.id = todo.id;
 
-  // Créer un élément <span> pour afficher la tâche
-  var tacheSpan = document.createElement("span");
-  tacheSpan.textContent = tache; //récupère texte saisi dans la zone de texte tacheInput
-  tacheDiv.appendChild(tacheSpan); //pour afficher à la suite
+    // Créer une checkbox pour marquer la tâche comme terminée
+    var checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.onchange = function () {
+      toggleTaskCompletion(tacheDiv, checkbox);
+    };
+    tacheDiv.appendChild(checkbox);
 
-  // Ajouter un bouton "Supprimer"
-  var suppButton = document.createElement("button");
-  suppButton.textContent = "Supprimer";
-  suppButton.className = "supp";
-  suppButton.onclick = suppTache; // Associer la fonction de suppression
-  tacheDiv.appendChild(suppButton);
+    // Créer un élément <span> pour afficher la tâche
+    var tacheSpan = document.createElement("span");
+    tacheSpan.textContent = todo.task;
+    tacheDiv.appendChild(tacheSpan);
 
-  // Ajouter un bouton "Modifier"
-  var modifButton = document.createElement("button");
-  modifButton.textContent = "Modifier";
-  modifButton.className = "modif";
-  modifButton.onclick = function () {
-    modifTache(tacheDiv, tacheSpan);
-  };
-  tacheDiv.appendChild(modifButton);
+    // Ajouter un bouton "Supprimer"
+    var suppButton = document.createElement("button");
+    suppButton.textContent = "Supprimer";
+    suppButton.className = "supp";
+    suppButton.onclick = suppTache;
+    tacheDiv.appendChild(suppButton);
 
-  // Ajouter la tâche au conteneur
-  document.getElementById("listeTache").appendChild(tacheDiv);
+    // Ajouter un bouton "Modifier"
+    var modifButton = document.createElement("button");
+    modifButton.textContent = "Modifier";
+    modifButton.className = "modif";
+    modifButton.onclick = function () {
+      modifTache(tacheDiv, tacheSpan);
+    };
+    tacheDiv.appendChild(modifButton);
 
-  // Réinitialiser le champ de saisie
-  document.getElementById("tacheInput").value = "";
+    // Ajouter la tâche au conteneur
+    document.getElementById("listeTache").appendChild(tacheDiv);
+
+    // Réinitialiser le champ de saisie
+    document.getElementById("tacheInput").value = "";
+  })
+  .catch(error => {
+    console.error('Erreur:', error);
+    alert("Une erreur est survenue lors de l'ajout de la tâche.");
+  });
 }
 
 // Fonction pour supprimer une tâche
 function suppTache() {
   var tacheDiv = this.parentElement;
-  tacheDiv.remove();
+  var taskId = tacheDiv.dataset.id;
+
+  fetch('/todo/' + taskId, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
+    }
+  })
+  .then(response => {
+    if (response.ok) {
+      tacheDiv.remove();
+    } else {
+      throw new Error('Erreur lors de la suppression');
+    }
+  })
+  .catch(error => {
+    console.error('Erreur:', error);
+    alert("Une erreur est survenue lors de la suppression de la tâche.");
+  });
 }
 
 // Fonction pour marquer une tâche comme terminée (avec la checkbox)
diff --git a/resources/views/todo.blade.php b/resources/views/todo.blade.php
index 92a0222..f51b5e5 100644
--- a/resources/views/todo.blade.php
+++ b/resources/views/todo.blade.php
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
     <title>Document</title>
     @vite('resources/css/app.css')
     <link href="{{ asset('css/todo.css') }}" rel="stylesheet">
@@ -14,7 +15,16 @@
             <input class="border-2" type="text" id="tacheInput" placeholder="Ajouter une tâche...">
             <button onclick="ajoutTache()">Ajouter</button>
         </div>
-        <div id="listeTache" class="w-[30dvw] h-[70dvh] overflow-y-scroll"></div>
+        <div id="listeTache" class="w-[30dvw] h-[70dvh] overflow-y-scroll">
+            @foreach($todos as $todo)
+                <div class="task" data-id="{{ $todo->id }}">
+                    <input type="checkbox" onchange="toggleTaskCompletion(this.parentElement, this)">
+                    <span>{{ $todo->task }}</span>
+                    <button class="supp" onclick="suppTache.call(this)">Supprimer</button>
+                    <button class="modif" onclick="modifTache(this.parentElement, this.previousElementSibling.previousElementSibling)">Modifier</button>
+                </div>
+            @endforeach
+        </div>
     </div>
     <script src="{{ asset('js/todo.js')}}"></script>
 </body>
diff --git a/routes/web.php b/routes/web.php
index 5ad5fcb..bb73602 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -10,4 +10,6 @@ Route::get('/', [HomeController::class, 'index'])->name('route0');
 
 Route::get('/about', [AboutController::class, 'index'])->name('route1');
 
-Route::get('/todo', [TodoController::class, 'index'])->name('route2');
\ No newline at end of file
+Route::get('/todo', [TodoController::class, 'index'])->name('route2');
+Route::post('/todo', [TodoController::class, 'store'])->name('route3');
+Route::delete('/todo/{id}', [TodoController::class, 'destroy'])->name('route4');
\ No newline at end of file