buttons exist for making api requests
This commit is contained in:
parent
89fda96e7a
commit
bc5b84d447
@ -1,10 +1,8 @@
|
||||
import Header from "./header";
|
||||
|
||||
export default function Webpage({children}: Readonly<{children?: React.ReactNode}>) {
|
||||
return (
|
||||
<>
|
||||
<Header/>
|
||||
{children}
|
||||
</>
|
||||
)
|
||||
return (<>
|
||||
<Header/>
|
||||
{children}
|
||||
</>)
|
||||
}
|
||||
@ -1,8 +1,9 @@
|
||||
@forward "./page/commentWindow.scss";
|
||||
@forward "./page/reviewStatus.scss";
|
||||
@forward "./page/ratingWindow.scss";
|
||||
@forward "./page/reviewButtons.scss";
|
||||
@forward "./page/comments.scss";
|
||||
@forward "./page/review.scss";
|
||||
@forward "./page/rating_window.scss";
|
||||
@forward "./page/leave_comment_window.scss";
|
||||
@forward "./page/review_status.scss";
|
||||
@forward "./page/map.scss";
|
||||
|
||||
@use "../../../globals.scss";
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
.rating-window {
|
||||
@include globals.border-with-radius;
|
||||
width: 100%;
|
||||
height: 225px;
|
||||
|
||||
.rating-type {
|
||||
display: flex;
|
||||
@ -0,0 +1,13 @@
|
||||
@use "../../../../globals.scss";
|
||||
|
||||
.review-set {
|
||||
@include globals.border-with-radius;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
66
web/src/app/submissions/[submissionId]/_comments.tsx
Normal file
66
web/src/app/submissions/[submissionId]/_comments.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
import type { SubmissionInfo } from "@/app/ts/Submission";
|
||||
import { Button } from "@mui/material"
|
||||
import Window from "./_window";
|
||||
import SendIcon from '@mui/icons-material/Send';
|
||||
import Image from "next/image";
|
||||
|
||||
interface CommentersProps {
|
||||
comments_data: CreatorAndReviewStatus
|
||||
}
|
||||
|
||||
interface CreatorAndReviewStatus {
|
||||
creator: SubmissionInfo["DisplayName"],
|
||||
review: SubmissionInfo["StatusID"],
|
||||
comments: Comment[],
|
||||
name: string
|
||||
}
|
||||
|
||||
interface Comment {
|
||||
picture?: string, //TEMP
|
||||
comment: string,
|
||||
date: string,
|
||||
name: string
|
||||
}
|
||||
|
||||
function AddComment(comment: Comment) {
|
||||
const IsBhopMaptest = comment.name == "BhopMaptest" //Highlighted commenter
|
||||
|
||||
return (
|
||||
<div className="commenter" data-highlighted={IsBhopMaptest}>
|
||||
<Image src={comment.picture as string} alt={`${comment.name}'s comment`}/>
|
||||
<div className="details">
|
||||
<header>
|
||||
<p className="name">{comment.name}</p>
|
||||
<p className="date">{comment.date}</p>
|
||||
</header>
|
||||
<p className="comment">{comment.comment}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LeaveAComment() {
|
||||
return (
|
||||
<Window title="Leave a Comment:" className="leave-comment-window">
|
||||
<textarea name="comment-box" id="comment-text-field"></textarea>
|
||||
<Button variant="outlined" endIcon={<SendIcon/>}>Submit</Button>
|
||||
</Window>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Comments(stats: CommentersProps) {
|
||||
return (<>
|
||||
<section className="comments">
|
||||
{stats.comments_data.comments.length===0
|
||||
&& <p className="no-comments">There are no comments.</p>
|
||||
|| stats.comments_data.comments.map(comment => (
|
||||
<AddComment key={comment.name} name={comment.name} date={comment.date} comment={comment.comment}/>
|
||||
))}
|
||||
</section>
|
||||
<LeaveAComment/>
|
||||
</>)
|
||||
}
|
||||
|
||||
export {
|
||||
type CreatorAndReviewStatus
|
||||
}
|
||||
@ -8,6 +8,7 @@ import Image from "next/image"
|
||||
interface AssetID {
|
||||
id: SubmissionInfo["AssetID"]
|
||||
}
|
||||
|
||||
function MapImage(asset: AssetID) {
|
||||
const [assetImage, setAssetImage] = useState("");
|
||||
|
||||
|
||||
29
web/src/app/submissions/[submissionId]/_reviewButtons.tsx
Normal file
29
web/src/app/submissions/[submissionId]/_reviewButtons.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { Button, ButtonOwnProps } from "@mui/material";
|
||||
|
||||
type Review = "Completed" | "Submit" | "Reject" | "Revoke" | "Validate" | "Publish"
|
||||
interface ReviewButton {
|
||||
name: Review,
|
||||
color: ButtonOwnProps["color"]
|
||||
}
|
||||
|
||||
function ReviewButtonClicked(type: Review) {
|
||||
//magical api requesting goes here, i hope it wont blow up
|
||||
console.log(type)
|
||||
}
|
||||
|
||||
function ReviewButton(props: ReviewButton) {
|
||||
return <Button color={props.color} variant="contained" onClick={() => { ReviewButtonClicked(props.name) }}>{props.name}</Button>
|
||||
}
|
||||
|
||||
export default function ReviewButtons() {
|
||||
return (
|
||||
<section className="review-set">
|
||||
<ReviewButton color="error" name="Reject"/>
|
||||
<ReviewButton color="info" name="Revoke"/>
|
||||
<ReviewButton color="info" name="Publish"/>
|
||||
<ReviewButton color="info" name="Completed"/>
|
||||
<ReviewButton color="info" name="Submit"/>
|
||||
<ReviewButton color="info" name="Validate"/>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
20
web/src/app/submissions/[submissionId]/_window.tsx
Normal file
20
web/src/app/submissions/[submissionId]/_window.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
interface WindowStruct {
|
||||
className: string,
|
||||
title: string,
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export default function Window(window: WindowStruct) {
|
||||
return (
|
||||
<section className={window.className}>
|
||||
<header>
|
||||
<p>{window.title}</p>
|
||||
</header>
|
||||
<main>{window.children}</main>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
type WindowStruct
|
||||
}
|
||||
@ -1,88 +1,51 @@
|
||||
'use client'
|
||||
"use client"
|
||||
|
||||
import { SubmissionStatus, SubmissionStatusToString, type SubmissionInfo } from "@/app/ts/Submission";
|
||||
import { SubmissionStatus, SubmissionStatusToString } from "@/app/ts/Submission";
|
||||
import type { CreatorAndReviewStatus } from "./_comments";
|
||||
import { MapImage, type AssetID } from "./_map";
|
||||
import { Rating, Button } from "@mui/material";
|
||||
import SendIcon from '@mui/icons-material/Send';
|
||||
import Webpage from "@/app/_components/webpage";
|
||||
import { useParams } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import ReviewButtons from "./_reviewButtons";
|
||||
import { Rating } from "@mui/material";
|
||||
import Comments from "./_comments";
|
||||
import Webpage from "@/app/_components/webpage";
|
||||
import Window from "./_window";
|
||||
import Link from "next/link";
|
||||
|
||||
import "./(styles)/page.scss";
|
||||
|
||||
interface Window {
|
||||
className: string,
|
||||
title: string,
|
||||
children: React.ReactNode
|
||||
}
|
||||
interface Comment {
|
||||
picture?: string, //TEMP
|
||||
comment: string,
|
||||
date: string,
|
||||
name: string
|
||||
}
|
||||
interface CreatorAndReviewStatus {
|
||||
creator: SubmissionInfo["DisplayName"],
|
||||
review: SubmissionInfo["StatusID"],
|
||||
comments: Comment[],
|
||||
name: string
|
||||
function Ratings() {
|
||||
return (
|
||||
<Window className="rating-window" title="Rating">
|
||||
<section className="rating-type">
|
||||
<aside className="rating-left">
|
||||
<p>Quality</p>
|
||||
<p>Difficulty</p>
|
||||
<p>Fun</p>
|
||||
<p>Length</p>
|
||||
</aside>
|
||||
<aside className="rating-right">
|
||||
<Rating defaultValue={2.5} precision={0.5}/>
|
||||
<Rating defaultValue={2.5} precision={0.5}/>
|
||||
<Rating defaultValue={2.5} precision={0.5}/>
|
||||
<Rating defaultValue={2.5} precision={0.5}/>
|
||||
</aside>
|
||||
</section>
|
||||
</Window>
|
||||
)
|
||||
}
|
||||
|
||||
function Window(window: Window) {
|
||||
return (
|
||||
<section className={window.className}>
|
||||
<header>
|
||||
<p>{window.title}</p>
|
||||
</header>
|
||||
<main>{window.children}</main>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function ImageAndRatings(asset: AssetID) {
|
||||
function RatingArea(asset: AssetID) {
|
||||
return (
|
||||
<aside className="review-area">
|
||||
<section className="map-image-area">
|
||||
<MapImage id={asset.id}/>
|
||||
</section>
|
||||
<Window className="rating-window" title="Rating">
|
||||
<section className="rating-type">
|
||||
<aside className="rating-left">
|
||||
<p>Quality</p>
|
||||
<p>Difficulty</p>
|
||||
<p>Fun</p>
|
||||
<p>Length</p>
|
||||
</aside>
|
||||
<aside className="rating-right">
|
||||
<Rating defaultValue={2.5} precision={0.5}/>
|
||||
<Rating defaultValue={2.5} precision={0.5}/>
|
||||
<Rating defaultValue={2.5} precision={0.5}/>
|
||||
<Rating defaultValue={2.5} precision={0.5}/>
|
||||
</aside>
|
||||
</section>
|
||||
</Window>
|
||||
<Ratings/>
|
||||
<ReviewButtons/>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
function Comment(comment: Comment) {
|
||||
const IsBhopMaptest = comment.name == "BhopMaptest" //Highlighted commenter
|
||||
|
||||
return (
|
||||
<div className="commenter" data-highlighted={IsBhopMaptest}>
|
||||
<Image src={comment.picture as string} alt={`${comment.name}'s comment`}/>
|
||||
<div className="details">
|
||||
<header>
|
||||
<p className="name">{comment.name}</p>
|
||||
<p className="date">{comment.date}</p>
|
||||
</header>
|
||||
<p className="comment">{comment.comment}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TitleAndComments(stats: CreatorAndReviewStatus) {
|
||||
const Review = SubmissionStatusToString(stats.review)
|
||||
|
||||
@ -96,48 +59,20 @@ function TitleAndComments(stats: CreatorAndReviewStatus) {
|
||||
</div>
|
||||
<p className="by-creator">by <Link href="" target="_blank">{stats.creator}</Link></p>
|
||||
<span className="spacer"></span>
|
||||
<section className="comments">
|
||||
{stats.comments.length===0
|
||||
&& <p className="no-comments">There are no comments.</p>
|
||||
|| stats.comments.map(comment => (
|
||||
<Comment key={comment.name} name={comment.name} date={comment.date} comment={comment.comment}/>
|
||||
))}
|
||||
</section>
|
||||
<Window title="Leave a Comment:" className="leave-comment-window">
|
||||
<textarea name="comment-box" id="comment-text-field"></textarea>
|
||||
<Button variant="contained" endIcon={<SendIcon/>}>Submit</Button>
|
||||
</Window>
|
||||
<Comments comments_data={stats}/>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
// const placeholder_Comments = [
|
||||
// {
|
||||
// comment: "This map has been accepted and is in the game.",
|
||||
// date: "on Dec 8 '24 at 18:46",
|
||||
// name: "BhopMaptest"
|
||||
// },
|
||||
// {
|
||||
// comment: "This map is so mid...",
|
||||
// date: "on Dec 8 '24 at 18:46",
|
||||
// name: "vmsize"
|
||||
// },
|
||||
// {
|
||||
// comment: "I prefer strafe client",
|
||||
// date: "on Dec 8 '24 at 18:46",
|
||||
// name: "Quaternions"
|
||||
// }
|
||||
// ]
|
||||
|
||||
export default function SubmissionInfoPage() {
|
||||
const params = useParams<{submissionId: string}>()
|
||||
const dynamicId = useParams<{submissionId: string}>()
|
||||
|
||||
return (
|
||||
<Webpage>
|
||||
<main className="map-page-main">
|
||||
<section className="review-section">
|
||||
<ImageAndRatings id={432}/>
|
||||
<TitleAndComments name={params.submissionId} creator="Quaternions" review={SubmissionStatus.Accepted} comments={[]}/>
|
||||
<RatingArea id={432}/>
|
||||
<TitleAndComments name={dynamicId.submissionId} creator="Quaternions" review={SubmissionStatus.Accepted} comments={[]}/>
|
||||
</section>
|
||||
</main>
|
||||
</Webpage>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user