diff options
| author | FifthWit <fifthwitbusiness@gmail.com> | 2025-01-30 13:11:48 -0600 |
|---|---|---|
| committer | FifthWit <fifthwitbusiness@gmail.com> | 2025-01-30 13:11:48 -0600 |
| commit | 81342e2579165ebfdb28c749dc5225141721a419 (patch) | |
| tree | 8e5759c20b92408048fe5ac44f48e2df2a00ab9b /frontend/src/components/ModMenu.tsx | |
| parent | fixed issues with useCallback (diff) | |
| download | lphub-81342e2579165ebfdb28c749dc5225141721a419.tar.gz lphub-81342e2579165ebfdb28c749dc5225141721a419.tar.bz2 lphub-81342e2579165ebfdb28c749dc5225141721a419.zip | |
switched to double quotes
Diffstat (limited to 'frontend/src/components/ModMenu.tsx')
| -rw-r--r-- | frontend/src/components/ModMenu.tsx | 96 |
1 files changed, 48 insertions, 48 deletions
diff --git a/frontend/src/components/ModMenu.tsx b/frontend/src/components/ModMenu.tsx index 140d6a3..618d1a7 100644 --- a/frontend/src/components/ModMenu.tsx +++ b/frontend/src/components/ModMenu.tsx | |||
| @@ -1,12 +1,12 @@ | |||
| 1 | import React from 'react'; | 1 | import React from "react"; |
| 2 | import ReactMarkdown from 'react-markdown'; | 2 | import ReactMarkdown from "react-markdown"; |
| 3 | import { useNavigate } from 'react-router-dom'; | 3 | import { useNavigate } from "react-router-dom"; |
| 4 | 4 | ||
| 5 | import { MapSummary } from '@customTypes/Map'; | 5 | import { MapSummary } from "@customTypes/Map"; |
| 6 | import { ModMenuContent } from '@customTypes/Content'; | 6 | import { ModMenuContent } from "@customTypes/Content"; |
| 7 | import { API } from '@api/Api'; | 7 | import { API } from "@api/Api"; |
| 8 | import '@css/ModMenu.css'; | 8 | import "@css/ModMenu.css"; |
| 9 | import useConfirm from '@hooks/UseConfirm'; | 9 | import useConfirm from "@hooks/UseConfirm"; |
| 10 | 10 | ||
| 11 | interface ModMenuProps { | 11 | interface ModMenuProps { |
| 12 | token?: string; | 12 | token?: string; |
| @@ -28,16 +28,16 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 28 | 28 | ||
| 29 | const [routeContent, setRouteContent] = React.useState<ModMenuContent>({ | 29 | const [routeContent, setRouteContent] = React.useState<ModMenuContent>({ |
| 30 | id: 0, | 30 | id: 0, |
| 31 | name: '', | 31 | name: "", |
| 32 | score: 0, | 32 | score: 0, |
| 33 | date: '', | 33 | date: "", |
| 34 | showcase: '', | 34 | showcase: "", |
| 35 | description: 'No description available.', | 35 | description: "No description available.", |
| 36 | category_id: 1, | 36 | category_id: 1, |
| 37 | }); | 37 | }); |
| 38 | 38 | ||
| 39 | const [image, setImage] = React.useState<string>(''); | 39 | const [image, setImage] = React.useState<string>(""); |
| 40 | const [md, setMd] = React.useState<string>(''); | 40 | const [md, setMd] = React.useState<string>(""); |
| 41 | 41 | ||
| 42 | const navigate = useNavigate(); | 42 | const navigate = useNavigate(); |
| 43 | 43 | ||
| @@ -47,7 +47,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 47 | return new Promise(resolve => { | 47 | return new Promise(resolve => { |
| 48 | reader.onload = () => { | 48 | reader.onload = () => { |
| 49 | const img = new Image(); | 49 | const img = new Image(); |
| 50 | if (typeof reader.result === 'string') { | 50 | if (typeof reader.result === "string") { |
| 51 | img.src = reader.result; | 51 | img.src = reader.result; |
| 52 | img.onload = () => { | 52 | img.onload = () => { |
| 53 | let { width, height } = img; | 53 | let { width, height } = img; |
| @@ -59,10 +59,10 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 59 | width *= 320 / height; | 59 | width *= 320 / height; |
| 60 | height = 320; | 60 | height = 320; |
| 61 | } | 61 | } |
| 62 | const canvas = document.createElement('canvas'); | 62 | const canvas = document.createElement("canvas"); |
| 63 | canvas.width = width; | 63 | canvas.width = width; |
| 64 | canvas.height = height; | 64 | canvas.height = height; |
| 65 | canvas.getContext('2d')!.drawImage(img, 0, 0, width, height); | 65 | canvas.getContext("2d")!.drawImage(img, 0, 0, width, height); |
| 66 | resolve(canvas.toDataURL(file.type, 0.6)); | 66 | resolve(canvas.toDataURL(file.type, 0.6)); |
| 67 | }; | 67 | }; |
| 68 | } | 68 | } |
| @@ -73,8 +73,8 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 73 | const _edit_map_summary_image = async () => { | 73 | const _edit_map_summary_image = async () => { |
| 74 | if ( | 74 | if ( |
| 75 | await confirm( | 75 | await confirm( |
| 76 | 'Edit Map Summary Image', | 76 | "Edit Map Summary Image", |
| 77 | 'Are you sure you want to submit this to the database?' | 77 | "Are you sure you want to submit this to the database?" |
| 78 | ) | 78 | ) |
| 79 | ) { | 79 | ) { |
| 80 | if (token) { | 80 | if (token) { |
| @@ -82,7 +82,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 82 | if (success) { | 82 | if (success) { |
| 83 | navigate(0); | 83 | navigate(0); |
| 84 | } else { | 84 | } else { |
| 85 | alert('Error. Check logs.'); | 85 | alert("Error. Check logs."); |
| 86 | } | 86 | } |
| 87 | } | 87 | } |
| 88 | } | 88 | } |
| @@ -91,17 +91,17 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 91 | const _edit_map_summary_route = async () => { | 91 | const _edit_map_summary_route = async () => { |
| 92 | if ( | 92 | if ( |
| 93 | await confirm( | 93 | await confirm( |
| 94 | 'Edit Map Summary Route', | 94 | "Edit Map Summary Route", |
| 95 | 'Are you sure you want to submit this to the database?' | 95 | "Are you sure you want to submit this to the database?" |
| 96 | ) | 96 | ) |
| 97 | ) { | 97 | ) { |
| 98 | if (token) { | 98 | if (token) { |
| 99 | routeContent.date += 'T00:00:00Z'; | 99 | routeContent.date += "T00:00:00Z"; |
| 100 | const success = await API.put_map_summary(token, mapID, routeContent); | 100 | const success = await API.put_map_summary(token, mapID, routeContent); |
| 101 | if (success) { | 101 | if (success) { |
| 102 | navigate(0); | 102 | navigate(0); |
| 103 | } else { | 103 | } else { |
| 104 | alert('Error. Check logs.'); | 104 | alert("Error. Check logs."); |
| 105 | } | 105 | } |
| 106 | } | 106 | } |
| 107 | } | 107 | } |
| @@ -110,17 +110,17 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 110 | const _create_map_summary_route = async () => { | 110 | const _create_map_summary_route = async () => { |
| 111 | if ( | 111 | if ( |
| 112 | await confirm( | 112 | await confirm( |
| 113 | 'Create Map Summary Route', | 113 | "Create Map Summary Route", |
| 114 | 'Are you sure you want to submit this to the database?' | 114 | "Are you sure you want to submit this to the database?" |
| 115 | ) | 115 | ) |
| 116 | ) { | 116 | ) { |
| 117 | if (token) { | 117 | if (token) { |
| 118 | routeContent.date += 'T00:00:00Z'; | 118 | routeContent.date += "T00:00:00Z"; |
| 119 | const success = await API.post_map_summary(token, mapID, routeContent); | 119 | const success = await API.post_map_summary(token, mapID, routeContent); |
| 120 | if (success) { | 120 | if (success) { |
| 121 | navigate(0); | 121 | navigate(0); |
| 122 | } else { | 122 | } else { |
| 123 | alert('Error. Check logs.'); | 123 | alert("Error. Check logs."); |
| 124 | } | 124 | } |
| 125 | } | 125 | } |
| 126 | } | 126 | } |
| @@ -129,7 +129,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 129 | const _delete_map_summary_route = async () => { | 129 | const _delete_map_summary_route = async () => { |
| 130 | if ( | 130 | if ( |
| 131 | await confirm( | 131 | await confirm( |
| 132 | 'Delete Map Summary Route', | 132 | "Delete Map Summary Route", |
| 133 | `Are you sure you want to submit this to the database?\n | 133 | `Are you sure you want to submit this to the database?\n |
| 134 | ${data.summary.routes[selectedRun].category.name}\n${data.summary.routes[selectedRun].history.score_count} portals\n${data.summary.routes[selectedRun].history.runner_name}` | 134 | ${data.summary.routes[selectedRun].category.name}\n${data.summary.routes[selectedRun].history.score_count} portals\n${data.summary.routes[selectedRun].history.runner_name}` |
| 135 | ) | 135 | ) |
| @@ -143,7 +143,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 143 | if (success) { | 143 | if (success) { |
| 144 | navigate(0); | 144 | navigate(0); |
| 145 | } else { | 145 | } else { |
| 146 | alert('Error. Check logs.'); | 146 | alert("Error. Check logs."); |
| 147 | } | 147 | } |
| 148 | } | 148 | } |
| 149 | } | 149 | } |
| @@ -154,14 +154,14 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 154 | // add route | 154 | // add route |
| 155 | setRouteContent({ | 155 | setRouteContent({ |
| 156 | id: 0, | 156 | id: 0, |
| 157 | name: '', | 157 | name: "", |
| 158 | score: 0, | 158 | score: 0, |
| 159 | date: '', | 159 | date: "", |
| 160 | showcase: '', | 160 | showcase: "", |
| 161 | description: 'No description available.', | 161 | description: "No description available.", |
| 162 | category_id: 1, | 162 | category_id: 1, |
| 163 | }); | 163 | }); |
| 164 | setMd('No description available.'); | 164 | setMd("No description available."); |
| 165 | } | 165 | } |
| 166 | if (menu === 2) { | 166 | if (menu === 2) { |
| 167 | // edit route | 167 | // edit route |
| @@ -169,7 +169,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 169 | id: data.summary.routes[selectedRun].route_id, | 169 | id: data.summary.routes[selectedRun].route_id, |
| 170 | name: data.summary.routes[selectedRun].history.runner_name, | 170 | name: data.summary.routes[selectedRun].history.runner_name, |
| 171 | score: data.summary.routes[selectedRun].history.score_count, | 171 | score: data.summary.routes[selectedRun].history.score_count, |
| 172 | date: data.summary.routes[selectedRun].history.date.split('T')[0], | 172 | date: data.summary.routes[selectedRun].history.date.split("T")[0], |
| 173 | showcase: data.summary.routes[selectedRun].showcase, | 173 | showcase: data.summary.routes[selectedRun].showcase, |
| 174 | description: data.summary.routes[selectedRun].description, | 174 | description: data.summary.routes[selectedRun].description, |
| 175 | category_id: data.summary.routes[selectedRun].category.id, | 175 | category_id: data.summary.routes[selectedRun].category.id, |
| @@ -179,20 +179,20 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 179 | }, [menu, data.summary.routes, selectedRun]); | 179 | }, [menu, data.summary.routes, selectedRun]); |
| 180 | 180 | ||
| 181 | React.useEffect(() => { | 181 | React.useEffect(() => { |
| 182 | const modview = document.querySelector('div#modview') as HTMLElement; | 182 | const modview = document.querySelector("div#modview") as HTMLElement; |
| 183 | if (modview) { | 183 | if (modview) { |
| 184 | showButton | 184 | showButton |
| 185 | ? (modview.style.transform = 'translateY(-68%)') | 185 | ? (modview.style.transform = "translateY(-68%)") |
| 186 | : (modview.style.transform = 'translateY(0%)'); | 186 | : (modview.style.transform = "translateY(0%)"); |
| 187 | } | 187 | } |
| 188 | 188 | ||
| 189 | const modview_block = document.querySelector( | 189 | const modview_block = document.querySelector( |
| 190 | '#modview_block' | 190 | "#modview_block" |
| 191 | ) as HTMLElement; | 191 | ) as HTMLElement; |
| 192 | if (modview_block) { | 192 | if (modview_block) { |
| 193 | showButton | 193 | showButton |
| 194 | ? (modview_block.style.display = 'none') | 194 | ? (modview_block.style.display = "none") |
| 195 | : (modview_block.style.display = 'block'); | 195 | : (modview_block.style.display = "block"); |
| 196 | } | 196 | } |
| 197 | }, [showButton]); | 197 | }, [showButton]); |
| 198 | 198 | ||
| @@ -322,7 +322,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 322 | </div> | 322 | </div> |
| 323 | <div | 323 | <div |
| 324 | id="modview-route-description" | 324 | id="modview-route-description" |
| 325 | style={{ height: '180px', gridColumn: '1 / span 5' }} | 325 | style={{ height: "180px", gridColumn: "1 / span 5" }} |
| 326 | > | 326 | > |
| 327 | <span>Description:</span> | 327 | <span>Description:</span> |
| 328 | <textarea | 328 | <textarea |
| @@ -337,7 +337,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 337 | /> | 337 | /> |
| 338 | </div> | 338 | </div> |
| 339 | <button | 339 | <button |
| 340 | style={{ gridColumn: '2 / span 3', height: '40px' }} | 340 | style={{ gridColumn: "2 / span 3", height: "40px" }} |
| 341 | onClick={_edit_map_summary_route} | 341 | onClick={_edit_map_summary_route} |
| 342 | > | 342 | > |
| 343 | Apply | 343 | Apply |
| @@ -391,8 +391,8 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 391 | <option value="2" key="2"> | 391 | <option value="2" key="2"> |
| 392 | No SLA | 392 | No SLA |
| 393 | </option> | 393 | </option> |
| 394 | {data.map.game_name === 'Portal 2 - Cooperative' ? ( | 394 | {data.map.game_name === "Portal 2 - Cooperative" ? ( |
| 395 | '' | 395 | "" |
| 396 | ) : ( | 396 | ) : ( |
| 397 | <option value="3" key="3"> | 397 | <option value="3" key="3"> |
| 398 | Inbounds SLA | 398 | Inbounds SLA |
| @@ -457,7 +457,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 457 | </div> | 457 | </div> |
| 458 | <div | 458 | <div |
| 459 | id="modview-route-description" | 459 | id="modview-route-description" |
| 460 | style={{ height: '180px', gridColumn: '1 / span 5' }} | 460 | style={{ height: "180px", gridColumn: "1 / span 5" }} |
| 461 | > | 461 | > |
| 462 | <span>Description:</span> | 462 | <span>Description:</span> |
| 463 | <textarea | 463 | <textarea |
| @@ -472,7 +472,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ | |||
| 472 | /> | 472 | /> |
| 473 | </div> | 473 | </div> |
| 474 | <button | 474 | <button |
| 475 | style={{ gridColumn: '2 / span 3', height: '40px' }} | 475 | style={{ gridColumn: "2 / span 3", height: "40px" }} |
| 476 | onClick={_create_map_summary_route} | 476 | onClick={_create_map_summary_route} |
| 477 | > | 477 | > |
| 478 | Apply | 478 | Apply |