Skip to content

Commit

Permalink
Create and edit products barcode
Browse files Browse the repository at this point in the history
  • Loading branch information
@megastary
megastary committed Mar 18, 2024
1 parent 63d7dbf commit fc30cb8
Show file tree
Hide file tree
Showing 5 changed files with 217 additions and 189 deletions.
56 changes: 28 additions & 28 deletions public/javascripts/edit_product.js
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,59 @@
// Handles product to edit selection
function loadProductInfo() {
// Get selected product
const productId = document.getElementById('product_id').value
const productId = document.getElementById("product_id").value;

// Image should change no matter what
const newImg = new Image()
const newImg = new Image();
newImg.onload = function () {
document.getElementById('product_img').src = this.src
}
document.getElementById("product_img").src = this.src;
};

// Reset form if product deselected
if (productId === '') {
document.getElementById('supplier_edit_product').reset()
newImg.src = '/static_images/preview.png'
return
if (productId === "") {
document.getElementById("supplier_edit_product").reset();
newImg.src = "/static_images/preview.png";
return;
}

// Load image
newImg.src = json_data[productId].product_image
newImg.src = json_data[productId].product_image;

// Display Name
document.getElementById('product_name').value =
json_data[productId].product_name
document.getElementById("product_name").value =
json_data[productId].product_name;

// Description
document.getElementById('product_description').value =
json_data[productId].product_description
document.getElementById("product_description").value =
json_data[productId].product_description;

// Description - optional parameter
document.getElementById("product_code").value =
json_data[productId].product_code || "";

// Category - optional parameter
if (json_data[productId].product_category === '') {
document.getElementById('product_category').value = ''
} else {
document.getElementById('product_category').value =
json_data[productId].product_category
}
document.getElementById("product_category").value =
json_data[productId].product_category || "";
}

// Handles new image to upload selection
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader()
var reader = new FileReader();

reader.onload = function (e) {
document
.getElementById('product_img')
.setAttribute('src', e.target.result)
}
.getElementById("product_img")
.setAttribute("src", e.target.result);
};

reader.readAsDataURL(input.files[0])
reader.readAsDataURL(input.files[0]);
}
}

document.addEventListener('DOMContentLoaded', function () {
document.addEventListener("DOMContentLoaded", function () {
// Load image when browser navigates back to this page
if (document.getElementById('product_id').value) {
loadProductInfo()
if (document.getElementById("product_id").value) {
loadProductInfo();
}
})
});
16 changes: 13 additions & 3 deletions routes/edit_product.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,8 +136,20 @@ router.post(
product.description = req.body.product_description;
}

// Handle barcode change
if (req.body.product_code.length === 0) {
// Make input same type as mongoose scheme
req.body.product_code = undefined;
}
if (product.code !== req.body.product_code) {
logger.info(
`server.routes.editproduct.post__Changing product's barcode:[${product.code}] to new barcode:[${req.body.product_code}].`
);
product.code = req.body.product_code;
}

// Handle categories change
if (req.body.product_category === "") {
if (req.body.product_category.length === 0) {
// Make input same type as mongoose scheme
req.body.product_category = undefined;
}
Expand All @@ -146,8 +158,6 @@ router.post(
`server.routes.editproduct.post__Changing product's category:[${product.category}] to new category:[${req.body.product_category}].`
);
product.category = req.body.product_category;
} else {
logger.debug("server.routes.editproduct.post__Else");
}

// If image was not uploaded, we do not change it
Expand Down
5 changes: 2 additions & 3 deletions routes/new_product.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,10 +109,9 @@ router.post(
displayName: req.body.product_name,
description: req.body.product_description,
imagePath: "./images/" + req.file.filename,
category: req.body.product_category || undefined,
code: req.body.product_code || undefined,
});
if (req.body.product_category) {
newProduct.category = req.body.product_category;
}
newProduct
.save()
.then((result) => {
Expand Down
171 changes: 91 additions & 80 deletions views/shop/edit_product.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,114 +1,125 @@
<form
id='supplier_edit_product'
class='needs-validation'
method='POST'
action='/edit_product?_csrf={{csrfToken}}'
enctype='multipart/form-data'
id="supplier_edit_product"
class="needs-validation"
method="POST"
action="/edit_product?_csrf={{csrfToken}}"
enctype="multipart/form-data"
novalidate
>
<div class='card mx-3 mt-3 mx-lg-auto w-lg-75 w-xxl-50'>
<div class='card-header h4 text-center'>
<i class='fa-solid fa-cart-arrow-down'></i>
<div class="card mx-3 mt-3 mx-lg-auto w-lg-75 w-xxl-50">
<div class="card-header h4 text-center">
<i class="fa-solid fa-cart-arrow-down"></i>
Upravit produkt
</div>
<div class='card-body'>
<div class='row g-0'>
<div class='col-md-4 text-center'>
<div class="card-body">
<div class="row g-0">
<div class="col-md-4 text-center">
<img
src='/static_images/preview.png'
alt='Preview'
id='product_img'
class='img-fluid form-image-thumbnail'
src="/static_images/preview.png"
alt="Preview"
id="product_img"
class="img-fluid form-image-thumbnail"
/>
</div>
<div class='col-md-8'>
<div class="col-md-8">

{{! Product selection }}
<div class='input-group input-group-lg mb-3'>
<label
for='product_id'
class='input-group-text w-25'
>Produkt</label>
<div class="input-group input-group-lg mb-3">
<label for="product_id" class="input-group-text w-25">
Produkt
</label>
<select
name='product_id'
id='product_id'
class='form-select'
onchange='loadProductInfo()'
name="product_id"
id="product_id"
class="form-select"
onchange="loadProductInfo()"
required
>
<option value='' selected>Vyberte ze seznamu..</option>
<option value="" selected>Vyberte ze seznamu..</option>
{{#each products}}
<option value='{{this._id}}'>{{this.displayName}}</option>
<option value="{{this._id}}">{{this.displayName}}</option>
{{/each}}
</select>
</div>

{{! Product name }}
<div class='input-group input-group-lg mb-3'>
<span
class='input-group-text w-25'
id='product_name-addon'
>Název</span>
<div class="input-group input-group-lg mb-3">
<span class="input-group-text w-25" id="product_name-addon">
Název
</span>
<input
type='text'
name='product_name'
id='product_name'
class='form-control'
placeholder='Název'
aria-label='Název'
aria-describedby='product_name-addon'
type="text"
name="product_name"
id="product_name"
class="form-control"
placeholder="Název"
aria-label="Název"
aria-describedby="product_name-addon"
required
/>
</div>

{{! Product description }}
<div class='input-group input-group-lg mb-3'>
<span
class='input-group-text w-25'
id='product_description-addon'
>Popis</span>
<div class="input-group input-group-lg mb-3">
<span class="input-group-text w-25" id="product_description-addon">
Popis
</span>
<input
type='text'
name='product_description'
id='product_description'
class='form-control'
placeholder='Popis'
aria-label='Popis'
aria-describedby='product_description-addon'
type="text"
name="product_description"
id="product_description"
class="form-control"
placeholder="Popis"
aria-label="Popis"
aria-describedby="product_description-addon"
required
/>
</div>

{{! Product scan code }}
<div class="input-group input-group-lg mb-3">
<span class="input-group-text w-25" id="product_code-addon">
Čárový kód
</span>
<input
type="text"
name="product_code"
id="product_code"
class="form-control"
placeholder="Čárový kód"
aria-label="Čárový kód"
aria-describedby="product_code-addon"
/>
</div>

{{! Image upload }}
<div class='input-group input-group-lg mb-3'>
<span
class='input-group-text w-25'
id='product_image-addon'
>Obrázek</span>
<div class="input-group input-group-lg mb-3">
<span class="input-group-text w-25" id="product_image-addon">
Obrázek
</span>
<input
class='form-control'
type='file'
id='product_image'
name='product_image'
accept='image/png'
onchange='readURL(this);'
class="form-control"
type="file"
id="product_image"
name="product_image"
accept="image/png"
onchange="readURL(this);"
/>
</div>

{{! Category selection }}
<div class='input-group input-group-lg mb-3'>
<label
for='product_category'
class='input-group-text w-25'
>Kategorie</label>
<div class="input-group input-group-lg mb-3">
<label for="product_category" class="input-group-text w-25">
Kategorie
</label>
<select
name='product_category'
id='product_category'
class='form-select'
name="product_category"
id="product_category"
class="form-select"
>
<option value='' selected>Vyberte ze seznamu..</option>
<option value="" selected>Vyberte ze seznamu..</option>
{{#each categories}}
<option value='{{this._id}}'>{{this.name}}</option>
<option value="{{this._id}}">{{this.name}}</option>
{{/each}}
</select>
</div>
Expand All @@ -117,25 +128,25 @@
</div>
</div>
<!-- End of card-body -->
<div class='card-footer text-muted'>
<div class='d-grid gap-2 d-md-flex justify-content-md-end'>
<a href='/' class='btn btn-danger me-md-2'>Storno</a>
<input type='submit' class='btn btn-success float-end' value='Uložit' />
<div class="card-footer text-muted">
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<a href="/" class="btn btn-danger me-md-2">Storno</a>
<input type="submit" class="btn btn-success float-end" value="Uložit" />
</div>
</div>
</div>
<input type='hidden' name='_csrf' value='{{csrfToken}}' />
<input type="hidden" name="_csrf" value="{{csrfToken}}" />
</form>

<script>
var json_data = {
{{#each products}}
"{{this._id}}": { "product_name": "{{this.displayName}}",
"product_description": "{{this.description}}", "product_image": "{{this.imagePath}}",
"product_category": "{{this.category}}" },
"product_code": "{{this.code}}", "product_category": "{{this.category}}" },
{{/each}}
}
</script>

<script src='/javascripts/edit_product.js'></script>
<script src='/javascripts/form_validate.js'></script>
<script src="/javascripts/edit_product.js"></script>
<script src="/javascripts/form_validate.js"></script>
Loading

0 comments on commit fc30cb8

Please sign in to comment.