159 lines
9.4 KiB
HTML
159 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml"
|
|
xmlns:ctp="http://www.w3.org/1999/xhtml">
|
|
|
|
<head th:replace="_fragments :: head('Summary')"></head>
|
|
|
|
<body>
|
|
<div class="container-fluid">
|
|
<header class="row page-header" th:replace="_fragments :: page-header"></header>
|
|
<main class="row page-main">
|
|
<aside class="col-sm-2" th:replace="/reporting/job-card-report-sidebar :: sidebar"></aside>
|
|
<div class="col-sm">
|
|
<table class="table " >
|
|
<tbody>
|
|
<tr th:if="${jobCardProgress != null }">
|
|
<td style="padding:0px;">
|
|
<div style="border: 2px solid #d5d8dc; padding: 10px; border-radius: 10px; height: 370px;">
|
|
<h1 style="text-align: center;">Job Card Report</h1>
|
|
<div style="display: flex; align-items: center;">
|
|
<div style="text-align: center;margin-top: -45px">
|
|
<div style="width: 300px; height: 330px;"
|
|
th:id="'gauge-chart2'"
|
|
class="gauge-chart2"
|
|
th:data-progress="${jobCardProgress.get('Job Card Progress')}"
|
|
th:data-title="${'Job Card Progress'}"
|
|
th:data-width="350"
|
|
th:data-height="350"
|
|
th:data-totalProduction="${totalProduction}"
|
|
th:data-actualProduction="${jobCardProgress.get('actualProduction')}"
|
|
th:data-fontSize="30"
|
|
th:data-fontColor="'#17202a'"
|
|
th:data-color="'#566573'"></div>
|
|
</div>
|
|
<div style="display: flex; ">
|
|
<div th:each="title, index : ${jobCardProgress.keySet()}" style="text-align: center; margin-top: 40px;">
|
|
<div th:if ="${ title != 'Job Card Progress' }"
|
|
th:id="'gauge-chart-' + ${index}" class="gauge-chart" style="width: 200px; height: 230px;"
|
|
th:data-progress="${jobCardProgress.get(title)}"
|
|
th:data-totalProduction="${totalProduction}"
|
|
th:data-actualProduction="${completeProduction.get(title)}"
|
|
th:data-title="${title}"
|
|
th:data-width="230"
|
|
th:data-height="230"
|
|
th:data-fontSize="20"
|
|
th:data-aGrade="${segregateItems.get('A GRADE') == null ? 0 : segregateItems.get('A GRADE')}"
|
|
th:data-bGrade="${segregateItems.get('B GRADE') == null ? 0 : segregateItems.get('B GRADE')}"
|
|
th:data-cGrade="${segregateItems.get('C GRADE') == null ? 0 : segregateItems.get('C GRADE')}"
|
|
th:data-fontColor="'#17202a'"
|
|
th:data-color="'#95a5a6'">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr th:if="${phasesTimes != null }">
|
|
<td style="display: flex; flex-direction: column; align-items: center; border: none !important; outline: none;">
|
|
<div style="display: flex; gap: 10px;">
|
|
<div th:each="phase, index : ${phasesTimes.keySet()}" style="border: 2px solid #d5d8dc; border-radius: 10px; text-align: center; padding:20px;">
|
|
<H6 th:text="${phase}"></H6>
|
|
<H6 th:text="${phasesTimes.get(phase)}"></H6>
|
|
<H6 th:if="${pendingStatus.get(phase) != null}" th:text="${pendingStatus.get(phase)}"></H6>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr th:if="${cuttingDetails != null && cuttingDetails.get('accounts') != null}">
|
|
<td style="padding: 0px; text-align: center;">
|
|
<div style="background-color: black; color: white; padding: 10px; font-size: 18px; font-weight: bold; text-align: center;">
|
|
Cutting Detail
|
|
</div>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Title</th>
|
|
<th>Cutting</th>
|
|
<th>Cutting Date</th>
|
|
<th>Cutting Table Descriptions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr th:if="${cuttingDetails != null}" th:each="detail, index : ${cuttingDetails.get('accounts').keySet()}">
|
|
<td th:text="${cuttingDetails.get('accounts').get(detail).id}"></td>
|
|
<td th:text="${cuttingDetails.get('accounts').get(detail).title}"></td>
|
|
<td th:text="${cuttingDetails.get('personName').get(detail)}"></td>
|
|
<td>
|
|
<span th:text="${#temporals.format(cuttingDetails.get('date').get(detail), 'E')}"></span>
|
|
<span ctp:formatdate="${cuttingDetails.get('date').get(detail)}" ></span>
|
|
</td>
|
|
<td th:text="${cuttingDetails.get('accounts').get(detail).notes}"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr th:if="${stitchingDetails != null && stitchingDetails.get('accounts') != null}">
|
|
<td style="padding: 0px; text-align: center; ">
|
|
<div style="background-color: black; color: white; padding: 10px; font-size: 18px; font-weight: bold; text-align: center;">
|
|
Stitching Detail
|
|
</div>
|
|
<table class="table" >
|
|
<thead >
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Title</th>
|
|
<th>Stitching</th>
|
|
<th>Stitching Day</th>
|
|
<th>Stitching Table Descriptions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody th:if="${stitchingDetails != null and stitchingDetails.get('accounts') != null}">
|
|
<tr th:each="detail : ${stitchingDetails.get('accounts').keySet()}">
|
|
<td th:text="${stitchingDetails.get('accounts').get(detail).id}"></td>
|
|
<td th:text="${stitchingDetails.get('accounts').get(detail).title}"></td>
|
|
<td th:text="${stitchingDetails.get('personName') != null ? stitchingDetails.get('personName').get(detail) : ''}"></td>
|
|
<td>
|
|
<span th:if="${stitchingDetails.get('date') != null and stitchingDetails.get('date').get(detail) != null}" th:text="${#temporals.format(stitchingDetails.get('date').get(detail), 'E')}"></span>
|
|
<span th:if="${stitchingDetails.get('date') != null and stitchingDetails.get('date').get(detail) != null}" ctp:formatdate="${stitchingDetails.get('date').get(detail)}"></span>
|
|
</td>
|
|
<td th:text="${stitchingDetails.get('accounts').get(detail).notes}"></td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr th:if="${dailyProgress != null}">
|
|
<td style="padding-left: 150px;">
|
|
<div style="border: 2px solid #d5d8dc; padding-top: 10px; border-radius: 10px; height: 560px; width: 80%; overflow-x: auto;">
|
|
<div id="barChart" class="barChart" style="height: 500px; width: 1600px;"
|
|
th:data-width="1600"
|
|
th:data-height="500"
|
|
th:data-title="'Days Wise Progress'"
|
|
th:data-dates="${dailyProgress.get('dates')}"
|
|
th:data-cutting="${dailyProgress.get('cutting')}"
|
|
th:data-stitching="${dailyProgress.get('stitching')}"
|
|
th:data-quality="${dailyProgress.get('quality')}"
|
|
th:data-finishing="${dailyProgress.get('finishing')}"
|
|
th:data-totalProduction="${completeProduction.get('Cutting Progress')}"
|
|
th:data-fontSize="30"
|
|
></div>
|
|
</div>
|
|
|
|
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Load JavaScript file -->
|
|
<script th:src="@{/js/charts.js}"></script>
|
|
</body>
|
|
</html> |