Added basic item management
This commit is contained in:
parent
57b8c341bc
commit
3677b8165c
7 changed files with 215 additions and 14 deletions
66
admin/index.php
Normal file
66
admin/index.php
Normal file
|
@ -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");
|
||||||
|
?>
|
25
assets/css/stock.css
Normal file
25
assets/css/stock.css
Normal file
|
@ -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;
|
||||||
|
}
|
102
assets/js/stock.js
Normal file
102
assets/js/stock.js
Normal file
|
@ -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);
|
||||||
|
}
|
|
@ -43,7 +43,7 @@
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<div class="link-effect clipped"></div>
|
<div class="link-effect clipped"></div>
|
||||||
<a class="nav-link" href="<?= $relativePath ?>about.php">
|
<a class="nav-link" href="<?= $relativePath ?>admin">
|
||||||
<!--Place and access-->
|
<!--Place and access-->
|
||||||
<i class="fas fa-sign-in-alt mr-2"></i>
|
<i class="fas fa-sign-in-alt mr-2"></i>
|
||||||
Connexion
|
Connexion
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<div class="link-effect clipped"></div>
|
<div class="link-effect clipped"></div>
|
||||||
<a class="nav-link" href="<?= $relativePath ?>about.php">
|
<a class="nav-link" href="<?= $relativePath ?>admin">
|
||||||
<!--Place and access-->
|
<!--Place and access-->
|
||||||
<i class="fas fa-sign-in-alt mr-2"></i>
|
<i class="fas fa-sign-in-alt mr-2"></i>
|
||||||
Connexion
|
Connexion
|
||||||
|
|
|
@ -6,6 +6,9 @@ if (!isset($relativePath))
|
||||||
if (!isset($pageScripts))
|
if (!isset($pageScripts))
|
||||||
$pageScripts = "";
|
$pageScripts = "";
|
||||||
|
|
||||||
|
if (!isset($hasHeader))
|
||||||
|
$hasHeader = false;
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!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 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/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/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/sidenav.css" media="screen,projection"/>
|
||||||
<link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/bootstrapOverwrite.css"
|
<link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/bootstrapOverwrite.css"
|
||||||
media="screen,projection"/>
|
media="screen,projection"/>
|
||||||
|
@ -35,22 +39,18 @@ if (!isset($pageScripts))
|
||||||
|
|
||||||
<div id="mainContainer">
|
<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
|
<?php
|
||||||
|
if (isset($header)) {
|
||||||
|
echo $header;
|
||||||
|
}
|
||||||
include($relativePath . "includes/navbar.php");
|
include($relativePath . "includes/navbar.php");
|
||||||
include($relativePath . "includes/sidenav.php");
|
include($relativePath . "includes/sidenav.php");
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="mt-4" id="contentContainer">
|
<div class="mt-4" id="contentContainer">
|
||||||
<?= $pageContent ?>
|
<?= $pageContent ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php include($relativePath . "includes/footer.php") ?>
|
<?php include($relativePath . "includes/footer.php") ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
14
index.php
14
index.php
|
@ -1,6 +1,17 @@
|
||||||
<?php
|
<?php
|
||||||
ob_start();
|
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">
|
<div class="container">
|
||||||
<h1 class="text-center">Coucou</h1>
|
<h1 class="text-center">Coucou</h1>
|
||||||
<p class="text-center">Ceci est du texte</p>
|
<p class="text-center">Ceci est du texte</p>
|
||||||
|
@ -9,9 +20,6 @@ ob_start();
|
||||||
<?php
|
<?php
|
||||||
$pageContent = ob_get_clean();
|
$pageContent = ob_get_clean();
|
||||||
$pageTitle = "Accueil";
|
$pageTitle = "Accueil";
|
||||||
$title = "Proximo";
|
|
||||||
$subTitle = "La supérette de l'INSA !";
|
|
||||||
$relativePath = "";
|
$relativePath = "";
|
||||||
|
|
||||||
include($relativePath . "includes/template.php");
|
include($relativePath . "includes/template.php");
|
||||||
?>
|
?>
|
||||||
|
|
Loading…
Reference in a new issue