eduardo
/
katoikia-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

change manejo de fechas

This commit is contained in:
Mariela 2022-08-26 00:02:17 -06:00
parent 594b59227d
commit 2bce41dbc0
1 changed files with 47 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
web-ui/web-react/src/components/Reservaciones.js
View File

@ -17,8 +17,8 @@ import { useCookies } from 'react-cookie';
const Reservations = () => { const Reservations = () => {
let emptyReservation = { let emptyReservation = {
_id: null, _id: null,
start_time: '', date: '',
finish_time: '', time: '',
user_id: '', user_id: '',
user_name: '', user_name: '',
common_area_id: '', common_area_id: '',
@ -71,8 +71,12 @@ const Reservations = () => {
.then(data => data.message) .then(data => data.message)
.then(data => { .then(data => {
data = data.filter( data = data.filter(
(val) => val.status != -1, (val) => val.status != -1
) )
data = data.filter(
(val) => val.bookable == 1,
)
setAreas(data) setAreas(data)
}); });
} }
@ -209,7 +213,7 @@ const Reservations = () => {
<p> <p>
{' '} {' '}
<FontAwesomeIcon icon={faClockFour} style={{ color: '#C08135' }} /> <FontAwesomeIcon icon={faClockFour} style={{ color: '#C08135' }} />
Hora de Apertura Fecha de Reserva
</p> </p>
</> </>
); );
@ -219,7 +223,7 @@ const Reservations = () => {
<p> <p>
{' '} {' '}
<FontAwesomeIcon icon={faClockFour} style={{ color: '#D7A86E' }} />{' '} <FontAwesomeIcon icon={faClockFour} style={{ color: '#D7A86E' }} />{' '}
Hora de Cierre Hora de Reserva
</p> </p>
</> </>
); );
@ -283,7 +287,7 @@ const Reservations = () => {
const handleTenants = (e) => { const handleTenants = (e) => {
const getTenantId = e.target.value; const getTenantId = e.target.value;
setAreaId(getTenantId); setTenantId(getTenantId);
} }
const aList = areas.map((item) => ({ const aList = areas.map((item) => ({
@ -305,14 +309,19 @@ const Reservations = () => {
return date.toISOString() return date.toISOString()
} }
function validateTime(timeStart, timeFinish) { function validationTime() {
if ((timeFinish - timeStart) == 1) { let value = true;
return ( const [hourR, minuteR] = reservation.time.split(':');
<> if (hourR != "") {
<small className="p-invalid">La hora de inicio debe ser la hora .</small> const [hourMin, minuteMin] = area.hourMin.split(':');
</> const [hourMax, minuteMax] = area.hourMax.split(':');
) if ((parseInt(hourR) >= parseInt(hourMin)) && (parseInt(hourR) <= parseInt(hourMax))) {
value = false;
}
} else {
value = false;
} }
return value;
} }
function convertToTime(timeString) { function convertToTime(timeString) {
@ -448,61 +457,67 @@ const Reservations = () => {
{area && {area &&
<> <>
<div className="field col-3 md:col-3"> <div className="field col-3 md:col-3">
<label htmlFor="name">Fecha Inicio</label> <label htmlFor="name">Fecha</label>
<div className="p-0 col-12 md:col-12"> <div className="p-0 col-12 md:col-12">
<div className="p-inputgroup"> <div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i> <i className="pi pi-home"></i>
</span> </span>
<InputText <InputText
id="start_time" id="date"
onChange={(e) => onInputChange(e, 'start_time')} onChange={(e) => onInputChange(e, 'date')}
required required
autoFocus autoFocus
min={area.hourMin} min={Date()}
max={area.hourMax} type="date"
type="time"
lang='es' lang='es'
value={reservation.start_time} value={reservation.date}
className={classNames({ className={classNames({
'p-invalid': submitted && reservation.start_time === '', 'p-invalid': submitted && reservation.date === '',
})} })}
/> />
</div> </div>
{submitted && reservation.start_time === '' && ( {submitted && reservation.date === '' && (
<small className="p-invalid">Nombre es requirido.</small> <small className="p-invalid">Fecha es requirida.</small>
)} )}
</div> </div>
</div> </div>
<div className="field col-3 md:col-3"> <div className="field col-3 md:col-3">
<label htmlFor="name">Nombre</label> <label htmlFor="name">Hora de Reservación</label>
<div className="p-0 col-12 md:col-12"> <div className="p-0 col-12 md:col-12">
<div className="p-inputgroup"> <div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i> <i className="pi pi-home"></i>
</span> </span>
<InputText <InputText
id="finish_time" id="time"
value={reservation.finish_time} value={reservation.time}
onChange={(e) => onInputChange(e, 'finish_time')} onChange={(e) => onInputChange(e, 'time')}
required required
autoFocus autoFocus
type="time" type="time"
step='3600'
className={classNames({ className={classNames({
'p-invalid': submitted && reservation.finish_time === '', 'p-invalid': submitted && (reservation.time === '' || validationTime()),
})} })}
/> />
</div> </div>
{submitted && reservation.finish_time === '' && ( {submitted && reservation.time === '' && (
<small className="p-invalid">Nombre es requirido.</small> <small className="p-invalid">Hora es requirido.</small>
)} )}
{submitted && validationTime() && (
<small className="p-invalid">La hora de inicio debe set mayor de {area.hourMin} y menor de {area.hourMax} .</small>
)}
</div> </div>
</div> </div>
</> </>
} }
<div className="field col-6 md:col-6"> <div className="field col-6 md:col-6">
<label htmlFor="common_area_id">Inquilino: </label> <label htmlFor="user_id">Inquilino: </label>
<div className="p-0 col-12 md:col-12"> <div className="p-0 col-12 md:col-12">
<div className="p-inputgroup"> <div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
@ -510,7 +525,7 @@ const Reservations = () => {
</span> </span>
<Dropdown <Dropdown
placeholder="--Seleccione el Inquilino a Reservar--" placeholder="--Seleccione el Inquilino a Reservar--"
id="common_area_id" id="user_id"
value={tenantId} value={tenantId}
options={tList} options={tList}
onChange={handleTenants} onChange={handleTenants}