catalyx/PSTW_CentralizeSystem
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
MOHD ARIFF 2024-12-27 16:25:50 +08:00
parent 5a786d221d
commit 5576acc67d
4 changed files with 225 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
Areas/Inventory/Views/Item/ItemRegistration.cshtml
View File

@ -33,16 +33,16 @@
<div class="modal-body d-flex justify-content-center align-items-center">
<div class="container" style="font-family: 'OCR A', monospace;">
<div class="row" ref="qrInfo" id="qrInfo">
<div class="col-5 text-center">
<div class="row">
<div id="QrContainer"></div>
</div>
<div class="col-5 text-center d-flex align-items-center justify-content-center">
<div class="row">
<div class="col-12 text-center">
<div id="QrContainer"></div>
<div class="col-12 text-center">
{{thisQRInfo.uniqueID}}
</div>
</div>
</div>
</div>
<div class="col-7 d-flex align-items-center justify-content-center">
<div class="text-center fs-4 text">
<div class="col-12 my-3">
@ -607,8 +607,8 @@
// Generate QR code only if not already generated
new QRCode(container[0], {
text: data.qrString,
width: 150,
height: 150,
width: 100,
height: 100,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.M
@ -847,7 +847,7 @@
// Safely set image content
const sanitizedImgSrc = encodeURI(imgSrc); // Sanitize the URL
container.innerHTML = `<img src="${sanitizedImgSrc}" alt="QR Code" class="text-center "style="width: 150px; height: 150px;" />`;
container.innerHTML = `<img src="${sanitizedImgSrc}" alt="QR Code" class="text-center " />`;
// Fetch QR information
const qrInfo = this.getPrintedQR(uniqueQR);
@ -893,72 +893,33 @@
}
return this.items.find(item => item.uniqueID === uniqueID);
},
// printQRInfo() {
// const qrElement = this.$refs.qrInfo;
// if (qrElement) {
// const qrElement = this.$refs.qrInfo;
// if (qrElement) {
// domtoimage.toPng(qrElement,{
// quality: 1,
// })
// .then(function (dataUrl) {
// // Print the image using printJS
// printJS({
// printable: dataUrl, // Image data URL
// type: 'image',
// css: '/../lib/bootstrap/dist/css/bootstrap.css',
// style: `
// @@media print {
// @@page { margin-top: 15px; margin-bottom: 15px; }
// body { margin: 0; }
// img {
// display: block;
// margin: auto;
// width: auto;
// max-width: 100%;
// height: auto;
// max-height: 100vh;
// }
// }
// `
// });
// })
// .catch(function (error) {
// console.error("Error generating image:", error);
// });
// }
// else {
// console.error("QR Info element not found.");
// }
// }
// },
printQRInfo() {
// Create a virtual DOM element
const virtualElement = document.createElement('div');
virtualElement.style.width = '340px '; // Match label size for 2 inches at 203 DPI
virtualElement.style.height = '180px';
virtualElement.style.width = '330px '; // Match label size for 2 inches at 203 DPI
virtualElement.style.height = '160px';
virtualElement.style.position = 'absolute';
virtualElement.style.left = '-9999px'; // Position offscreen to avoid rendering on the main UI
// virtualElement.style.border = '1px solid #000'; // Optional: Add a border for debugging dimensions
// Populate the virtual DOM with content
virtualElement.innerHTML = `
<div class="container" style="font-family: 'OCR A', monospace;">
<div class="row" ref="qrInfo" id="qrInfo">
<div class="container-fluid my-3" style="font-family: 'OCR A', monospace;">
<div class="row mx-1" >
<div class="col-5 text-center d-flex align-items-center justify-content-center">
<div class="row">
<div class="col-12">
<div>${this.thisQRInfo.imgContainer}</div>
<div class="col-12 h4"><b>${this.thisQRInfo.uniqueID}</b></div>
</div>
</div>
</div>
<div class="col-7 d-flex align-items-center justify-content-center">
<div class="text-center fs-4 text">
<div class="col-12 h3">${this.thisQRInfo.uniqueID}</div>
<div class="col-12 h3">${this.thisQRInfo.departmentName}</div>
<div class="col-12 h3">${this.thisQRInfo.productName}</div>
<div class="col-12 h3">${this.thisQRInfo.endWDate}</div>
<div class="row-fluid">
<div class="col-12 h4"><b>${this.thisQRInfo.departmentName}</b></div>
<div class="col-12 h4"><b>${this.thisQRInfo.serialNumber}</b></div>
<div class="col-12 h4"><b>${this.thisQRInfo.productName}</b></div>
<div class="col-12 h4"><b>${this.thisQRInfo.endWDate}</b></div>
</div>
</div>
</div>
@ -989,7 +950,7 @@
style: `
@@media print {
@@page {
margin: 2px;
margin: 5px 5px 0px 5px;
}
body { margin: 0; }
}

38
Controllers/API/Inventory/InvMainAPI.cs
View File

@ -299,7 +299,7 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
item.Department?.DepartmentName,
item.CreatedBy!.UserName,
item.Product!.ProductName,
QRString = $"{HttpContext.Request.Scheme}://{HttpContext.Request.Host.Value}/Inventory/ItemInformation/{item.UniqueID}" // Generate QR String
QRString = $"{HttpContext.Request.Scheme}://{HttpContext.Request.Host.Value}/I/{item.UniqueID}" // Generate QR String
}).ToList();
return Json(itemListWithDetails);
@ -411,6 +411,42 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
return Ok(new { success = true, message = "Item deleted successfully" });
}
[HttpPost("GetItem/{id}")] // Endpoint to retrieve an item by its ID
public async Task<IActionResult> GetItem(string id)
{
var item = await _centralDbContext.Items.Include("CreatedBy").Include("Department").Include("Product").FirstOrDefaultAsync(i => i.UniqueID == id);
if (item == null){
return NotFound(new { success = false, message = "Item not found" });
}
var singleItem = new
{
item.ItemID,
item.UniqueID,
item.CompanyId,
item.DepartmentId,
item.ProductId,
item.SerialNumber,
item.Quantity,
item.Supplier,
PurchaseDate = item.PurchaseDate.ToString("dd/MM/yyyy"),
item.PONo,
item.Currency,
item.DefaultPrice,
item.CurrencyRate,
item.ConvertPrice,
item.DODate,
item.Warranty,
EndWDate = item.EndWDate.ToString("dd/MM/yyyy"),
item.InvoiceDate,
item.Department?.DepartmentName,
item.CreatedBy!.UserName,
item.Product!.ProductName,
item.Product!.ImageProduct,
QRString = $"{HttpContext.Request.Scheme}://{HttpContext.Request.Host.Value}/I/{item.UniqueID}" // Generate QR String
};
return Json(singleItem);
}
#endregion Item
}
}

16
Controllers/InventoryController.cs
View File

@ -1,4 +1,5 @@
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using PSTW_CentralSystem.Areas.Inventory.Models;
@ -17,15 +18,16 @@ namespace PSTW_CentralSystem.Controllers
_centralDbContext = centralDbContext;
}
[HttpGet("ItemInformation/{Id}")]
public async Task<IActionResult> ItemInformation(int Id)
[HttpGet("/i/{Id}")]
public IActionResult ItemInformation(string Id)
{
var item = await _centralDbContext.Items.FindAsync(Id);
return View(Json(item));
ViewData["ItemId"] = Id;
return View("ItemInformation");
}
[HttpPost("ItemInformation/{id}")]
public IActionResult ItemInformation(int id, [FromBody] ItemModel item)
[Authorize]
[HttpPost("/i/{id}")]
public IActionResult ItemInformation(string id, [FromBody] ItemModel item)
{
return View();
}

159
Views/Inventory/ItemInformation.cshtml Normal file
View File

@ -0,0 +1,159 @@
@*
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
ViewData["Item"] = "Item Information";
Layout = null;
var itemId = ViewData["ItemId"];
}
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords"
content="wrappixel, admin dashboard, html css dashboard, web dashboard, bootstrap 5 admin, bootstrap 5, css3 dashboard, bootstrap 5 dashboard, Matrix lite admin bootstrap 5 dashboard, frontend, responsive bootstrap 5 admin template, Matrix admin lite design, Matrix admin lite dashboard bootstrap 5 dashboard template" />
<meta name="description"
content="Matrix Admin Lite Free Version is powerful and clean admin dashboard template, inpired from Bootstrap Framework" />
<meta name="robots" content="noindex,nofollow" />
<title>Matrix Admin Lite Free Versions Template by WrapPixel</title>
<!-- Favicon icon -->
<link rel="icon"
type="image/png"
sizes="16x16"
href="/assets/images/favicon.png" />
<link href="https://fonts.googleapis.com/css2?family=OCR+A&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="~/assets/libs/select2/dist/css/select2.min.css" />
<link rel="stylesheet" href="~/assets/libs/jquery-minicolors/jquery.minicolors.css" />
<link rel="stylesheet" href="~/assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" />
<link rel="stylesheet" href="~/assets/libs/quill/dist/quill.snow.css" />
<link href="~/dist/css/style.min.css" rel="stylesheet" />
<link href="~/lib/printjs/print.min.css" rel="stylesheet" />
<!-- DataTables CSS-->
<link href="~/lib/datatables/datatables.css" rel="stylesheet" />
<!-- Vue Js -->
<script src="~/js/vue.global.js"></script>
@* <script src="~/js/vue.global.prod.js"></script> *@
<!-- QR Js -->
<script src="~/lib/qrcode/qrcode.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid my-2" id="app">
<div class="row-fluid" v-if="thisItem">
<div class="row m-3 d-flex align-items-center justify-content-center">
<div class="col-4 border">
<div class="col-12 text-center">
<img :src="thisItem.imageProduct" alt="Product Image" class="img-fluid" data-toggle="modal" data-target="#imageModal"/>
</div>
<div class="col-12 text-center">
<p class="h4">{{thisItem.uniqueID}}</p>
</div>
</div>
</div>
<div class="row m-3 d-flex align-items-center justify-content-center">
<div class="col-4 border">
<div class="col-12 ">
<p class="h4">
Item Name: {{thisItem.productName}}
</p>
</div>
<div class="col-12 ">
<p class="h4">
Part Number: Part Number
</p>
</div>
<div class="col-12 ">
<p class="h4">
Serial Number: {{thisItem.serialNumber}}
</p>
</div>
<div class="col-12">
<p class="h4">
PIC: Station PIC
</p>
</div>
<div class="col-12">
<p class="h4">
Location: Item Location
</p>
</div>
</div>
</div>
</div>
</div>
<script src="~/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="~/dist/js/jquery-ui.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="~/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="~/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="~/assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="~/dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="~/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="~/dist/js/custom.min.js"></script>
<!--Form JS-->
<script src="~/assets/libs/inputmask/dist/min/jquery.inputmask.bundle.min.js"></script>
<script src="~/dist/js/pages/mask/mask.init.js"></script>
<script src="~/assets/libs/select2/dist/js/select2.full.min.js"></script>
<script src="~/assets/libs/jquery-asColor/dist/jquery-asColor.min.js"></script>
<script src="~/assets/libs/jquery-asGradient/dist/jquery-asGradient.js"></script>
<script src="~/assets/libs/jquery-asColorPicker/dist/jquery-asColorPicker.min.js"></script>
<script src="~/assets/libs/jquery-minicolors/jquery.minicolors.min.js"></script>
<script src="~/assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="~/assets/libs/quill/dist/quill.min.js"></script>
<script src="~/lib/printjs/print.min.js"></script>
<script src="~/lib/html2canvas/html2canvas.min.js"></script>
<script src="~/lib/html2canvas/dom-to-image.min.js"></script>
<!-- Datatables JS-->
<script src="~/lib/datatables/datatables.js"></script>
<script>
$(function () {
app.mount('#app');
});
const app = Vue.createApp({
data() {
return {
thisItem: null,
itemId: '@itemId',
}
},
mounted() {
// Fetch companies, depts, and products from the API
this.fetchItem();
},
methods: {
async fetchItem() {
try {
const response = await fetch('/InvMainAPI/GetItem/' + this.itemId, {
method: 'POST',}
);
if (response.ok) {
this.thisItem = await response.json();
console.log(this.thisItem);
} else {
console.error('Failed to fetch item information');
this.responseMessage = await response.text();
}
} catch (error) {
console.error('Error fetching item information:', error);
}
},
}
});
</script>
</body>
</html>