PenaSide/adminFront
3
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

статистика квиза

Browse Source
This commit is contained in:
Nastya 2024-04-04 00:53:48 +03:00
parent 36970ac6b6
commit 6483c9bc6d
6 changed files with 244 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/api/quizStatistic.ts Normal file
View File

@ -0,0 +1,28 @@
import { makeRequest } from "@frontend/kitui";
export type QuizStatisticResponse = {
Registrations: number;
Quizes: number;
Results: number
};
type TRequest = {
to: number;
from: number;
};
export const getStatistic = async (
to: number,
from: number,
): Promise<QuizStatisticResponse> => {
try {
const generalResponse = await makeRequest<TRequest, QuizStatisticResponse>({
url: `${process.env.REACT_APP_DOMAIN}/squiz/statistic`,
body: { to, from }
})
return generalResponse;
} catch (nativeError) {
return { Registrations: 0, Quizes: 0, Results: 0 };
}
};

10
src/index.tsx
View File

@ -24,9 +24,11 @@ import { PromocodeManagement } from "@root/pages/dashboard/Content/PromocodeMana
import { SettingRoles } from "@pages/Setting/SettingRoles";
import Support from "@pages/dashboard/Content/Support/Support";
import ChatImageNewWindow from "@pages/dashboard/Content/Support/ChatImageNewWindow";
import QuizStatistic from "@pages/dashboard/Content/QuizStatistic";
import theme from "./theme";
import "./index.css";
import { makeRequest } from "@frontend/kitui";
const componentsArray = [
["/users", <Users />],
@ -104,6 +106,14 @@ root.render(
</PrivateRoute>
}
/>
<Route
path="/quizStatistic"
element={
<PrivateRoute>
<QuizStatistic />
</PrivateRoute>
}
/>
{componentsArray.map((element) => (
<Route
key={element[0]}

169
src/pages/dashboard/Content/QuizStatistic/index.tsx Normal file
View File

@ -0,0 +1,169 @@
import { Table, TableBody, TableCell, TableHead, TableRow, useTheme, Typography, Box, TextField, Button } from '@mui/material';
import { useState } from 'react';
import moment from "moment";
import type { Moment } from "moment";
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { useQuizStatistic } from '@root/utils/hooks/useQuizStatistic';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
export default () => {
const theme = useTheme()
const [isOpen, setOpen] = useState<boolean>(false);
const [isOpenEnd, setOpenEnd] = useState<boolean>(false);
const [from, setFrom] = useState<Moment | null>(null);
const [to, setTo] = useState<Moment | null>(moment(Date.now()));
const { Registrations, Quizes, Results } = useQuizStatistic({
from,
to,
});
const resetTime = () => {
setFrom(moment(0));
setTo(moment(Date.now()));
};
const handleClose = () => {
setOpen(false);
};
const handleOpen = () => {
setOpen(true);
};
const onAdornmentClick = () => {
setOpen((old) => !old);
if (isOpenEnd) {
handleCloseEnd();
}
};
const handleCloseEnd = () => {
setOpenEnd(false);
};
const handleOpenEnd = () => {
setOpenEnd(true);
};
const onAdornmentClickEnd = () => {
setOpenEnd((old) => !old);
if (isOpen) {
handleClose();
}
};
return <>
<LocalizationProvider dateAdapter={AdapterMoment}>
<Box>
<Typography
sx={{
fontSize: "16px",
marginBottom: "5px",
fontWeight: 500,
color: "4D4D4D",
}}
>
Дата начала
</Typography>
<DatePicker
inputFormat="DD/MM/YYYY"
value={from}
onChange={(date) => date && setFrom(date)}
renderInput={(params) => (
<TextField
{...params}
sx={{ background: "#1F2126", borderRadius: "5px" }}
/>
)}
InputProps={{
sx: {
height: "40px",
color: theme.palette.secondary.main,
border: "1px solid",
borderColor: theme.palette.secondary.main,
"& .MuiSvgIcon-root": {
color: theme.palette.secondary.main,
},
},
}}
/>
</Box>
<Box>
<Typography
sx={{
fontSize: "16px",
marginBottom: "5px",
fontWeight: 500,
color: "4D4D4D",
}}
>
Дата окончания
</Typography>
<DatePicker
inputFormat="DD/MM/YYYY"
value={to}
onChange={(date) => date && setTo(date)}
renderInput={(params) => (
<TextField
{...params}
sx={{ background: "#1F2126", borderRadius: "5px" }}
/>
)}
InputProps={{
sx: {
height: "40px",
color: theme.palette.secondary.main,
border: "1px solid",
borderColor: theme.palette.secondary.main,
"& .MuiSvgIcon-root": {
color: theme.palette.secondary.main,
},
},
}}
/>
</Box>
<Button
sx={{
m: '10px 0'
}}
onClick={resetTime}
>
Сбросить даты
</Button>
<Table
sx={{
width: "80%",
border: "2px solid",
borderColor: theme.palette.secondary.main,
bgcolor: theme.palette.content.main,
color: "white"
}}
>
<TableHead>
<TableRow
sx={{
borderBottom: "2px solid",
borderColor: theme.palette.grayLight.main,
height: "100px",
}}
>
<TableCell sx={{color: "inherit"}} align="center">Регистраций</TableCell>
<TableCell sx={{color: "inherit"}} align="center">Quiz</TableCell>
<TableCell sx={{color: "inherit"}} align="center">Результаты</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableCell sx={{color: "inherit"}} align="center">{Registrations}</TableCell>
<TableCell sx={{color: "inherit"}} align="center">{Quizes}</TableCell>
<TableCell sx={{color: "inherit"}} align="center">{Results}</TableCell>
</TableBody>
</Table>
</LocalizationProvider>
</>
}

4
src/pages/dashboard/Content/Users.tsx
View File

@ -131,7 +131,7 @@ const Users: React.FC = () => {
);
return (
<React.Fragment>
<Button
{/* <Button
variant="text"
onClick={() => navigate("/modalAdmin")}
sx={{
@ -151,7 +151,7 @@ const Users: React.FC = () => {
}}
>
ИНФОРМАЦИЯ О ПРОЕКТЕ
</Button>
</Button> */}
<Accordion
sx={{

1
src/pages/dashboard/Menu/index.tsx
View File

@ -100,6 +100,7 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== "open"
}));
const links: { path: string; element: JSX.Element; title: string; className: string }[] = [
{ path: "/quizStatistic", element: <>📝</>, title: "Статистика Quiz", className: "menu" },
{ path: "/users", element: <PersonOutlineOutlinedIcon />, title: "Информация о проекте", className: "menu" },
{ path: "/entities", element: <SettingsOutlinedIcon />, title: "Юридические лица", className: "menu" },
{ path: "/tariffs", element: <BathtubOutlinedIcon />, title: "Тарифы", className: "menu" },

34
src/utils/hooks/useQuizStatistic.ts Normal file
View File

@ -0,0 +1,34 @@
import { useEffect, useState } from "react";
import {
QuizStatisticResponse,
getStatistic
} from "@root/api/quizStatistic";
import type { Moment } from "moment";
interface useQuizStatisticProps {
to: Moment | null;
from: Moment | null;
}
export function useQuizStatistic({ to, from }: useQuizStatisticProps) {
const formatTo = to?.unix();
const formatFrom = from?.unix();
const [data, setData] = useState<QuizStatisticResponse | null>({ Registrations: 0, Quizes: 0, Results: 0 });
useEffect(() => {
const requestStatistics = async () => {
console.log("работаю раз")
console.log("работаю два")
const gottenData = await getStatistic(Number(formatTo), Number(formatFrom));
setData(gottenData)
}
requestStatistics();
}, [to, from]);
return { ...data };
}