web: clone submissions page for mapfixes
This commit is contained in:
parent
37560ac5d2
commit
97180ab263
GPG Key ID:
D0DF5964F79AC131
75
web/src/app/mapfixes/(styles)/page.scss
Normal file
75
web/src/app/mapfixes/(styles)/page.scss
Normal file
@ -0,0 +1,75 @@
|
||||
@forward "./page/card.scss";
|
||||
|
||||
@use "../../globals.scss";
|
||||
|
||||
a {
|
||||
color:rgb(255, 255, 255);
|
||||
|
||||
&:visited, &:hover, &:focus {
|
||||
text-decoration: none;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
&:active {
|
||||
color: rgb(192, 192, 192)
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin: 0.3rem;
|
||||
}
|
||||
|
||||
.pagination button {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 1.15rem;
|
||||
border: none;
|
||||
border-radius: 0.35rem;
|
||||
background-color: #33333350;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pagination button:disabled {
|
||||
background-color: #5555559a;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pagination-dots {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: #bbb;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background-color: #333;
|
||||
}
|
||||
87
web/src/app/mapfixes/(styles)/page/card.scss
Normal file
87
web/src/app/mapfixes/(styles)/page/card.scss
Normal file
@ -0,0 +1,87 @@
|
||||
@use "../../../globals.scss";
|
||||
|
||||
.submissionCard {
|
||||
display: flex;
|
||||
background-color: #2020207c;
|
||||
border: 1px solid #97979783;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
min-width: 180px;
|
||||
max-width: 340px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.details {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 3px 0px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 3px 0px;
|
||||
}
|
||||
|
||||
.map-image {
|
||||
border-radius: 10px 10px 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.displayName {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
max-width: 70%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rating {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.author span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.rating {
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
19
web/src/app/mapfixes/[mapfixId]/(styles)/page.scss
Normal file
19
web/src/app/mapfixes/[mapfixId]/(styles)/page.scss
Normal file
@ -0,0 +1,19 @@
|
||||
@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/map.scss";
|
||||
|
||||
@use "../../../globals.scss";
|
||||
|
||||
.map-page-main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.by-creator {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
@use "../../../../globals.scss";
|
||||
|
||||
#comment-text-field {
|
||||
@include globals.border-with-radius;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-color: var(--comment-area)
|
||||
}
|
||||
|
||||
.leave-comment-window {
|
||||
@include globals.border-with-radius;
|
||||
width: 100%;
|
||||
height: 230px;
|
||||
margin-top: 35px;
|
||||
|
||||
.rating-type {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 35%;
|
||||
|
||||
.rating-right {
|
||||
display: grid;
|
||||
|
||||
> span {
|
||||
margin: 6px 0 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 15px 0 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--window-header);
|
||||
border-bottom: globals.$review-border;
|
||||
height: 45px;
|
||||
|
||||
p {
|
||||
font-weight: bold;
|
||||
margin: 0 0 0 20px;
|
||||
}
|
||||
}
|
||||
main {
|
||||
padding: 20px;
|
||||
|
||||
button {
|
||||
margin-top: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
49
web/src/app/mapfixes/[mapfixId]/(styles)/page/comments.scss
Normal file
49
web/src/app/mapfixes/[mapfixId]/(styles)/page/comments.scss
Normal file
@ -0,0 +1,49 @@
|
||||
$comments-size: 60px;
|
||||
|
||||
.comments {
|
||||
display: grid;
|
||||
gap: 25px;
|
||||
margin-top: 20px;
|
||||
|
||||
.no-comments {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.commenter {
|
||||
display: flex;
|
||||
height: $comments-size;
|
||||
|
||||
//BhopMaptest comment
|
||||
&[data-highlighted="true"] {
|
||||
background-color: var(--comment-highlighted);
|
||||
}
|
||||
> img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.name {
|
||||
font: {
|
||||
weight: 500;
|
||||
size: 1.3em;
|
||||
};
|
||||
}
|
||||
.date {
|
||||
font-size: .8em;
|
||||
margin: 0 0 0 5px;
|
||||
color: #646464
|
||||
}
|
||||
.details {
|
||||
display: grid;
|
||||
margin-left: 10px;
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
p:not(.date) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
web/src/app/mapfixes/[mapfixId]/(styles)/page/map.scss
Normal file
15
web/src/app/mapfixes/[mapfixId]/(styles)/page/map.scss
Normal file
@ -0,0 +1,15 @@
|
||||
@use "../../../../globals.scss";
|
||||
|
||||
.map-image-area {
|
||||
@include globals.border-with-radius;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
|
||||
> p {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
@use "../../../../globals.scss";
|
||||
|
||||
.rating-window {
|
||||
@include globals.border-with-radius;
|
||||
width: 100%;
|
||||
|
||||
.rating-type {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 35%;
|
||||
|
||||
.rating-right {
|
||||
display: grid;
|
||||
|
||||
> span {
|
||||
margin: 6px 0 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 15px 0 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--window-header);
|
||||
border-bottom: globals.$review-border;
|
||||
height: 45px;
|
||||
|
||||
p {
|
||||
font-weight: bold;
|
||||
margin: 0 0 0 20px;
|
||||
}
|
||||
}
|
||||
main {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
}
|
||||
47
web/src/app/mapfixes/[mapfixId]/(styles)/page/review.scss
Normal file
47
web/src/app/mapfixes/[mapfixId]/(styles)/page/review.scss
Normal file
@ -0,0 +1,47 @@
|
||||
@use "../../../../globals.scss";
|
||||
|
||||
.review-info {
|
||||
width: 650px;
|
||||
height: 100%;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
p, h1 {
|
||||
color: var(--text-color);
|
||||
}
|
||||
h1 {
|
||||
font: {
|
||||
weight: 500;
|
||||
size: 1.8rem
|
||||
};
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
color: var(--anchor-link-review);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.review-section {
|
||||
display: flex;
|
||||
gap: 50px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.review-area {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
gap: 25px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
object-fit: contain
|
||||
}
|
||||
}
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,80 @@
|
||||
$UnderConstruction: "0";
|
||||
$Submitted: "1";
|
||||
$ChangesRequested: "2";
|
||||
$Accepted: "3";
|
||||
$Validating: "4";
|
||||
$Validated: "5";
|
||||
$Uploading: "6";
|
||||
$Uploaded: "7";
|
||||
$Rejected: "8";
|
||||
$Released: "9";
|
||||
|
||||
.review-status {
|
||||
border-radius: 5px;
|
||||
|
||||
p {
|
||||
margin: 3px 25px 3px 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&[data-review-status="#{$Released}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$Rejected}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$Uploading}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$Uploaded}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$Validated}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$Validating}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$Accepted}"] {
|
||||
background-color: rgb(2, 162, 2);
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$ChangesRequested}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$Submitted}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$UnderConstruction}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
68
web/src/app/mapfixes/[mapfixId]/_comments.tsx
Normal file
68
web/src/app/mapfixes/[mapfixId]/_comments.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
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 {
|
||||
asset_id: SubmissionInfo["AssetID"],
|
||||
creator: SubmissionInfo["DisplayName"],
|
||||
review: SubmissionInfo["StatusID"],
|
||||
status_message: SubmissionInfo["StatusMessage"],
|
||||
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
|
||||
}
|
||||
14
web/src/app/mapfixes/[mapfixId]/_map.tsx
Normal file
14
web/src/app/mapfixes/[mapfixId]/_map.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import { SubmissionInfo } from "@/app/ts/Submission"
|
||||
|
||||
interface AssetID {
|
||||
id: SubmissionInfo["AssetID"]
|
||||
}
|
||||
|
||||
function MapImage() {
|
||||
return <p>Fetching map image...</p>
|
||||
}
|
||||
|
||||
export {
|
||||
type AssetID,
|
||||
MapImage
|
||||
}
|
||||
74
web/src/app/mapfixes/[mapfixId]/_reviewButtons.tsx
Normal file
74
web/src/app/mapfixes/[mapfixId]/_reviewButtons.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import { Button, ButtonOwnProps } from "@mui/material";
|
||||
|
||||
type Actions = "Completed" | "Submit" | "Reject" | "Revoke"
|
||||
type ApiActions = Lowercase<Actions> | "trigger-validate" | "retry-validate" | "trigger-upload" | "reset-uploading" | "reset-validating"
|
||||
type Review = Actions | "Accept" | "Validate" | "Upload" | "Reset Uploading (fix softlocked status)" | "Reset Validating (fix softlocked status)" | "Request Changes"
|
||||
|
||||
interface ReviewButton {
|
||||
name: Review,
|
||||
action: ApiActions,
|
||||
submissionId: string,
|
||||
color: ButtonOwnProps["color"]
|
||||
}
|
||||
|
||||
interface ReviewId {
|
||||
submissionId: string
|
||||
}
|
||||
|
||||
async function ReviewButtonClicked(action: ApiActions, submissionId: string) {
|
||||
try {
|
||||
const response = await fetch(`/api/submissions/${submissionId}/status/${action}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
}
|
||||
});
|
||||
// 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}`);
|
||||
}
|
||||
|
||||
window.location.reload();
|
||||
} catch (error) {
|
||||
console.error("Error updating submission status:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function ReviewButton(props: ReviewButton) {
|
||||
return <Button
|
||||
color={props.color}
|
||||
variant="contained"
|
||||
onClick={() => { ReviewButtonClicked(props.action, props.submissionId) }}>{props.name}</Button>
|
||||
}
|
||||
|
||||
export default function ReviewButtons(props: ReviewId) {
|
||||
const submissionId = props.submissionId
|
||||
// When is each button visible?
|
||||
// Multiple buttons can be visible at once.
|
||||
// Action | Role | When Current Status is One of:
|
||||
// ---------------|-----------|-----------------------
|
||||
// Submit | Submitter | UnderConstruction, ChangesRequested
|
||||
// Revoke | Submitter | Submitted, ChangesRequested
|
||||
// Accept | Reviewer | Submitted
|
||||
// Validate | Reviewer | Accepted
|
||||
// ResetValidating| Reviewer | Validating
|
||||
// Reject | Reviewer | Submitted
|
||||
// RequestChanges | Reviewer | Validated, Accepted, Submitted
|
||||
// Upload | MapAdmin | Validated
|
||||
// ResetUploading | MapAdmin | Uploading
|
||||
return (
|
||||
<section className="review-set">
|
||||
<ReviewButton color="info" name="Submit" action="submit" submissionId={submissionId}/>
|
||||
<ReviewButton color="info" name="Revoke" action="revoke" submissionId={submissionId}/>
|
||||
<ReviewButton color="info" name="Accept" action="trigger-validate" submissionId={submissionId}/>
|
||||
<ReviewButton color="info" name="Validate" action="retry-validate" submissionId={submissionId}/>
|
||||
<ReviewButton color="error" name="Reject" action="reject" submissionId={submissionId}/>
|
||||
<ReviewButton color="info" name="Upload" action="trigger-upload" submissionId={submissionId}/>
|
||||
<ReviewButton color="error" name="Reset Uploading (fix softlocked status)" action="reset-uploading" submissionId={submissionId}/>
|
||||
<ReviewButton color="error" name="Reset Validating (fix softlocked status)" action="reset-validating" submissionId={submissionId}/>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
20
web/src/app/mapfixes/[mapfixId]/_window.tsx
Normal file
20
web/src/app/mapfixes/[mapfixId]/_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
|
||||
}
|
||||
105
web/src/app/mapfixes/[mapfixId]/page.tsx
Normal file
105
web/src/app/mapfixes/[mapfixId]/page.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
"use client"
|
||||
|
||||
import { SubmissionInfo, SubmissionStatusToString } from "@/app/ts/Submission";
|
||||
import type { CreatorAndReviewStatus } from "./_comments";
|
||||
import { MapImage } from "./_map";
|
||||
import { useParams } from "next/navigation";
|
||||
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 { useState, useEffect } from "react";
|
||||
|
||||
import "./(styles)/page.scss";
|
||||
|
||||
interface ReviewId {
|
||||
submissionId: 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 RatingArea(submission: ReviewId) {
|
||||
return (
|
||||
<aside className="review-area">
|
||||
<section className="map-image-area">
|
||||
<MapImage/>
|
||||
</section>
|
||||
<Ratings/>
|
||||
<ReviewButtons submissionId={submission.submissionId}/>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
function TitleAndComments(stats: CreatorAndReviewStatus) {
|
||||
const Review = SubmissionStatusToString(stats.review)
|
||||
|
||||
// TODO: hide status message when status is not "Accepted"
|
||||
return (
|
||||
<main className="review-info">
|
||||
<div>
|
||||
<h1>{stats.name}</h1>
|
||||
<aside data-review-status={stats.review} className="review-status">
|
||||
<p>{Review}</p>
|
||||
</aside>
|
||||
</div>
|
||||
<p className="by-creator">by <Link href="" target="_blank">{stats.creator}</Link></p>
|
||||
<p className="asset-id">Model Asset ID {stats.asset_id}</p>
|
||||
<p className="status-message">Validation Error: {stats.status_message}</p>
|
||||
<span className="spacer"></span>
|
||||
<Comments comments_data={stats}/>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
export default function SubmissionInfoPage() {
|
||||
const dynamicId = useParams<{submissionId: string}>()
|
||||
|
||||
const [submission, setSubmission] = useState<SubmissionInfo | null>(null)
|
||||
|
||||
useEffect(() => { // needs to be client sided since server doesn't have a session, nextjs got mad at me for exporting an async function: (https://nextjs.org/docs/messages/no-async-client-component)
|
||||
async function getSubmission() {
|
||||
const res = await fetch(`/api/submissions/${dynamicId.submissionId}`)
|
||||
if (res.ok) {
|
||||
setSubmission(await res.json())
|
||||
}
|
||||
}
|
||||
getSubmission()
|
||||
}, [dynamicId.submissionId])
|
||||
|
||||
if (!submission) {
|
||||
return <Webpage>
|
||||
{/* TODO: Add skeleton loading thingy ? Maybe ? (https://mui.com/material-ui/react-skeleton/) */}
|
||||
</Webpage>
|
||||
}
|
||||
return (
|
||||
<Webpage>
|
||||
<main className="map-page-main">
|
||||
<section className="review-section">
|
||||
<RatingArea submissionId={dynamicId.submissionId}/>
|
||||
<TitleAndComments name={submission.DisplayName} creator={submission.Creator} review={submission.StatusID} status_message={submission.StatusMessage} asset_id={submission.AssetID} comments={[]}/>
|
||||
</section>
|
||||
</main>
|
||||
</Webpage>
|
||||
)
|
||||
}
|
||||
41
web/src/app/mapfixes/_card.tsx
Normal file
41
web/src/app/mapfixes/_card.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Rating } from "@mui/material";
|
||||
|
||||
interface SubmissionCardProps {
|
||||
displayName: string;
|
||||
assetId: number;
|
||||
rating: number;
|
||||
author: string;
|
||||
id: number;
|
||||
}
|
||||
|
||||
export default function SubmissionCard(props: SubmissionCardProps) {
|
||||
return (
|
||||
<Link href={`/submissions/${props.id}`}>
|
||||
<div className="submissionCard">
|
||||
<div className="content">
|
||||
<div className="map-image">
|
||||
{/* TODO: Grab image of model */}
|
||||
<Image height={200} width={200} priority={true} src="https://api.ic3.space/strafe/map-images/11222350808" style={{ width: `100%` }} alt={props.displayName} />
|
||||
</div>
|
||||
<div className="details">
|
||||
<div className="header">
|
||||
<span className="displayName">{props.displayName}</span>
|
||||
<div className="rating">
|
||||
<Rating value={props.rating} readOnly size="small" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer">
|
||||
<div className="author">
|
||||
<Image className="avatar" width={28} height={28} priority={true} src="https://api.ic3.space/strafe/map-images/11222350808" alt={props.author}/>
|
||||
<span>{props.author}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
18
web/src/app/mapfixes/_window.tsx
Normal file
18
web/src/app/mapfixes/_window.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
interface WindowStruct {
|
||||
children: React.ReactNode,
|
||||
className: string,
|
||||
title: string,
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
110
web/src/app/mapfixes/page.tsx
Normal file
110
web/src/app/mapfixes/page.tsx
Normal file
@ -0,0 +1,110 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { SubmissionInfo } from "../ts/Submission";
|
||||
import SubmissionCard from "./_card";
|
||||
import Webpage from "@/app/_components/webpage";
|
||||
|
||||
import "./(styles)/page.scss";
|
||||
|
||||
export default function SubmissionInfoPage() {
|
||||
const [submissions, setSubmissions] = useState<SubmissionInfo[]>([])
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const cardsPerPage = 24; // built to fit on a 1920x1080 monitor
|
||||
|
||||
const totalPages = Math.ceil(submissions.length / cardsPerPage);
|
||||
|
||||
const currentCards = submissions.slice(
|
||||
currentPage * cardsPerPage,
|
||||
(currentPage + 1) * cardsPerPage
|
||||
);
|
||||
|
||||
const nextPage = () => {
|
||||
if (currentPage < totalPages - 1) {
|
||||
setCurrentPage(currentPage + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const prevPage = () => {
|
||||
if (currentPage > 0) {
|
||||
setCurrentPage(currentPage - 1);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchSubmissions() {
|
||||
const res = await fetch('/api/submissions?Page=1&Limit=100')
|
||||
if (res.ok) {
|
||||
setSubmissions(await res.json())
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
fetchSubmissions()
|
||||
}, 50);
|
||||
}, [])
|
||||
|
||||
if (!submissions) {
|
||||
return <Webpage>
|
||||
<main>
|
||||
Loading...
|
||||
</main>
|
||||
</Webpage>
|
||||
}
|
||||
|
||||
if (submissions && submissions.length == 0) {
|
||||
return <Webpage>
|
||||
<main>
|
||||
Submissions list is empty.
|
||||
</main>
|
||||
</Webpage>
|
||||
}
|
||||
|
||||
return (
|
||||
// TODO: Add filter settings & searchbar & page selector
|
||||
<Webpage>
|
||||
<main
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '1rem',
|
||||
width: '100%',
|
||||
maxWidth: '100vw',
|
||||
boxSizing: 'border-box',
|
||||
overflowX: 'hidden'
|
||||
}}
|
||||
>
|
||||
<div className="pagination-dots">
|
||||
{Array.from({ length: totalPages }).map((_, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className={`dot ${index === currentPage ? 'active' : ''}`}
|
||||
onClick={() => setCurrentPage(index)}
|
||||
></span>
|
||||
))}
|
||||
</div>
|
||||
<div className="pagination">
|
||||
<button onClick={prevPage} disabled={currentPage === 0}><</button>
|
||||
<span>
|
||||
Page {currentPage + 1} of {totalPages}
|
||||
</span>
|
||||
<button onClick={nextPage} disabled={currentPage === totalPages - 1}>></button>
|
||||
</div>
|
||||
<div className="grid">
|
||||
{currentCards.map((submission) => (
|
||||
<SubmissionCard
|
||||
key={submission.ID}
|
||||
id={submission.ID}
|
||||
assetId={submission.AssetID}
|
||||
displayName={submission.DisplayName}
|
||||
author={submission.Creator}
|
||||
rating={submission.StatusID}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
</Webpage>
|
||||
)
|
||||
}
|
||||
59
web/src/app/ts/Mapfix.ts
Normal file
59
web/src/app/ts/Mapfix.ts
Normal file
@ -0,0 +1,59 @@
|
||||
const enum MapfixStatus {
|
||||
UnderConstruction = 0,
|
||||
Submitted = 1,
|
||||
ChangesRequested = 2,
|
||||
Accepted = 3,
|
||||
Validating = 4,
|
||||
Validated = 5,
|
||||
Uploading = 6,
|
||||
Uploaded = 7,
|
||||
Rejected = 8,
|
||||
}
|
||||
|
||||
interface MapfixInfo {
|
||||
readonly ID: number,
|
||||
readonly DisplayName: string,
|
||||
readonly Creator: string,
|
||||
readonly GameID: number,
|
||||
readonly Date: number,
|
||||
readonly Submitter: number,
|
||||
readonly AssetID: number,
|
||||
readonly AssetVersion: number,
|
||||
readonly ValidatedAssetID: number,
|
||||
readonly ValidatedAssetVersion: number,
|
||||
readonly Completed: boolean,
|
||||
readonly TargetAssetID: number,
|
||||
readonly StatusID: MapfixStatus
|
||||
readonly StatusMessage: string,
|
||||
}
|
||||
|
||||
function MapfixStatusToString(submission_status: MapfixStatus): string {
|
||||
switch (submission_status) {
|
||||
case MapfixStatus.Rejected:
|
||||
return "REJECTED"
|
||||
case MapfixStatus.Uploading:
|
||||
return "UPLOADING"
|
||||
case MapfixStatus.Uploaded:
|
||||
return "UPLOADED"
|
||||
case MapfixStatus.Validated:
|
||||
return "VALIDATED"
|
||||
case MapfixStatus.Validating:
|
||||
return "VALIDATING"
|
||||
case MapfixStatus.Accepted:
|
||||
return "ACCEPTED"
|
||||
case MapfixStatus.ChangesRequested:
|
||||
return "CHANGES REQUESTED"
|
||||
case MapfixStatus.Submitted:
|
||||
return "SUBMITTED"
|
||||
case MapfixStatus.UnderConstruction:
|
||||
return "UNDER CONSTRUCTION"
|
||||
default:
|
||||
return "UNKNOWN"
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
MapfixStatus,
|
||||
MapfixStatusToString,
|
||||
type MapfixInfo
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user