add second screen of dashboard
parent
f365e30c3b
commit
a11e150a42
|
|
@ -72,12 +72,14 @@ public class DashboardService {
|
|||
|
||||
//set stitching related details
|
||||
Long approvedStitchingOfflineItems = 0L;
|
||||
Long remaininfQcAlterPieces = 0L;
|
||||
Long approvedStitchingOfflineItemsThenReject = 0L;
|
||||
long qcReject = 0L;
|
||||
if (stitchingItemIds != null && !stitchingItemIds.isEmpty()) {
|
||||
approvedStitchingOfflineItems = stitchingOfflineItemDAO.findByQCOperationDateAndApproved(startDate1, endDate1, "APPROVED");
|
||||
qcReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT", stitchingItemIds);
|
||||
approvedStitchingOfflineItemsThenReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT",stitchingOutIds);
|
||||
remaininfQcAlterPieces = stitchingOfflineItemDAO.findByQCOperationDateAndIds(null, endDate1, "REJECT", stitchingItemIds);
|
||||
approvedStitchingOfflineItemsThenReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT", stitchingOutIds);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -87,12 +89,14 @@ public class DashboardService {
|
|||
Long washFinishedItem = 0L;
|
||||
Long approved = 0L;
|
||||
Long operationNotPerformed = 0L;
|
||||
Long remainingAlterationPieceFinish = 0L;
|
||||
if (finishing != null && !finishing.isEmpty()) {
|
||||
approved = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "APPROVED", finishing);
|
||||
operationNotPerformed = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "-", finishing);
|
||||
rejectFinishedItem = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "REJECT", finishing);
|
||||
washFinishedItem = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "WASHED", finishing);
|
||||
alterationPieceFinish = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "ALTER", finishing);
|
||||
remainingAlterationPieceFinish = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(null, endDate1, "ALTER", finishing);
|
||||
}
|
||||
|
||||
//set packaging details
|
||||
|
|
@ -128,8 +132,11 @@ public class DashboardService {
|
|||
progress.put("wash", (float) washFinishedItem);
|
||||
|
||||
progress.put("packaging", (float) packagingItems);
|
||||
progress.put("totalPackaging", (float) packagingItemIDs.size());
|
||||
progress.put("remainingFinishAlter", (float) remainingAlterationPieceFinish);
|
||||
progress.put("remainingQCAlter", (float) remaininfQcAlterPieces);
|
||||
|
||||
progress.put("Efficiency",efficiency);
|
||||
progress.put("Efficiency", efficiency);
|
||||
return progress;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
return;
|
||||
}
|
||||
|
||||
function createGaugeChart(progress, color, divId, title, height, width , fontSize, fontYAxis, fontXAxis, fontColor, total, actual, aGrade, bGrade, cGrade) {
|
||||
function createGaugeChart(progress, color, divId, title, height, width, fontSize, fontYAxis, fontXAxis, fontColor, total, actual, aGrade, bGrade, cGrade) {
|
||||
Highcharts.chart(divId, {
|
||||
chart: {
|
||||
type: 'solidgauge',
|
||||
|
|
@ -46,7 +46,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
name: 'Percentage',
|
||||
data: [progress],
|
||||
dataLabels: {
|
||||
format: '{y}% ',
|
||||
format: '{y}% ',
|
||||
y: fontYAxis,
|
||||
x: fontXAxis,
|
||||
borderWidth: 0,
|
||||
|
|
@ -54,12 +54,12 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
style: {
|
||||
fontSize: fontSize + 'px',
|
||||
fontWeight: 'bold',
|
||||
color:fontColor
|
||||
color: fontColor
|
||||
},
|
||||
zIndex: 10
|
||||
zIndex: 10
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: title == 'Finishing Progress' ? 'Percentage: ' + progress + '%<br>Total: ' + total + '<br>Completed: ' + actual + '<br>A Grade: ' + aGrade + '<br>B Grade: ' + bGrade + '<br>C Grade: ' + cGrade : 'Percentage: ' + progress + '%<br>Total: ' + total + '<br>Completed:'+actual
|
||||
pointFormat: title == 'Finishing Progress' ? 'Percentage: ' + progress + '%<br>Total: ' + total + '<br>Completed: ' + actual + '<br>A Grade: ' + aGrade + '<br>B Grade: ' + bGrade + '<br>C Grade: ' + cGrade : 'Percentage: ' + progress + '%<br>Total: ' + total + '<br>Completed:' + actual
|
||||
},
|
||||
color: color,
|
||||
showInLegend: false
|
||||
|
|
@ -69,6 +69,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createBarChart(divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData, dHeading, dData, dates, fontSize, maxValue) {
|
||||
if (!document.getElementById(divId)) {
|
||||
return;
|
||||
|
|
@ -94,7 +95,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
labels: {
|
||||
rotation: -45,
|
||||
style: {
|
||||
fontSize: 10-fontSize,
|
||||
fontSize: 10 - fontSize,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
|
|
@ -136,177 +137,214 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
}]
|
||||
});
|
||||
}
|
||||
function dashboardChart(divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData,dates, fontSize, maxValue) {
|
||||
|
||||
function dashboardChart(
|
||||
divId, height, width, title,
|
||||
aHeading, aData, bHeading, bData, cHeading, cData,
|
||||
dates, fontSize, fontSizeText, maxValue
|
||||
) {
|
||||
if (!document.getElementById(divId)) return;
|
||||
|
||||
Highcharts.chart(divId, {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: height,
|
||||
width: width
|
||||
},
|
||||
title: {
|
||||
text: title,
|
||||
style: {
|
||||
fontSize: fontSize
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
categories: dates,
|
||||
labels: {
|
||||
enabled: false
|
||||
},
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
lineWidth: 2
|
||||
},
|
||||
yAxis: {
|
||||
max: maxValue,
|
||||
min: 0,
|
||||
title: {
|
||||
text: null,
|
||||
align: 'high',
|
||||
style: {
|
||||
fontSize: fontSizeText
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: fontSizeText
|
||||
}
|
||||
},
|
||||
gridLineWidth: 0
|
||||
},
|
||||
legend: {
|
||||
itemStyle: {
|
||||
fontSize: fontSizeText
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: '50%',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
fontSize: fontSizeText
|
||||
}
|
||||
},
|
||||
groupPadding: 0.1
|
||||
}
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: aHeading,
|
||||
data: aData
|
||||
},
|
||||
{
|
||||
name: bHeading,
|
||||
data: bData
|
||||
},
|
||||
{
|
||||
name: cHeading,
|
||||
data: cData
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function createSingleBarChart(divId, height, width, title, Heading, Data, dates, fontSize, maxValue) {
|
||||
if (!document.getElementById(divId)) {
|
||||
return;
|
||||
}
|
||||
Highcharts.chart(divId, {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
type: 'column',
|
||||
height: height,
|
||||
width: width,
|
||||
},
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
xAxis: {
|
||||
},
|
||||
yAxis: {
|
||||
max: maxValue,
|
||||
min: 0,
|
||||
title: {
|
||||
align: 'high'
|
||||
},
|
||||
labels: {
|
||||
overflow: 'justify'
|
||||
},
|
||||
gridLineWidth: 0
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: '50%',
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
},
|
||||
groupPadding: 0.1
|
||||
title: {
|
||||
text: title,
|
||||
align: 'center',
|
||||
verticalAlign: 'top',
|
||||
y: 30,
|
||||
style: {
|
||||
fontSize: fontSize,
|
||||
fontWeight: 'bold',
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
categories: dates,
|
||||
labels: {
|
||||
rotation: -45,
|
||||
style: {
|
||||
fontSize: 10 - fontSize,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: maxValue,
|
||||
softMax: maxValue,
|
||||
softMin: 0,
|
||||
startOnTick: true,
|
||||
endOnTick: true,
|
||||
title: {
|
||||
text: 'Total Progress',
|
||||
style: {
|
||||
fontSize: fontSize,
|
||||
fontWeight: 'bold',
|
||||
}
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: aHeading,
|
||||
data: aData
|
||||
}, {
|
||||
name: bHeading,
|
||||
data: bData
|
||||
}, {
|
||||
name: cHeading,
|
||||
data: cData
|
||||
}]
|
||||
});
|
||||
labels: {
|
||||
format: '{value}%'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
itemStyle: {
|
||||
fontSize: 10 - fontSize,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
scrollbar: {
|
||||
enabled: true
|
||||
},
|
||||
series: [{
|
||||
name: Heading,
|
||||
data: Data
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
function createSingleBarChart(divId, height, width, title,Heading, Data, dates, fontSize, maxValue) {
|
||||
if (!document.getElementById(divId)) {
|
||||
return;
|
||||
}
|
||||
Highcharts.chart(divId, {
|
||||
chart: {
|
||||
type: 'column',
|
||||
height: height,
|
||||
width: width,
|
||||
},
|
||||
title: {
|
||||
text: title,
|
||||
align: 'center',
|
||||
verticalAlign: 'top',
|
||||
y: 30,
|
||||
style: {
|
||||
fontSize: fontSize,
|
||||
fontWeight: 'bold',
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
categories: dates,
|
||||
labels: {
|
||||
rotation: -45,
|
||||
style: {
|
||||
fontSize: 10-fontSize,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: maxValue,
|
||||
softMax: maxValue,
|
||||
softMin: 0,
|
||||
startOnTick: true,
|
||||
endOnTick: true,
|
||||
title: {
|
||||
text: 'Total Progress',
|
||||
style: {
|
||||
fontSize: fontSize,
|
||||
fontWeight: 'bold',
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
format: '{value}%'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
itemStyle: {
|
||||
fontSize: 10-fontSize,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
scrollbar: {
|
||||
enabled: true
|
||||
},
|
||||
series: [{
|
||||
name: Heading,
|
||||
data: Data
|
||||
}]
|
||||
});
|
||||
}
|
||||
initializeGauges();
|
||||
|
||||
initializeGauges();
|
||||
function initializeGauges() {
|
||||
function initializeGauges() {
|
||||
|
||||
const gaugeDivs2 = document.querySelectorAll('.gauge-chart2');
|
||||
gaugeDivs2.forEach(function (div) {
|
||||
const progress = div.getAttribute('data-progress');
|
||||
const color = div.getAttribute('data-color');
|
||||
const title = div.getAttribute('data-title');
|
||||
const height = div.getAttribute('data-height');
|
||||
const width = div.getAttribute('data-width');
|
||||
const fontSize = div.getAttribute('data-fontSize');
|
||||
const fontColor = div.getAttribute('data-fontColor');
|
||||
const total = div.getAttribute('data-totalProduction');
|
||||
const actual = div.getAttribute('data-actualProduction');
|
||||
const divId = div.id;
|
||||
console.log(actual)
|
||||
createGaugeChart(parseInt(progress), color, divId, title, height, width, fontSize, -20, 4, fontColor, total, actual);
|
||||
});
|
||||
const gaugeDivs2 = document.querySelectorAll('.gauge-chart2');
|
||||
gaugeDivs2.forEach(function (div) {
|
||||
const progress = div.getAttribute('data-progress');
|
||||
const color = div.getAttribute('data-color');
|
||||
const title = div.getAttribute('data-title');
|
||||
const height = div.getAttribute('data-height');
|
||||
const width = div.getAttribute('data-width');
|
||||
const fontSize = div.getAttribute('data-fontSize');
|
||||
const fontColor = div.getAttribute('data-fontColor');
|
||||
const total = div.getAttribute('data-totalProduction');
|
||||
const actual = div.getAttribute('data-actualProduction');
|
||||
const divId = div.id;
|
||||
console.log(actual)
|
||||
createGaugeChart(parseInt(progress), color, divId, title, height, width, fontSize, -20, 4, fontColor, total, actual);
|
||||
});
|
||||
|
||||
const gaugeDivs = document.querySelectorAll('.gauge-chart');
|
||||
gaugeDivs.forEach(function (div) {
|
||||
const progress = div.getAttribute('data-progress');
|
||||
const color = div.getAttribute('data-color');
|
||||
const title = div.getAttribute('data-title');
|
||||
const height = div.getAttribute('data-height');
|
||||
const width = div.getAttribute('data-width');
|
||||
const fontSize = div.getAttribute('data-fontSize');
|
||||
const fontColor = div.getAttribute('data-fontColor');
|
||||
const total = div.getAttribute('data-totalProduction');
|
||||
const actual = div.getAttribute('data-actualProduction');
|
||||
const aGrade = div.getAttribute('data-aGrade');
|
||||
const bGrade = div.getAttribute('data-bGrade');
|
||||
const cGrade = div.getAttribute('data-cGrade');
|
||||
const divId = div.id;
|
||||
createGaugeChart(parseInt(progress), color, divId, title, height, width, fontSize, -15, 2, fontColor, total, actual, aGrade, bGrade, cGrade);
|
||||
const gaugeDivs = document.querySelectorAll('.gauge-chart');
|
||||
gaugeDivs.forEach(function (div) {
|
||||
const progress = div.getAttribute('data-progress');
|
||||
const color = div.getAttribute('data-color');
|
||||
const title = div.getAttribute('data-title');
|
||||
const height = div.getAttribute('data-height');
|
||||
const width = div.getAttribute('data-width');
|
||||
const fontSize = div.getAttribute('data-fontSize');
|
||||
const fontColor = div.getAttribute('data-fontColor');
|
||||
const total = div.getAttribute('data-totalProduction');
|
||||
const actual = div.getAttribute('data-actualProduction');
|
||||
const aGrade = div.getAttribute('data-aGrade');
|
||||
const bGrade = div.getAttribute('data-bGrade');
|
||||
const cGrade = div.getAttribute('data-cGrade');
|
||||
const divId = div.id;
|
||||
createGaugeChart(parseInt(progress), color, divId, title, height, width, fontSize, -15, 2, fontColor, total, actual, aGrade, bGrade, cGrade);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
const barChart = document.querySelectorAll('.barChart');
|
||||
barChart.forEach(function (div) {
|
||||
const title = div.getAttribute('data-title');
|
||||
const height = div.getAttribute('data-height');
|
||||
const width = div.getAttribute('data-width');
|
||||
const fontSize = div.getAttribute('data-fontSize');
|
||||
const maxValue = Number(div.getAttribute('data-totalProduction'));
|
||||
const aHeading = 'Cutting';
|
||||
const aData = JSON.parse(div.getAttribute('data-cutting'));
|
||||
const bHeading='Stitching';
|
||||
const bData =JSON.parse(div.getAttribute('data-stitching'));
|
||||
const cHeading='End Line Quality Checking';
|
||||
const cData =JSON.parse(div.getAttribute('data-quality'));
|
||||
const dHeading="Finish Items";
|
||||
const dData =JSON.parse(div.getAttribute('data-finishing'));
|
||||
const dates = div.getAttribute('data-dates');
|
||||
const datesArray = dates.split(',');
|
||||
const divId = div.id;
|
||||
createBarChart( divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData, dHeading, dData, datesArray, fontSize, maxValue);
|
||||
});
|
||||
const barChart = document.querySelectorAll('.barChart');
|
||||
barChart.forEach(function (div) {
|
||||
const title = div.getAttribute('data-title');
|
||||
const height = div.getAttribute('data-height');
|
||||
const width = div.getAttribute('data-width');
|
||||
const fontSize = div.getAttribute('data-fontSize');
|
||||
const maxValue = Number(div.getAttribute('data-totalProduction'));
|
||||
const aHeading = 'Cutting';
|
||||
const aData = JSON.parse(div.getAttribute('data-cutting'));
|
||||
const bHeading = 'Stitching';
|
||||
const bData = JSON.parse(div.getAttribute('data-stitching'));
|
||||
const cHeading = 'End Line Quality Checking';
|
||||
const cData = JSON.parse(div.getAttribute('data-quality'));
|
||||
const dHeading = "Finish Items";
|
||||
const dData = JSON.parse(div.getAttribute('data-finishing'));
|
||||
const dates = div.getAttribute('data-dates');
|
||||
const datesArray = dates.split(',');
|
||||
const divId = div.id;
|
||||
createBarChart(divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData, dHeading, dData, datesArray, fontSize, maxValue);
|
||||
});
|
||||
|
||||
const dashboardBarChart = document.querySelectorAll('.dashboardBarChart'); // fixed name
|
||||
dashboardBarChart.forEach(function (div) {
|
||||
|
|
@ -314,25 +352,26 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
const height = div.getAttribute('data-height');
|
||||
const width = div.getAttribute('data-width');
|
||||
const fontSize = div.getAttribute('data-fontSize');
|
||||
|
||||
const rawValue = div.getAttribute('data-totalProduction') || "0";
|
||||
const cleanValue = rawValue.replace(/[^0-9.-]+/g, '');
|
||||
const maxValue = Number(cleanValue);
|
||||
|
||||
const cHeading = 'Achieved';
|
||||
const cDataString = div.getAttribute('data-achieved');
|
||||
const cleanValueAchieved = cDataString.replace(/[^0-9.-]+/g, '');
|
||||
const cData = [Number(cleanValueAchieved)];
|
||||
|
||||
const aHeading = 'Stitching';
|
||||
const aDataString = div.getAttribute('data-stitching');
|
||||
const cleanValueStitch = aDataString.replace(/[^0-9.-]+/g, '');
|
||||
const aData = [Number(cleanValueStitch)];
|
||||
|
||||
const bHeading = 'Packaging';
|
||||
const bDataString =div.getAttribute('data-packaging');
|
||||
const bHeading = 'Finishing';
|
||||
const bDataString = div.getAttribute('data-finishing');
|
||||
const packaging = bDataString.replace(/[^0-9.-]+/g, '');
|
||||
const bData = [Number(packaging)];
|
||||
|
||||
const cHeading = 'Packaging';
|
||||
const cDataString = div.getAttribute('data-packaging');
|
||||
const cleanValueAchieved = cDataString.replace(/[^0-9.-]+/g, '');
|
||||
const cData = [Number(cleanValueAchieved)];
|
||||
|
||||
const dates = [div.getAttribute('data-dates')];
|
||||
const divId = div.id;
|
||||
dashboardChart(
|
||||
|
|
@ -348,23 +387,24 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
cData,
|
||||
dates,
|
||||
fontSize,
|
||||
'20',
|
||||
maxValue
|
||||
);
|
||||
});
|
||||
|
||||
const cuttingBarChart = document.querySelectorAll('.singleBarChart');
|
||||
cuttingBarChart.forEach(function (div) {
|
||||
const title = div.getAttribute('data-title');
|
||||
const height = div.getAttribute('data-height');
|
||||
const width = div.getAttribute('data-width');
|
||||
const fontSize = div.getAttribute('data-fontSize');
|
||||
const maxValue = Number(div.getAttribute('data-totalProduction'));
|
||||
const Heading = div.getAttribute('data-barHeading');
|
||||
const Data = JSON.parse(div.getAttribute('data-barData'));
|
||||
const dates = div.getAttribute('data-dates');
|
||||
const datesArray = dates.split(',');
|
||||
const divId = div.id;
|
||||
createSingleBarChart( divId, height, width, title, Heading, Data, datesArray, fontSize, maxValue);
|
||||
});
|
||||
}
|
||||
const cuttingBarChart = document.querySelectorAll('.singleBarChart');
|
||||
cuttingBarChart.forEach(function (div) {
|
||||
const title = div.getAttribute('data-title');
|
||||
const height = div.getAttribute('data-height');
|
||||
const width = div.getAttribute('data-width');
|
||||
const fontSize = div.getAttribute('data-fontSize');
|
||||
const maxValue = Number(div.getAttribute('data-totalProduction'));
|
||||
const Heading = div.getAttribute('data-barHeading');
|
||||
const Data = JSON.parse(div.getAttribute('data-barData'));
|
||||
const dates = div.getAttribute('data-dates');
|
||||
const datesArray = dates.split(',');
|
||||
const divId = div.id;
|
||||
createSingleBarChart(divId, height, width, title, Heading, Data, datesArray, fontSize, maxValue);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,283 +1,286 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
|
||||
<head th:fragment="head (title)">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<meta http-equiv="refresh" content="60" th:if="${refresh == true}">
|
||||
<link rel="shortcut icon" href="../static/img/favicon.ico" th:href="@{/img/favicon.ico}">
|
||||
<link rel="stylesheet" th:href="@{/css/style.css}">
|
||||
<script th:src="@{/js/vendor/jquery-3.4.1.min.js}"></script>
|
||||
<script th:src="@{/js/vendor/bootstrap.bundle.js}"></script>
|
||||
<script th:src="@{/js/vendor/luxon.min.js}"></script>
|
||||
<script th:src="@{/js/vendor/datatables.min.js}"></script>
|
||||
<script th:src="@{/js/vendor/dataTables.fixedColumns.min.js}"></script>
|
||||
<script th:src="@{/js/vendor/jquery-ui.js}"></script>
|
||||
<script th:src="@{/js/vendor/vue.js}"></script>
|
||||
<script th:src="@{/js/vendor/select2.full.min.js}"></script>
|
||||
<script th:src="@{/js/vendor/bignumber.min.js}"></script>
|
||||
<script th:src="@{/js/vue-components.js}"></script>
|
||||
<script th:src="@{/js/utils.js}"></script>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/highcharts-more.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
|
||||
<title th:text="${#strings.concat(title, ' - CTP')}"></title>
|
||||
<style>
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
<head th:fragment="head (title)">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<meta http-equiv="refresh" content="60" th:if="${refresh == true}">
|
||||
<link rel="shortcut icon" href="../static/img/favicon.ico" th:href="@{/img/favicon.ico}">
|
||||
<link rel="stylesheet" th:href="@{/css/style.css}">
|
||||
<script th:src="@{/js/vendor/jquery-3.4.1.min.js}"></script>
|
||||
<script th:src="@{/js/vendor/bootstrap.bundle.js}"></script>
|
||||
<script th:src="@{/js/vendor/luxon.min.js}"></script>
|
||||
<script th:src="@{/js/vendor/datatables.min.js}"></script>
|
||||
<script th:src="@{/js/vendor/dataTables.fixedColumns.min.js}"></script>
|
||||
<script th:src="@{/js/vendor/jquery-ui.js}"></script>
|
||||
<script th:src="@{/js/vendor/vue.js}"></script>
|
||||
<script th:src="@{/js/vendor/select2.full.min.js}"></script>
|
||||
<script th:src="@{/js/vendor/bignumber.min.js}"></script>
|
||||
<script th:src="@{/js/vue-components.js}"></script>
|
||||
<script th:src="@{/js/utils.js}"></script>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/highcharts-more.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
|
||||
<title th:text="${#strings.concat(title, ' - CTP')}"></title>
|
||||
<style>
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation: blinker 1s linear infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
.blink {
|
||||
animation: blinker 1s linear infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="row page-header font-sm" th:fragment="page-header">
|
||||
<!--<editor-fold desc="Description">-->
|
||||
<div class="col-sm">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark " role="navigation">
|
||||
<a class="navbar-brand text-white-50" th:href="@{/}">
|
||||
<img th:src="@{/img/utopia-industries-white.svg}" class="page-header__logo" alt="Utopia Industries">
|
||||
</a>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_PURCHASE_ORDER', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/purchase-order/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order') ? 'active' : ''}">Purchase Order</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_JOB_CARD', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/job-cards/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards') ? 'active' : ''}">Job Cards</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_CUTTING', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/cutting/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting') ? 'active' : ''}">Cutting</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_STITCHING', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/stitching/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching') ? 'active' : ''}">Stitching</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_QUALITY_CONTROL', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/quality-control/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control') ? 'active' : ''}">Quality Control</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_FINISHING', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/finishing/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing') ? 'active' : ''}">Finishing</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_PACKAGING', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/packaging/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging') ? 'active' : ''}">Packaging</a>
|
||||
</li>
|
||||
<header class="row page-header font-sm" th:fragment="page-header">
|
||||
<!--<editor-fold desc="Description">-->
|
||||
<div class="col-sm">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark " role="navigation">
|
||||
<a class="navbar-brand text-white-50" th:href="@{/}">
|
||||
<img th:src="@{/img/utopia-industries-white.svg}" class="page-header__logo" alt="Utopia Industries">
|
||||
</a>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_PURCHASE_ORDER', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/purchase-order/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order') ? 'active' : ''}">Purchase
|
||||
Order</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_JOB_CARD', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/job-cards/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards') ? 'active' : ''}">Job
|
||||
Cards</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_CUTTING', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/cutting/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting') ? 'active' : ''}">Cutting</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_STITCHING', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/stitching/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching') ? 'active' : ''}">Stitching</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_QUALITY_CONTROL', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/quality-control/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control') ? 'active' : ''}">Quality
|
||||
Control</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_FINISHING', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/finishing/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing') ? 'active' : ''}">Finishing</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_PACKAGING', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/packaging/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging') ? 'active' : ''}">Packaging</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_REPORTING', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/reporting/summary}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting') ? 'active' : ''}">Reporting</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_REPORTING', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/reporting/summary}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting') ? 'active' : ''}">Reporting</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown" sec:authorize="hasRole('ROLE_ADMIN')">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Admin</a>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Add Inventory Accounts-->
|
||||
<a th:href="@{/inventory-accounts}"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/inventory-accounts') ? 'active' : ''}"
|
||||
class="dropdown-item">Inventory Accounts</a>
|
||||
<a th:href="@{/processes}"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/processes') ? 'active' : ''}"
|
||||
class="dropdown-item">Processes</a>
|
||||
<!-- User and Roles -->
|
||||
<a th:href="@{/users}"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/users') ? 'active' : ''}"
|
||||
class="dropdown-item">User And Roles</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown" sec:authorize="hasRole('ROLE_INVENTORY_ACCOUNT')">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Inventory Accounts</a>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Add Inventory Accounts-->
|
||||
<a th:href="@{/inventory-accounts}"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/inventory-accounts') ? 'active' : ''}"
|
||||
class="dropdown-item">Inventory Accounts</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="dropdown page-header__user-menu">
|
||||
<a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-toggle="dropdown">
|
||||
<i class="bi bi-person"></i>
|
||||
<span sec:authentication="name"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<form th:action="@{/logout}" method="POST" class="page-header__logout">
|
||||
<button type="submit">Logout</button>
|
||||
</form>
|
||||
<li class="nav-item dropdown" sec:authorize="hasRole('ROLE_ADMIN')">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Admin</a>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Add Inventory Accounts-->
|
||||
<a th:href="@{/inventory-accounts}"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/inventory-accounts') ? 'active' : ''}"
|
||||
class="dropdown-item">Inventory Accounts</a>
|
||||
<a th:href="@{/processes}"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/processes') ? 'active' : ''}"
|
||||
class="dropdown-item">Processes</a>
|
||||
<!-- User and Roles -->
|
||||
<a th:href="@{/users}"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/users') ? 'active' : ''}"
|
||||
class="dropdown-item">User And Roles</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown" sec:authorize="hasRole('ROLE_INVENTORY_ACCOUNT')">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Inventory Accounts</a>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Add Inventory Accounts-->
|
||||
<a th:href="@{/inventory-accounts}"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/inventory-accounts') ? 'active' : ''}"
|
||||
class="dropdown-item">Inventory Accounts</a>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- second level purchase Order-->
|
||||
<!-- <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"-->
|
||||
<!-- th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order')}">-->
|
||||
<!-- <ul class="navbar-nav">-->
|
||||
<!-- <li class="nav-item"-->
|
||||
<!-- th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order') ? 'active' : ''}">-->
|
||||
<!-- <a th:href="@{/purchase-order/}" class="nav-link">Cards</a>-->
|
||||
<!-- </li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </nav>-->
|
||||
<!-- second level job cards-->
|
||||
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
|
||||
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards')}">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards') ? 'active' : ''}">
|
||||
<a th:href="@{/job-cards/}" class="nav-link">Cards</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- second level cutting -->
|
||||
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
|
||||
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting')}">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/receive-inventory') ? 'active' : ''}">
|
||||
<a th:href="@{/cutting/receive-inventory}" class="nav-link">Receive Inventory</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/inventory-accounts') ? 'active' : ''}">
|
||||
<a th:href="@{/cutting/inventory-accounts}" class="nav-link">Inventory Accounts</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/bundles') ? 'active' : ''}">
|
||||
<a th:href="@{/cutting/bundles}" class="nav-link">Bundles</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/generate-master-barcode') ? 'active' : ''}">
|
||||
<a th:href="@{/cutting/generate-master-barcode}" class="nav-link">Generate Master Barcode</a>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="dropdown page-header__user-menu">
|
||||
<a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-toggle="dropdown">
|
||||
<i class="bi bi-person"></i>
|
||||
<span sec:authentication="name"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<form th:action="@{/logout}" method="POST" class="page-header__logout">
|
||||
<button type="submit">Logout</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- second level purchase Order-->
|
||||
<!-- <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"-->
|
||||
<!-- th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order')}">-->
|
||||
<!-- <ul class="navbar-nav">-->
|
||||
<!-- <li class="nav-item"-->
|
||||
<!-- th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order') ? 'active' : ''}">-->
|
||||
<!-- <a th:href="@{/purchase-order/}" class="nav-link">Cards</a>-->
|
||||
<!-- </li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </nav>-->
|
||||
<!-- second level job cards-->
|
||||
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
|
||||
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards')}">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards') ? 'active' : ''}">
|
||||
<a th:href="@{/job-cards/}" class="nav-link">Cards</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- second level cutting -->
|
||||
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
|
||||
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting')}">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/receive-inventory') ? 'active' : ''}">
|
||||
<a th:href="@{/cutting/receive-inventory}" class="nav-link">Receive Inventory</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/inventory-accounts') ? 'active' : ''}">
|
||||
<a th:href="@{/cutting/inventory-accounts}" class="nav-link">Inventory Accounts</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/bundles') ? 'active' : ''}">
|
||||
<a th:href="@{/cutting/bundles}" class="nav-link">Bundles</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/generate-master-barcode') ? 'active' : ''}">
|
||||
<a th:href="@{/cutting/generate-master-barcode}" class="nav-link">Generate Master Barcode</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/master-bundles') ? 'active' : ''}">
|
||||
<a th:href="@{/cutting/master-bundles}" class="nav-link">Master Bundles</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!--Second level of reporting-->
|
||||
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
|
||||
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting')}">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/po-report') ? 'active' : ''}">
|
||||
<a th:href="@{/reporting/po-report}" class="nav-link">PO Report</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/job-card-report') ? 'active' : ''}">
|
||||
<a th:href="@{/reporting/job-card-report}" class="nav-link">Job Card Report</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/cutting-report') ? 'active' : ''}">
|
||||
<a th:href="@{/reporting/cutting-report}" class="nav-link">Cutting Tables Report</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/stitching-report') ? 'active' : ''}">
|
||||
<a th:href="@{/reporting/stitching-report}" class="nav-link">Stitching Line Report</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/summary') ? 'active' : ''}">
|
||||
<a th:href="@{/reporting/summary}" class="nav-link">Summary</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- second level stitching -->
|
||||
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
|
||||
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching')}">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching/receive-inventory') ? 'active' : ''}">
|
||||
<a th:href="@{/stitching/receive-inventory}" class="nav-link">Receive Inventory</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching/inventory-accounts') ? 'active' : ''}">
|
||||
<a th:href="@{/stitching/inventory-accounts}" class="nav-link">Inventory Accounts</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching/stitching-offline-items') ? 'active' : ''}">
|
||||
<a th:href="@{/stitching/stitching-offline-items}" class="nav-link">Stitching Offline Items</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- second level quality control-->
|
||||
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
|
||||
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control')}">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control/qc-finished-items') ? 'active' : ''}">
|
||||
<a th:href="@{/quality-control/qc-finished-items}" class="nav-link">QC Finished Item</a>
|
||||
</li>
|
||||
<!-- <li class="nav-item"-->
|
||||
<!-- th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control/inventory-accounts') ? 'active' : ''}">-->
|
||||
<!-- <a th:href="@{/quality-control/inventory-accounts}" class="nav-link">Inventory Accounts</a>-->
|
||||
<!-- </li>-->
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- second level stitching -->
|
||||
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
|
||||
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing')}">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing/finished-items') ? 'active' : ''}">
|
||||
<a th:href="@{/finishing/finished-items}" class="nav-link">Finished Items</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing/inventory-accounts') ? 'active' : ''}">
|
||||
<a th:href="@{/finishing/inventory-accounts}" class="nav-link">Inventory Accounts</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing/segregate-inventory') ? 'active' : ''}">
|
||||
<a th:href="@{/finishing/segregate-inventory}" class="nav-link">Segregate Inventory</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- second level packaging -->
|
||||
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
|
||||
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging')}">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging/receive-inventory') ? 'active' : ''}">
|
||||
<a th:href="@{/packaging/receive-inventory}" class="nav-link">Receive Inventory</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging/inventory-accounts') ? 'active' : ''}">
|
||||
<a th:href="@{/packaging/inventory-accounts}" class="nav-link">Inventory Accounts</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<!-- table loading skeleton -->
|
||||
<div class="table-loading-skeleton" th:fragment="table-loading-skeleton">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<div class="skeleton-box" style="width:35px;"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="skeleton-box" style="width:200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:each="i: ${#numbers.sequence(0, 15)}" class="row">
|
||||
<div class="col-sm-2">
|
||||
<div class="skeleton-box"></div>
|
||||
</div>
|
||||
<div class="col-sm-1" th:each="j: ${#numbers.sequence(0, 9)}">
|
||||
<div class="skeleton-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/master-bundles') ? 'active' : ''}">
|
||||
<a th:href="@{/cutting/master-bundles}" class="nav-link">Master Bundles</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!--Second level of reporting-->
|
||||
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
|
||||
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting')}">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/po-report') ? 'active' : ''}">
|
||||
<a th:href="@{/reporting/po-report}" class="nav-link">PO Report</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/job-card-report') ? 'active' : ''}">
|
||||
<a th:href="@{/reporting/job-card-report}" class="nav-link">Job Card Report</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/cutting-report') ? 'active' : ''}">
|
||||
<a th:href="@{/reporting/cutting-report}" class="nav-link">Cutting Tables Report</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/stitching-report') ? 'active' : ''}">
|
||||
<a th:href="@{/reporting/stitching-report}" class="nav-link">Stitching Line Report</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/summary') ? 'active' : ''}">
|
||||
<a th:href="@{/reporting/summary}" class="nav-link">Summary</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- second level stitching -->
|
||||
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
|
||||
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching')}">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching/receive-inventory') ? 'active' : ''}">
|
||||
<a th:href="@{/stitching/receive-inventory}" class="nav-link">Receive Inventory</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching/inventory-accounts') ? 'active' : ''}">
|
||||
<a th:href="@{/stitching/inventory-accounts}" class="nav-link">Inventory Accounts</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching/stitching-offline-items') ? 'active' : ''}">
|
||||
<a th:href="@{/stitching/stitching-offline-items}" class="nav-link">Stitching Offline Items</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- second level quality control-->
|
||||
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
|
||||
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control')}">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control/qc-finished-items') ? 'active' : ''}">
|
||||
<a th:href="@{/quality-control/qc-finished-items}" class="nav-link">QC Finished Item</a>
|
||||
</li>
|
||||
<!-- <li class="nav-item"-->
|
||||
<!-- th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control/inventory-accounts') ? 'active' : ''}">-->
|
||||
<!-- <a th:href="@{/quality-control/inventory-accounts}" class="nav-link">Inventory Accounts</a>-->
|
||||
<!-- </li>-->
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- second level stitching -->
|
||||
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
|
||||
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing')}">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing/finished-items') ? 'active' : ''}">
|
||||
<a th:href="@{/finishing/finished-items}" class="nav-link">Finished Items</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing/inventory-accounts') ? 'active' : ''}">
|
||||
<a th:href="@{/finishing/inventory-accounts}" class="nav-link">Inventory Accounts</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing/segregate-inventory') ? 'active' : ''}">
|
||||
<a th:href="@{/finishing/segregate-inventory}" class="nav-link">Segregate Inventory</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- second level packaging -->
|
||||
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
|
||||
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging')}">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging/receive-inventory') ? 'active' : ''}">
|
||||
<a th:href="@{/packaging/receive-inventory}" class="nav-link">Receive Inventory</a>
|
||||
</li>
|
||||
<li class="nav-item"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging/inventory-accounts') ? 'active' : ''}">
|
||||
<a th:href="@{/packaging/inventory-accounts}" class="nav-link">Inventory Accounts</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<!-- table loading skeleton -->
|
||||
<div class="table-loading-skeleton" th:fragment="table-loading-skeleton">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<div class="skeleton-box" style="width:35px;"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="skeleton-box" style="width:200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:each="i: ${#numbers.sequence(0, 15)}" class="row">
|
||||
<div class="col-sm-2">
|
||||
<div class="skeleton-box"></div>
|
||||
</div>
|
||||
<div class="col-sm-1" th:each="j: ${#numbers.sequence(0, 9)}">
|
||||
<div class="skeleton-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div th:fragment="page-footer-scripts">
|
||||
<script th:src="@{/js/vendor/lazyload-db.js}"></script>
|
||||
<script th:src="@{/js/main.js}"></script>
|
||||
</div>
|
||||
</body>
|
||||
<div th:fragment="page-footer-scripts">
|
||||
<script th:src="@{/js/vendor/lazyload-db.js}"></script>
|
||||
<script th:src="@{/js/main.js}"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container-fluid main-content">
|
||||
<main id="main1" class="container-fluid main-content">
|
||||
<div class="row page-main g-4 p-3">
|
||||
<div class="col-lg-6">
|
||||
<!-- Title Row -->
|
||||
|
|
@ -71,7 +71,8 @@
|
|||
<div class="px-4" style="height: 150px">
|
||||
<h1 class="card-text text-danger fw-bold blink" style="font-size: 4rem;"
|
||||
th:text="${(phases.get('Alteration') != null ? phases.get('Alteration').intValue() : 0) + ' Pcs'}"></h1>
|
||||
<h2 class="card-title text-danger fw-bold text-uppercase blink" style="font-size: 3rem;">ALTERATION</h2>
|
||||
<h2 class="card-title text-danger fw-bold text-uppercase blink" style="font-size: 3rem;">
|
||||
ALTERATION</h2>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -108,7 +109,7 @@
|
|||
<div class="ps-2 text-center">
|
||||
<h1 class="fw-bold m-0"
|
||||
th:text="${phases.get('finishing')?.intValue() ?: 0} + ' Pcs'"></h1>
|
||||
<h4 class="pt-2 fw-bold text-uppercase m-0" >Finishing</h4>
|
||||
<h4 class="pt-2 fw-bold text-uppercase m-0">Finishing</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0 text-center d-flex justify-content-center">
|
||||
|
|
@ -148,8 +149,60 @@
|
|||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<main id="main2" class="container-fluid main-content" style="display: none;">
|
||||
<div class="row page-main g-4 p-3">
|
||||
<div class="col-lg-12 d-flex border border-black-50">
|
||||
<div id="dashboardBarChart" class="dashboardBarChart w-100"
|
||||
style="min-height: 476px;"
|
||||
th:data-title="${detail.get('articleName')} + ' (' + ${date} + ')'"
|
||||
th:data-dates="${date}"
|
||||
th:data-stitching="${phases.get('Stitching')?.intValue() ?: 0}"
|
||||
th:data-finishing="${phases.get('finishing')?.intValue() ?: 0}"
|
||||
th:data-packaging="${phases.get('packaging')?.intValue() ?: 0}"
|
||||
th:data-totalProduction="${detail.get('Shift Target')}"
|
||||
th:data-fontSize="35">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row page-main g-4 p-3">
|
||||
<div class="col-lg-4">
|
||||
<div class="h-100 border border-black-50 p-3 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
|
||||
style="background-color: #516ec4;">
|
||||
<h1 class="fw-bold pt-5 pb-2" style="font-size: 6rem;"
|
||||
th:text="${phases.get('remainingQCAlter')?.intValue()}">0%</h1>
|
||||
<h4 class="fw-bold m-0 pt-2 pb-5" style="font-size: 4rem;">Remaining QC Alter Pcs</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="h-100 border border-black-50 p-3 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
|
||||
style="background-color: #72788a;">
|
||||
<h1 class="fw-bold pt-5 pb-2" style="font-size: 6rem;"
|
||||
th:text="${phases.get('remainingFinishAlter')?.intValue()}">0</h1>
|
||||
<h1 class="fw-bold m-0 pt-2 pb-5" style="font-size: 4rem;">Remaining Finish Alter Pcs </h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="h-100 border border-black-50 p-5 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
|
||||
style="background-color: #4bb85f;">
|
||||
<h1 class="fw-bold pt-5 pb-2" style="font-size: 7rem;"
|
||||
th:text="${phases.get('totalPackaging')?.intValue()}">0</h1>
|
||||
<h1 class="fw-bold m-0 pt-2 pb-5" style="font-size: 4rem;">OverAll Packing</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
<script>
|
||||
setTimeout(function () {
|
||||
document.getElementById("main1").style.display = "none";
|
||||
document.getElementById("main2").style.display = "block";
|
||||
}, 30000);
|
||||
</script>
|
||||
<script th:src="@{/js/charts.js}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue