aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/ModMenu.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/ModMenu.tsx')
-rw-r--r--frontend/src/components/ModMenu.tsx126
1 files changed, 62 insertions, 64 deletions
diff --git a/frontend/src/components/ModMenu.tsx b/frontend/src/components/ModMenu.tsx
index f765cd8..140d6a3 100644
--- a/frontend/src/components/ModMenu.tsx
+++ b/frontend/src/components/ModMenu.tsx
@@ -1,12 +1,12 @@
1import React from "react"; 1import React from 'react';
2import ReactMarkdown from "react-markdown"; 2import ReactMarkdown from 'react-markdown';
3import { useNavigate } from "react-router-dom"; 3import { useNavigate } from 'react-router-dom';
4 4
5import { MapSummary } from "@customTypes/Map"; 5import { MapSummary } from '@customTypes/Map';
6import { ModMenuContent } from "@customTypes/Content"; 6import { ModMenuContent } from '@customTypes/Content';
7import { API } from "@api/Api"; 7import { API } from '@api/Api';
8import "@css/ModMenu.css"; 8import '@css/ModMenu.css';
9import useConfirm from "@hooks/UseConfirm"; 9import useConfirm from '@hooks/UseConfirm';
10 10
11interface ModMenuProps { 11interface ModMenuProps {
12 token?: string; 12 token?: string;
@@ -28,26 +28,26 @@ 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
44 function compressImage(file: File): Promise<string> { 44 function compressImage(file: File): Promise<string> {
45 const reader = new FileReader(); 45 const reader = new FileReader();
46 reader.readAsDataURL(file); 46 reader.readAsDataURL(file);
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
@@ -240,11 +240,9 @@ const ModMenu: React.FC<ModMenuProps> = ({
240 <input 240 <input
241 type="file" 241 type="file"
242 accept="image/*" 242 accept="image/*"
243 onChange={(e) => { 243 onChange={e => {
244 if (e.target.files) { 244 if (e.target.files) {
245 compressImage(e.target.files[0]).then((d) => 245 compressImage(e.target.files[0]).then(d => setImage(d));
246 setImage(d)
247 );
248 } 246 }
249 }} 247 }}
250 /> 248 />
@@ -275,7 +273,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
275 <input 273 <input
276 type="text" 274 type="text"
277 value={routeContent.name} 275 value={routeContent.name}
278 onChange={(e) => { 276 onChange={e => {
279 setRouteContent({ 277 setRouteContent({
280 ...routeContent, 278 ...routeContent,
281 name: e.target.value, 279 name: e.target.value,
@@ -288,7 +286,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
288 <input 286 <input
289 type="number" 287 type="number"
290 value={routeContent.score} 288 value={routeContent.score}
291 onChange={(e) => { 289 onChange={e => {
292 setRouteContent({ 290 setRouteContent({
293 ...routeContent, 291 ...routeContent,
294 score: parseInt(e.target.value), 292 score: parseInt(e.target.value),
@@ -301,7 +299,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
301 <input 299 <input
302 type="date" 300 type="date"
303 value={routeContent.date} 301 value={routeContent.date}
304 onChange={(e) => { 302 onChange={e => {
305 setRouteContent({ 303 setRouteContent({
306 ...routeContent, 304 ...routeContent,
307 date: e.target.value, 305 date: e.target.value,
@@ -314,7 +312,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
314 <input 312 <input
315 type="text" 313 type="text"
316 value={routeContent.showcase} 314 value={routeContent.showcase}
317 onChange={(e) => { 315 onChange={e => {
318 setRouteContent({ 316 setRouteContent({
319 ...routeContent, 317 ...routeContent,
320 showcase: e.target.value, 318 showcase: e.target.value,
@@ -324,12 +322,12 @@ const ModMenu: React.FC<ModMenuProps> = ({
324 </div> 322 </div>
325 <div 323 <div
326 id="modview-route-description" 324 id="modview-route-description"
327 style={{ height: "180px", gridColumn: "1 / span 5" }} 325 style={{ height: '180px', gridColumn: '1 / span 5' }}
328 > 326 >
329 <span>Description:</span> 327 <span>Description:</span>
330 <textarea 328 <textarea
331 value={routeContent.description} 329 value={routeContent.description}
332 onChange={(e) => { 330 onChange={e => {
333 setRouteContent({ 331 setRouteContent({
334 ...routeContent, 332 ...routeContent,
335 description: e.target.value, 333 description: e.target.value,
@@ -339,7 +337,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
339 /> 337 />
340 </div> 338 </div>
341 <button 339 <button
342 style={{ gridColumn: "2 / span 3", height: "40px" }} 340 style={{ gridColumn: '2 / span 3', height: '40px' }}
343 onClick={_edit_map_summary_route} 341 onClick={_edit_map_summary_route}
344 > 342 >
345 Apply 343 Apply
@@ -380,7 +378,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
380 <div id="modview-route-category"> 378 <div id="modview-route-category">
381 <span>Category:</span> 379 <span>Category:</span>
382 <select 380 <select
383 onChange={(e) => { 381 onChange={e => {
384 setRouteContent({ 382 setRouteContent({
385 ...routeContent, 383 ...routeContent,
386 category_id: parseInt(e.target.value), 384 category_id: parseInt(e.target.value),
@@ -393,8 +391,8 @@ const ModMenu: React.FC<ModMenuProps> = ({
393 <option value="2" key="2"> 391 <option value="2" key="2">
394 No SLA 392 No SLA
395 </option> 393 </option>
396 {data.map.game_name === "Portal 2 - Cooperative" ? ( 394 {data.map.game_name === 'Portal 2 - Cooperative' ? (
397 "" 395 ''
398 ) : ( 396 ) : (
399 <option value="3" key="3"> 397 <option value="3" key="3">
400 Inbounds SLA 398 Inbounds SLA
@@ -410,7 +408,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
410 <input 408 <input
411 type="text" 409 type="text"
412 value={routeContent.name} 410 value={routeContent.name}
413 onChange={(e) => { 411 onChange={e => {
414 setRouteContent({ 412 setRouteContent({
415 ...routeContent, 413 ...routeContent,
416 name: e.target.value, 414 name: e.target.value,
@@ -423,7 +421,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
423 <input 421 <input
424 type="number" 422 type="number"
425 value={routeContent.score} 423 value={routeContent.score}
426 onChange={(e) => { 424 onChange={e => {
427 setRouteContent({ 425 setRouteContent({
428 ...routeContent, 426 ...routeContent,
429 score: parseInt(e.target.value), 427 score: parseInt(e.target.value),
@@ -436,7 +434,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
436 <input 434 <input
437 type="date" 435 type="date"
438 value={routeContent.date} 436 value={routeContent.date}
439 onChange={(e) => { 437 onChange={e => {
440 setRouteContent({ 438 setRouteContent({
441 ...routeContent, 439 ...routeContent,
442 date: e.target.value, 440 date: e.target.value,
@@ -449,7 +447,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
449 <input 447 <input
450 type="text" 448 type="text"
451 value={routeContent.showcase} 449 value={routeContent.showcase}
452 onChange={(e) => { 450 onChange={e => {
453 setRouteContent({ 451 setRouteContent({
454 ...routeContent, 452 ...routeContent,
455 showcase: e.target.value, 453 showcase: e.target.value,
@@ -459,12 +457,12 @@ const ModMenu: React.FC<ModMenuProps> = ({
459 </div> 457 </div>
460 <div 458 <div
461 id="modview-route-description" 459 id="modview-route-description"
462 style={{ height: "180px", gridColumn: "1 / span 5" }} 460 style={{ height: '180px', gridColumn: '1 / span 5' }}
463 > 461 >
464 <span>Description:</span> 462 <span>Description:</span>
465 <textarea 463 <textarea
466 value={routeContent.description} 464 value={routeContent.description}
467 onChange={(e) => { 465 onChange={e => {
468 setRouteContent({ 466 setRouteContent({
469 ...routeContent, 467 ...routeContent,
470 description: e.target.value, 468 description: e.target.value,
@@ -474,7 +472,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
474 /> 472 />
475 </div> 473 </div>
476 <button 474 <button
477 style={{ gridColumn: "2 / span 3", height: "40px" }} 475 style={{ gridColumn: '2 / span 3', height: '40px' }}
478 onClick={_create_map_summary_route} 476 onClick={_create_map_summary_route}
479 > 477 >
480 Apply 478 Apply
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 23:50:00 +0000