255 lines
12 KiB
Plaintext
255 lines
12 KiB
Plaintext
@*
|
|
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-4" id="app">
|
|
<div class="row-fluid" v-if="thisItem">
|
|
<!-- Logo -->
|
|
<div class="row m-3 d-flex align-items-center justify-content-center">
|
|
<div class="col-lg-7 col-11 p-3 ">
|
|
<div class="col-12 text-center">
|
|
<img src="@Url.Content("~/Media/System/Logo-PSTW-A4.svg")" alt="Product Image" class="img-fluid rounded" style="max-height: 300px; object-fit: contain; margin-top: -100px; margin-bottom: -100px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Image Section -->
|
|
<div class="row m-3 d-flex align-items-center justify-content-center">
|
|
<div class="col-lg-7 col-11 border rounded p-3 shadow-sm">
|
|
<div class="col-12 text-center">
|
|
<img :src="thisItem.imageProduct" alt="Product Image" class="img-fluid rounded" data-toggle="modal" data-target="#imageModal" style="max-height: 300px;"/>
|
|
</div>
|
|
<div class="col-12 text-center mt-3">
|
|
<p class="h4 fw-bold text-primary">{{ thisItem.uniqueID }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Details Section -->
|
|
<div class="row m-3 d-flex align-items-center justify-content-center">
|
|
<div class="col-lg-7 col-11 border rounded p-3 shadow-sm">
|
|
<!-- Item Name -->
|
|
<div class="col-12 mb-3">
|
|
<p class="h5 fw-bold">
|
|
<i class="fas fa-tag me-2 text-secondary"></i>Item Name:
|
|
<span class="text-muted">{{ thisItem.productName }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Part Number -->
|
|
<div class="col-12 mb-3">
|
|
<p class="h5 fw-bold">
|
|
<i class="fas fa-barcode me-2 text-secondary"></i>Part Number:
|
|
<span class="text-muted">{{ thisItem.partNumber }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Serial Number -->
|
|
<div class="col-12 mb-3">
|
|
<p class="h5 fw-bold">
|
|
<i class="fas fa-hashtag me-2 text-secondary"></i>Serial Number:
|
|
<span class="text-muted">{{ thisItem.serialNumber }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- PIC -->
|
|
<div class="col-12 mb-3">
|
|
<p class="h5 fw-bold">
|
|
<i class="fas fa-user-tie me-2 text-secondary"></i>PIC:
|
|
<span class="text-muted">Station PIC</span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Current Information Card -->
|
|
<div class="col-12">
|
|
<div class="card shadow-sm border-0">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-4 text-primary">
|
|
<i class="fas fa-info-circle me-2"></i>Current Information
|
|
</h5>
|
|
<ul class="list-group list-group-flush">
|
|
<!-- User -->
|
|
<li class="list-group-item">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<span class="fw-bold">
|
|
<i class="fas fa-user me-2 text-secondary"></i>User:
|
|
</span>
|
|
<span class="text-muted text-end" style="max-width: 70%; word-wrap: break-word;">
|
|
{{ thisItem.currentUser }}
|
|
</span>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Store -->
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<span class="fw-bold">
|
|
<i class="fas fa-store me-2 text-secondary"></i>Store:
|
|
</span>
|
|
<span class="text-muted">{{ thisItem.currentStore }}</span>
|
|
</li>
|
|
|
|
<!-- Station -->
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<span class="fw-bold">
|
|
<i class="fas fa-map-marker-alt me-2 text-secondary"></i>Station:
|
|
</span>
|
|
<span class="text-muted">{{ thisItem.currentStation || 'N/A' }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p v-if="isAdmin">Welcome, Admin! You have full access.</p>
|
|
<p v-else-if="userRole === 'user'">Welcome, User! You have limited access.</p>
|
|
<p v-else>Guest View: Please log in.</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',
|
|
isAdmin: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
// Fetch companies, depts, and products from the API
|
|
this.fetchItem();
|
|
this.fetchUser();
|
|
},
|
|
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);
|
|
}
|
|
},
|
|
async fetchUser() {
|
|
try {
|
|
// var isAdmin = userRole.Contains("SystemAdmin") || userRole.Contains("SuperAdmin") || userRole.Contains("Finance");
|
|
|
|
const adminRoles = ["SystemAdmin", "SuperAdmin", "Finance"];
|
|
|
|
|
|
const response = await fetch(`/IdentityAPI/GetUserInformation/`, {
|
|
method: 'POST',
|
|
});
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
|
|
this.currentUser = data?.userInfo || null;
|
|
const companyDeptData = await this.currentUser.department;
|
|
this.currentUserCompanyDept = companyDeptData;
|
|
this.selectedCompany = companyDeptData?.companyId || "";
|
|
this.selectedDepartment = companyDeptData?.departmentId || "";
|
|
this.isAdmin = adminRoles.some(role => this.currentUser.role.includes(role));
|
|
|
|
}
|
|
else {
|
|
console.error(`Failed to fetch user: ${response.statusText}`);
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
}
|
|
},
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|