diff options
| author | Anton Tananaev <anton@traccar.org> | 2024-04-06 09:13:06 -0700 |
|---|---|---|
| committer | Anton Tananaev <anton@traccar.org> | 2024-04-06 09:13:06 -0700 |
| commit | 94cadecda794358a53995c276697919eaf540466 (patch) | |
| tree | a7a054fdb07cb9dd72476a801fd44ffce03d4df6 | |
| parent | b6a7fd8d2a14c8f541cd1c584f719dd948128e4e (diff) | |
| download | trackermap-web-94cadecda794358a53995c276697919eaf540466.tar.gz trackermap-web-94cadecda794358a53995c276697919eaf540466.tar.bz2 trackermap-web-94cadecda794358a53995c276697919eaf540466.zip | |
Make the page nicer
| -rw-r--r-- | web/simple/index.html | 27 |
1 files changed, 20 insertions, 7 deletions
diff --git a/web/simple/index.html b/web/simple/index.html index f5dcd4e3..4df77259 100644 --- a/web/simple/index.html +++ b/web/simple/index.html @@ -4,13 +4,14 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Traccar</title> +<link href="https://unpkg.com/@picocss/pico@2.0.6/css/pico.min.css" rel="stylesheet"> +<link href="https://unpkg.com/maplibre-gl@4.1.2/dist/maplibre-gl.css" rel="stylesheet"> </head> <body style="margin: 0; padding: 0;"> <div id="content" style="width: 100%; height: 100%; position:fixed;"></div> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/maplibre-gl@4.1.2/dist/maplibre-gl.js"></script> -<link href="https://unpkg.com/maplibre-gl@4.1.2/dist/maplibre-gl.css" rel="stylesheet"> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> @@ -45,11 +46,10 @@ }; const formStyle = { - width: '180px', - margin: '16px', + width: '320px', + margin: '32px', display: 'flex', flexDirection: 'column', - gap: '8px', }; return ( @@ -72,7 +72,7 @@ ); }; - const MainScreen = () => { + const MainScreen = ({ setUser }) => { const mapContainer = React.useRef(); const map = React.useRef(); @@ -132,6 +132,15 @@ fetchData(); }; + const handleLogout = (event) => { + event.preventDefault(); + const fetchData = async () => { + await fetch('/api/session', { method: 'DELETE' }); + setUser(null); + } + fetchData(); + }; + React.useEffect(() => { map.current.on('load', () => { map.current.addSource('points', { @@ -169,7 +178,8 @@ display: 'flex', }; const deviceStyle = { - width: '240px', + width: '320px', + marginTop: '16px', }; const mapStyle = { height: '100%', @@ -182,6 +192,7 @@ <ul> {devices?.map((device) => (<li key={device.id}>{device.name}</li>))} <li><a href="#" onClick={handleAddDevice}>Add device</a></li> + <li><a href="#" onClick={handleLogout}>Logout</a></li> </ul> </div> <div style={mapStyle} ref={mapContainer}></div> @@ -208,7 +219,9 @@ }, []); return user ? ( - <MainScreen /> + <MainScreen + setUser={setUser} + /> ) : server ? ( <LoginScreen server={server} |