admin interface basic functionalities

This commit is contained in:
Quentin Roussel
2024-03-26 01:21:26 +01:00
parent 2478ee32ec
commit b23d2a63e6
24 changed files with 1504 additions and 40 deletions

View File

@@ -1,12 +1,20 @@
"use client";
import { useState } from "react";
import Button from "../util/button";
import TextInput from "../util/textInput";
export default function LoginForm() {
export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
const [value, setValue] = useState("");
function handleSubmit(e) {
e.preventDefault();
setValue("");
onSubmit(value);
}
return (
<form className="bg-white shadow-md max-w mx-auto p-5 mx-10 flex flex-col space-y-4">
<h1 className="text-2xl font-bold text-center text-gray-700">Connexion équipe</h1>
<TextInput placeholder="Code d'équipe" name="team-id" />
<Button type="submit">Se connecter</Button>
<form className="bg-white shadow-md max-w mx-auto p-5 mx-10 flex flex-col space-y-4" onSubmit={handleSubmit}>
<h1 className="text-2xl font-bold text-center text-gray-700">{title}</h1>
<TextInput placeholder={placeholder} value={value} onChange={(e) => setValue(e.target.value)} name="team-id"/>
<Button type="submit">{buttonText}</Button>
</form>
)
}

View File

@@ -22,13 +22,28 @@ function MapPan(props) {
}
export default function LiveMap({enemyPosition, currentPosition, ...props}) {
const [positionSet, setPositionSet] = useState(false);
useEffect(() => {
if(!positionSet && JSON.stringify(currentPosition) != "[0,0]") {
setPositionSet(true);
}
}, [currentPosition]);
const [enemyPositionSet, setEnemyPositionSet] = useState(false);
useEffect(() => {
if(!enemyPositionSet && JSON.stringify(enemyPosition) != "[0,0]") {
setEnemyPositionSet(true);
}
}, [enemyPosition]);
return (
<MapContainer {...props} center={[0,0]} zoom={0} scrollWheelZoom={true}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={currentPosition} icon={new L.Icon({
{positionSet && <Marker position={currentPosition} icon={new L.Icon({
iconUrl: '/icons/location.png',
iconSize: [41, 41],
iconAnchor: [12, 41],
@@ -38,8 +53,8 @@ export default function LiveMap({enemyPosition, currentPosition, ...props}) {
<Popup>
Votre position
</Popup>
</Marker>
<Marker position={enemyPosition} icon={new L.Icon({
</Marker>}
{enemyPositionSet && <Marker position={enemyPosition} icon={new L.Icon({
iconUrl: '/icons/target.png',
iconSize: [41, 41],
iconAnchor: [12, 41],
@@ -49,7 +64,7 @@ export default function LiveMap({enemyPosition, currentPosition, ...props}) {
<Popup>
Position de l'ennemi
</Popup>
</Marker>
</Marker>}
<MapPan center={currentPosition}/>
</MapContainer>
)