160 lines
7.3 KiB
Plaintext
160 lines
7.3 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-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-lg-7 col-10 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-lg-7 col-10 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>
|