68 lines
1.4 KiB
JavaScript
68 lines
1.4 KiB
JavaScript
|
|
import "./RoomWidget.css";
|
|
import { useHotel } from "../HotelContext";
|
|
import { useState } from "react";
|
|
export default function RoomWidget({ roomlist }) {
|
|
|
|
return (
|
|
<div className="grid">
|
|
{roomlist.map(room => (
|
|
<RoomCard
|
|
key={room.id}
|
|
id = {room.id}
|
|
number={room.number}
|
|
status={room.status}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function RoomCard({ number, status ,id}) {
|
|
|
|
const { updateRoomStatus } = useHotel();
|
|
const [editing, setEditing] = useState(false);
|
|
const [value, SetValue] = useState(status);
|
|
|
|
function submit() {
|
|
updateRoomStatus(id,value);
|
|
setEditing(false);
|
|
}
|
|
|
|
return (
|
|
<div className="card">
|
|
<h3>Room {number}</h3>
|
|
<h4>Id {id}</h4>
|
|
|
|
{!editing ?(
|
|
<p onClick={() => setEditing(true)} style={{ cursor: "pointer" }}>
|
|
Status: {status}
|
|
</p>
|
|
): (
|
|
<div>
|
|
<input
|
|
type="text"
|
|
value={value}
|
|
autoFocus
|
|
onChange={e => SetValue(e.target.value)}
|
|
onKeyDown={e => e.key === "Enter" && submit()}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
|
|
<div className="actions">
|
|
<button onClick={() => updateRoomStatus(id, "clean")}>
|
|
Mark Clean
|
|
</button>
|
|
|
|
<button onClick={() => updateRoomStatus(id, "dirty")}>
|
|
Mark Dirty
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
//export default roomWidget
|