mirror of
https://gitlab.aliens-lyon.fr/encartes/web-interface.git
synced 2026-03-17 22:51:04 +01:00
Split code in different files
This commit is contained in:
Adrien Vannson
parent
9b13ede171
commit
7ba5b00f25
254
src/App.js
254
src/App.js
@ -1,9 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
@ -12,169 +10,20 @@ import DialogContentText from '@mui/material/DialogContentText';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Select from '@mui/material/Select';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import SettingsBrightnessIcon from '@mui/icons-material/SettingsBrightness';
|
||||
|
||||
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
||||
|
||||
import './App.css'
|
||||
|
||||
import ChangeFloor from './ChangeFloor';
|
||||
import EditDialog from './EditDialog';
|
||||
import Map from './Map.js';
|
||||
import Rooms from './Rooms.js';
|
||||
import API_URL from './config.js';
|
||||
|
||||
function ChangeFloor({ currentFloor, callbackFloorChanged }) {
|
||||
const [sites, setSites] = React.useState([]);
|
||||
const handleFloorChanged = (event) => {
|
||||
callbackFloorChanged(event.target.value);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
fetch(API_URL + "get_all_floors/")
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setSites(data);
|
||||
|
||||
// Display a floor
|
||||
callbackFloorChanged(data[0].buildings[0].floors[0].id)
|
||||
});
|
||||
}, [callbackFloorChanged]);
|
||||
|
||||
if (currentFloor === undefined) return;
|
||||
|
||||
var items = [];
|
||||
|
||||
sites.forEach(site => {
|
||||
site.buildings.forEach(building => {
|
||||
building.floors.forEach(floor => {
|
||||
items.push(
|
||||
<MenuItem value={floor.id} key={floor.id}>
|
||||
{site.name} / {building.name} / {floor.name}
|
||||
</MenuItem>
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
return <>
|
||||
<div style={{ padding: '24px' }}>
|
||||
<Typography component="h2" variant="h5" gutterBottom>
|
||||
Changer d'étage
|
||||
</Typography>
|
||||
<Select
|
||||
value={currentFloor}
|
||||
label="Étage"
|
||||
onChange={handleFloorChanged}
|
||||
fullWidth
|
||||
>
|
||||
{items}
|
||||
</Select>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
function RoomResearch({ callbackRoomSelected }) {
|
||||
const [currentRequest, setCurrentRequest] = React.useState("");
|
||||
const [rooms, setRooms] = React.useState([]);
|
||||
|
||||
const startResearch = (event) => {
|
||||
fetch(API_URL + "find_place_by_name/" + currentRequest)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setRooms(data);
|
||||
});
|
||||
};
|
||||
|
||||
return <>
|
||||
<div style={{ padding: '24px' }}>
|
||||
<Typography component="h2" variant="h5" gutterBottom>
|
||||
Rechercher une salle
|
||||
</Typography>
|
||||
<TextField
|
||||
label="Nom, code, occupants, ..."
|
||||
value={currentRequest}
|
||||
onChange={(event) => { setCurrentRequest(event.target.value) }}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
<Box
|
||||
marginTop={1}
|
||||
display="flex"
|
||||
justifyContent="flex-end"
|
||||
alignItems="flex-end"
|
||||
>
|
||||
<Button startIcon={<SearchIcon />} variant="contained" onClick={startResearch}>
|
||||
Rechercher
|
||||
</Button>
|
||||
</Box>
|
||||
<Rooms rooms={rooms} callbackRoomSelected={callbackRoomSelected} />
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
function RoomInformation({ roomId, setIsEditDialogOpen }) {
|
||||
const [names, setNames] = React.useState([]);
|
||||
const [users, setUsers] = React.useState([]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (roomId !== undefined) {
|
||||
fetch(API_URL + "get_place_info/" + roomId)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setNames(data.names);
|
||||
setUsers(data.users);
|
||||
});
|
||||
}
|
||||
}, [roomId]);
|
||||
|
||||
if (roomId === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
return <div style={{ padding: '24px' }}>
|
||||
<Typography component="h2" variant="h5" gutterBottom>
|
||||
Salle sélectionnée
|
||||
</Typography>
|
||||
|
||||
<Typography component="h3" variant="h6" gutterBottom>Noms</Typography>
|
||||
{
|
||||
names.length === 0
|
||||
? <em>Aucun nom défini</em>
|
||||
: names.map(name => {
|
||||
return <React.Fragment key={name}>
|
||||
<Chip label={name} variant="outlined" />
|
||||
<br/>
|
||||
</React.Fragment>
|
||||
})
|
||||
}
|
||||
|
||||
<Typography component="h3" variant="h6" gutterBottom>Utilisateurs</Typography>
|
||||
<div>
|
||||
{
|
||||
users.length === 0
|
||||
? <em>Aucun utilisateur défini</em>
|
||||
: users.map(name => {
|
||||
return <React.Fragment key={name}>
|
||||
<Chip label={name} variant="outlined" />
|
||||
<br/>
|
||||
</React.Fragment>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
<Button startIcon={<EditIcon />} onClick={() => { setIsEditDialogOpen(true) }}>
|
||||
Modifier
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
import RoomInformation from './RoomInformation';
|
||||
import RoomResearch from './RoomResearch';
|
||||
|
||||
function TopBar({ toggleTheme }) {
|
||||
const [openAboutModal, setOpenAboutModal] = React.useState(false);
|
||||
@ -221,99 +70,6 @@ function TopBar({ toggleTheme }) {
|
||||
</>
|
||||
}
|
||||
|
||||
function EditDialog({ isOpen, setIsOpen, room }) {
|
||||
const [names, setNames] = React.useState([]);
|
||||
const [users, setUsers] = React.useState([]);
|
||||
const [newPlaceName, setNewPlaceName] = React.useState("");
|
||||
const [newUserName, setNewUserName] = React.useState("");
|
||||
|
||||
// Used to refresh useEffect
|
||||
const [updatesCount, setupdatesCount] = React.useState(0);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (room !== undefined) {
|
||||
fetch(API_URL + "get_place_info/" + room)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setNames(data.names);
|
||||
setUsers(data.users);
|
||||
});
|
||||
}
|
||||
}, [room, updatesCount]);
|
||||
|
||||
const refresh = () => {
|
||||
setupdatesCount(updatesCount + 1);
|
||||
};
|
||||
|
||||
const addName = () => {
|
||||
fetch(API_URL + "add_place_name/" + room + "/" + encodeURI(newPlaceName))
|
||||
.then(response => refresh());
|
||||
};
|
||||
|
||||
const removeName = (placeName) => {
|
||||
fetch(API_URL + "del_place_name/" + room + "/" + encodeURI(placeName))
|
||||
.then(response => refresh());
|
||||
}
|
||||
|
||||
const addUser = () => {
|
||||
fetch(API_URL + "add_room_user_name/" + room + "/" + encodeURI(newUserName))
|
||||
.then(response => refresh());
|
||||
};
|
||||
|
||||
const removeUser = (userName) => {
|
||||
fetch(API_URL + "del_room_user_name/" + room + "/" + encodeURI(userName))
|
||||
.then(response => refresh());
|
||||
}
|
||||
|
||||
return <Dialog open={isOpen} onClose={() => { setIsOpen(false) }}>
|
||||
<DialogTitle>Salle n°{room}</DialogTitle>
|
||||
<DialogContent>
|
||||
Noms :<br />
|
||||
{names.map(name => {
|
||||
return <Chip
|
||||
label={name}
|
||||
key={name}
|
||||
variant="outlined"
|
||||
onDelete={() => { removeName(name) }}
|
||||
/>
|
||||
})}
|
||||
|
||||
<TextField
|
||||
value={newPlaceName}
|
||||
onChange={(event) => { setNewPlaceName(event.target.value) }}
|
||||
label="Nom de la salle"
|
||||
margin="dense"
|
||||
fullWidth
|
||||
/>
|
||||
<Button onClick={() => { addName() }}>Ajouter</Button>
|
||||
|
||||
<Divider />
|
||||
|
||||
Utilisateurs :<br />
|
||||
{users.map(name => {
|
||||
return <Chip
|
||||
label={name}
|
||||
key={name}
|
||||
variant="outlined"
|
||||
onDelete={() => { removeUser(name) }}
|
||||
/>
|
||||
})}
|
||||
|
||||
<TextField
|
||||
value={newUserName}
|
||||
onChange={(event) => { setNewUserName(event.target.value) }}
|
||||
label="Nom de l'utilisateur"
|
||||
margin="dense"
|
||||
fullWidth
|
||||
/>
|
||||
<Button onClick={() => { addUser() }}>Ajouter</Button>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => { setIsOpen(false) }}>Fermer</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
}
|
||||
|
||||
function App({ toggleTheme }) {
|
||||
const [currentFloor, setCurrentFloor] = React.useState(undefined);
|
||||
const [selectedRoom, setSelectedRoom] = React.useState(undefined);
|
||||
|
||||
58
src/ChangeFloor.js
Normal file
58
src/ChangeFloor.js
Normal file
@ -0,0 +1,58 @@
|
||||
import React from 'react';
|
||||
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Select from '@mui/material/Select';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
import API_URL from './config.js';
|
||||
|
||||
export default function ChangeFloor({ currentFloor, callbackFloorChanged }) {
|
||||
const [sites, setSites] = React.useState([]);
|
||||
const handleFloorChanged = (event) => {
|
||||
callbackFloorChanged(event.target.value);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
fetch(API_URL + "get_all_floors/")
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setSites(data);
|
||||
|
||||
// Display a floor
|
||||
callbackFloorChanged(data[0].buildings[0].floors[0].id)
|
||||
});
|
||||
}, [callbackFloorChanged]);
|
||||
|
||||
if (currentFloor === undefined) return;
|
||||
|
||||
var items = [];
|
||||
|
||||
sites.forEach(site => {
|
||||
site.buildings.forEach(building => {
|
||||
building.floors.forEach(floor => {
|
||||
items.push(
|
||||
<MenuItem value={floor.id} key={floor.id}>
|
||||
{site.name} / {building.name} / {floor.name}
|
||||
</MenuItem>
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
return <>
|
||||
<div style={{ padding: '24px' }}>
|
||||
<Typography component="h2" variant="h5" gutterBottom>
|
||||
Changer d'étage
|
||||
</Typography>
|
||||
<Select
|
||||
value={currentFloor}
|
||||
label="Étage"
|
||||
onChange={handleFloorChanged}
|
||||
fullWidth
|
||||
>
|
||||
{items}
|
||||
</Select>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
105
src/EditDialog.js
Normal file
105
src/EditDialog.js
Normal file
@ -0,0 +1,105 @@
|
||||
import React from 'react';
|
||||
|
||||
import Button from '@mui/material/Button';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import TextField from '@mui/material/TextField';
|
||||
|
||||
import API_URL from './config.js';
|
||||
|
||||
export default function EditDialog({ isOpen, setIsOpen, room }) {
|
||||
const [names, setNames] = React.useState([]);
|
||||
const [users, setUsers] = React.useState([]);
|
||||
const [newPlaceName, setNewPlaceName] = React.useState("");
|
||||
const [newUserName, setNewUserName] = React.useState("");
|
||||
|
||||
// Used to refresh useEffect
|
||||
const [updatesCount, setupdatesCount] = React.useState(0);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (room !== undefined) {
|
||||
fetch(API_URL + "get_place_info/" + room)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setNames(data.names);
|
||||
setUsers(data.users);
|
||||
});
|
||||
}
|
||||
}, [room, updatesCount]);
|
||||
|
||||
const refresh = () => {
|
||||
setupdatesCount(updatesCount + 1);
|
||||
};
|
||||
|
||||
const addName = () => {
|
||||
fetch(API_URL + "add_place_name/" + room + "/" + encodeURI(newPlaceName))
|
||||
.then(response => refresh());
|
||||
};
|
||||
|
||||
const removeName = (placeName) => {
|
||||
fetch(API_URL + "del_place_name/" + room + "/" + encodeURI(placeName))
|
||||
.then(response => refresh());
|
||||
}
|
||||
|
||||
const addUser = () => {
|
||||
fetch(API_URL + "add_room_user_name/" + room + "/" + encodeURI(newUserName))
|
||||
.then(response => refresh());
|
||||
};
|
||||
|
||||
const removeUser = (userName) => {
|
||||
fetch(API_URL + "del_room_user_name/" + room + "/" + encodeURI(userName))
|
||||
.then(response => refresh());
|
||||
}
|
||||
|
||||
return <Dialog open={isOpen} onClose={() => { setIsOpen(false) }}>
|
||||
<DialogTitle>Salle n°{room}</DialogTitle>
|
||||
<DialogContent>
|
||||
Noms :<br />
|
||||
{names.map(name => {
|
||||
return <Chip
|
||||
label={name}
|
||||
key={name}
|
||||
variant="outlined"
|
||||
onDelete={() => { removeName(name) }}
|
||||
/>
|
||||
})}
|
||||
|
||||
<TextField
|
||||
value={newPlaceName}
|
||||
onChange={(event) => { setNewPlaceName(event.target.value) }}
|
||||
label="Nom de la salle"
|
||||
margin="dense"
|
||||
fullWidth
|
||||
/>
|
||||
<Button onClick={() => { addName() }}>Ajouter</Button>
|
||||
|
||||
<Divider />
|
||||
|
||||
Utilisateurs :<br />
|
||||
{users.map(name => {
|
||||
return <Chip
|
||||
label={name}
|
||||
key={name}
|
||||
variant="outlined"
|
||||
onDelete={() => { removeUser(name) }}
|
||||
/>
|
||||
})}
|
||||
|
||||
<TextField
|
||||
value={newUserName}
|
||||
onChange={(event) => { setNewUserName(event.target.value) }}
|
||||
label="Nom de l'utilisateur"
|
||||
margin="dense"
|
||||
fullWidth
|
||||
/>
|
||||
<Button onClick={() => { addUser() }}>Ajouter</Button>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => { setIsOpen(false) }}>Fermer</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
}
|
||||
64
src/RoomInformation.js
Normal file
64
src/RoomInformation.js
Normal file
@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
|
||||
import Button from '@mui/material/Button';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
|
||||
import API_URL from './config.js';
|
||||
|
||||
export default function RoomInformation({ roomId, setIsEditDialogOpen }) {
|
||||
const [names, setNames] = React.useState([]);
|
||||
const [users, setUsers] = React.useState([]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (roomId !== undefined) {
|
||||
fetch(API_URL + "get_place_info/" + roomId)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setNames(data.names);
|
||||
setUsers(data.users);
|
||||
});
|
||||
}
|
||||
}, [roomId]);
|
||||
|
||||
if (roomId === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
return <div style={{ padding: '24px' }}>
|
||||
<Typography component="h2" variant="h5" gutterBottom>
|
||||
Salle sélectionnée
|
||||
</Typography>
|
||||
|
||||
<Typography component="h3" variant="h6" gutterBottom>Noms</Typography>
|
||||
{
|
||||
names.length === 0
|
||||
? <em>Aucun nom défini</em>
|
||||
: names.map(name => {
|
||||
return <React.Fragment key={name}>
|
||||
<Chip label={name} variant="outlined" />
|
||||
<br/>
|
||||
</React.Fragment>
|
||||
})
|
||||
}
|
||||
|
||||
<Typography component="h3" variant="h6" gutterBottom>Utilisateurs</Typography>
|
||||
<div>
|
||||
{
|
||||
users.length === 0
|
||||
? <em>Aucun utilisateur défini</em>
|
||||
: users.map(name => {
|
||||
return <React.Fragment key={name}>
|
||||
<Chip label={name} variant="outlined" />
|
||||
<br/>
|
||||
</React.Fragment>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
<Button startIcon={<EditIcon />} onClick={() => { setIsEditDialogOpen(true) }}>
|
||||
Modifier
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
49
src/RoomResearch.js
Normal file
49
src/RoomResearch.js
Normal file
@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
|
||||
import Rooms from './Rooms.js';
|
||||
import API_URL from './config.js';
|
||||
|
||||
export default function RoomResearch({ callbackRoomSelected }) {
|
||||
const [currentRequest, setCurrentRequest] = React.useState("");
|
||||
const [rooms, setRooms] = React.useState([]);
|
||||
|
||||
const startResearch = (event) => {
|
||||
fetch(API_URL + "find_place_by_name/" + currentRequest)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setRooms(data);
|
||||
});
|
||||
};
|
||||
|
||||
return <>
|
||||
<div style={{ padding: '24px' }}>
|
||||
<Typography component="h2" variant="h5" gutterBottom>
|
||||
Rechercher une salle
|
||||
</Typography>
|
||||
<TextField
|
||||
label="Nom, code, occupants, ..."
|
||||
value={currentRequest}
|
||||
onChange={(event) => { setCurrentRequest(event.target.value) }}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
<Box
|
||||
marginTop={1}
|
||||
display="flex"
|
||||
justifyContent="flex-end"
|
||||
alignItems="flex-end"
|
||||
>
|
||||
<Button startIcon={<SearchIcon />} variant="contained" onClick={startResearch}>
|
||||
Rechercher
|
||||
</Button>
|
||||
</Box>
|
||||
<Rooms rooms={rooms} callbackRoomSelected={callbackRoomSelected} />
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user