frontend: uploadrundialog

pektezol · Nov 1, 2024 · cd80c6a · cd80c6a
1 parent a6a5735
commit cd80c6a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 27 deletions.
diff --git a/frontend/src/api/Api.tsx b/frontend/src/api/Api.tsx
@@ -49,7 +49,7 @@ export const API = {
   delete_map_summary: (token: string, map_id: string, route_id: number) => delete_map_summary(token, map_id, route_id),
 };
 
-const BASE_API_URL: string = "https://lp.portal2.sr/api/v1/"
+const BASE_API_URL: string = "/api/v1/"
 
 export function url(path: string): string {
   return BASE_API_URL + path;

diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx
@@ -17,8 +17,7 @@ const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => {
   const navigate = useNavigate();
 
   const _login = () => {
-    setToken("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MzI3Nzg0NTEsIm1vZCI6ZmFsc2UsInN1YiI6Ijc2NTYxMTk5MDg4MjU3MDk4In0.MwYcAy1q463-A2qxLn3Dk4T7ECwta_x4h-CJOTB6VZY");
-    // window.location.href = "/api/v1/login";
+    window.location.href = "/api/v1/login";
   };
 
   const _logout = () => {

diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
@@ -198,36 +198,42 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
           <div id='upload-run-menu-add'>
             <div id='upload-run-route-category'>
               <div style={{ padding: "15px 0px" }} className='upload-run-dropdown-container upload-run-item'>
-                <h1 style={{ paddingBottom: "14px" }}>Select Game</h1>
-                <div onClick={() => _handle_dropdowns(1)} style={{ display: "flex", alignItems: "center", cursor: "pointer", justifyContent: "space-between" }}>
+                <h3 style={{ margin: "0px 0px" }}>Select Game</h3>
+                <div onClick={() => _handle_dropdowns(1)} style={{ display: "flex", alignItems: "center", cursor: "pointer", justifyContent: "space-between", margin: "10px 0px" }}>
                   <div className='dropdown-cur'>{selectedGameName}</div>
                   <i style={{ rotate: "-90deg", transform: "translate(-5px, 10px)" }} className="triangle"></i>
                 </div>
-                <div style={{top: "160px"}} className={dropdown1Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}>
+                <div style={{top: "110px"}} className={dropdown1Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}>
                   {games.map((game) => (
                     <div onClick={() => { _handle_game_select(game.id.toString(), game.name); _handle_dropdowns(1) }} key={game.id}>{game.name}</div>
                   ))}
                 </div>
-              </div>
-              {
-                !loading &&
-                (
-                  <>
-                    <div className='upload-run-map-container upload-run-item' style={{ paddingBottom: "10px" }}>
-                      <div style={{ padding: "15px 0px" }}>
-                        <h3 style={{ margin: "10px 0px" }}>Select Map</h3>
-                        <div onClick={() => _handle_dropdowns(2)} style={{ display: "flex", alignItems: "center", cursor: "pointer", justifyContent: "space-between" }}>
+			  {!loading && (
+				<>
+					<div style={{ padding: "25px 0px" }}>
+                        <h3 style={{ margin: "0px 0px" }}>Select Map</h3>
+                        <div onClick={() => _handle_dropdowns(2)} style={{ display: "flex", alignItems: "center", cursor: "pointer", justifyContent: "space-between", margin: "10px 0px" }}>
                           <span style={{ userSelect: "none" }}>{currentMap}</span>
                           <i style={{ rotate: "-90deg", transform: "translate(-5px, 10px)" }} className="triangle"></i>
                         </div>
                       </div>
-                        <div style={{top: "160px"}} id='dropdown2' className={dropdown2Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}>
+                        <div style={{top: "220px"}} id='dropdown2' className={dropdown2Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}>
                           {selectedGameMaps && selectedGameMaps.filter(gameMap => !gameMap.is_disabled).map((gameMap) => (
                             <div onClick={() => { setUploadRunContent({ ...uploadRunContent, map_id: gameMap.id }); _set_current_map(gameMap.name); _handle_dropdowns(2); }} key={gameMap.id}>{gameMap.name}</div>
                           ))}
                         </div>
-                      </div>
-                      <h1>Host Demo</h1>
+				</>
+
+			)}
+			</div>
+
+              {
+                !loading &&
+                (
+                  <>
+
+					  <div>
+                      <h3 style={{margin: "10px 0px"}}>Host Demo</h3>
                       <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" : ""}`}>
                         <input ref={fileInputRef} type="file" name="host_demo" id="host_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, true)} />
                         {!uploadRunContent.host_demo ?
@@ -242,12 +248,12 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
 
                         <span className="upload-run-demo-name">{uploadRunContent.host_demo?.name}</span>
                       </div>
-					  </div><br/>
                       {
                         games[selectedGameID].is_coop &&
                         (
                           <>
-                            <h1>Partner Demo</h1>
+						  	<div>
+                            <h3 style={{margin: "10px 0px"}}>Partner Demo</h3>
                             <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" : ""}`}>
                               <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 ?
                                 <div>
@@ -265,19 +271,19 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
                           </>
                         )
                       }
+					  </div>
                       <div className='search-container'>
 
                       </div>
-					  <br/>
-                      <div className='upload-run-buttons-container'>
-                        <button onClick={_upload_run}>Submit</button>
-                        <button onClick={() => onClose(false)}>Cancel</button>
-                      </div>
-                    </div>
+
                   </>
                 )
               }
             </div>
+			<div className='upload-run-buttons-container'>
+                        <button onClick={_upload_run}>Submit</button>
+                        <button onClick={() => onClose(false)}>Cancel</button>
+                      </div>
           </div>
         </div>
       </>

diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css
@@ -51,6 +51,7 @@ div#upload-run{
 .upload-run-dropdown-container .dropdown-cur {
     user-select: none;
     cursor: pointer;
+	width: 240px;
 }
 
 .upload-run-dropdown {
@@ -64,7 +65,7 @@ div#upload-run{
     animation: dropdown-in 0.2s ease;
     max-height: 300px;
     overflow-y: scroll;
-    width: 400px;
+    width: 260px;
 }
 
 .upload-run-dropdown div {