Added basic item management

admin/index.php

@@ -0,0 +1,66 @@
+<?php
+$relativePath = "../";
+ob_start();
+?>
+<div class="stock-container">
+
+    <h1 class="text-center">Gestion des Stocks</h1>
+    <h2 class="text-center">Ajouter un article</h2>
+    <table>
+        <tbody>
+        <tr>
+            <th class="name-column">Nom</th>
+            <th>Quantité</th>
+            <th>Prix</th>
+            <th class="code-column">Code Barre</th>
+            <th class="image-column">Image</th>
+            <th class="actions-column">Actions</th>
+        </tr>
+        <tr>
+            <td>
+                <input type="text" class="form-control" id="nameInput" placeholder="Nom">
+            </td>
+            <td>
+                <input type="number" class="form-control" id="quantityInput" placeholder="Quantité">
+            </td>
+            <td>
+                <input type="text" class="form-control" id="priceInput" placeholder="Prix">
+            </td>
+            <td>
+                <input type="text" class="form-control" id="codeInput" placeholder="Code Barre">
+            </td>
+            <td>
+                <button class="btn btn-primary">Importer</button>
+            </td>
+            <td>
+                <button type="submit" class="btn btn-success" onclick="addNewItem()"><i class="fas fa-check"></i></button>
+            </td>
+        </tr>
+
+        </tbody>
+    </table>
+
+    <h2 class="text-center">Liste d'articles</h2>
+    <table id="stockTable">
+        <tbody>
+        <tr>
+            <th class="name-column">Nom</th>
+            <th>Quantité</th>
+            <th>Prix</th>
+            <th class="code-column">Code Barre</th>
+            <th class="image-column">Image</th>
+            <th class="actions-column">Actions</th>
+        </tr>
+        </tbody>
+    </table>
+</div>
+
+<link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/stock.css" media="screen,projection"/>
+
+
+<?php
+$pageContent = ob_get_clean();
+$pageTitle = "Gestion";
+$pageScripts = "<script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/stock.js\"></script>";
+include($relativePath . "includes/template.php");
+?>

assets/css/stock.css

@@ -0,0 +1,25 @@
+table {
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.name-column {
+    width : 30%;
+}
+
+.code-column {
+    width: 20%;
+}
+
+.stock-container {
+    width: 90%;
+    margin: 50px auto auto auto;
+}
+
+.actions-column {
+    width: 100px;
+}
+
+.image-column {
+    width: 150px;
+}

assets/js/stock.js

@@ -0,0 +1,102 @@
+let defaultStock = [
+    {
+        name: 'Granola',
+        quantity: '2',
+        price: '1.3',
+        code: '7622210601988',
+        type: [
+            'Alimentaire',
+        ]
+    }
+];
+
+let currentDataset = [];
+
+$(document).ready(function () {
+    currentDataset = defaultStock;
+    generateTable(currentDataset);
+});
+
+
+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.quantity + '</td>' +
+        '<td>' + item.price + '</td>' +
+        '<td>' + item.code + '</td>' +
+        '<td><a href="">LINK</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>'
+    );
+}
+
+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 editItem(elem) {
+    if (isItemInputEmpty()) {
+        let code = elem.id.replace('edit_', '');
+        let item = getItemOfCode(code);
+        console.log(item);
+        setEditFieldValues(item.name, item.quantity, item.price, item.code);
+        removeItemFromList(item); // Move the item in the edit fields
+    }
+}
+
+function deleteItem(elem) {
+    let code = elem.id.replace('delete_', '');
+    let item = getItemOfCode(code);
+    console.log(item);
+    removeItemFromList(item);
+}
+
+function removeItemFromList(item) {
+    currentDataset.splice(currentDataset.indexOf(item), 1);
+    $('#row_' + item.code).remove();
+}
+
+function setEditFieldValues(name, quantity, price, code) {
+    $.selector_cache('#nameInput').val(name);
+    $.selector_cache('#quantityInput').val(quantity);
+    $.selector_cache('#priceInput').val(price);
+    $.selector_cache('#codeInput').val(code);
+}
+
+function isItemInputEmpty() {
+    return $.selector_cache('#nameInput').val() === '' &&
+        $.selector_cache('#quantityInput').val() === '' &&
+        $.selector_cache('#priceInput').val() === '' &&
+        $.selector_cache('#codeInput').val() === '';
+}
+
+function addNewItem() {
+    let item = {
+        name: $.selector_cache('#nameInput').val(),
+        quantity: $.selector_cache('#quantityInput').val(),
+        price: $.selector_cache('#priceInput').val(),
+        code: $.selector_cache('#codeInput').val(),
+    };
+    setEditFieldValues('', '', '', '');
+    currentDataset.push(item);
+    generateLine(item);
+}

includes/navbar.php

@@ -43,7 +43,7 @@
                 </li>
                 <li class="nav-item">
                     <div class="link-effect clipped"></div>
-                    <a class="nav-link" href="<?= $relativePath ?>about.php">
+                    <a class="nav-link" href="<?= $relativePath ?>admin">
                         <!--Place and access-->
                         <i class="fas fa-sign-in-alt mr-2"></i>
                         Connexion

includes/sidenav.php

@@ -38,7 +38,7 @@
             </li>
             <li class="nav-item">
                 <div class="link-effect clipped"></div>
-                <a class="nav-link" href="<?= $relativePath ?>about.php">
+                <a class="nav-link" href="<?= $relativePath ?>admin">
                     <!--Place and access-->
                     <i class="fas fa-sign-in-alt mr-2"></i>
                     Connexion

includes/template.php

@@ -6,6 +6,9 @@ if (!isset($relativePath))
 if (!isset($pageScripts))
     $pageScripts = "";
 
+if (!isset($hasHeader))
+    $hasHeader = false;
+
 ?>
 
 <!DOCTYPE html>
@@ -22,7 +25,8 @@ if (!isset($pageScripts))
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
     <link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/general.css" media="screen,projection"/>
     <link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/index.css" media="screen,projection"/>
-    <link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/hamburger.css" media="screen,projection"/>
+    <link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/hamburger.css"
+          media="screen,projection"/>
     <link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/sidenav.css" media="screen,projection"/>
     <link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/bootstrapOverwrite.css"
           media="screen,projection"/>
@@ -35,22 +39,18 @@ if (!isset($pageScripts))
 
 <div id="mainContainer">
 
-    <div id="headerJumbotron" class="jumbotron text-center d-flex">
-        <div id="headerTitleContainer">
-            <h1 id="headerTitle"><?= $title ?></h1>
-            <h2 id="headerSubTitle"><?= $subTitle ?></h2>
-        </div>
-    </div>
-
 
     <?php
+    if (isset($header)) {
+        echo $header;
+    }
     include($relativePath . "includes/navbar.php");
     include($relativePath . "includes/sidenav.php");
     ?>
-
     <div class="mt-4" id="contentContainer">
         <?= $pageContent ?>
     </div>
+
     <?php include($relativePath . "includes/footer.php") ?>
 </div>
 

index.php

@@ -1,6 +1,17 @@
 <?php
 ob_start();
 ?>
+<div id="headerJumbotron" class="jumbotron text-center d-flex">
+    <div id="headerTitleContainer">
+        <h1 id="headerTitle">Proximo</h1>
+        <h2 id="headerSubTitle">La supérette de l'INSA</h2>
+    </div>
+</div>
+<?php
+$header = ob_get_clean();
+ob_start();
+?>
+
 <div class="container">
     <h1 class="text-center">Coucou</h1>
     <p class="text-center">Ceci est du texte</p>
@@ -9,9 +20,6 @@ ob_start();
 <?php
 $pageContent = ob_get_clean();
 $pageTitle = "Accueil";
-$title = "Proximo";
-$subTitle = "La supérette de l'INSA !";
 $relativePath = "";
-
 include($relativePath . "includes/template.php");
 ?>