Update
This commit is contained in:
parent
5a786d221d
commit
5576acc67d
@ -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 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; }
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
159
Views/Inventory/ItemInformation.cshtml
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user