web: add submit page at /maps/[mapId]/fix

web/src/app/maps/[mapId]/fix/(styles)/page.scss

@@ -0,0 +1,54 @@
+@use "../../../../globals.scss";
+
+::placeholder {
+	color: var(--placeholder-text)
+}
+
+.form-spacer {
+	margin-bottom: 20px;
+
+	&:last-of-type {
+		margin-top: 15px;
+	}
+}
+
+#target-asset-radio {
+	color: var(--text-color);
+	font-size: globals.$form-label-fontsize;
+}
+
+.form-field {
+	width: 850px;
+
+	& label, & input {
+		color: var(--text-color);
+	}
+	& fieldset {
+		border-color: rgb(100,100,100);
+	}
+	& span {
+		color: white;
+	}
+}
+
+main {
+	display: grid;
+	justify-content: center;
+	align-items: center;
+	margin-inline: auto;
+	width: 700px;
+}
+
+header h1 {
+	text-align: center;
+	color: var(--text-color);
+}
+
+form {
+	display: grid;
+	gap: 25px;
+
+	fieldset {
+		border: blue
+	}
+}

web/src/app/maps/[mapId]/fix/_game.tsx

@@ -0,0 +1,65 @@
+import { FormControl, Select, InputLabel, MenuItem } from "@mui/material";
+import { styled } from '@mui/material/styles';
+import InputBase from '@mui/material/InputBase';
+import React from "react";
+import { SelectChangeEvent } from "@mui/material";
+
+// TODO: Properly style everything instead of pasting 🤚
+
+type GameSelectionProps = {
+	game: number;
+	setGame: React.Dispatch<React.SetStateAction<number>>;
+};
+
+const BootstrapInput = styled(InputBase)(({ theme }) => ({
+	'label + &': {
+	  marginTop: theme.spacing(3),
+	},
+	'& .MuiInputBase-input': {
+	  backgroundColor: '#0000',
+	  color: '#FFF',
+	  border: '1px solid rgba(175, 175, 175, 0.66)',
+	  fontSize: 16,
+	  padding: '10px 26px 10px 12px',
+	  transition: theme.transitions.create(['border-color', 'box-shadow']),
+	  fontFamily: [
+		'-apple-system',
+		'BlinkMacSystemFont',
+		'"Segoe UI"',
+		'Roboto',
+		'"Helvetica Neue"',
+		'Arial',
+		'sans-serif',
+		'"Apple Color Emoji"',
+		'"Segoe UI Emoji"',
+		'"Segoe UI Symbol"',
+	  ].join(','),
+	  '&:focus': {
+		borderRadius: 4,
+		borderColor: '#80bdff',
+		boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+	  },
+	},
+  }));
+
+export default function GameSelection({ game, setGame }: GameSelectionProps) {
+	const handleChange = (event: SelectChangeEvent) => {
+		setGame(Number(event.target.value)); // TODO: Change later!! there's 100% a proper way of doing this
+	};
+
+	return (
+		<FormControl>
+			<InputLabel sx={{ color: "#646464" }}>Game</InputLabel>
+			<Select
+				value={String(game)}
+				label="Game"
+				onChange={handleChange}
+				input={<BootstrapInput />}
+			>
+				<MenuItem value={1}>Bhop</MenuItem>
+				<MenuItem value={2}>Surf</MenuItem>
+				<MenuItem value={3}>Fly Trials</MenuItem>
+			</Select>
+		</FormControl>
+	);
+}

web/src/app/maps/[mapId]/fix/page.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import { Button, TextField } from "@mui/material"
+
+import GameSelection from "./_game";
+import SendIcon from '@mui/icons-material/Send';
+import Webpage from "@/app/_components/webpage";
+import { useParams } from "next/navigation";
+import React, { useState } from "react";
+
+import "./(styles)/page.scss"
+
+interface MapfixPayload {
+	DisplayName: string;
+	Creator: string;
+	GameID: number;
+	AssetID: number;
+	AssetVersion: number;
+	TargetAssetID: number;
+}
+interface IdResponse {
+	ID: number;
+}
+
+export default function MapfixInfoPage() {
+	const [game, setGame] = useState(1);
+	const dynamicId = useParams<{ mapId: string }>();
+
+	const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+
+		const form = event.currentTarget;
+		const formData = new FormData(form);
+
+		const payload: MapfixPayload = {
+			DisplayName: (formData.get("display-name") as string) ?? "unknown", // TEMPORARY! TODO: Change
+			Creator: (formData.get("creator") as string) ?? "unknown", // TEMPORARY! TODO: Change
+			GameID: game,
+			AssetID: Number((formData.get("asset-id") as string) ?? "0"),
+			AssetVersion: 0,
+			TargetAssetID: Number(dynamicId.mapId),
+		};
+
+		console.log(payload)
+		console.log(JSON.stringify(payload))
+
+		try {
+			// Send the POST request
+			const response = await fetch("/api/mapfixes", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify(payload),
+			});
+
+			// Check if the HTTP request was successful
+			if (!response.ok) {
+				const errorDetails = await response.text();
+
+				// Throw an error with detailed information
+				throw new Error(`HTTP error! status: ${response.status}, details: ${errorDetails}`);
+			}
+
+			// Allow any HTTP status
+			const id_response:IdResponse = await response.json();
+
+			// navigate to newly created mapfix
+			window.location.assign(`/mapfixes/${id_response.ID}`)
+
+		} catch (error) {
+			console.error("Error submitting data:", error);
+		}
+	};
+
+	return (
+		<Webpage>
+			<main>
+				<header>
+					<h1>Submit Mapfix</h1>
+					<span className="spacer form-spacer"></span>
+				</header>
+				<form onSubmit={handleSubmit}>
+					{/* TODO: Add form data for mapfixes, such as changes they did, and any times that need to be deleted & what styles */}
+					<TextField className="form-field" id="display-name" name="display-name" label="Display Name" variant="outlined"/>
+					<TextField className="form-field" id="creator"      name="creator"      label="Creator"      variant="outlined"/>
+					<TextField className="form-field" id="asset-id"     name="asset-id"     label="Asset ID"     variant="outlined"/>
+					{/* I think this is Quat's job to figure this one out (to be set when someone clicks review(?)) */} {/* <TextField className="form-field" id="asset-version" label="Asset Version" variant="outlined"/> */}
+					<GameSelection game={game} setGame={setGame} />
+					<span className="spacer form-spacer"></span>
+					<Button type="submit" variant="contained" startIcon={<SendIcon/>} sx={{
+						width: "400px",
+						height: "50px",
+						marginInline: "auto"
+					}}>Submit</Button>
+				</form>
+			</main>
+		</Webpage>
+	)
+}