Files
matrix/build/WebContent/WEB-INF/app/operation/reporting/photoviewer.jsp

55 lines
2.8 KiB
Plaintext

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="ISO-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Cygnus 1.0 | Verification Photos</title>
<link href="/matrix/css/bootstrap-5.3.8.min.css" rel="stylesheet" />
<link href="/matrix/css/matrix-v2.css?v=6" rel="stylesheet" />
<link href="/matrix/css/report-viewer-v4.css?v=1" rel="stylesheet" />
<script src="/matrix/js/matrix-dialog-child.js?v=2" defer></script>
<script src="/matrix/js/photo-viewer-v4.js?v=1" defer></script>
<script src="/matrix/js/matrix-accessibility-v1.js?v=1" defer></script>
<link href="/matrix/css/matrix-theme-v2.css?v=4" rel="stylesheet" type="text/css" />
</head>
<body class="matrix-v2 matrix-report-viewer">
<main class="matrix-report-viewer__page">
<header class="matrix-report-viewer__heading">
<div><h1>Verification Photos</h1><p>Select a photo to inspect it at a larger size.</p></div>
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="MatrixDialog.close(0)">Close</button>
</header>
<c:choose>
<c:when test="${not empty photolist}">
<section class="matrix-photo-grid" aria-label="Verification photos">
<c:forEach items="${photolist}" var="photo" varStatus="status">
<button type="button" class="matrix-photo-grid__item" data-photo-index="${status.index}">
<img id="photo-${status.index}" src="${photo}" loading="lazy"
alt="Verification photo ${status.count}" />
<span>Photo ${status.count}</span>
</button>
</c:forEach>
</section>
</c:when>
<c:otherwise>
<section class="matrix-report-viewer__empty" role="status">
<strong>No photos available</strong>
<span>No verification photos were found for this case.</span>
</section>
</c:otherwise>
</c:choose>
</main>
<dialog class="matrix-photo-preview" id="photoPreview">
<div class="matrix-photo-preview__toolbar">
<strong>Photo preview</strong>
<div>
<button type="button" class="btn btn-outline-secondary btn-sm" id="rotatePhoto">Rotate</button>
<button type="button" class="btn btn-secondary btn-sm" id="closePhotoPreview">Close</button>
</div>
</div>
<div class="matrix-photo-preview__canvas"><img id="previewPhoto" src="" alt="Selected verification photo" /></div>
</dialog>
</body>
</html>