Add badge

FRONTEND_V2/src/components/CompetitionCard.jsx

@@ -1,16 +1,38 @@
 import React from 'react';
 import Card from "./bootstrap/Card.jsx";
 import PropTypes from "prop-types";
+import {
+    competitionStatusesCssColor, competitionStatusesCssColorText,
+    competitionStatusesTranslate,
+    getCompetitionStatusByDates
+} from "../utils/competitionStatuses.js";
+import {formatDate} from "../utils/format.js";
+
+export const CompetitionCard = ({name, description, children, id, startedAt, endedAt}) => {
+    let status = getCompetitionStatusByDates(startedAt,endedAt)
+
+    if (startedAt === undefined || endedAt === undefined) {
+        status = undefined
+    }
+
+
+    const statusCssBg = competitionStatusesCssColor[status]
+    const statusCssText = competitionStatusesCssColorText[status]
+    const statusText = competitionStatusesTranslate[status]
+
 
-export const CompetitionCard = ({name, description, children, id}) => {
     return (
         <Card>
-            <h5><span className="badge text-bg-primary">Идет</span></h5>
+            <h5><span className={`badge ${statusCssBg} ${statusCssText}`}>{statusText}</span></h5>
             <div className="d-flex align-items-start gap-2">
                 <h2 className="text">{name}</h2><small className="text-muted">id={id || "0000"}</small>
             </div>
             <p className="text-muted">{description}</p>
 
+            <small className="text-muted"><i className="bi bi-clock me-1"></i>Начало: {formatDate(startedAt)}</small>
+            <br />
+            <small className="text-muted"><i className="bi bi-clock me-1"></i>Конец: {formatDate(endedAt)} </small>
+            <p className="mb-2"/>
             {children}
         </Card>
     );
@@ -21,4 +43,6 @@ CompetitionCard.propTypes = {
     description: PropTypes.string.isRequired,
     children: PropTypes.node,
     id: PropTypes.string,
+    startedAt: PropTypes.string,
+    endedAt: PropTypes.string,
 }

FRONTEND_V2/src/pages/champs/AdminChampsDetailPage.jsx

@@ -71,6 +71,8 @@ export const AdminChampsDetailPage = () => {
                     name={data.name}
                     description={data.description}
                     id={data.id}
+                    startedAt={data.startedAt}
+                    endedAt={data.endedAt}
                 />
 
                 <hr className="my-5"/>

FRONTEND_V2/src/pages/champs/AdminChampsPage.jsx

@@ -35,6 +35,8 @@ export const AdminChampsPage = () => {
                         key={elem.id}
                         id={elem.id}
                         name={elem.name}
+                        startedAt={elem.startedAt}
+                        endedAt={elem.endedAt}
                         description={elem.description}>
                         <Link to={`/admin/champs/${elem.id}/edit`} className="btn btn-warning me-2">Управлять</Link>
                     </CompetitionCard>

FRONTEND_V2/src/pages/user/ChampsPage.jsx

@@ -5,10 +5,12 @@ import BreadcrumbsElement from "../../components/BreadcrumbsElement.jsx";
 import BreadcrumbsRoot from "../../components/BreadcrumpsRoot.jsx";
 import UserLoginRequired from "../../components/UserLoginRequired.jsx";
 import {CompetitionCard} from "../../components/CompetitionCard.jsx";
+import {competitionStatuses, getCompetitionStatusByDates} from "../../utils/competitionStatuses.js";
 
 const ChampsPage = () => {
 
-    const [data, update] = useCachedGetAPI("/api/competitions/me",() => {}, []);
+    const [data, update] = useCachedGetAPI("/api/competitions/me", () => {
+    }, []);
 
     useEffect(() => {
         update()
@@ -18,20 +20,27 @@ const ChampsPage = () => {
 
     return (
         <>
-            <UserLoginRequired />
+            <UserLoginRequired/>
 
             <BreadcrumbsRoot>
                 <BreadcrumbsElement name="Соревнования"/>
             </BreadcrumbsRoot>
 
             {
                 data?.map(elem => {
+                    const status = getCompetitionStatusByDates(elem.startedAt, elem.endedAt)
+
                     return <CompetitionCard
                         key={elem.id}
                         id={elem.id}
                         name={elem.name}
+                        startedAt={elem.startedAt}
+                        endedAt={elem.endedAt}
                         description={elem.description}>
-                        <Link to={`/champs/${elem.id}/problems`} className="btn btn-success">Войти</Link>
+                        {status === competitionStatuses.IN_PROGRESS &&
+                            <>
+                                <Link to={`/champs/${elem.id}/problems`} className="btn btn-success">Войти</Link>
+                            </>}
                     </CompetitionCard>
                 })
             }

FRONTEND_V2/src/utils/competitionStatuses.js

@@ -0,0 +1,40 @@
+export const competitionStatuses = {
+    NOT_STARTED: "NOT_STARTED",
+    IN_PROGRESS: "IN_PROGRESS",
+    ENDED: "ENDED",
+}
+
+export const competitionStatusesTranslate = {
+    NOT_STARTED: "Не началось",
+    IN_PROGRESS: "Идет",
+    ENDED: "Завершено",
+}
+
+export const competitionStatusesCssColor = {
+    NOT_STARTED: "bg-warning",
+    IN_PROGRESS: "bg-success",
+    ENDED: "bg-danger",
+}
+
+export const competitionStatusesCssColorText = {
+    NOT_STARTED: "text-dark",
+    IN_PROGRESS: "",
+    ENDED: "",
+}
+
+
+
+
+
+export const getCompetitionStatusByDates = (start_time_str, end_time_str) => {
+    const startTimeDate = new Date(start_time_str);
+    const endTimeDate = new Date(end_time_str);
+
+    const now = new Date();
+
+    if (startTimeDate > now) return competitionStatuses.NOT_STARTED;
+    if (endTimeDate < now) return competitionStatuses.ENDED;
+
+    return competitionStatuses.IN_PROGRESS;
+
+}

FRONTEND_V2/src/utils/format.js

@@ -1,4 +1,6 @@
 export const formatDate = (dateString) => {
+    if (!dateString) return undefined
+
     const date = new Date(dateString);
 
     return date.toLocaleString('ru-RU', {

FRONTEND_V2/src/utils/settings.js

@@ -2,7 +2,7 @@ import axios from "axios";
 
 // const productionBuild = import.meta.env.VITE_ENV === "production";
 // if (!productionBuild) {
-//     axios.defaults.baseURL = `${document.location.protocol}//${document.location.hostname}:${8080}`
+    axios.defaults.baseURL = `https://codebattles.school30nn.ru`
 // }
 // const baseUrl = import.meta.env.VITE_API_ENDPOINT
 //