ADMIN get all hotel, add hotel for user

src/components/HotelContext.jsx

@@ -262,8 +262,6 @@ export function HotelProvider({ accessToken, children, resClientId}) {
 
   // --- WS DISPATCH MESSAGE ----
 
-
-
   function handleWsMessage(msg) {
     console.log("websocket message is :" + msg.event_type, typeof msg.event_type);
   switch (msg.event_type) {
@@ -290,9 +288,6 @@ export function HotelProvider({ accessToken, children, resClientId}) {
   }
 }
 
-
-
-
  // --- ADMIN PORTAL ----
 
  function registerUser(username,password,hotel_ids, displayname) {
@@ -315,6 +310,38 @@ export function HotelProvider({ accessToken, children, resClientId}) {
  
  }
 
+async function getHotelList() {
+  
+    const res = await fetch(`${API_BASE}/auth/get_hotels`,
+      {
+        method: "GET",
+        headers: {"Content-Type": "application/json"},
+      }
+    )
+
+    const result = await res.json();
+    console.log("all result " + result);
+    return result;
+
+}
+
+async function addHotelUser(user_id,hotel_ids) {
+
+  const payload = {
+    user_id: parseInt(user_id),
+    hotel_ids,
+  } 
+
+  const res = await fetch(`${API_BASE}/auth/add_hotel_user`,
+    {
+      method: "PUT",
+      headers: {"Content-Type": "application/json"},
+      body: JSON.stringify(payload),
+
+    }
+  )
+
+}
 
 
 
@@ -336,7 +363,7 @@ export function HotelProvider({ accessToken, children, resClientId}) {
       setConversations(convData);
       setUsers(usersData);
 
-      
+      //getHotelList();
 
     }
     
@@ -383,7 +410,7 @@ export function HotelProvider({ accessToken, children, resClientId}) {
     return () => {
       ws.close();
     };
-}, [accessTokenSingle]);
+  }, [accessTokenSingle]);
 
 
 
@@ -403,7 +430,9 @@ export function HotelProvider({ accessToken, children, resClientId}) {
         addUserToConv, createConversation,
         fetchHotelInventory, updateItemAmount, createItem,
         
-        registerUser
+        registerUser,
+        getHotelList, addHotelUser,
+
       }}
     >
       {children}

src/components/widget/adminWidget.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import { useHotel } from "../HotelContext";
 
@@ -7,24 +7,51 @@ export default function AdminWidget() {
 
     const [username, setUserName] = useState("");
     const [password, setPassword] = useState("");
+    
     const [hotel_ids, setHotelIds] = useState([]);
     const [display_name, setDisplayName] = useState("");
     
-    const {
-        registerUser
-    } = useHotel()
+    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)}
@@ -58,7 +85,44 @@ export default function AdminWidget() {
                 </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>
+    );
 }

src/components/widget/roomWidget.jsx

@@ -20,6 +20,8 @@ export default function RoomWidget({ roomlist }) {
 
 function RoomCard({ number, status ,id}) {
   
+
+  //FIXME: this shouldn't use hotel context, instead : set the state once on load
   const { updateRoomStatus } = useHotel();
   const [editing, setEdtiting] = useState(false);
   const [value, SetValue] = useState(status);