More fields dealt with - image in progress...

public/assets/scripts.js

@@ -0,0 +1,63 @@
+function checkboxHelper(checkbox)
+{
+    checkbox.value = checkbox.checked;
+}
+
+function fileHelper(inputId, imgType, e)
+{
+    if(e.target.files && e.target.files[0] && e.target.files[0].size < 5242880) {
+        const reader = new FileReader();
+        reader.onload = evt => {
+            resizeImage(evt.target.result, imgType, 512, 1024, (r) => document.getElementById(inputId).value = r)
+        }
+        reader.readAsText(e.target.files[0]);
+    }
+    else
+    {
+        alert("Impossible de d'envoyer l'image.")
+    }
+}
+
+function resizeImage(imgBytes, imgType, maxWidth, maxHeight, cb)
+{
+    const blob = new Blob([byteArray]);
+
+    const img = new Image();
+    const url = URL.createObjectURL(blob);
+
+    img.onload = () => {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        let width = img.width;
+        let height = img.height;
+
+        if (width > height) {
+            if (width > maxWidth) {
+                height *= maxWidth / width;
+                width = maxWidth;
+            }
+        } else {
+            if (height > maxHeight) {
+                width *= maxHeight / height;
+                height = maxHeight;
+            }
+        }
+
+        canvas.width = width;
+        canvas.height = height;
+
+        ctx.drawImage(img, 0, 0, width, height);
+
+        canvas.toBlob((resizedBlob) => {
+            const reader = new FileReader();
+            reader.onload = function(event) {
+                const resizedByteArray = new Uint8Array(event.target.result);
+                cb(resizedByteArray);
+            };
+            reader.readAsArrayBuffer(resizedBlob);
+        }, imgType);
+
+        URL.revokeObjectURL(url);
+    };
+}

public/assets/styles.css

@@ -33,51 +33,93 @@ form {
     width: 100%;
     max-width: 400px;
 }
+button {
+    background: #81A1C1;
+    color: #FFFFFF;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+    align-self: flex-end;
+}
 
 label {
-    font-size: 16px;
-    color: #E0E0E0;
+
     display: flex;
+    align-items: center;
     flex-direction: column;
-    gap: 5px;
+    font-size: 14px;
+    margin-bottom: 5px;
+    gap: 10px;
+    color: #D8DEE9;
 }
 
-input[type="text"], input[type="email"], input[type="password"], input[type="submit"] {
-    width: 100%;
-    height: 40px;
-    padding: 10px;
+input[type="text"],
+input[type="email"],
+input[type="password"],
+textarea {
+    background: #434C5E;
     border: none;
-    border-radius: 25px;
-    background: linear-gradient(145deg, #1C1F36, #343A59);
-    color: #FFFFFF;
-    text-align: center;
-    font-size: 16px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: background 0.3s ease, box-shadow 0.3s ease;
+    border-radius: 5px;
+    padding: 10px;
+    color: #ECEFF4;
+    font-size: 14px;
+    width: 100%;
+    box-sizing: border-box;
+    transition: background 0.3s ease;
 }
 
-input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="submit"]:focus {
-    background: linear-gradient(145deg, #10abff, #1beabd);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+textarea:focus {
+    background: #4C566A;
     outline: none;
 }
 
-::placeholder {
-    color: #B3B3B3;
-    text-align: center;
-    opacity: 0.7;
+input[type="number"] {
+    background: #434C5E;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    color: #ECEFF4;
+    font-size: 14px;
+    width: 100%;
+    box-sizing: border-box;
+    transition: background 0.3s ease;
+}
+
+input[type="number"]:focus {
+    background: #4C566A;
+    outline: none;
 }
 
-input[type="submit"] {
+input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    appearance: none;
+    background-color: #434C5E;
+    border: 2px solid #4C566A;
+    border-radius: 4px;
     cursor: pointer;
-    background: linear-gradient(145deg, #1beabd, #10abff);
-    color: #ffffff;
-    font-weight: bold;
-    text-transform: uppercase;
+    position: relative;
+    transition: background-color 0.3s ease;
+}
+
+input[type="checkbox"]:checked {
+    background-color: #81A1C1;
 }
 
-input[type="submit"]:hover {
-    background: linear-gradient(145deg, #10abff, #1beabd);
+input[type="checkbox"]:checked::before {
+    content: '✔';
+    font-size: 14px;
+    color: #ECEFF4;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 
@@ -102,4 +144,8 @@ a
     color: #B3B3B3;
     text-decoration: underline;
     cursor: pointer;
+}
+
+::placeholder {
+    color: #b6b6b6;
 }

src/Controllers/Manage/ManageDVDController.php

@@ -13,6 +13,7 @@
     use Models\ViewModels\ManageDVDDetailViewStateEnum;
     use Models\ViewModels\ManageDVDListViewModel;
     use Services\DVDService;
+    use Utils\ImageUtils;
     use Utils\PHPUtils;
     use Views\Manage\DVD\Detail\ManageDVDDetailView;
     use Views\Manage\DVD\List\ManageDVDListView;
@@ -64,6 +65,8 @@ private function getById($id): void
             $service = DVDService::getInstance();
 
             $viewModel->DVD = $service->getById($id);
+            //$viewModel->DVD->ImageBase64 = base64_encode($viewModel->DVD->Image);
+            //$viewModel->DVD->ImageSignature = ImageUtils::getImageTypeFromSignature($viewModel->DVD->Image);
             $viewModel->state = ManageDVDDetailViewStateEnum::Update;
 
             $controller = new ManageDVDDetailView($viewModel);
@@ -85,6 +88,15 @@ public function put($id): void
             $model->LocalTitle = $_POST["LocalTitle"];
             $model->Synopsis = $_POST["Synopsis"];
             $model->Notation = $_POST["Notation"];
+            $model->Certification = $_POST["Certification"];
+            $model->Note = $_POST["Note"];
+            $model->IsOffered = $_POST["IsOffered"];
+            $model->Quantity = $_POST["Quantity"];
+            $model->Price = $_POST["Price"];
+            $model->Year = $_POST["Year"];
+            $model->TypeId = !is_null($_POST["TypeId"]) ? intval($_POST["TypeId"]) : null;
+            $model->Genres = $_POST["Genres"] && is_array($_POST["Genres"]) ? $_POST["Genres"] : null;
+            $model->Image = $_POST["Image"];
 
             $service->update($model);
 

src/Models/DVDModel.php

@@ -15,6 +15,13 @@ class DVDModel
         public ?int $Quantity;
         public ?float $Price;
         public ?int $Year;
+        public ?string $Image;
+        public ?int $TypeId;
+        public ?string $Type;
+        public ?string $ImageBase64;
+        public ?string $ImageSignature;
+
+        public ?array $Genres;
     }
 }
 

src/Models/GenreModel.php

@@ -0,0 +1,9 @@
+<?php
+
+namespace Models;
+
+class GenreModel
+{
+    public int $Id;
+    public string $Name;
+}

src/Services/DVDService.php

@@ -92,7 +92,7 @@ public function getById($id):?DVDModel
         {
             $result = array();
             $queryBuilder = (new QueryBuilder())
-                ->select(["Id", "Title", "LocalTitle", "Synopsis", "Notation", "Note", "Certification", "IsOffered", "Quantity", "Price", "Year"])
+                ->select(["Id", "Title", "LocalTitle", "Synopsis", "Notation", "Note", "Certification", "IsOffered", "Quantity", "Price", "Year", "Image", "TypeId"])
                 ->from("dvds")
                 ->where("Id", "=", $id);
 
@@ -116,6 +116,14 @@ public function update(DVDModel $dvd)
                 ->set("LocalTitle", $dvd->LocalTitle)
                 ->set("Synopsis", $dvd->Synopsis)
                 ->set("Notation", $dvd->Notation)
+                ->set("Certification", $dvd->Certification)
+                ->set("Note", $dvd->Note)
+                ->set("IsOffered", $dvd->IsOffered)
+                ->set("Quantity", $dvd->Quantity)
+                ->set("Price", $dvd->Price)
+                ->set("Year", $dvd->Year)
+                ->set("Image", $dvd->Image)
+                ->set("TypeId", $dvd->TypeId)
 
                 ->where("Id", "=", $dvd->Id);
 

src/Utils/Components/ComponentsEnum.php

@@ -5,9 +5,10 @@
     enum ComponentsEnum
     {
         case FormText;
+        case FormArea;
         case FormNumber;
         case FormSelect;
-        case FormRadio;
+        case FormToggle;
         case FormAutocomplete;
 
     }

src/Utils/Components/FormAreaComponent/FormAreaComponent.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace Utils\Components\FormAreaComponent;
+
+class FormAreaComponent
+{
+    public string $name;
+    public string $label;
+    public ?string $value;
+    public ?string $placeholder;
+    public bool $required;
+    public bool $readOnly;
+
+    public function __construct(string $name, string $label, ?string $placeholder = null, ?string $value = "", bool $required = true, bool $readOnly = false)
+    {
+        $this->name = $name;
+        $this->label = $label;
+        $this->value = $value;
+        $this->placeholder = $placeholder;
+        $this->required = $required;
+        $this->readOnly = $readOnly;
+    }
+
+    public function getRenderedComponent()
+    {
+        ob_start();
+        include "FormAreaComponent.template.php";
+        return ob_get_clean();
+    }
+}

src/Utils/Components/FormAreaComponent/FormAreaComponent.template.php

@@ -0,0 +1,11 @@
+<label>
+    <span><?php echo $this->label; ?></span>
+    <textarea
+           name="<?php echo $this->name; ?>"
+           placeholder="<?php echo $this->placeholder; ?>"
+           rows="10"
+           cols="100"
+        <?php echo $this->required?"required":""; ?>
+        <?php echo $this->readOnly?"readOnly":""; ?>
+    ><?php echo $this->value; ?></textarea>
+</label>

src/Utils/Components/FormImageComponent/FormImageComponent.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace Utils\Components\FormImageComponent;
+
+class FormImageComponent
+{
+    public string $name;
+    public string $label;
+    public ?string $value;
+    public ?string $base64Value;
+    public ?string $imgType;
+    public bool $required;
+    public bool $readOnly;
+
+    public function __construct(string $name, string $label, ?string $value, ?string $base64Value, ?string $imgType, bool $required = true, bool $readOnly = true)
+    {
+        $this->name = $name;
+        $this->label = $label;
+        $this->value = $value;
+        $this->base64Value = $base64Value;
+        $this->imgType = $imgType;
+        $this->required = $required;
+        $this->readOnly = $readOnly;
+    }
+
+    public function getRenderedComponent()
+    {
+        ob_start();
+        include "FormImageComponent.template.php";
+        return ob_get_clean();
+    }
+}

src/Utils/Components/FormImageComponent/FormImageComponent.template.php

@@ -0,0 +1,11 @@
+<label>
+    <span><?php echo $this->label; ?></span>
+    <textarea style="display: none;" id="<?php echo $this->name; ?>" name="<?php echo $this->name; ?>"><?php echo $this->value; ?></textarea>
+    <input type="file"
+           accept="image/*"
+           onchange="fileHelper('<?php echo $this->name; ?>', event)"
+           id="file-<?php echo $this->name; ?>"
+        <?php echo $this->required?"required":""; ?>
+    />
+    <img src="data:<?php echo $this->imgType; ?>;base64,<?php echo $this->base64Value; ?>" alt="Image preview"/>
+</label>