mirror of
https://git.rezel.net/LudoTech/traque.git
synced 2026-02-09 10:20:16 +01:00
admin interface basic functionalities
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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='© <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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user