From 99adfde2f535b770127cc6812768c678d3b74285 Mon Sep 17 00:00:00 2001 From: Dyze Date: Thu, 29 Aug 2024 22:08:27 +0200 Subject: [PATCH] More fields dealt with - image in progress... --- public/assets/scripts.js | 63 +++++++++++ public/assets/styles.css | 102 +++++++++++++----- .../Manage/ManageDVDController.php | 12 +++ src/Models/DVDModel.php | 7 ++ src/Models/GenreModel.php | 9 ++ src/Services/DVDService.php | 10 +- src/Utils/Components/ComponentsEnum.php | 3 +- .../FormAreaComponent/FormAreaComponent.php | 30 ++++++ .../FormAreaComponent.template.php | 11 ++ .../FormImageComponent/FormImageComponent.php | 32 ++++++ .../FormImageComponent.template.php | 11 ++ .../FormNumberComponent.php | 41 +++++++ .../FormNumberComponent.template.php | 12 +++ .../FormToggleComponent.php | 27 +++++ .../FormToggleComponent.template.php | 11 ++ src/Utils/ComponentsUtils.php | 37 +++++-- src/Utils/ImageUtils.php | 21 ++++ src/Views/Auth/Login/LoginView.style.css | 7 ++ .../Auth/Register/RegisterView.style.css | 11 ++ .../Auth/Register/RegisterView.template.php | 3 +- src/Views/Layout/LayoutView.template.php | 1 + .../DVD/Detail/ManageDVDDetailView.style.css | 41 +------ .../Detail/ManageDVDDetailView.template.php | 25 +++-- 23 files changed, 441 insertions(+), 86 deletions(-) create mode 100644 public/assets/scripts.js create mode 100644 src/Models/GenreModel.php create mode 100644 src/Utils/Components/FormAreaComponent/FormAreaComponent.php create mode 100644 src/Utils/Components/FormAreaComponent/FormAreaComponent.template.php create mode 100644 src/Utils/Components/FormImageComponent/FormImageComponent.php create mode 100644 src/Utils/Components/FormImageComponent/FormImageComponent.template.php create mode 100644 src/Utils/Components/FormNumberComponent/FormNumberComponent.php create mode 100644 src/Utils/Components/FormNumberComponent/FormNumberComponent.template.php create mode 100644 src/Utils/Components/FormToggleComponent/FormToggleComponent.php create mode 100644 src/Utils/Components/FormToggleComponent/FormToggleComponent.template.php create mode 100644 src/Utils/ImageUtils.php diff --git a/public/assets/scripts.js b/public/assets/scripts.js new file mode 100644 index 0000000..6bdd69b --- /dev/null +++ b/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); + }; +} \ No newline at end of file diff --git a/public/assets/styles.css b/public/assets/styles.css index f8b95a7..3e09763 100644 --- a/public/assets/styles.css +++ b/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; } \ No newline at end of file diff --git a/src/Controllers/Manage/ManageDVDController.php b/src/Controllers/Manage/ManageDVDController.php index f8ad31d..5378a03 100644 --- a/src/Controllers/Manage/ManageDVDController.php +++ b/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); diff --git a/src/Models/DVDModel.php b/src/Models/DVDModel.php index 255b85a..b132165 100644 --- a/src/Models/DVDModel.php +++ b/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; } } diff --git a/src/Models/GenreModel.php b/src/Models/GenreModel.php new file mode 100644 index 0000000..e0b27ea --- /dev/null +++ b/src/Models/GenreModel.php @@ -0,0 +1,9 @@ +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); diff --git a/src/Utils/Components/ComponentsEnum.php b/src/Utils/Components/ComponentsEnum.php index 076d1b7..eb5acdb 100644 --- a/src/Utils/Components/ComponentsEnum.php +++ b/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; } diff --git a/src/Utils/Components/FormAreaComponent/FormAreaComponent.php b/src/Utils/Components/FormAreaComponent/FormAreaComponent.php new file mode 100644 index 0000000..bd5c73a --- /dev/null +++ b/src/Utils/Components/FormAreaComponent/FormAreaComponent.php @@ -0,0 +1,30 @@ +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(); + } +} \ No newline at end of file diff --git a/src/Utils/Components/FormAreaComponent/FormAreaComponent.template.php b/src/Utils/Components/FormAreaComponent/FormAreaComponent.template.php new file mode 100644 index 0000000..7a79845 --- /dev/null +++ b/src/Utils/Components/FormAreaComponent/FormAreaComponent.template.php @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/src/Utils/Components/FormImageComponent/FormImageComponent.php b/src/Utils/Components/FormImageComponent/FormImageComponent.php new file mode 100644 index 0000000..e3db69d --- /dev/null +++ b/src/Utils/Components/FormImageComponent/FormImageComponent.php @@ -0,0 +1,32 @@ +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(); + } +} \ No newline at end of file diff --git a/src/Utils/Components/FormImageComponent/FormImageComponent.template.php b/src/Utils/Components/FormImageComponent/FormImageComponent.template.php new file mode 100644 index 0000000..5a43a1c --- /dev/null +++ b/src/Utils/Components/FormImageComponent/FormImageComponent.template.php @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/src/Utils/Components/FormNumberComponent/FormNumberComponent.php b/src/Utils/Components/FormNumberComponent/FormNumberComponent.php new file mode 100644 index 0000000..2fd5fd7 --- /dev/null +++ b/src/Utils/Components/FormNumberComponent/FormNumberComponent.php @@ -0,0 +1,41 @@ +name = $name; + $this->label = $label; + $this->value = $value; + $this->min = $min; + $this->max = $max; + $this->step = $step; + $this->required = $required; + $this->readOnly = $readOnly; + } + + public function getRenderedComponent() + { + ob_start(); + include "FormNumberComponent.template.php"; + return ob_get_clean(); + } +} \ No newline at end of file diff --git a/src/Utils/Components/FormNumberComponent/FormNumberComponent.template.php b/src/Utils/Components/FormNumberComponent/FormNumberComponent.template.php new file mode 100644 index 0000000..a92a765 --- /dev/null +++ b/src/Utils/Components/FormNumberComponent/FormNumberComponent.template.php @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/src/Utils/Components/FormToggleComponent/FormToggleComponent.php b/src/Utils/Components/FormToggleComponent/FormToggleComponent.php new file mode 100644 index 0000000..b49c221 --- /dev/null +++ b/src/Utils/Components/FormToggleComponent/FormToggleComponent.php @@ -0,0 +1,27 @@ +name = $name; + $this->label = $label; + $this->value = $value; + $this->required = $required; + $this->readOnly = $readOnly; + } + + public function getRenderedComponent() + { + ob_start(); + include "FormToggleComponent.template.php"; + return ob_get_clean(); + } +} diff --git a/src/Utils/Components/FormToggleComponent/FormToggleComponent.template.php b/src/Utils/Components/FormToggleComponent/FormToggleComponent.template.php new file mode 100644 index 0000000..0c9ffd5 --- /dev/null +++ b/src/Utils/Components/FormToggleComponent/FormToggleComponent.template.php @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/src/Utils/ComponentsUtils.php b/src/Utils/ComponentsUtils.php index d45c81f..e42aa29 100644 --- a/src/Utils/ComponentsUtils.php +++ b/src/Utils/ComponentsUtils.php @@ -4,20 +4,41 @@ { use Utils\Components\ComponentsEnum; + use Utils\Components\FormAreaComponent\FormAreaComponent; + use Utils\Components\FormImageComponent\FormImageComponent; + use Utils\Components\FormNumberComponent\FormNumberComponent; use Utils\Components\FormTextComponent\FormTextComponent; + use Utils\Components\FormToggleComponent\FormToggleComponent; class ComponentsUtils { - public static function getComponent(ComponentsEnum $componentType, string $name, string $label, ?string $placeholder = null, ?string $value = "", bool $required = true, bool $readOnly = false) + + public static function getTextComponent($name, $label, $placeholder, $value, $required, $readOnly):string + { + $comp = new FormTextComponent($name, $label, $placeholder, $value, $required, $readOnly); + return $comp->getRenderedComponent(); + } + public static function getAreaComponent($name, $label, $placeholder, $value, $required, $readOnly):string + { + $comp = new FormAreaComponent($name, $label, $placeholder, $value, $required, $readOnly); + return $comp->getRenderedComponent(); + } + public static function getToggleComponent($name, $label, $value, $required, $readOnly):string { - switch ($componentType) { - case ComponentsEnum::FormText: - $textComponent = new FormTextComponent($name, $label, $placeholder, $value, $required, $readOnly); - return $textComponent->getRenderedComponent(); - default: - return ""; - } + $comp = new FormToggleComponent($name, $label, $value, $required, $readOnly); + return $comp->getRenderedComponent(); } + public static function getNumberComponent($name, $label, $value, $min, $max, $step, $required, $readOnly):string + { + $comp = new FormNumberComponent($name, $label, $value, $min, $max, $step, $required, $readOnly); + return $comp->getRenderedComponent(); + } + public static function getImageComponent($name, $label, $value, $valueBase64, $imgType, $required, $readOnly):string + { + $comp = new FormImageComponent($name, $label, $value, $valueBase64, $imgType, $required, $readOnly); + return $comp->getRenderedComponent(); + } + } } diff --git a/src/Utils/ImageUtils.php b/src/Utils/ImageUtils.php new file mode 100644 index 0000000..7faaaf2 --- /dev/null +++ b/src/Utils/ImageUtils.php @@ -0,0 +1,21 @@ + "image/jpeg", + "89504e47" => "image/png", + "47494638" => "image/gif", + "424d" => "image/bmp", + default => null, + }; + } +} \ No newline at end of file diff --git a/src/Views/Auth/Login/LoginView.style.css b/src/Views/Auth/Login/LoginView.style.css index 5e4d9ca..7bedc2f 100644 --- a/src/Views/Auth/Login/LoginView.style.css +++ b/src/Views/Auth/Login/LoginView.style.css @@ -2,4 +2,11 @@ display: flex; align-items: center; flex-direction: column; + gap: 10px; + padding: 20px; + background-color: #2E3440; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + margin: auto; } + diff --git a/src/Views/Auth/Register/RegisterView.style.css b/src/Views/Auth/Register/RegisterView.style.css index e69de29..996f136 100644 --- a/src/Views/Auth/Register/RegisterView.style.css +++ b/src/Views/Auth/Register/RegisterView.style.css @@ -0,0 +1,11 @@ +.sub-page { + display: flex; + align-items: center; + flex-direction: column; + gap: 10px; + padding: 20px; + background-color: #2E3440; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + margin: auto; +} \ No newline at end of file diff --git a/src/Views/Auth/Register/RegisterView.template.php b/src/Views/Auth/Register/RegisterView.template.php index f0330e7..d3a7353 100644 --- a/src/Views/Auth/Register/RegisterView.template.php +++ b/src/Views/Auth/Register/RegisterView.template.php @@ -22,7 +22,8 @@ case RegisterViewStateEnum::InProgress: default: ?> -
+ +

Register here!