Your IP : 216.73.216.86
home/emeraadmin/public_html/pages/subtaskform.php 0000644 00000054632 15167742043 0016273 0 ustar 00
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Holiday Program Cleaning Checklist</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
body {
font-family: 'Poppins', sans-serif;
background: url('http://localhost/CleaningChecklist/cover.jpg') no-repeat center center fixed;
background-size: cover;
padding: 20px;
margin: 0;
}
.container {
background-color: #fff;
background: linear-gradient(to right, #e2e5e7, #ffffff);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
padding: 40px;
border-radius: 20px;
max-width: 800px;
margin: auto;
}
.header {
text-align: center;
margin-bottom: 40px;
}
.header img {
width: 160px;
height: auto;
}
h1 {
text-align: center;
font-size: 3.5em;
margin-bottom: 30px;
color: #1e3c72;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
background: linear-gradient(to right, #1e3c72, #2a5298);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Poppins', sans-serif;
}
.form-group label {
font-weight: bold;
color: #1e3c72;
font-size: 1.3em;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.form-control {
border: 2px solid #2a5298;
border-radius: 10px;
font-size: 1.0em;
padding: 14px;
width: 100%;
margin-bottom: 25px;
transition: all 0.3s ease;
}
.form-control:focus {
outline: none;
border-color: #1e3c72;
box-shadow: 0 0 7px rgba(30, 60, 114, 0.5);
}
.form-check-label {
font-weight: bold;
color: #1e3c72;
margin-left: 10px;
font-size: 1.3em;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.signature-pad {
border: 2px dashed #2a5298;
border-radius: 10px;
height: 150px;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
margin-top: 25px;
display: flex;
justify-content: center;
align-items: center;
}
.signature-pad:hover {
border-color: #1e3c72;
}
.note {
font-size: 1.2em;
color: #1e3c72;
margin-top: 25px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.section h2 {
font-size: 1.5em;
color: #1e3c72;
margin-bottom: 20px;
text-align: left;
background: linear-gradient(to right, #1e3c72, #2a5298);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
font-family: 'Poppins', sans-serif;
}
.btn-primary {
background: linear-gradient(to right, #2a5298, #1e3c72);
color: #fff;
border: none;
padding: 15px 30px;
border-radius: 8px;
cursor: pointer;
font-size: 20px;
margin-top: 35px;
display: block;
width: 100%;
transition: all 0.3s ease;
}
.btn-primary:hover {
background: linear-gradient(to right, #1e3c72, #2a5298);
}
.footer {
border-top: 1px solid #ccc;
padding-top: 20px;
margin-top: 35px;
font-size: 1em;
color: #555;
text-align: center;
}
.section {
margin-bottom: 20px;
}
.form-check {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.form-check-input {
width: 20px;
height: 20px;
margin-right: 8px; /* Small space between checkbox and label */
}
.form-check-label {
margin: 0;
font-weight: normal; /* Ensure sentences are not bold */
}
.footer a {
color: #1e3c72;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<?php
// Show error if no id is passed with the URL parameter, not query parameter
if (!isset($_GET['subtask_id'])) {
echo "Invalid Request";
exit();
} else {
$subtask_id = $_GET['subtask_id'];
require_once '../Service/SubtaskService.php';
$subtaskService = new SubtaskService();
$subtask = $subtaskService->getSubtaskDetailsForWorkForm($subtask_id);
// Check if subtask is empty
if (empty($subtask)) {
echo "No subtask found";
exit();
}
if($subtask->completed == 1 && $subtask->completed_at != null && $subtask->form_submission_id != null) {
echo "This form has already been submitted. <br> View the submitted form <a href='completedsubtaskform.php?id=$subtask->form_submission_id'>here</a>";
exit();
}
}
?>
<body>
<div class="container">
<div class="header">
<div class="company-name">Emera Facility Services</div>
<img src="../src/img/Emera-Primary-Logo.png" alt="Company Logo">
</div>
<h1>Holiday Program Cleaning Checklist</h1>
<form id="cleaningChecklistForm" method="POST" enctype="multipart/form-data">
<div class="form-group">
<input type="text" class="form-control" id="subtask_id" name="subtask_id" value="<?php echo htmlspecialchars($subtask->id); ?>" hidden>
</div>
<div class="form-group">
<label for="schoolName">School Name:</label>
<!-- Display school name as text instead of input -->
<h3 id="schoolName"><?php echo htmlspecialchars($subtask->service_name); ?></h3>
</div>
<div class="form-group">
<label for="date">Date:</label>
<!-- Display date as text instead of input -->
<h3 id="date"><?php echo htmlspecialchars($subtask->subtask_date); ?></h3>
</div>
<!-- Main Area Checklist -->
<div class="section">
<h2>Main Area</h2>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="main1" data-section="mainArea" value="Vacuum/Sweep hard floors and carpet areas">
<label class="form-check-label" for="main1">Vacuum/Sweep hard floors and carpet areas</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="main2" data-section="mainArea" value="Disinfect and mop hard floor areas">
<label class="form-check-label" for="main2">Disinfect and mop hard floor areas</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="main3" data-section="mainArea" value="Bin Emptied">
<label class="form-check-label" for="main3">Bin Emptied</label>
</div>
</div>
<!-- Kitchen Area Checklist -->
<div class="section">
<h2>Kitchen Area</h2>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="kitchen1" data-section="kitchenArea" value="Vacuum/Sweep hard floors">
<label class="form-check-label" for="kitchen1">Vacuum/Sweep hard floors</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="kitchen2" data-section="kitchenArea" value="Disinfect and mop hard floor areas">
<label class="form-check-label" for="kitchen2">Disinfect and mop hard floor areas</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="kitchen3" data-section="kitchenArea" value="Clean and wipe benchtops surroundings">
<label class="form-check-label" for="kitchen3">Clean and wipe benchtops surroundings</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="kitchen4" data-section="kitchenArea" value="Bin Emptied">
<label class="form-check-label" for="kitchen4">Bin Emptied</label>
</div>
</div>
<!-- Bathrooms and Toilets Checklist -->
<div class="section">
<h2>Bathrooms and Toilets</h2>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="bathroom1" data-section="bathroomArea" value="Clean and disinfect sinks and taps">
<label class="form-check-label" for="bathroom1">Clean and disinfect sinks and taps</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="bathroom2" data-section="bathroomArea" value="Clean and disinfect toilets">
<label class="form-check-label" for="bathroom2">Clean and disinfect toilets</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="bathroom3" data-section="bathroomArea" value="Floor sweep and mop">
<label class="form-check-label" for="bathroom3">Floor sweep and mop</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="bathroom4" data-section="bathroomArea" value="Bin Emptied">
<label class="form-check-label" for="bathroom4">Bin Emptied</label>
</div>
</div>
<div class="form-group">
<label for="notes">Notes:</label>
<textarea class="form-control" id="notes" name="notes" rows="4"></textarea>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="clientName">Client Representative Name:</label>
<input type="text" class="form-control" id="clientName" name="clientName" required>
</div>
<div class="form-group">
<label for="clientSignature">Client Representative Signature:</label>
<canvas id="clientSignature" class="signature-pad" onclick="openSignatureModal('client')"></canvas>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="staffName">Emera Staff Member Name:</label>
<input type="text" class="form-control" id="staffName" name="staffName" required>
</div>
<div class="form-group">
<label for="staffSignature">Emera Staff Member Signature:</label>
<canvas id="staffSignature" class="signature-pad" onclick="openSignatureModal('staff')"></canvas>
</div>
</div>
</div>
<input type="hidden" id="clientSignatureData" name="clientSignature">
<input type="hidden" id="staffSignatureData" name="staffSignature">
<input type="hidden" id="checklist_json" name="checklist_json">
<input type="hidden" id="latitude" name="latitude">
<input type="hidden" id="longitude" name="longitude">
<div class="note">
This document is to be completed after every visit from the professional cleaner. Once completed, please take a photo and send it to your supervisor.
</div>
<div class="button">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
<div class="footer">
<p>Emera Facility Services</p>
<p><a href="www.emerafs.com.au" target="_blank">www.emerafs.com.au</a></p>
<p>16 Stelvio Close, Lynbrook, VIC 3975</p>
<p>10/440 Collins St, Melbourne VIC 3000</p>
<p>Phone: 1300 153 114 | Email: <a href="mailto:hello@emerafs.com.au">hello@emerafs.com.au</a></p>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="signatureModal" tabindex="-1" role="dialog" aria-labelledby="signatureModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signatureModalLabel">Add Signature</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<canvas id="modalSignaturePad" class="signature-pad"></canvas>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="clearSignature">Clear</button>
<button type="button" class="btn btn-primary" id="saveSignature">Save</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var signaturePadClient = new SignaturePad(document.getElementById('clientSignature'));
var signaturePadStaff = new SignaturePad(document.getElementById('staffSignature'));
var modalSignaturePad = new SignaturePad(document.getElementById('modalSignaturePad'));
var activeSignaturePad;
function openSignatureModal(type) {
$('#signatureModal').modal('show');
activeSignaturePad = type === 'client' ? signaturePadClient : signaturePadStaff;
modalSignaturePad.clear();
if (!activeSignaturePad.isEmpty()) {
modalSignaturePad.fromData(activeSignaturePad.toData());
}
}
document.getElementById('clientSignature').addEventListener('click', function () {
openSignatureModal('client');
});
document.getElementById('staffSignature').addEventListener('click', function () {
openSignatureModal('staff');
});
document.getElementById('clearSignature').addEventListener('click', function () {
modalSignaturePad.clear();
if (activeSignaturePad) {
activeSignaturePad.clear();
}
});
document.getElementById('saveSignature').addEventListener('click', function () {
if (!modalSignaturePad.isEmpty()) {
activeSignaturePad.fromData(modalSignaturePad.toData());
} else if (activeSignaturePad) {
activeSignaturePad.clear();
}
$('#signatureModal').modal('hide');
});
function collectChecklistData() {
const sections = ['mainArea', 'kitchenArea', 'bathroomArea']; // Add other sections if necessary
const checklistData = {};
sections.forEach(section => {
checklistData[section] = [];
document.querySelectorAll(`input[data-section="${section}"]:checked`).forEach(item => {
checklistData[section].push(item.value);
});
});
return checklistData;
}
document.getElementById('cleaningChecklistForm').addEventListener('submit', function (e) {
e.preventDefault();
if (signaturePadClient.isEmpty() || signaturePadStaff.isEmpty()) {
Swal.fire({
icon: 'error',
title: 'Missing Signatures',
text: 'Please provide both signatures.'
});
return;
}
// Serialize checklist data to JSON
const checklistData = collectChecklistData();
document.getElementById('checklist_json').value = JSON.stringify(checklistData);
// Add signatures to hidden inputs
document.getElementById('clientSignatureData').value = signaturePadClient.toDataURL();
document.getElementById('staffSignatureData').value = signaturePadStaff.toDataURL();
// Get the geolocation data
function getLocation() {
navigator.geolocation.getCurrentPosition(function(position) {
document.getElementById('latitude').value = position.coords.latitude;
document.getElementById('longitude').value = position.coords.longitude;
// Collect the form data
var formData = new FormData(document.getElementById('cleaningChecklistForm'));
//append school name, date and time to the form data
formData.append('schoolName', <?php echo json_encode($subtask->service_name); ?>);
formData.append('date', <?php echo json_encode($subtask->subtask_date); ?>);
const subtaskTime = <?php echo json_encode($subtask->subtask_time); ?>;
// Check if time is empty
if (subtaskTime == null || subtaskTime.trim() === "") {
// Set time to a default value, e.g., '00:00:00'
formData.append('time', '00:00:00');
} else {
formData.append('time', subtaskTime);
}
// Submit the form using fetch
fetch('submit_form.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
Swal.fire({
icon: 'success',
title: 'Form Submitted',
text: data
}).then(() => {
//reload the page
location.reload();
});
})
.catch(error => {
Swal.fire({
icon: 'error',
title: 'Submission Error',
text: 'An error occurred while submitting the form. Please try again.'
});
});
}, function(error) {
if (error.code === error.PERMISSION_DENIED) {
//submit form without geolocation set 0 to both fields
document.getElementById('latitude').value = 0;
document.getElementById('longitude').value = 0;
// Collect the form data
var formData = new FormData(document.getElementById('cleaningChecklistForm'));
//append school name, date and time to the form data
formData.append('schoolName', <?php echo json_encode($subtask->service_name); ?>);
formData.append('date', <?php echo json_encode($subtask->subtask_date); ?>);
const subtaskTime = <?php echo json_encode($subtask->subtask_time); ?>;
// Check if time is empty
if (subtaskTime == null || subtaskTime.trim() === "") {
// Set time to a default value, e.g., '00:00:00'
formData.append('time', '00:00:00');
} else {
formData.append('time', subtaskTime);
}
// Submit the form using fetch
fetch('submit_form.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
Swal.fire({
icon: 'success',
title: 'Form Submitted',
text: data
}).then(() => {
//reload the page
location.reload();
});
})
.catch(error => {
Swal.fire({
icon: 'error',
title: 'Submission Error',
text: 'An error occurred while submitting the form. Please try again.'
});
});
} else {
Swal.fire({
icon: 'error',
title: 'Geolocation Error',
text: 'Unable to retrieve your location. Please try again or enable location services in your browser settings.'
});
}
});
}
// Initial call to get location
getLocation();
});
});
</script>
</body>
</html>