Build out and push automatic report generation, remove emailing of every report indiidially
This commit is contained in:
Fred Boniface
@@ -1,28 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Generate Report</title>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>TrACreport</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
max-width: 600px;
|
||||
margin: 2rem auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
<h1>Generate A/C Fault Report</h1>
|
||||
<p>This page is under development. For now, reports will be sent out through other means.</p>
|
||||
<!--
|
||||
<form action="/report/generate" method="GET">
|
||||
<div>
|
||||
<label for="start">Start Date</label>
|
||||
<input type="date" id="start" name="start" required>
|
||||
</div>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
<div>
|
||||
<label for="end">End Date</label>
|
||||
<input type="date" id="end" name="end" required>
|
||||
</div>
|
||||
label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
<button type="submit">Generate Report</button>
|
||||
</form>
|
||||
-->
|
||||
</body>
|
||||
input[type="date"],
|
||||
input[type="password"],
|
||||
button {
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>TrACreport</h1>
|
||||
<h2>Generate Fault Report</h2>
|
||||
|
||||
<form id="reportForm" action="/report" method="GET" target="_blank">
|
||||
<div>
|
||||
<label for="start">Start Date:</label>
|
||||
<input type="date" id="start" name="start" required>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="end">End Date:</label>
|
||||
<input type="date" id="end" name="end" required>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password">Access Password:</label>
|
||||
<input type="password" id="password" name="password" required>
|
||||
</div>
|
||||
|
||||
<button type="submit">Generate Report</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
// Default both fields to today's date
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
document.getElementById('start').value = today;
|
||||
document.getElementById('end').value = today;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -5,10 +5,203 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>TrACreport</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<style>* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #f2f3f2;
|
||||
background-color: #525252;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
margin:auto;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#report-link {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
z-index: 9999;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
#report-link:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100vw;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
#unitNumber {
|
||||
width: 40vw;
|
||||
font-size: larger;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: larger;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: large;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#formExpansion {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.7rem 2rem;
|
||||
}
|
||||
|
||||
#formExpansion h3 {
|
||||
flex-basis: 100%;
|
||||
margin-top: 1.0rem;
|
||||
margin-bottom: 0rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#formExpansion h3:first-of-type {
|
||||
margin-top: 0rem;
|
||||
}
|
||||
|
||||
.checkbox-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.checkbox-wrapper input[type="checkbox"] {
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
margin-top: 0rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-wrapper label {
|
||||
text-transform: capitalize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
#formHidden {
|
||||
display: none;
|
||||
width: 100vw;
|
||||
margin: auto;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#radio-group {
|
||||
width: 90vw;
|
||||
margin:auto;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 15px;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
#radio-group p {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#radio-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
padding: 0.25rem 0.75rem; /* top/bottom 0.25rem, left/right 0.75rem */
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
background-color: #f9f9f9;
|
||||
color:#525252;
|
||||
}
|
||||
|
||||
#radio-group input[type="radio"] {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
#commentsLabel {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 90vw;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
#formStatus {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 37.5vh;
|
||||
left: 13vw;
|
||||
width: 74vw;
|
||||
height: 25vh;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border-radius: 25px;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background-color: green;
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.status-warn {
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Report an A/C Defect</h1>
|
||||
<a href="/generate-report.html" id="report-link">R</a>
|
||||
<form id="defectForm" action="POST">
|
||||
<label for="unitNumber">Unit Number</label><br>
|
||||
<input type="number" id="unitNumber" name="unitNumber" required>
|
||||
@@ -16,8 +209,8 @@
|
||||
<!-- The contents of this DIV is inserted with JS -->
|
||||
</div>
|
||||
<div id="formHidden">
|
||||
<h2>Have you reported this to maintenance?</h2>
|
||||
<div id="radio-group">
|
||||
<h2>Have you reported this to maintenance?</h2>
|
||||
<label>
|
||||
<input class="radio" type="radio" name="reported" value="via Defect Book" required>
|
||||
via Defect Book
|
||||
@@ -30,6 +223,10 @@
|
||||
<input class="radio" type="radio" name="reported" value="via Telephone">
|
||||
via Telephone
|
||||
</label>
|
||||
<label>
|
||||
<input class="radio" type="radio" name="reported" value="via Email">
|
||||
via Email
|
||||
</label>
|
||||
<label>
|
||||
<input class="radio" type="radio" name="reported" value="no">
|
||||
No (Explain reason in comments)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
let data = {}
|
||||
|
||||
const dataPromise = fetch("units.converted.json")
|
||||
const dataPromise = fetch("/units.converted.json")
|
||||
.then(res => {
|
||||
if (!res.ok) throw new Error("Failed to load JSON");
|
||||
return res.json();
|
||||
|
||||
163
static/style.css
163
static/style.css
@@ -1,165 +1,2 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #f2f3f2;
|
||||
background-color: #525252;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
margin:auto;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100vw;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
#unitNumber {
|
||||
width: 40vw;
|
||||
font-size: larger;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: large;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#formExpansion {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.7rem 2rem;
|
||||
}
|
||||
|
||||
#formExpansion h3 {
|
||||
flex-basis: 100%;
|
||||
margin-top: 1.0rem;
|
||||
margin-bottom: 0rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#formExpansion h3:first-of-type {
|
||||
margin-top: 0rem;
|
||||
}
|
||||
|
||||
.checkbox-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.checkbox-wrapper input[type="checkbox"] {
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
margin-top: 0rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-wrapper label {
|
||||
text-transform: capitalize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
#formHidden {
|
||||
display: none;
|
||||
width: 100vw;
|
||||
margin: auto;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#radio-group {
|
||||
width: 90vw;
|
||||
margin:auto;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#radio-group p {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#radio-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
padding: 0.25rem 0.75rem; /* top/bottom 0.25rem, left/right 0.75rem */
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#radio-group input[type="radio"] {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
#commentsLabel {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 90vw;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
#formStatus {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 37.5vh;
|
||||
left: 13vw;
|
||||
width: 74vw;
|
||||
height: 25vh;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border-radius: 25px;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background-color: green;
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.status-warn {
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user