diff options
| author | Wolfboy248 <georgejvindkarlsen@gmail.com> | 2024-11-01 17:56:47 +0100 |
|---|---|---|
| committer | Wolfboy248 <georgejvindkarlsen@gmail.com> | 2024-11-01 17:56:47 +0100 |
| commit | cd80c6aa224b4dbdda7f31bb0d93ce8fda8fcf81 (patch) | |
| tree | 109978f9f9ecf5fddcd6a584bd435982c99b921f /frontend | |
| parent | frontend: uploadrundialog.tsx (diff) | |
| download | lphub-cd80c6aa224b4dbdda7f31bb0d93ce8fda8fcf81.tar.gz lphub-cd80c6aa224b4dbdda7f31bb0d93ce8fda8fcf81.tar.bz2 lphub-cd80c6aa224b4dbdda7f31bb0d93ce8fda8fcf81.zip | |
frontend: uploadrundialog
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/src/api/Api.tsx | 2 | ||||
| -rw-r--r-- | frontend/src/components/Login.tsx | 3 | ||||
| -rw-r--r-- | frontend/src/components/UploadRunDialog.tsx | 52 | ||||
| -rw-r--r-- | frontend/src/css/UploadRunDialog.css | 3 |
4 files changed, 33 insertions, 27 deletions
diff --git a/frontend/src/api/Api.tsx b/frontend/src/api/Api.tsx index ddc7ac6..053e920 100644 --- a/frontend/src/api/Api.tsx +++ b/frontend/src/api/Api.tsx | |||
| @@ -49,7 +49,7 @@ export const API = { | |||
| 49 | delete_map_summary: (token: string, map_id: string, route_id: number) => delete_map_summary(token, map_id, route_id), | 49 | delete_map_summary: (token: string, map_id: string, route_id: number) => delete_map_summary(token, map_id, route_id), |
| 50 | }; | 50 | }; |
| 51 | 51 | ||
| 52 | const BASE_API_URL: string = "https://lp.portal2.sr/api/v1/" | 52 | const BASE_API_URL: string = "/api/v1/" |
| 53 | 53 | ||
| 54 | export function url(path: string): string { | 54 | export function url(path: string): string { |
| 55 | return BASE_API_URL + path; | 55 | return BASE_API_URL + path; |
diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx index d33e25e..545f724 100644 --- a/frontend/src/components/Login.tsx +++ b/frontend/src/components/Login.tsx | |||
| @@ -17,8 +17,7 @@ const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => { | |||
| 17 | const navigate = useNavigate(); | 17 | const navigate = useNavigate(); |
| 18 | 18 | ||
| 19 | const _login = () => { | 19 | const _login = () => { |
| 20 | setToken("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MzI3Nzg0NTEsIm1vZCI6ZmFsc2UsInN1YiI6Ijc2NTYxMTk5MDg4MjU3MDk4In0.MwYcAy1q463-A2qxLn3Dk4T7ECwta_x4h-CJOTB6VZY"); | 20 | window.location.href = "/api/v1/login"; |
| 21 | // window.location.href = "/api/v1/login"; | ||
| 22 | }; | 21 | }; |
| 23 | 22 | ||
| 24 | const _logout = () => { | 23 | const _logout = () => { |
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx index 8c201ff..0610377 100644 --- a/frontend/src/components/UploadRunDialog.tsx +++ b/frontend/src/components/UploadRunDialog.tsx | |||
| @@ -198,36 +198,42 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose, | |||
| 198 | <div id='upload-run-menu-add'> | 198 | <div id='upload-run-menu-add'> |
| 199 | <div id='upload-run-route-category'> | 199 | <div id='upload-run-route-category'> |
| 200 | <div style={{ padding: "15px 0px" }} className='upload-run-dropdown-container upload-run-item'> | 200 | <div style={{ padding: "15px 0px" }} className='upload-run-dropdown-container upload-run-item'> |
| 201 | <h1 style={{ paddingBottom: "14px" }}>Select Game</h1> | 201 | <h3 style={{ margin: "0px 0px" }}>Select Game</h3> |
| 202 | <div onClick={() => _handle_dropdowns(1)} style={{ display: "flex", alignItems: "center", cursor: "pointer", justifyContent: "space-between" }}> | 202 | <div onClick={() => _handle_dropdowns(1)} style={{ display: "flex", alignItems: "center", cursor: "pointer", justifyContent: "space-between", margin: "10px 0px" }}> |
| 203 | <div className='dropdown-cur'>{selectedGameName}</div> | 203 | <div className='dropdown-cur'>{selectedGameName}</div> |
| 204 | <i style={{ rotate: "-90deg", transform: "translate(-5px, 10px)" }} className="triangle"></i> | 204 | <i style={{ rotate: "-90deg", transform: "translate(-5px, 10px)" }} className="triangle"></i> |
| 205 | </div> | 205 | </div> |
| 206 | <div style={{top: "160px"}} className={dropdown1Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}> | 206 | <div style={{top: "110px"}} className={dropdown1Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}> |
| 207 | {games.map((game) => ( | 207 | {games.map((game) => ( |
| 208 | <div onClick={() => { _handle_game_select(game.id.toString(), game.name); _handle_dropdowns(1) }} key={game.id}>{game.name}</div> | 208 | <div onClick={() => { _handle_game_select(game.id.toString(), game.name); _handle_dropdowns(1) }} key={game.id}>{game.name}</div> |
| 209 | ))} | 209 | ))} |
| 210 | </div> | 210 | </div> |
| 211 | </div> | 211 | {!loading && ( |
| 212 | { | 212 | <> |
| 213 | !loading && | 213 | <div style={{ padding: "25px 0px" }}> |
| 214 | ( | 214 | <h3 style={{ margin: "0px 0px" }}>Select Map</h3> |
| 215 | <> | 215 | <div onClick={() => _handle_dropdowns(2)} style={{ display: "flex", alignItems: "center", cursor: "pointer", justifyContent: "space-between", margin: "10px 0px" }}> |
| 216 | <div className='upload-run-map-container upload-run-item' style={{ paddingBottom: "10px" }}> | ||
| 217 | <div style={{ padding: "15px 0px" }}> | ||
| 218 | <h3 style={{ margin: "10px 0px" }}>Select Map</h3> | ||
| 219 | <div onClick={() => _handle_dropdowns(2)} style={{ display: "flex", alignItems: "center", cursor: "pointer", justifyContent: "space-between" }}> | ||
| 220 | <span style={{ userSelect: "none" }}>{currentMap}</span> | 216 | <span style={{ userSelect: "none" }}>{currentMap}</span> |
| 221 | <i style={{ rotate: "-90deg", transform: "translate(-5px, 10px)" }} className="triangle"></i> | 217 | <i style={{ rotate: "-90deg", transform: "translate(-5px, 10px)" }} className="triangle"></i> |
| 222 | </div> | 218 | </div> |
| 223 | </div> | 219 | </div> |
| 224 | <div style={{top: "160px"}} id='dropdown2' className={dropdown2Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}> | 220 | <div style={{top: "220px"}} id='dropdown2' className={dropdown2Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}> |
| 225 | {selectedGameMaps && selectedGameMaps.filter(gameMap => !gameMap.is_disabled).map((gameMap) => ( | 221 | {selectedGameMaps && selectedGameMaps.filter(gameMap => !gameMap.is_disabled).map((gameMap) => ( |
| 226 | <div onClick={() => { setUploadRunContent({ ...uploadRunContent, map_id: gameMap.id }); _set_current_map(gameMap.name); _handle_dropdowns(2); }} key={gameMap.id}>{gameMap.name}</div> | 222 | <div onClick={() => { setUploadRunContent({ ...uploadRunContent, map_id: gameMap.id }); _set_current_map(gameMap.name); _handle_dropdowns(2); }} key={gameMap.id}>{gameMap.name}</div> |
| 227 | ))} | 223 | ))} |
| 228 | </div> | 224 | </div> |
| 229 | </div> | 225 | </> |
| 230 | <h1>Host Demo</h1> | 226 | |
| 227 | )} | ||
| 228 | </div> | ||
| 229 | |||
| 230 | { | ||
| 231 | !loading && | ||
| 232 | ( | ||
| 233 | <> | ||
| 234 | |||
| 235 | <div> | ||
| 236 | <h3 style={{margin: "10px 0px"}}>Host Demo</h3> | ||
| 231 | <div onClick={() => { _handle_file_click(true) }} onDragOver={(e) => { _handle_drag_over(e, true) }} onDrop={(e) => { _handle_drop(e, true) }} onDragLeave={(e) => { _handle_drag_leave(e, true) }} className={`upload-run-drag-area ${dragHightlight ? "upload-run-drag-area-highlight" : ""} ${uploadRunContent.host_demo ? "upload-run-drag-area-hidden" : ""}`}> | 237 | <div onClick={() => { _handle_file_click(true) }} onDragOver={(e) => { _handle_drag_over(e, true) }} onDrop={(e) => { _handle_drop(e, true) }} onDragLeave={(e) => { _handle_drag_leave(e, true) }} className={`upload-run-drag-area ${dragHightlight ? "upload-run-drag-area-highlight" : ""} ${uploadRunContent.host_demo ? "upload-run-drag-area-hidden" : ""}`}> |
| 232 | <input ref={fileInputRef} type="file" name="host_demo" id="host_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, true)} /> | 238 | <input ref={fileInputRef} type="file" name="host_demo" id="host_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, true)} /> |
| 233 | {!uploadRunContent.host_demo ? | 239 | {!uploadRunContent.host_demo ? |
| @@ -242,12 +248,12 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose, | |||
| 242 | 248 | ||
| 243 | <span className="upload-run-demo-name">{uploadRunContent.host_demo?.name}</span> | 249 | <span className="upload-run-demo-name">{uploadRunContent.host_demo?.name}</span> |
| 244 | </div> | 250 | </div> |
| 245 | </div><br/> | ||
| 246 | { | 251 | { |
| 247 | games[selectedGameID].is_coop && | 252 | games[selectedGameID].is_coop && |
| 248 | ( | 253 | ( |
| 249 | <> | 254 | <> |
| 250 | <h1>Partner Demo</h1> | 255 | <div> |
| 256 | <h3 style={{margin: "10px 0px"}}>Partner Demo</h3> | ||
| 251 | <div onClick={() => { _handle_file_click(false) }} onDragOver={(e) => { _handle_drag_over(e, false) }} onDrop={(e) => { _handle_drop(e, false) }} onDragLeave={(e) => { _handle_drag_leave(e, false) }} className={`upload-run-drag-area ${dragHightlightPartner ? "upload-run-drag-area-highlight-partner" : ""} ${uploadRunContent.partner_demo ? "upload-run-drag-area-hidden" : ""}`}> | 257 | <div onClick={() => { _handle_file_click(false) }} onDragOver={(e) => { _handle_drag_over(e, false) }} onDrop={(e) => { _handle_drop(e, false) }} onDragLeave={(e) => { _handle_drag_leave(e, false) }} className={`upload-run-drag-area ${dragHightlightPartner ? "upload-run-drag-area-highlight-partner" : ""} ${uploadRunContent.partner_demo ? "upload-run-drag-area-hidden" : ""}`}> |
| 252 | <input ref={fileInputRefPartner} type="file" name="partner_demo" id="partner_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, false)} /> {!uploadRunContent.partner_demo ? | 258 | <input ref={fileInputRefPartner} type="file" name="partner_demo" id="partner_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, false)} /> {!uploadRunContent.partner_demo ? |
| 253 | <div> | 259 | <div> |
| @@ -265,19 +271,19 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose, | |||
| 265 | </> | 271 | </> |
| 266 | ) | 272 | ) |
| 267 | } | 273 | } |
| 274 | </div> | ||
| 268 | <div className='search-container'> | 275 | <div className='search-container'> |
| 269 | 276 | ||
| 270 | </div> | 277 | </div> |
| 271 | <br/> | 278 | |
| 272 | <div className='upload-run-buttons-container'> | ||
| 273 | <button onClick={_upload_run}>Submit</button> | ||
| 274 | <button onClick={() => onClose(false)}>Cancel</button> | ||
| 275 | </div> | ||
| 276 | </div> | ||
| 277 | </> | 279 | </> |
| 278 | ) | 280 | ) |
| 279 | } | 281 | } |
| 280 | </div> | 282 | </div> |
| 283 | <div className='upload-run-buttons-container'> | ||
| 284 | <button onClick={_upload_run}>Submit</button> | ||
| 285 | <button onClick={() => onClose(false)}>Cancel</button> | ||
| 286 | </div> | ||
| 281 | </div> | 287 | </div> |
| 282 | </div> | 288 | </div> |
| 283 | </> | 289 | </> |
diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css index 78fca5e..f129bb8 100644 --- a/frontend/src/css/UploadRunDialog.css +++ b/frontend/src/css/UploadRunDialog.css | |||
| @@ -51,6 +51,7 @@ div#upload-run{ | |||
| 51 | .upload-run-dropdown-container .dropdown-cur { | 51 | .upload-run-dropdown-container .dropdown-cur { |
| 52 | user-select: none; | 52 | user-select: none; |
| 53 | cursor: pointer; | 53 | cursor: pointer; |
| 54 | width: 240px; | ||
| 54 | } | 55 | } |
| 55 | 56 | ||
| 56 | .upload-run-dropdown { | 57 | .upload-run-dropdown { |
| @@ -64,7 +65,7 @@ div#upload-run{ | |||
| 64 | animation: dropdown-in 0.2s ease; | 65 | animation: dropdown-in 0.2s ease; |
| 65 | max-height: 300px; | 66 | max-height: 300px; |
| 66 | overflow-y: scroll; | 67 | overflow-y: scroll; |
| 67 | width: 400px; | 68 | width: 260px; |
| 68 | } | 69 | } |
| 69 | 70 | ||
| 70 | .upload-run-dropdown div { | 71 | .upload-run-dropdown div { |