Allow file upload

2020-02-14 12:05:21 +01:00 · 2020-02-14 12:05:21 +01:00 · 3b50449d56
commit 3b50449d56
parent cf599f0ef9
8 changed files with 110 additions and 240 deletions
--- a/admin/form_ajax.php
+++ b/admin/form_ajax.php
@ -0,0 +1,7 @@
+<?php
+$relativePath = "../";
+require_once $relativePath.'classes/postHandler.php';
+
+$handler = new PostHandler($_POST, $_FILES);
+
+echo json_encode($handler->do_action());
--- a/admin/save_manager.php
+++ b/admin/save_manager.php
--- a/assets/css/categories.css
+++ b/assets/css/categories.css
@ -40,10 +40,13 @@
 .list-name {
    font-weight: bold;
    width: 150px;
+    height: 50px;
+    overflow: hidden;
 }

 .list-description {
    width: 200px;
+    height: 50px;
    overflow: hidden;
 }

@ -57,3 +60,8 @@
    width: 200px;
    text-align: right;
 }
+
+.list-image img  {
+    width: 50px;
+    height: 50px;
+}
--- a/assets/js/ajaxManager.js
+++ b/assets/js/ajaxManager.js
@ -15,7 +15,7 @@ class AjaxManager {
        };
        let response = await $.ajax({
            type: "POST",
-            url: "save_manager.php",
+            url: "json_ajax.php",
            data: JSON.stringify(data),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
@ -32,7 +32,7 @@ class AjaxManager {
        };
        let response = await $.ajax({
            type: "POST",
-            url: "save_manager.php",
+            url: "json_ajax.php",
            data: JSON.stringify(data),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
@ -49,7 +49,7 @@ class AjaxManager {
        };
        let response = await $.ajax({
            type: "POST",
-            url: "save_manager.php",
+            url: "json_ajax.php",
            data: JSON.stringify(formattedData),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
@ -57,6 +57,27 @@ class AjaxManager {
        console.log(response);
        return response['data'];
    }
+
+    static async saveArticleImage(image, id) {
+        if (image !== undefined) {
+            let formData = new FormData();
+            formData.append('type', 'image');
+            formData.append('data', id);
+            formData.append('image', image);
+            let response = await $.ajax({
+                type: "POST",
+                url: "form_ajax.php",
+                data: formData,
+                cache: false,
+                contentType: false,
+                processData: false,
+            });
+            response = JSON.parse(response);
+            console.log(response);
+            return response['status'];
+        } else
+            return 1;
+    }
 }


--- a/assets/js/articles.js
+++ b/assets/js/articles.js
@ -3,6 +3,11 @@ let listManager;
 $(document).ready(function () {
    listManager = new ListManager($("#dataList"), 'article',
        [
+            {
+                name: 'image',
+                description: 'Image',
+                type: 'image'
+            },
            {
                name: 'name',
                description: 'Nom',
--- a/assets/js/listManager.js
+++ b/assets/js/listManager.js
@ -84,6 +84,8 @@ class ListManager {
                listItem += "<i class='mdi mdi-" + item["icon"] + "' style='margin-right: 5px'></i></span>";
            else if (this.editableTypes[i]["type"] === 'checkboxes') {
                listItem += this.getCategoryIcons(item['id']);
+            } else if (this.editableTypes[i]["type"] === 'image') {
+                listItem += '<img src="../uploaded_images/' + item['id'] + '.jpg" /></span>'
            } else
                listItem += item[this.editableTypes[i]["name"]] + '</span>';
        }
@ -113,25 +115,43 @@ class ListManager {
    }

    getFormData(defaultValues) {
-        let formData = '<form action="" class="categoryForm"><div class="form-group">';
+        let formData = '<form id="popupForm" name="popupForm" method="post" enctype="multipart/form-data"><div class="form-group">';
        for (let i = 0; i < this.editableTypes.length; i++) {
            let inputId = this.editableTypes[i]['name'] + 'Input';
+            let inputName = this.editableTypes[i]['name'];
            let inputType = this.editableTypes[i]['type'] === 'number' ? 'number' : 'text';
            let value = defaultValues[this.editableTypes[i]['name']] !== undefined ? defaultValues[this.editableTypes[i]['name']] : '';
            let icon = '';
            formData += '<label for="' + inputId + '">' + this.editableTypes[i]['description'] + ' :</label>';
-            if (this.editableTypes[i]['type'] !== 'checkboxes') {
+            if (this.editableTypes[i]['type'] === 'image') {
+                formData += this.getImagePicker(defaultValues['id']);
+            } else if (this.editableTypes[i]['type'] === 'checkboxes') {
+                formData += this.getCategoryCheckboxes(defaultValues['id']);
+            } else {
                if (this.editableTypes[i]['name'] === 'icon')
                    formData += "<i class='mdi mdi-" + value + "' style='margin-left: 5px'></i>";
-                formData += '<input id="' + inputId + '" type="' + inputType + '" placeholder="Entrez une valeur" class="form-control" value="' + value + '" required />';
-            } else {
-                formData += this.getCategoryCheckboxes(defaultValues['id']);
+                formData += '<input name="' + inputName + '" id="' + inputId + '" type="' + inputType + '" placeholder="Entrez une valeur" class="form-control" value="' + value + '" required />';
+
            }
        }
        formData += "</div></form>";
        return formData;
    }

+    getImagePicker(id) {
+        return (
+            '<img style="width: 50px; height: 50px" src="../uploaded_images/' + id + '.jpg" id="image_' + id + '"/>' +
+            '<div class="custom-file">\n' +
+            '<input ' +
+            'type="file" ' +
+            'class="custom-file-input" ' +
+            'id="fileInput"' +
+            'accept="image/jpeg"' +
+            '>\n' +
+            '<label class="custom-file-label" for="customFile">Choose file</label>\n' +
+            '</div>');
+    }
+
    getFormValues(form) {
        let values = [];
        for (let i = 0; i < this.editableTypes.length; i++) {
@ -181,7 +201,7 @@ class ListManager {

    updateListItemCategories(categories, index) {
        if (index === -1)
-            index = this.displayedData.length -1;
+            index = this.displayedData.length - 1;
        let iconContainer = this.displayedData[index].find(".list-category");
        for (let i = 0; i < categories.length; i++) {
            iconContainer.html(this.getCategoryIcons(this.currentData[index]['id']));
@ -201,6 +221,10 @@ class ListManager {
        this.associationTable = newTable;
    }

+    updateArticleImage(image, index) {
+        $(this.displayedData[index].find("img")[0]).attr('src', window.URL.createObjectURL(image));
+    }
+
    showEditPopup(index) {
        let defaultValues = {};
        let title = "Créer une nouvelle entrée";
@ -218,6 +242,10 @@ class ListManager {
                    text: 'Sauvegarder',
                    btnClass: 'btn-blue',
                    action: async function () {
+                        let image = undefined;
+                        if (this.$content.find('input[type=file]').length > 0)
+                            image = this.$content.find('input[type=file]')[0].files[0];
+
                        let values = thisInstance.getFormValues(this.$content);

                        if (!thisInstance.isFormValid(values)) {
@ -253,6 +281,9 @@ class ListManager {
                            if (result) {
                                thisInstance.updateAssociationList(id, categories);
                                thisInstance.updateListItemCategories(categories, index);
+                                let imageResult = await AjaxManager.saveArticleImage(image, id);
+                                if (imageResult === 0)
+                                    thisInstance.updateArticleImage(image, index);
                            }
                        }
                    }
@ -268,15 +299,6 @@ class ListManager {
                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
-                });
            }
        });
    }
--- a/assets/js/stock.js
+++ b/assets/js/stock.js
@ -1,219 +0,0 @@
-let currentDataset = [];
-let currentTypes = [];
-
-function initValuesFromPHPDump() {
-    currentDataset = json_dump.articles; // json_dump is set using PHP
-    currentTypes = json_dump.types;
-    console.log(currentDataset);
-    console.log(currentTypes);
-    generateTable(currentDataset);
-}
-
-
-
-$(document).ready(function () {
-    if (json_dump !== undefined) {
-        initValuesFromPHPDump();
-        generateTypeCheckboxes();
-    }
-    setEditFieldValues('', '', '', '', '', '', '');
-});
-
-
-function generateTable(dataset) {
-    for (let i = 0; i < dataset.length; i++) {
-        generateLine(dataset[i]);
-    }
-}
-
-function generateLine(item) {
-    $.selector_cache('#stockTable').append(
-        '<tr id="row_' + item.code + '">' +
-        '<td>' + item.name + '</td>' +
-        '<td>' + item.description + '</td>' +
-        '<td>' + item.quantity + '</td>' +
-        '<td>' + item.price + '</td>' +
-        '<td>' + item.code + '</td>' +
-        '<td><span id="typeList_' + item.code + '"></span></td>' +
-        '<td><a href="' + item.image + '" target="_blank"><img class="row-img" src="' + item.image + '"/></a></td>' +
-        '<td>' +
-        '<button class="btn btn-danger" id="delete_' + item.code + '" onclick="deleteItem(this)"><i class="fas fa-times"></i></button>' +
-        '<button class="btn btn-primary" id="edit_' + item.code + '" onclick="editItem(this)"><i class="fas fa-edit"></i></button>' +
-        '</td>' +
-        '</tr>'
-    );
-    // Fill in the type cell
-    for (let i = 0; i < item.type.length; i++) {
-        let type = getTypeOfId(item.type[i]);
-        $('#typeList_' + item.code).append(
-            '<span class="mdi mdi-' + type.icon + '"></span>'
-        );
-    }
-}
-
-function generateTypeCheckboxes() {
-    for (let i = 0; i < currentTypes.length; i++) {
-        let id = 'typeCheck_' + currentTypes[i].id;
-        $('#typeCheckboxesCell').append(
-            '<div class="form-check">' +
-            '<input type="checkbox" class="form-check-input" id="' + id + '">' +
-            '<label class="form-check-label" for="' + id + '">' +
-            '<span class="mdi mdi-' + currentTypes[i].icon + '"></span>' + currentTypes[i].name + '</label>' +
-            '</div>'
-        );
-    }
-}
-
-function getTypeOfId(id) {
-    let item = {};
-    for (let i = 0; i < currentTypes.length; i++) {
-        if (currentTypes[i].id === id) {
-            item = currentTypes[i];
-            break;
-        }
-    }
-    return item;
-}
-
-function getItemOfCode(code) {
-    let item = {};
-    for (let i = 0; i < currentDataset.length; i++) {
-        if (currentDataset[i].code === code) {
-            item = currentDataset[i];
-            break;
-        }
-    }
-    return item;
-}
-
-function addNewItem() {
-    if (isItemInputFilled()) {
-        let item = {
-            name: sanitizeString($.selector_cache('#nameInput').val()),
-            description: sanitizeString($.selector_cache('#descriptionInput').val()),
-            quantity: sanitizeNumber($.selector_cache('#quantityInput').val()),
-            price: sanitizeNumber($.selector_cache('#priceInput').val()),
-            code: $.selector_cache('#codeInput').val(),
-            type: getTypesChecked(),
-            image: $.selector_cache('#imageInput').val(),
-        };
-        if (isCodeAvailable(item.code)) {
-            setEditFieldValues('', '', '', '', [], '', '');
-            currentDataset.push(item);
-            generateLine(item);
-        }
-    }
-}
-
-function editItem(elem) {
-    if (isItemInputEmpty()) {
-        let code = elem.id.replace('edit_', '');
-        let item = getItemOfCode(code);
-        setEditFieldValues(item.name, item.description, item.quantity, item.price, item.code, item.type, item.image);
-        removeItemFromList(item); // Move the item in the edit fields
-    }
-}
-
-function deleteItem(elem) {
-    let code = elem.id.replace('delete_', '');
-    let item = getItemOfCode(code);
-    removeItemFromList(item);
-}
-
-function removeItemFromList(item) {
-    currentDataset.splice(currentDataset.indexOf(item), 1);
-    $('#row_' + item.code).remove();
-}
-
-function getTypesChecked() {
-    let types = [];
-    for (let i = 0; i < currentTypes.length; i++) {
-        let id = 'typeCheck_' + currentTypes[i].id;
-        if ($('#' + id).is(':checked')) {
-            types.push(currentTypes[i].id);
-        }
-    }
-    return types;
-}
-
-function setTypesChecked(types) {
-    for (let i = 0; i < currentTypes.length; i++) {
-        let id = 'typeCheck_' + currentTypes[i].id;
-        $('#' + id).prop('checked', types.indexOf(currentTypes[i].id) !== -1);
-    }
-    return types;
-}
-
-function setEditFieldValues(name, description, quantity, price, code, type, image) {
-    $.selector_cache('#nameInput').val(name);
-    $.selector_cache('#descriptionInput').val(description);
-    $.selector_cache('#quantityInput').val(quantity);
-    $.selector_cache('#priceInput').val(price);
-    $.selector_cache('#codeInput').val(code);
-    $.selector_cache('#codeInput').val(code);
-    setTypesChecked(type);
-    $.selector_cache('#imageInput').val(image);
-}
-
-function isCodeAvailable (code) {
-    let isAvailable = true;
-    for (let i = 0; i < currentDataset.length; i++) {
-        if (currentDataset[i].code === code) {
-            isAvailable = false;
-            break;
-        }
-    }
-    return isAvailable;
-}
-
-function isItemInputEmpty() {
-    return $.selector_cache('#nameInput').val() === '' &&
-        $.selector_cache('#descriptionInput').val() === '' &&
-        $.selector_cache('#quantityInput').val() === '' &&
-        $.selector_cache('#priceInput').val() === '' &&
-        $.selector_cache('#codeInput').val() === '' &&
-        $.selector_cache('#imageInput').val() === '' &&
-        getTypesChecked().length === 0;
-}
-
-function isItemInputFilled() {
-    return $.selector_cache('#nameInput').val() !== '' &&
-        $.selector_cache('#descriptionInput').val() !== '' &&
-        $.selector_cache('#quantityInput').val() !== '' &&
-        $.selector_cache('#priceInput').val() !== '' &&
-        $.selector_cache('#codeInput').val() !== '' &&
-        $.selector_cache('#imageInput').val() !== '' &&
-        getTypesChecked().length > 0;
-}
-
-
-
-function saveDataset() {
-    AjaxManager.saveData(currentTypes, currentDataset);
-}
-
-function sanitizeString(str) {
-    return str.trim();
-}
-
-function sanitizeNumber(nbrStr) {
-    return nbrStr.replace(/\s/g,'');
-}
-
-function scanArticle(code) {
-    let data = {
-        password: 'coucou',
-        code : code,
-    };
-    $.ajax({
-        type: "POST",
-        url: "../ajax/scan_article.php",
-        data: JSON.stringify(data),
-        dataType: "json",
-        contentType: "application/json; charset=utf-8",
-        complete: function (data) {
-            // alert(data.responseText);
-            console.log(data.responseText);
-        },
-    });
-}
--- a/classes/postHandler.php
+++ b/classes/postHandler.php
@ -3,7 +3,7 @@ require_once 'dao.php';

 class PostHandler
 {
-    private $valid_types = ["article", "category", "article_categories"];
+    private $valid_types = ["article", "category", "article_categories", 'image'];
    private $valid_actions = ["create", "update", "remove", "get"];

    private $action;
@ -12,7 +12,7 @@ class PostHandler
    private $filesData;
    private $data;
    private $dao;
-    private $uploadBaseDir = '../../uploaded_images/';
+    private $uploadBaseDir = '../uploaded_images/';

    private $responseArray = array(
        "status" => 0,
@ -33,7 +33,9 @@ class PostHandler
    public function do_action()
    {
        $result = -1;
-        if (count($this->data) > 0) {
+        if ($this->type == "image") {
+            $result = $this->save_image();
+        } else if (count($this->data) > 0) {
            if ($this->action == "create")
                $result = $this->create();
            else if ($this->action == "update")
@ -55,6 +57,30 @@ class PostHandler
        return $this->responseArray;
    }

+    private function save_image()
+    {
+        $success = true;
+        if ($this->filesData["image"]["size"] > 0 && $this->data != null) {
+            $uploadPath = $this->uploadBaseDir.$this->data.".jpg";
+
+            if (move_uploaded_file($this->filesData["image"]["tmp_name"], $uploadPath)) {
+                $this->responseArray["message"] = "Image upload success";
+            } else {
+                $this->responseArray["message"] = "Image upload failure: ". $uploadPath;
+                $this->responseArray["status"] = 1;
+                $success = false;
+            }
+        } else {
+            $this->responseArray["message"] = "No valid file to send";
+            $this->responseArray["status"] = 1;
+            $success = false;
+        }
+        if ($success)
+            return 0;
+        else
+            return json_encode($this->filesData)."id: ".$this->data;
+    }
+
    function create()
    {
        $result = -1;