import React, { useEffect, useState, useRef } from 'react';
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Dropdown } from 'primereact/dropdown';
import { Toast } from 'primereact/toast';
import classNames from 'classnames';
import { Dialog } from 'primereact/dialog';
import { Toolbar } from 'primereact/toolbar';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHome, faUserAlt } from '@fortawesome/free-solid-svg-icons';
import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
import { faClockFour } from '@fortawesome/free-solid-svg-icons';
import { useCookies } from 'react-cookie';
const Reservations = () => {
let emptyReservation = {
_id: null,
date: '',
time: '',
user_id: '',
user_name: '',
common_area_id: '',
common_area_name: '',
community_id: '',
status: '1',
status_text: '',
date_entry: new Date(),
};
const [reservations, setReservations] = useState([]);
const [reservation, setReservation] = useState(emptyReservation);
const [submitted, setSubmitted] = useState(false);
const [selectedReservations, setSelectedReservations] = useState(null);
const [globalFilter, setGlobalFilter] = useState(null);
const [deleteReservationDialog, setDeleteReservationDialog] = useState(false);
const [deleteReservationsDialog, setDeleteReservationsDialog] = useState(false);
const toast = useRef(null);
const dt = useRef(null);
const [cookies, setCookies] = useCookies()
const [areas, setAreas] = useState([]);
const [area, setArea] = useState();
const [areaId, setAreaId] = useState();
const [tenants, setTenants] = useState([]);
const [tenantId, setTenantId] = useState();
const [saveButtonTitle, setSaveButtonTitle] = useState("Registrar")
async function tenantsList(id) {
await fetch(`http://localhost:4000/user/findTenants/${id}`,
{ method: 'GET' })
.then((response) => response.json())
.then(data => data.message)
.then(data => {
data = data.filter(
(val) => val.status != -1,
)
data = data.map(item => {
item.password = '';
return item;
})
setTenants(data)
});
}
async function areasList(id) {
await fetch(`http://localhost:4000/commonArea/findByCommunity/${id}`,
{ method: 'GET' })
.then((response) => response.json())
.then(data => data.message)
.then(data => {
data = data.filter(
(val) => val.status != -1
)
data = data.filter(
(val) => val.bookable == 1,
)
setAreas(data)
});
}
async function reservationList(id) {
await fetch(`http://localhost:4000/reservation/findReservations/${id}`,
{ method: 'GET' })
.then((response) => response.json())
.then(data => data.message)
.then(data => {
data = data.filter(
(val) => val.status != -1,
)
data.map((item) => {
if (item.status == '1') {
item.status_text = 'Activo';
} else if (item.status == '0') {
item.status_text = 'Inactivo';
}
})
setReservations(data)
});
}
useEffect(() => {
tenantsList(cookies.community_id);
}, [])
useEffect(() => {
areasList(cookies.community_id);
}, [])
reservations.map((item) => {
let tenant = tenants.find(item2 => item2._id == item.user_id);
if (tenant) {
item.user_name = tenant.name + ' ' + tenant.last_name;
}
});
useEffect(() => {
reservationList(cookies.community_id);
}, [])
const saveReservation = () => {
if (reservation.common_area_id) {
} else {
setSubmitted(true);
}
}
const actionsReservation = (rowData) => {
return (
confirmDeleteReservation(rowData)}
title="Eliminar Reserva"
/>
);
};
const confirmDeleteReservation = (reservation) => {
setReservation(reservation);
setDeleteReservationDialog(true);
};
const confirmDeleteSelected = () => {
setDeleteReservationsDialog(true);
};
const cancelEdit = () => {
setReservation(emptyReservation);
setSaveButtonTitle('Registrar');
setAreaId('');
}
const leftToolbarTemplate = () => {
return (
);
};
const rightToolbarTemplate = () => {
return (
);
};
const header = (
Reservaciones
setGlobalFilter(e.target.value)}
placeholder="Buscar..."
/>
);
const headerStartTime = (
<>
{' '}
Fecha de Reserva
>
);
const headerEndTime = (
<>
{' '}
{' '}
Hora de Reserva
>
);
const headerUser = (
<>
{' '}
{' '}
Inquilino
>
);
const headerArea = (
<>
{' '}
{' '}
Área Reservada
>
);
const headerStatus = (
<>
{' '}
{' '}
Estado
>
)
const statusBodyTemplate = (rowData) => {
return (
<>
{rowData.status_text}
>
);
};
const onInputChange = (e, name) => {
const val = (e.target && e.target.value) || '';
let _reservation = { ...reservation };
_reservation[`${name}`] = val;
setReservation(_reservation);
};
const handleAreas = (e) => {
const getAreaId = e.target.value;
setAreaId(getAreaId);
let area = areas.find(item => item._id == getAreaId);
setArea(area)
}
const handleTenants = (e) => {
const getTenantId = e.target.value;
setTenantId(getTenantId);
}
const aList = areas.map((item) => ({
label: item.name,
value: item._id,
}));
const tList = tenants.map((item) => ({
label: item.name,
value: item._id,
}));
function convertToISO(timeString) {
const [hour12, ampm] = timeString.split(/(?=[ap]m$)/i)
const hour = hour12 % 12 + (ampm.toLowerCase() === 'pm' ? 12 : 0)
const date = new Date()
// Set time, adjusted for time zone
date.setHours(hour, -date.getTimezoneOffset(), 0, 0)
return date.toISOString()
}
function validationTime() {
let value = true;
const [hourR, minuteR] = reservation.time.split(':');
if (hourR != "") {
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) {
const [hour, minute] = timeString.split(':');
const date = new Date()
date.setHours(hour);
date.setMinutes(minute);
console.log(date.toTimeString());
return date.toString()
}
return (
setSelectedReservations(e.value)}
scrollable
scrollHeight="400px"
scrollDirection="both"
header={header}
rowsPerPageOptions={[5, 10, 25]}
className="datatable-responsive mt-3"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} reservaciones de la comunidad"
globalFilter={globalFilter}
emptyMessage="No hay reservas registradas."
>
Reservar Área para Inquilino
Área Común:
{submitted
&& !areaId
&&
Área Común es requerida. }
{area &&
<>
Fecha
onInputChange(e, 'date')}
required
autoFocus
min={Date()}
type="date"
lang='es'
value={reservation.date}
className={classNames({
'p-invalid': submitted && reservation.date === '',
})}
/>
{submitted && reservation.date === '' && (
Fecha es requirida.
)}
Hora de Reservación
onInputChange(e, 'time')}
required
autoFocus
type="time"
step='3600'
className={classNames({
'p-invalid': submitted && (reservation.time === '' || validationTime()),
})}
/>
{submitted && reservation.time === '' && (
Hora es requirido.
)}
{submitted && validationTime() && (
La hora de inicio debe set mayor de {area.hourMin} y menor de {area.hourMax} .
)}
>
}
Inquilino:
{submitted
&& !tenantId
&&
Inquilino es requerido. }
{saveButtonTitle === 'Actualizar' && (
)}
);
}
export default React.memo(Reservations);