From b229a524fae8908928f16832e8e4d4c604cefa3e Mon Sep 17 00:00:00 2001 From: Wolfboy248 Date: Mon, 28 Oct 2024 11:35:04 +0100 Subject: refactor: uploadrundialog --- frontend/src/api/Api.tsx | 2 +- frontend/src/components/Login.tsx | 3 +- frontend/src/components/UploadRunDialog.tsx | 57 +++++++++++++++++++++++++---- frontend/src/css/UploadRunDialog.css | 30 +++++++++++++++ frontend/src/hooks/UseMessage.tsx | 4 ++ 5 files changed, 86 insertions(+), 10 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 = { 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 index 77236ce..a8c5503 100644 --- a/frontend/src/components/Login.tsx +++ b/frontend/src/components/Login.tsx @@ -17,8 +17,7 @@ const Login: React.FC = ({ setToken, profile, setProfile }) => { const navigate = useNavigate(); const _login = () => { - setToken("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MzExNjU1NTgsIm1vZCI6dHJ1ZSwic3ViIjoiNzY1NjExOTgxMzE2Mjk5ODkifQ.KoENjj6Z41-QQu1VKvgAiACsjLK7IoVWlJgrGdr6s24"); - // 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 index 0476d6f..8081643 100644 --- a/frontend/src/components/UploadRunDialog.tsx +++ b/frontend/src/components/UploadRunDialog.tsx @@ -49,6 +49,35 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, const [loading, setLoading] = React.useState(false); + const [dragHightlight, setDragHighlight] = React.useState(false); + const fileInputRef = React.useRef(null); + + const _handle_file_click = () => { + fileInputRef.current?.click(); + } + + const _handle_drag_over = (e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + setDragHighlight(true); + } + + const _handle_drag_leave = (e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + setDragHighlight(false); + } + + const _handle_drop = (e: React.DragEvent, host: boolean) => { + e.preventDefault(); + e.stopPropagation(); + setDragHighlight(true); + + console.log(e.dataTransfer.files); + + _handle_file_change(e.dataTransfer.files, host); + } + const _handle_dropdowns = (dropdown: number) => { setDropdown1Vis(false); setDropdown2Vis(false); @@ -75,17 +104,18 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, setLoading(false); }; - const _handle_file_change = async (e: React.ChangeEvent, host: boolean) => { - if (e.target.files) { + const _handle_file_change = async (files: FileList | null, host: boolean) => { + console.log(files); + if (files) { if (host) { setUploadRunContent({ ...uploadRunContent, - host_demo: e.target.files[0], + host_demo: files[0], }); } else { setUploadRunContent({ ...uploadRunContent, - partner_demo: e.target.files[0], + partner_demo: files[0], }); } } @@ -130,7 +160,7 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, } const response = await API.post_record(token, uploadRunContent); - message("Message", response); + await message("Message", response); // navigate(0); onClose(); } @@ -184,13 +214,26 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, Host Demo - _handle_file_change(e, true)} /> +
{_handle_drag_over(e)}} onDrop={(e) => {_handle_drop(e, true)}} onDragLeave={(e) => {_handle_drag_leave(e)}} className={`upload-run-drag-area ${dragHightlight ? "upload-run-drag-area-highlight" : ""} ${uploadRunContent.host_demo ? "upload-run-drag-area-hidden" : ""}`}> + _handle_file_change(e.target.files, true)} /> + {!uploadRunContent.host_demo ? +
+ Drag and drop +
+ Or click here + +
+
+ : null} + + {uploadRunContent.host_demo?.name} +
{ games[selectedGameID].is_coop && ( <> Partner Demo - _handle_file_change(e, false)} /> + _handle_file_change(e.target.files, false)} /> ) } diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css index 6ea9884..b4667da 100644 --- a/frontend/src/css/UploadRunDialog.css +++ b/frontend/src/css/UploadRunDialog.css @@ -116,3 +116,33 @@ button:hover { width: 100%; } +#host_demo { + background-color: rgba(0, 0, 0, 0); + display: none; +} + +.upload-run-drag-area { + border: 2px dashed grey; + border-radius: 10px; + height: 200px; + cursor: pointer; + width: 300px; + transition: all 0.2s ease; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.upload-run-drag-area-highlight { + border: 2px dashed white; +} + +.upload-run-drag-area-hidden { + height: fit-content; + text-align: left; + border: none; + align-items: flex-start; +} + diff --git a/frontend/src/hooks/UseMessage.tsx b/frontend/src/hooks/UseMessage.tsx index 249a3bf..ebc4276 100644 --- a/frontend/src/hooks/UseMessage.tsx +++ b/frontend/src/hooks/UseMessage.tsx @@ -3,6 +3,7 @@ import MessageDialog from "../components/MessageDialog"; const useMessage = () => { const [isOpen, setIsOpen] = useState(false); + const [resolvePromise, setResolvePromise] = useState<((value: boolean) => void) | null>(null); const [title, setTitle] = useState(""); const [subtitle, setSubtitle] = useState(""); @@ -11,6 +12,9 @@ const useMessage = () => { setIsOpen(true); setTitle(title); setSubtitle(subtitle); + return new Promise((resolve) => { + setResolvePromise(() => resolve); + }); }; const handleClose = () => { -- cgit v1.2.3