128 lines
3.8 KiB
JavaScript
128 lines
3.8 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
|
|
import { useHotel } from "../HotelContext";
|
|
|
|
|
|
export default function AdminWidget() {
|
|
|
|
const [username, setUserName] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
|
|
const [hotel_ids, setHotelIds] = useState([]);
|
|
const [display_name, setDisplayName] = useState("");
|
|
|
|
const [allHotelsList, setAllHotelsList] = useState([]);
|
|
const [addHotelSelected, setAddHotelSelected] = useState([])
|
|
const [addHotelUserId, setAddHotelUserId] = useState("0");
|
|
|
|
const { registerUser, getHotelList, addHotelUser} = useHotel();
|
|
|
|
const createUser = (username, password, hotel_ids, display_name) => {
|
|
registerUser(username, password, hotel_ids, display_name);
|
|
}
|
|
//console.log(addHotelSelected);
|
|
|
|
useEffect(() => {
|
|
|
|
const loadHotels = async () => {
|
|
const hotels = await getHotelList();
|
|
setAllHotelsList(hotels);
|
|
}
|
|
|
|
loadHotels();
|
|
console.log("addhotel collected : " + allHotelsList)
|
|
}, [] );
|
|
|
|
const toggleHotel = (id) => {
|
|
setAddHotelSelected(prev =>
|
|
prev.includes(id)
|
|
? prev.filter(hotelId => hotelId !== id)
|
|
: [...prev, id]
|
|
);
|
|
};
|
|
|
|
function submit() {
|
|
|
|
addHotelUser(addHotelSelected, addHotelUserId );
|
|
setAddHotelUserId("");
|
|
};
|
|
|
|
|
|
return(
|
|
|
|
<div className="adminWidget">
|
|
<div className="CreateUserDiv">
|
|
<input
|
|
value={username}
|
|
onChange={e => setUserName(e.target.value)}
|
|
placeholder="NomDeCompte"
|
|
type="text" />
|
|
|
|
<input
|
|
value={password}
|
|
onChange={e => setPassword(e.target.value)}
|
|
placeholder="Mot de Passe"
|
|
type="text" />
|
|
|
|
<input
|
|
value={display_name}
|
|
onChange={e => setDisplayName(e.target.value)}
|
|
placeholder="Nome afficher"
|
|
type="text" />
|
|
|
|
<input
|
|
value={hotel_ids}
|
|
onChange={e => setHotelIds(e.target.value.split(",").map(Number))}
|
|
placeholder="hotels"
|
|
type="text" />
|
|
|
|
<button
|
|
onClick={() =>
|
|
registerUser(username, password, hotel_ids, display_name)
|
|
}
|
|
>
|
|
Créer l'utilisateur
|
|
</button>
|
|
</div>
|
|
|
|
<div className="addHotelUser">
|
|
<div className="hotels">
|
|
{allHotelsList.map(hotel => (
|
|
<HotelCard
|
|
key={hotel.id}
|
|
id={hotel.id}
|
|
hotel_name={hotel.hotel_name}
|
|
checked={addHotelSelected.includes(hotel.id)}
|
|
onToggle={toggleHotel}
|
|
/>
|
|
))}
|
|
</div>
|
|
<input type="text"
|
|
defaultValue={""}
|
|
value={addHotelUserId}
|
|
autoFocus
|
|
onChange={e => setAddHotelUserId(e.target.value)}
|
|
onKeyDown={e => e.key === "Enter" && submit() }
|
|
/>
|
|
<button onClick={() => addHotelUser(addHotelUserId ,addHotelSelected)}>send</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function HotelCard({ id, hotel_name, checked, onToggle }) {
|
|
return (
|
|
<div className="hotelCard">
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={() => onToggle(id)}
|
|
/>
|
|
<strong>{hotel_name}</strong> (id: {id})
|
|
</label>
|
|
</div>
|
|
);
|
|
} |