Refactored to use a more modular approach

admin/categories.php

@@ -1,53 +1,6 @@
 <?php
 $relativePath = "../";
-require_once $relativePath . 'classes/dao.php';
 
-$dao = new Dao();
-
-$categories = $dao->get_categories();
-
-ob_start();
-?>
-<div class="admin-container">
-
-    <a href="index.php">
-        <button class="btn btn-primary btn-large">Retour</button>
-    </a>
-
-    <h1 class="text-center">Gestion des Catégories</h1>
-
-    <div style="display: flex">
-        <button class="btn btn-success" style="margin: auto" onclick="listManager.showEditPopup(-1)">
-            <i class="mdi mdi-plus"></i>
-        </button>
-    </div>
-
-    <ul id="dataList">
-
-    </ul>
-
-    <script type="text/javascript">
-        let json_dump = <?php echo json_encode($categories); ?>;
-    </script>
-
-
-</div>
-
-<link type="text/css" rel="stylesheet" href="https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css"
-      media="screen,projection"/>
-<link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/admin.css" media="screen,projection"/>
-<link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/categories.css" media="screen,projection"/>
-
-
-<?php
-$pageContent = ob_get_clean();
 $pageTitle = "Gestion des catégories";
-$pageScripts =
+$script = "<script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/categories.js\"></script>";
-    "
+include("template.php");
-    <script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/jquery-confirm-defaults.js\"></script>
-    <script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/saveManager.js\"></script>
-    <script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/listManager.js\"></script>
-    <script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/categories.js\"></script>
-    ";
-include($relativePath . "includes/template.php");
-?>

admin/save_manager.php

@@ -1,39 +1,10 @@
 <?php
 $relativePath = "../";
-require_once $relativePath . 'classes/dao.php';
+require_once $relativePath.'classes/postHandler.php';
 
 $rest_json = file_get_contents("php://input");
 $_POST = json_decode($rest_json, true);
 
+$handler = new PostHandler($_POST, $_FILES);
 
-//var_dump($_POST);
+echo json_encode($handler->do_action());
-$result = -1;
-$status = 0;
-$message = "Success";
-
-$dao = new Dao();
-
-if ($_POST["function"] == "create_category")
-    $result = $dao->create_category($_POST["data"]);
-else if ($_POST["function"] == "update_category") {
-    $result = $dao->update_category($_POST["data"]);
-} else if ($_POST["function"] == "remove_category")
-    $result = $dao->remove_category($_POST["data"]);
-else {
-    $status = 1;
-    $message = "Error: Unknown function";
-}
-
-if ($result < 0) {
-    $status = 2;
-    $message = "Error: SQL error";
-}
-
-$array = array(
-    "status" => $status,
-    "message" => $message,
-    "data" => $result,
-);
-
-echo json_encode($array);
-

admin/stock.php

@@ -82,7 +82,7 @@ ob_start();
     <h2 class="text-center">Fichier de stock V2 non trouvé</h2>
         <div style="display: flex; margin-top: 50px; margin-bottom: 50px">
             <button class="btn btn-success btn-lg" style="margin: auto"
-                    onclick="SaveManager.convertToV2()">
+                    onclick="AjaxManager.convertToV2()">
                 Convertir le stock existant en V2
             </button>
         </div>
@@ -118,6 +118,6 @@ ob_start();
 <?php
 $pageContent = ob_get_clean();
 $pageTitle = "Gestion du stock";
-$pageScripts = "<script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/saveManager.js\"></script><script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/stock.js\"></script>";
+$pageScripts = "<script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/ajaxManager.js\"></script><script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/stock.js\"></script>";
 include($relativePath . "includes/template.php");
 ?>

admin/template.php

@@ -0,0 +1,44 @@
+<?php
+$relativePath = "../";
+
+ob_start();
+?>
+<div class="admin-container">
+
+    <a href="index.php">
+        <button class="btn btn-primary btn-large">Retour</button>
+    </a>
+
+    <h1 class="text-center"><?= $pageTitle ?></h1>
+
+    <div style="display: flex">
+        <button class="btn btn-success" style="margin: auto" onclick="listManager.showEditPopup(-1)">
+            <i class="mdi mdi-plus"></i>
+        </button>
+    </div>
+
+    <div id="listContainer">
+        <ul id="dataList">
+
+        </ul>
+    </div>
+
+</div>
+
+<link type="text/css" rel="stylesheet" href="https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css"
+      media="screen,projection"/>
+<link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/admin.css" media="screen,projection"/>
+<link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/categories.css" media="screen,projection"/>
+
+
+<?php
+$pageContent = ob_get_clean();
+$pageScripts =
+    "
+    <script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/jquery-confirm-defaults.js\"></script>
+    <script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/ajaxManager.js\"></script>
+    <script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/listManager.js\"></script>
+    ";
+$pageScripts .= $script;
+include($relativePath . "includes/template.php");
+?>

assets/css/categories.css

@@ -1,5 +1,7 @@
 #dataList {
     list-style: none;
+    margin: auto;
+    padding: 0;
 }
 
 #dataList li {
@@ -9,6 +11,7 @@
     display: flex;
     cursor: pointer;
     transition: 0.2s;
+    padding: 0 20px 0 20px;
 }
 
 #dataList li:hover {
@@ -20,6 +23,11 @@
     display: flex;
 }
 
+#listContainer {
+    display: flex;
+    margin: 20px 0 20px 0;
+}
+
 .mdi {
     font-size: 2rem;
 }

assets/js/ajaxManager.js

@@ -0,0 +1,57 @@
+
+class AjaxManager {
+
+    static async getCategories() {
+        let data = {
+            type: 'category',
+            action: 'get',
+        };
+        let response = await $.ajax({
+            type: "POST",
+            url: "save_manager.php",
+            data: JSON.stringify(data),
+            dataType: "json",
+            contentType: "application/json; charset=utf-8",
+        });
+        console.log(response);
+        return response['data'];
+    }
+
+    static async deleteCategory(id) {
+        let data = {
+            type: 'category',
+            action: 'remove',
+            data: id,
+        };
+        let response = await $.ajax({
+            type: "POST",
+            url: "save_manager.php",
+            data: JSON.stringify(data),
+            dataType: "json",
+            contentType: "application/json; charset=utf-8",
+        });
+        console.log(response);
+        return response['status'];
+    }
+
+    static async saveCategory(category, isNew) {
+        let data = {
+            type: 'category',
+            action: isNew ? 'create' : 'update',
+            data: category,
+        };
+
+        let response = await $.ajax({
+            type: "POST",
+            url: "save_manager.php",
+            data: JSON.stringify(data),
+            dataType: "json",
+            contentType: "application/json; charset=utf-8",
+        });
+        console.log(response);
+        return response['data'];
+    }
+}
+
+
+

assets/js/categories.js

@@ -1,11 +1,7 @@
-// let listContainer = $("#dataList");
-// let currentTypes = [];
-// let displayedTypes = [];
-
 let listManager;
 
 $(document).ready(function () {
-    listManager = new ListManager($("#dataList"), json_dump,
+    listManager = new ListManager($("#dataList"), 'category',
         [
             {
                 name: 'icon',
@@ -19,125 +15,3 @@ $(document).ready(function () {
             },
         ]);
 });
-//
-// function initValuesFromPHPDump() {
-//     currentTypes = json_dump;
-//     console.log(currentTypes);
-//
-// }
-//
-// $(document).ready(function () {
-//     initValuesFromPHPDump();
-//     generateList();
-//     console.log(displayedTypes);
-// });
-//
-// function generateList() {
-//     for (let i = 0; i < currentTypes.length; i++) {
-//         createNewListEntry(currentTypes[i]);
-//     }
-// }
-//
-// function createNewListEntry(type) {
-//     displayedTypes.push(
-//         $("<li id='listItem_" + type["id"] + "' onclick='showEditPopup(" + displayedTypes.length + ")'>" +
-//         "<div>" +
-//         "<span class='category-icon'><i class='mdi mdi-" + type["icon"] + "'></i></span>" +
-//         "<span class='category-title'>" + type["name"] + "</span>" +
-//         "</div>" +
-//         "</li>"));
-//     listContainer.append(displayedTypes[displayedTypes.length - 1]);
-// }
-//
-// function deleteListEntry(id) {
-//     $('#listItem_' + id).remove();
-// }
-//
-//
-// function showEditPopup(index) {
-//     let defaultValues = {
-//         name: "",
-//         icon: ""
-//     };
-//     let title = "Créer une catégorie";
-//     if (index !== -1) {
-//         defaultValues = currentTypes[index];
-//         title = "Modifier la catégorie";
-//     }
-//     $.confirm({
-//         title: title,
-//         content:
-//             '<form action="" class="categoryForm">' +
-//             '<div class="form-group">' +
-//             '<label for="nameInput">Nom :</label>' +
-//             '<input id="nameInput" type="text" placeholder="Nom" class="name-input form-control" value="' + defaultValues['name'] + '" required />' +
-//             '<label for="iconInput">Icone :</label>' +
-//             '<input id="iconInput" type="text" placeholder="icone" class="icon-input form-control" value="' + defaultValues['icon'] + '" required />' +
-//             '</div>' +
-//             '</form>',
-//         buttons: {
-//             formSubmit: {
-//                 text: 'Sauvegarder',
-//                 btnClass: 'btn-blue',
-//                 action: async function () {
-//                     let name = this.$content.find('#nameInput').val();
-//                     let icon = this.$content.find('#iconInput').val();
-//                     if (!name) {
-//                         $.alert('Merci de donner un nom');
-//                         return false;
-//                     } else if (!icon) {
-//                         $.alert('Merci de donner une icone');
-//                         return false;
-//                     }
-//                     let itemToSave;
-//                     if (index !== -1) {
-//                         currentTypes[index]['name'] = name;
-//                         currentTypes[index]['icon'] = icon;
-//                         itemToSave = currentTypes[index];
-//                         displayedTypes[index].find(".category-title").text(name);
-//                         displayedTypes[index].find(".mdi")[0].className = "mdi mdi-" + icon;
-//                     } else {
-//                         itemToSave = {
-//                             name: name,
-//                             icon: icon,
-//                             display_order: 0,
-//                         };
-//                     }
-//                     let id = await SaveManager.saveCategory(itemToSave, index === -1);
-//                     if (id >= 0 && index === -1) {
-//                         itemToSave = {
-//                             name: name,
-//                             icon: icon,
-//                             display_order: 0,
-//                             id: id
-//                         };
-//                         currentTypes[displayedTypes.length] = itemToSave;
-//                         createNewListEntry(itemToSave);
-//                     }
-//                 }
-//             },
-//             deleteButton: {
-//                 text: 'Supprimer',
-//                 btnClass: 'btn-red',
-//                 isHidden: index === -1,
-//                 action: function () {
-//                     let id = currentTypes[index]['id'];
-//                     SaveManager.deleteCategory(id);
-//                     deleteListEntry(id);
-//                 }
-//             },
-//             cancelButton: {
-//                 text: 'Annuler',
-//             },
-//         },
-//         onContentReady: function () {
-//             // bind to events
-//             let jc = this;
-//             this.$content.find('form').on('submit', function (e) {
-//                 // if the user submits the form by pressing enter in the field.
-//                 e.preventDefault();
-//                 jc.$$formSubmit.trigger('click'); // reference the button and click it
-//             });
-//         }
-//     });
-// }

assets/js/listManager.js

@@ -1,28 +1,31 @@
-
 class ListManager {
 
-    currentTypes = [];
+    currentData = [];
-    displayedTypes = [];
+    displayedData = [];
     editableTypes = [];
 
-    constructor(listContainer, initialData, editableTypes) {
+    constructor(listContainer, type, editableTypes) {
         this.listContainer = listContainer;
-        this.currentTypes = initialData;
         this.editableTypes = editableTypes;
-        this.generateList();
+        if (type === 'category') {
+            AjaxManager.getCategories().then((data) => {
+                this.currentData = data;
+                this.generateList()
+            });
+        }
     }
 
     generateList() {
-        for (let i = 0; i < this.currentTypes.length; i++) {
+        for (let i = 0; i < this.currentData.length; i++) {
-            this.createNewListEntry(this.currentTypes[i]);
+            this.createNewListEntry(this.currentData[i]);
         }
     }
 
     createNewListEntry(item) {
         let listItem = this.getListItem(item);
-        this.displayedTypes.push($(listItem));
+        this.displayedData.push($(listItem));
-        const index = this.displayedTypes.length-1;
+        const index = this.displayedData.length - 1;
-        let JQueryItem = this.displayedTypes[index];
+        let JQueryItem = this.displayedData[index];
         this.listContainer.append(JQueryItem);
         JQueryItem.on('click', () => {
             this.showEditPopup(index);
@@ -51,7 +54,14 @@ class ListManager {
         for (let i = 0; i < this.editableTypes.length; i++) {
             let inputId = this.editableTypes[i]['name'] + 'Input';
             let value = defaultValues[this.editableTypes[i]['name']];
-            formData += '<label for="' + inputId + '">' + this.editableTypes[i]['description'] + ' :</label>' +
+            let icon = '';
+            if (this.editableTypes[i]['name'] === 'icon') {
+                icon = "<i class='mdi mdi-" + value + "' style='margin-left: 5px'></i>";
+                let onchangeCallback = function (value) {
+                    console.log($(icon));
+                }
+            }
+            formData += '<label for="' + inputId + '">' + this.editableTypes[i]['description'] + ' :</label>' + icon +
                 '<input id="' + inputId + '" type="text" placeholder="Entrez une valeur" class="form-control" value="' + value + '" required />';
         }
         formData += "</div></form>";
@@ -87,9 +97,9 @@ class ListManager {
     updateListItem(values, index) {
         for (let i = 0; i < values.length; i++) {
             if (this.editableTypes[i]['type'] === 'icon')
-                this.displayedTypes[index].find(".mdi")[0].className = "mdi mdi-" + values[i];
+                this.displayedData[index].find(".mdi")[0].className = "mdi mdi-" + values[i];
             else
-                this.displayedTypes[index].find(".list-" + this.editableTypes[i]['name']).text(values[i]);
+                this.displayedData[index].find(".list-" + this.editableTypes[i]['name']).text(values[i]);
         }
     }
 
@@ -100,7 +110,7 @@ class ListManager {
         };
         let title = "Créer une nouvelle entrée";
         if (index !== -1) {
-            defaultValues = this.currentTypes[index];
+            defaultValues = this.currentData[index];
             title = "Modifier l'entrée";
         }
         let formData = this.getFormData(defaultValues);
@@ -118,22 +128,24 @@ class ListManager {
                             $.alert('Merci de rentrer toutes les valeurs');
                             return false;
                         }
-                        let itemToSave =  {};
+                        let itemToSave = {};
                         if (index !== -1) {
-                            itemToSave = thisInstance.currentTypes[index];
+                            itemToSave = thisInstance.currentData[index];
                         }
 
                         itemToSave = thisInstance.insertFormDataIntoObject(values, itemToSave);
 
                         if (index !== -1) {
-                            thisInstance.currentTypes[index] = itemToSave;
+                            thisInstance.currentData[index] = itemToSave;
                             thisInstance.updateListItem(values, index);
                         }
-                        let id = await SaveManager.saveCategory(itemToSave, index === -1);
+                        let id = await AjaxManager.saveCategory(itemToSave, index === -1);
                         if (id >= 0 && index === -1) {
                             itemToSave["id"] = id;
-                            thisInstance.currentTypes[thisInstance.displayedTypes.length] = itemToSave;
+                            thisInstance.currentData[thisInstance.displayedData.length] = itemToSave;
                             thisInstance.createNewListEntry(itemToSave);
+                        } else if (id === -1) {
+                            $.alert("Erreur serveur !");
                         }
                     }
                 },
@@ -142,9 +154,7 @@ class ListManager {
                     btnClass: 'btn-red',
                     isHidden: index === -1,
                     action: function () {
-                        let id = thisInstance.currentTypes[index]['id'];
+                        thisInstance.showDeleteConfirmation(index);
-                        SaveManager.deleteCategory(id);
-                        thisInstance.deleteListEntry(id);
                     }
                 },
                 cancelButton: {
@@ -163,5 +173,29 @@ class ListManager {
         });
     }
 
+    showDeleteConfirmation(index) {
+        let thisInstance = this;
+        $.confirm({
+            title: "Confirmation",
+            content: "Êtes vous sûr de vouloir supprimer cette entrée ?",
+            buttons: {
+                deleteButton: {
+                    text: 'Confirmer',
+                    btnClass: 'btn-red',
+                    action: async function () {
+                        let id = thisInstance.currentData[index]['id'];
+                        let status = await AjaxManager.deleteCategory(id);
+                        if (status === 0)
+                            thisInstance.deleteListEntry(id);
+                        else
+                            $.alert("Erreur serveur !");
+                    }
+                },
+                cancelButton: {
+                    text: 'Annuler',
+                },
+            }
+        });
+    }
 
 }

assets/js/saveManager.js

@@ -1,42 +0,0 @@
-
-class SaveManager {
-
-    static deleteCategory(id) {
-        let data = {
-            function: "remove_category",
-            data: id,
-        };
-        console.log(data);
-        $.ajax({
-            type: "POST",
-            url: "save_manager.php",
-            data: JSON.stringify(data),
-            dataType: "json",
-            contentType: "application/json; charset=utf-8",
-            complete: function (data) {
-                $.alert(data.responseText);
-                console.log(data);
-            },
-        });
-    }
-
-    static async saveCategory(category, isNew) {
-        let data = {
-            function: isNew ? "create_category" : "update_category",
-            data: category,
-        };
-
-        let response = await $.ajax({
-            type: "POST",
-            url: "save_manager.php",
-            data: JSON.stringify(data),
-            dataType: "json",
-            contentType: "application/json; charset=utf-8",
-        });
-        console.log(response);
-        return response['data'];
-    }
-}
-
-
-

assets/js/stock.js

@@ -189,7 +189,7 @@ function isItemInputFilled() {
 
 
 function saveDataset() {
-    SaveManager.saveData(currentTypes, currentDataset);
+    AjaxManager.saveData(currentTypes, currentDataset);
 }
 
 function sanitizeString(str) {

classes/dao.php

@@ -78,6 +78,10 @@ class Dao
         $sql = 'DELETE FROM categories WHERE id=?';
         $cursor = $this->conn->prepare($sql);
         $data = [$id];
-        return $cursor->execute($data);
+        $result = $cursor->execute($data);
+        if ($result)
+            return $cursor->rowCount();
+        else
+            return 0;
     }
 }

classes/postHandler.php

@@ -0,0 +1,157 @@
+<?php
+require_once 'dao.php';
+
+class PostHandler
+{
+    private $valid_types = ["article", "category"];
+    private $valid_actions = ["create", "update", "remove", "get"];
+
+    private $action;
+    private $type;
+    private $postData;
+    private $filesData;
+    private $data;
+    private $dao;
+    private $uploadBaseDir = '../../uploaded_images/';
+
+    private $responseArray = array(
+        "status" => 0,
+        "message" => "Success",
+        "data" => "",
+    );
+
+    public function __construct($post, $files)
+    {
+        $this->filesData = $files;
+        $this->action = $this->get_action($post);
+        $this->type = $this->get_type($post);
+        $this->data = $this->get_data($post);
+        $this->postData = $post;
+        $this->dao = new Dao();
+    }
+
+    public function do_action()
+    {
+        $result = -1;
+        if (count($this->data) > 0) {
+            if ($this->action == "create")
+                $result = $this->create();
+            else if ($this->action == "update")
+                $result = $this->update();
+            else if ($this->action == "remove")
+                $result = $this->remove();
+            else
+                $this->setUnknownActionResponse();
+        } else if ($this->action == "get")
+            $result = $this->get();
+        else
+            $this->setUnknownDataResponse();
+
+        if ($this->responseArray["status"] == 0 && $result < 0) {
+            $this->setProcessingErrorResponse();
+            $result = -1;
+        }
+        $this->responseArray["data"] = $result;
+        return $this->responseArray;
+    }
+
+    function create()
+    {
+        $result = -1;
+        if ($this->type == "article") {
+
+        } else if ($this->type == "category") {
+            $result = $this->dao->create_category($this->data);
+        } else
+            $this->setUnknownTypeResponse();
+        return $result;
+    }
+
+    function update()
+    {
+        $result = -1;
+        if ($this->type == "article") {
+
+        } else if ($this->type == "category") {
+            $result = $this->dao->update_category($this->data);
+        } else
+            $this->setUnknownTypeResponse();
+        return $result;
+    }
+
+    function remove()
+    {
+        $result = -1;
+        if ($this->type == "article") {
+
+        } else if ($this->type == "category") {
+            $result = $this->dao->remove_category($this->data);
+        } else
+            $this->setUnknownTypeResponse();
+        if ($result == 0)
+            return -1;
+        else
+            return 1;
+    }
+
+    function get()
+    {
+        $result = -1;
+        if ($this->type == "article") {
+
+        } else if ($this->type == "category") {
+            $result = $this->dao->get_categories();
+        } else
+            $this->setUnknownTypeResponse();
+        return $result;
+    }
+
+    function setUnknownTypeResponse()
+    {
+        $this->responseArray["status"] = 1;
+        $this->responseArray["message"] = "Error: Unknown type";
+    }
+
+    function setUnknownActionResponse()
+    {
+        $this->responseArray["status"] = 2;
+        $this->responseArray["message"] = "Error: Unknown action";
+    }
+
+    function setUnknownDataResponse()
+    {
+        $this->responseArray["status"] = 3;
+        $this->responseArray["message"] = "Error: Unknown data";
+    }
+
+    function setProcessingErrorResponse()
+    {
+        $this->responseArray["status"] = 4;
+        $this->responseArray["message"] = "Error: Data processing error";
+    }
+
+    private function get_action($inputData)
+    {
+        if (!in_array($inputData["action"], $this->valid_actions))
+            return "";
+        else
+            return $inputData["action"];
+    }
+
+    private function get_type($inputData)
+    {
+        if (!in_array($inputData["type"], $this->valid_types))
+            return "";
+        else
+            return $inputData["type"];
+    }
+
+    private function get_data($inputData)
+    {
+        if ($inputData["data"] == null)
+            return [];
+        else
+            return $inputData["data"];
+    }
+
+}