583 lines
33 KiB
JavaScript
583 lines
33 KiB
JavaScript
import React from "react";
|
|
import api from "../api.js";
|
|
import {useState} from "react";
|
|
|
|
export default function ProjectPunchlistModal({proj}) {
|
|
// Form data states
|
|
const [ceilingTilesService, setCeilingTilesService] = useState(false);
|
|
const handleSetCeilingTilesService = (e) => {
|
|
setCeilingTilesService(e.target.value);
|
|
}
|
|
const [ceilingVentsService, setCeilingVentsService] = useState(false);
|
|
const handleSetCeilingVentsService = (e) => {
|
|
setCeilingVentsService(e.target.value);
|
|
}
|
|
const [ceilingVentsWaiting, setCeilingVentsWaiting] = useState(false);
|
|
const handleSetCeilingVentsWaiting = (e) => {
|
|
setCeilingVentsWaiting(e.target.value);
|
|
}
|
|
const [posService, setPosService] = useState(false);
|
|
const handleSetPosService = (e) => {
|
|
setPosService(e.target.value);
|
|
}
|
|
const [serviceCounter, setServiceCounter] = useState(false);
|
|
const handleSetServiceCounter = (e) => {
|
|
setServiceCounter(e.target.value);
|
|
}
|
|
const [oven, setOven] = useState('');
|
|
const handleSetOven = (e) => {
|
|
setOven(e.target.value);
|
|
}
|
|
const [ovenDisassembled, setOvenDisassembled] = useState(false);
|
|
const handleSetOvenDisassembled = (e) => {
|
|
setOvenDisassembled(e.target.value);
|
|
}
|
|
const [ovenReassembled, setOvenReassembled] = useState(false);
|
|
const handleSetOvenReassembled = (e) => {
|
|
setOvenReassembled(e.target.value);
|
|
}
|
|
const [ovenAlerts, setOvenAlerts] = useState(false);
|
|
const handleSetOvenAlerts = (e) => {
|
|
setOvenAlerts(e.target.value);
|
|
}
|
|
const [ovenExterior, setOvenExterior] = useState(false);
|
|
const handleSetOvenExterior = (e) => {
|
|
setOvenExterior(e.target.value);
|
|
}
|
|
const [walls, setWalls] = useState(false)
|
|
const handleSetWalls = (e) => {
|
|
setWalls(e.target.value);
|
|
}
|
|
const [posWall, setPosWall] = useState(false);
|
|
const handleSetPosWall = (e) => {
|
|
setPosWall(e.target.value);
|
|
}
|
|
const [ceilingTilesPrep,setCeilingTilesPrep] = useState(false);
|
|
const handleSetCeilingTilesPrep = (e) => {
|
|
setCeilingTilesPrep(e.target.value);
|
|
}
|
|
const [ceilingVentsPrep,setCeilingVentsPrep] = useState(false);
|
|
const handleSetCeilingVentsPrep = (e) => {
|
|
setCeilingVentsPrep(e.target.value);
|
|
}
|
|
const [quarryTile, setQuarryTile] = useState(false);
|
|
const handleSetQuarryTile = (e) => {
|
|
setQuarryTile(e.target.value);
|
|
}
|
|
const [cutTable, setCutTable] = useState(false);
|
|
const handleSetCutTable = (e) => {
|
|
setCutTable(e.target.value);
|
|
}
|
|
const [makeLine,setMakeLine] = useState(false);
|
|
const handleSetMakeLine = (e) => {
|
|
setMakeLine(e.target.value);
|
|
}
|
|
const [subLine, setSubLine] = useState(false);
|
|
const handleSetSubLine = (e) => {
|
|
setSubLine(e.target.value);
|
|
}
|
|
const [hotBoxes, setHotBoxes] = useState(false);
|
|
const handleSetHotBoxes = (e) => {
|
|
setHotBoxes(e.target.value);
|
|
}
|
|
const [doughPrep, setDoughPrep] = useState(false);
|
|
const handleSetDoughPrep = (e) => {
|
|
setDoughPrep(e.target.value);
|
|
}
|
|
const [posDelivery, setPosDelivery] = useState(false);
|
|
const handleSetPosDelivery = (e) => {
|
|
setPosDelivery(e.target.value);
|
|
}
|
|
const [managerStation, setManagerStation] = useState(false);
|
|
const handleSetManagerStation = (e) => {
|
|
setManagerStation(e.target.value);
|
|
}
|
|
const [handSinks, setHandSinks] = useState(false);
|
|
const handleSetHandSinks = (e) => {
|
|
setHandSinks(e.target.value);
|
|
}
|
|
const [dispensers, setDispensers] = useState(false);
|
|
const handleSetDispensers = (e) => {
|
|
setDispensers(e.target.value);
|
|
}
|
|
const [otherEquipment, setOtherEquipment] = useState(false);
|
|
const handleSetOtherEquipment = (e) => {
|
|
setOtherEquipment(e.target.value);
|
|
}
|
|
const [ceilingTilesBack, setCeilingTilesBack] = useState(false);
|
|
const handleSetCeilingTilesBack = (e) => {
|
|
setCeilingTilesBack(e.target.value);
|
|
}
|
|
const [ceilingVentsBack, setCeilingVentsBack] = useState(false);
|
|
const handleSetCeilingVentsBack = (e) => {
|
|
setCeilingVentsBack(e.target.value);
|
|
}
|
|
const [trash, setTrash] = useState(false);
|
|
const handleSetTrash = (e) => {
|
|
setTrash(e.target.value);
|
|
}
|
|
const [cleanup, setCleanup] = useState(false);
|
|
const handleSetCleanup = (e) => {
|
|
setCleanup(e.target.value);
|
|
}
|
|
const [alarm, setAlarm] = useState(false);
|
|
const handleSetAlarm = (e) => {
|
|
setAlarm(e.target.value);
|
|
}
|
|
const [notes, setNotes] = useState("");
|
|
const handleSetNotes = (e) => {
|
|
setNotes(e.target.value);
|
|
}
|
|
// How form submission is handled
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const response = await api.post('projects/punch/', {
|
|
id: proj.id,
|
|
store: proj.store,
|
|
date: proj.date,
|
|
ceilingTilesService: ceilingTilesService,
|
|
ceilingVentsService: ceilingVentsService,
|
|
ceilingVentsWaiting: ceilingVentsWaiting,
|
|
posService: posService,
|
|
serviceCounter: serviceCounter,
|
|
oven: oven,
|
|
ovenDisassembled: ovenDisassembled,
|
|
ovenReassembled: ovenReassembled,
|
|
ovenAlerts: ovenAlerts,
|
|
ovenExterior: ovenExterior,
|
|
walls: walls,
|
|
posWall: posWall,
|
|
ceilingTilesPrep: ceilingTilesPrep,
|
|
ceilingVentsPrep: ceilingVentsPrep,
|
|
quarryTile: quarryTile,
|
|
cutTable: cutTable,
|
|
makeLine: makeLine,
|
|
subLine: subLine,
|
|
hotBoxes: hotBoxes,
|
|
doughPrep: doughPrep,
|
|
posDelivery: posDelivery,
|
|
managerStation: managerStation,
|
|
handSinks: handSinks,
|
|
dispensers: dispensers,
|
|
otherEquipment: otherEquipment,
|
|
ceilingTilesBack: ceilingTilesBack,
|
|
ceilingVentsBack: ceilingVentsBack,
|
|
trash: trash,
|
|
cleanup: cleanup,
|
|
alarm: alarm,
|
|
notes: notes,
|
|
});
|
|
if (response.status === 200) {
|
|
onSuccess(response.data.message);
|
|
}
|
|
} catch (error) {
|
|
alert(error.detail);
|
|
}
|
|
}
|
|
const onSuccess = (message) => {
|
|
alert(message);
|
|
window.location.reload();
|
|
}
|
|
|
|
const modalId = `modal-${proj.id.replace(/\s+/g, '-')}`;
|
|
return (
|
|
<div>
|
|
<button type="button" className="btn btn-primary m-3" data-bs-toggle="modal"
|
|
data-bs-target={`#${modalId}`}>
|
|
Create Punchlist
|
|
</button>
|
|
<div className='modal fade' id={modalId} data-bs-backdrop="static"
|
|
data-bs-keyboard="false" tabIndex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div className="modal-dialog">
|
|
<div className="modal-content">
|
|
<div className="modal-header">
|
|
<h1 className="modal-title fs-5" id="staticBackdropLabel">
|
|
Create a New Punchlist
|
|
</h1>
|
|
<button type="button" className="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<p>Project ID: {proj.id}</p>
|
|
<p>Store #: {proj.store} - {proj.city}</p>
|
|
<p>Date: {proj.date}</p>
|
|
|
|
<form>
|
|
<label className="form-label" htmlFor="punchlist-lobby">
|
|
Lobby
|
|
</label>
|
|
<div className="mb-3" id="punchlist-lobby">
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetCeilingTilesService} id="ceiling-tiles-service"/>
|
|
<label className="form-check-label"
|
|
htmlFor="ceiling-tiles-service">
|
|
Ceiling tiles above service counter wiped clean
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetCeilingVentsService} id="ceiling-vents-service"/>
|
|
<label className="form-check-label"
|
|
htmlFor="ceiling-vents-service">
|
|
Ceiling vents above service counter dusted and cleaned
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetCeilingVentsWaiting} id="ceiling-vents-waiting"/>
|
|
<label className="form-check-label"
|
|
htmlFor="ceiling-vents-waiting">
|
|
Ceiling vents in waiting area dusted and cleaned
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetPosService} id="pos-service"/>
|
|
<label className="form-check-label"
|
|
htmlFor="pos-service">
|
|
POS systems and peripherals wiped clean
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetServiceCounter} id="service-counter"/>
|
|
<label className="form-check-label"
|
|
htmlFor="service-counter">
|
|
Service counter wiped clean and polished
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<label className="form-label" htmlFor="punchlist-kitchen">
|
|
Kitchen
|
|
</label>
|
|
<div className="mb-3">
|
|
<label htmlFor="oven-type">
|
|
Oven type:
|
|
</label>
|
|
<div id="oven-type" className="mb-3">
|
|
<div className="form-check">
|
|
<input className="form-check-input" type="radio" name="oven"
|
|
onClick={handleSetOven} id="middleby" value="Middleby-Marshall"/>
|
|
<label className="form-check-label" htmlFor="middleby">
|
|
Middleby-Marshall
|
|
</label>
|
|
</div>
|
|
<div className="form-check">
|
|
<input className="form-check-input" type="radio" name="oven"
|
|
onClick={handleSetOven} id="xlt" value="XLT"/>
|
|
<label className="form-check-label" htmlFor="xlt">
|
|
XLT
|
|
</label>
|
|
</div>
|
|
<div className="form-check">
|
|
<input className="form-check-input" type="radio" name="oven"
|
|
onClick={handleSetOven} id="other-oven" value="Other"/>
|
|
<label className="form-check-label" htmlFor="other-oven">
|
|
Other - add notes
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3" id="punchlist-kitchen">
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetOvenDisassembled} id="oven-diassembled"/>
|
|
<label className="form-check-label"
|
|
htmlFor="oven-diassembled">
|
|
Oven disassembled and cleaned
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetOvenReassembled} id="oven-reassembled"/>
|
|
<label className="form-check-label"
|
|
htmlFor="oven-reassembled">
|
|
Oven reassembled to original configuration
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetOvenAlerts} id="oven-alerts"/>
|
|
<label className="form-check-label"
|
|
htmlFor="oven-alerts">
|
|
Oven alerts identified - add notes to supervisor
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetOvenExterior} id="oven-exterior"/>
|
|
<label className="form-check-label"
|
|
htmlFor="oven-exterior">
|
|
Oven exterior wiped clean and polished
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetWalls} id="walls"/>
|
|
<label className="form-check-label"
|
|
htmlFor="walls">
|
|
All walls, floor-to-ceiling, wiped clean
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetPosWall} id="pos-wall"/>
|
|
<label className="form-check-label"
|
|
htmlFor="pos-wall">
|
|
Wall-mounted POS systems and peripherals wiped clean
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetCeilingTilesPrep} id="ceiling-tiles-prep"/>
|
|
<label className="form-check-label"
|
|
htmlFor="ceiling-tiles-prep">
|
|
Ceiling tiles wiped clean
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetCeilingVentsPrep} id="ceiling-vents-prep"/>
|
|
<label className="form-check-label"
|
|
htmlFor="ceiling-vents-prep">
|
|
Ceiling vents dusted and cleaned
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetQuarryTile} id="quarry-tile"/>
|
|
<label className="form-check-label"
|
|
htmlFor="quarry-tile">
|
|
Quarry tile floors - add notes to supervisor
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<label className="form-label" htmlFor="punchlist-kitchen-equipment">
|
|
Kitchen Equipment
|
|
</label>
|
|
<div className="mb-3" id="punchlist-kitchen-equipment">
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetCutTable} id="cut-table"/>
|
|
<label className="form-check-label"
|
|
htmlFor="cut-table">
|
|
Cut table
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetMakeLine} id="make-line"/>
|
|
<label className="form-check-label"
|
|
htmlFor="make-line">
|
|
Make line
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetSubLine} id="sub-line"/>
|
|
<label className="form-check-label"
|
|
htmlFor="sub-line">
|
|
Sub line
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetHotBoxes} id="hot-boxes"/>
|
|
<label className="form-check-label"
|
|
htmlFor="hot-boxes">
|
|
Hot boxes
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetDoughPrep} id="dough-prep"/>
|
|
<label className="form-check-label"
|
|
htmlFor="dough-prep">
|
|
Dough prep
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetPosDelivery} id="pos-delivery"/>
|
|
<label className="form-check-label"
|
|
htmlFor="pos-delivery">
|
|
Delivery POS systems
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetManagerStation} id="manager-station"/>
|
|
<label className="form-check-label"
|
|
htmlFor="manager-station">
|
|
Manager station(s)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetHandSinks} id="hand-sinks"/>
|
|
<label className="form-check-label"
|
|
htmlFor="hand-sinks">
|
|
Hand-washing sinks
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetDispensers} id="dispensers"/>
|
|
<label className="form-check-label"
|
|
htmlFor="dispensers">
|
|
Soap and paper dispensers
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetOtherEquipment} id="other-equipment"/>
|
|
<label className="form-check-label"
|
|
htmlFor="other">
|
|
Other - add notes
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<label className="form-label" htmlFor="punchlist-back">
|
|
Back Room / Dishwashing Area
|
|
</label>
|
|
<div className="mb-3" id="punchlist-back">
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetCeilingTilesBack} id="ceiling-tiles-back"/>
|
|
<label className="form-check-label"
|
|
htmlFor="ceiling-tiles-back">
|
|
Ceiling tiles wiped clean
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetCeilingVentsBack} id="ceiling-vents-back"/>
|
|
<label className="form-check-label"
|
|
htmlFor="ceiling-vents-back">
|
|
Ceiling vents dusted and cleaned
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<label className="form-label" htmlFor="punchlist-wrapup">
|
|
Nightly Wrap-Up
|
|
</label>
|
|
<div className="mb-3" id="punchlist-wrapup">
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetTrash} id="trash"/>
|
|
<label className="form-check-label"
|
|
htmlFor="trash">
|
|
Trash receptacles emptied
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetCleanup} id="cleanup"/>
|
|
<label className="form-check-label"
|
|
htmlFor="cleanup">
|
|
Store left in clean and presentable condition
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="form-check form-switch">
|
|
<input className="form-check-input" type="checkbox" role="switch"
|
|
onChange={handleSetAlarm} id="alarm"/>
|
|
<label className="form-check-label"
|
|
htmlFor="alarm">
|
|
Store locked and alarm set (if applicable)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-3" id="punchlist-notes">
|
|
<div className="mb-3">
|
|
<label htmlFor="notes" className="form-label">
|
|
Notes
|
|
</label>
|
|
<textarea onChange={handleSetNotes} id="notes" className="form-control"
|
|
rows="5"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
<div className="modal-footer">
|
|
<button type="button" className="btn btn-secondary"
|
|
data-bs-dismiss="modal">
|
|
Cancel
|
|
</button>
|
|
<button onClick={handleSubmit} type="button" className="btn btn-primary"
|
|
data-bs-dismiss="modal">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|