Ajout du code de Tristan (sans les tests)

package-lock.json

@@ -5,19 +5,23 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "web-interface",
       "version": "0.1.0",
       "dependencies": {
-        "@emotion/react": "^11.10.4",
+        "@emotion/react": "^11.10.5",
-        "@emotion/styled": "^11.10.4",
+        "@emotion/styled": "^11.10.5",
         "@mui/icons-material": "^5.11.11",
-        "@mui/material": "^5.10.8",
+        "@mui/material": "^5.10.13",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^13.5.0",
+        "nodejs": "^0.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-leaflet": "^4.1.0",
+        "react-router": "^6.9.0",
+        "react-router-dom": "^6.9.0",
         "react-scripts": "5.0.1",
+        "react-window": "^1.8.8",
         "web-vitals": "^2.1.4"
       }
     },
@@ -3774,6 +3778,14 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz",
+      "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4163,6 +4175,21 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
+      "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -5923,6 +5950,7 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -7348,7 +7376,8 @@
         "esprima": "^4.0.1",
         "estraverse": "^5.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1"
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -10548,6 +10577,7 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
+        "fsevents": "^2.3.2",
         "graceful-fs": "^4.2.9",
         "jest-regex-util": "^27.5.1",
         "jest-serializer": "^27.5.1",
@@ -12090,6 +12120,7 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "dependencies": {
+        "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
       },
       "optionalDependencies": {
@@ -12354,6 +12385,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -12618,6 +12654,11 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
       "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w=="
     },
+    "node_modules/nodejs": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/nodejs/-/nodejs-0.0.0.tgz",
+      "integrity": "sha512-1V+0HwaB/dhxzidEFc4uJ3k52gLI4B6YBZgJIofjwYCSAkD6CI0me6TDBT2QM2nbGWNxCHcq9/wVynzQYZOhUg=="
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -14739,6 +14780,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz",
+      "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==",
+      "dependencies": {
+        "@remix-run/router": "1.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz",
+      "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==",
+      "dependencies": {
+        "@remix-run/router": "1.4.0",
+        "react-router": "6.9.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -14764,6 +14835,7 @@
         "eslint-webpack-plugin": "^3.1.1",
         "file-loader": "^6.2.0",
         "fs-extra": "^10.0.0",
+        "fsevents": "^2.3.2",
         "html-webpack-plugin": "^5.5.0",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^27.4.3",
@@ -14826,6 +14898,22 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-window": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.8.tgz",
+      "integrity": "sha512-D4IiBeRtGXziZ1n0XklnFGu7h9gU684zepqyKzgPNzrsrk7xOCxni+TCckjg2Nr/DiaEEGVVmnhYSlT2rB47dQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -15160,6 +15248,9 @@
       "version": "2.79.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
       "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+      "dependencies": {
+        "fsevents": "~2.3.2"
+      },
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -20185,6 +20276,11 @@
       "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
       "requires": {}
     },
+    "@remix-run/router": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz",
+      "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -20431,6 +20527,14 @@
         "@types/react-dom": "^18.0.0"
       }
     },
+    "@testing-library/user-event": {
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
+      "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5"
+      }
+    },
     "@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -26593,6 +26697,11 @@
         "fs-monkey": "^1.0.3"
       }
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -26784,6 +26893,11 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
       "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w=="
     },
+    "nodejs": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/nodejs/-/nodejs-0.0.0.tgz",
+      "integrity": "sha512-1V+0HwaB/dhxzidEFc4uJ3k52gLI4B6YBZgJIofjwYCSAkD6CI0me6TDBT2QM2nbGWNxCHcq9/wVynzQYZOhUg=="
+    },
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -28125,6 +28239,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz",
+      "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==",
+      "requires": {
+        "@remix-run/router": "1.4.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz",
+      "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==",
+      "requires": {
+        "@remix-run/router": "1.4.0",
+        "react-router": "6.9.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -28191,6 +28322,15 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-window": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.8.tgz",
+      "integrity": "sha512-D4IiBeRtGXziZ1n0XklnFGu7h9gU684zepqyKzgPNzrsrk7xOCxni+TCckjg2Nr/DiaEEGVVmnhYSlT2rB47dQ==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -4,16 +4,21 @@
   "homepage": ".",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.10.4",
+    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.4",
+    "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.11.11",
-    "@mui/material": "^5.10.8",
+    "@mui/material": "^5.10.13",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "nodejs": "^0.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-leaflet": "^4.1.0",
+    "react-router": "^6.9.0",
+    "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
+    "react-window": "^1.8.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/AppAdmin.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/AppAdmin.js

@@ -0,0 +1,201 @@
+import React from 'react';
+
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
+import Grid from '@mui/material/Grid';
+import ListItem from '@mui/material/ListItem';
+import ClearIcon from '@mui/icons-material/Clear';
+import CheckIcon from '@mui/icons-material/Check';
+import IconButton from '@mui/material/IconButton';
+import './AppAdmin.css';
+
+// https://encartes.aliens-lyon.fr/api/map/machin
+
+function FormatModeName(mode) {
+	if (mode === "add_place_name")
+		return "Ajouter un nom de salle"
+	else if (mode === "del_place_name")
+		return "Retirer un nom de salle"
+	else if (mode === "add_room_user_name")
+		return "Retirer un nom"
+	else if (mode === "del_room_user_name")
+		return "Retirer un nom"
+	else
+		return "Heeeeuh ya un prob la, 42"
+}
+
+function RenderRequestList() {
+	const [data, setData] = React.useState("");
+	
+	React.useEffect(() => { // Fetch the list of modifications to be accepted/denied
+	// fetch("./propositions.json")
+    // .then((response) => response.json())
+	// .then((data) => setData(data));
+	// }, []);
+
+	fetch('https://encartes.aliens-lyon.fr/api/map/get_all_editions')
+    .then((response) => response.json())
+	.then((data) => setData(data));
+	}, []);
+
+	const removeElement = (index) => { // Removes an element from the displayed modifications (does not remove it from the DB)
+		const newData = data.filter((_, i) => i !== index);
+		setData(newData);
+	};
+	
+	const acceptRequest = (item) => {
+		console.log("Proposition " + item.id + " acceptée.");
+		fetch("https://encartes.aliens-lyon.fr/api/map/" + item.mode + "/" + item.placeId + "/" + item.editorValue); // Send the request to the DataBase
+		fetch("https://encartes.aliens-lyon.fr/api/map/remove_edition/" + item.id); // Remove the edition
+	}
+
+	const denyRequest = (item) => {
+		console.log("Proposition " + item.id + " rejetée.")
+		fetch("https://encartes.aliens-lyon.fr/api/map/remove_edition/" + item.id); // Remove the edition, don't accept it
+	}
+
+	return <Box
+		sx={{ width: '100%', height: 680, maxWidth: 1200}}
+		>
+		<Typography sx={{ mt: 4, mb: 2 }} variant="h5" component="div">
+				Requêtes
+			</Typography>
+		<List>
+			{data.length>0 && 
+			<div>
+				<Grid container spacing={2} columns={10}>
+					<Grid item xs={1}>
+						Index
+					</Grid>
+					<Grid item xs={2}>
+						Modification
+					</Grid>
+					<Grid item xs={2}>
+						ID de salle
+					</Grid>
+					<Grid item xs={2}>
+						Noms de salle
+					</Grid>
+					<Grid item xs={3}>
+						Valeur à ajouter/supprimer
+					</Grid>
+				</Grid>
+				{data.map((item, index) => {
+				return (
+				<ListItem
+					secondaryAction={
+						<>
+						<IconButton 
+						onClick={(event) => {
+							removeElement(index); // Remove the display of this item
+							acceptRequest(item); // Send the signal that it has been accepted
+						}}
+						aria-label="check"
+						>
+						  	<CheckIcon />
+						</IconButton>
+						<IconButton 
+						onClick={(event) => {
+							removeElement(index); // Remove the display of this item
+							denyRequest(item); // Send the signal that it has been denied
+						}}
+						edge="end" 
+						aria-label="clear"
+						>
+						  <ClearIcon />
+						</IconButton>
+						</>
+					}
+					key={item.id}
+				>
+					<Grid container spacing={2} columns={10}>
+						<Grid item xs={1}>
+							{index+1}
+						</Grid>
+						<Grid item xs={2}>
+							{FormatModeName(item.mode)}
+						</Grid>
+						<Grid item xs={2}>
+							{item.placeId}
+						</Grid>
+						<Grid item xs={2}>
+							{item.placeNames.join(", ")}
+						</Grid>
+						<Grid item xs={3}>
+							{item.editorValue}
+						</Grid>
+					</Grid>
+				</ListItem>
+			);
+			})}
+			</div>}
+			{data.length===0 &&
+				<div>
+					Aucune requête !
+				</div>
+			}
+		</List>
+	</Box>
+}
+
+function TopBar() {
+	const [openAboutModal, setOpenAboutModal] = React.useState(false);
+
+	const handleOpenAboutModal = () => {
+		setOpenAboutModal(true);
+	};
+
+	const handleCloseAboutModal = () => {
+		setOpenAboutModal(false);
+	};
+
+	return <>
+		<AppBar position="static">
+		<Toolbar>
+			<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+			ENcarteS Admin
+			</Typography>
+			<Button color="inherit" onClick={handleOpenAboutModal}>À propos</Button>
+		</Toolbar>
+		</AppBar>
+
+		<Dialog
+		open={openAboutModal}
+		onClose={handleCloseAboutModal}
+		aria-labelledby="alert-dialog-title"
+		aria-describedby="alert-dialog-description"
+		>
+		<DialogTitle id="alert-dialog-title">
+			{"À propos de ENcarteS Admin"}
+		</DialogTitle>
+		<DialogContent>
+			<DialogContentText id="alert-dialog-description">
+			ENcarteS Admin permet d'accepter ou de refuser les requêtes de modification d'ENcarteS !
+			</DialogContentText>
+		</DialogContent>
+		<DialogActions>
+			<Button onClick={handleCloseAboutModal}>Ok</Button>
+		</DialogActions>
+		</Dialog>
+	</>
+}
+
+export default function AppAdmin() {
+	
+	return <>
+	<TopBar />
+
+	<div style={{ flexGrow: '1', display: 'flex', flexDirection: 'line', flexWrap: 'nowrap' }}>
+		<RenderRequestList/>
+	</div>
+	</>
+}

src/index.js

@@ -1,11 +1,28 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
 import './index.css';
 import App from './App';
+import AppAdmin from './AppAdmin'
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+    errorElement: <App />,
+  },
+  {
+    path: "/admin",
+    element: <AppAdmin />,
+  },
+]);
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );