frontend/pages/files.tsx

134 lines
4.2 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import type { NextPage } from 'next'
import Head from 'next/head'
import { ErrorViewer } from '../Components/ErrorViewer'
import { FileUploader } from '../Components/FileUploader'
import { Header } from '../Components/header'
import styles from '../styles/Home.module.css'
import 'antd/dist/antd.css';
import { ItemSelect, SelectItemIE } from '../Components/ItemSelect'
import { useState } from 'react'
import { get } from './api/fetch'
import { host } from './api/consts'
import { PulseLoader } from 'react-spinners'
import axios from 'axios'
import { Checkbox } from 'antd'
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';
const Home: NextPage = () => {
const [correct, setCorrect] = useState(true)
const [err, setErr] = useState(true)
const [sort, setSort] = useState("alphabet")
let files = JSON.parse(localStorage.getItem("files") as string)
const [file, setFile] = useState(files[0])
const [data,setData] = useState("")
let i = 1;
let cards = new Array<JSX.Element>()
let correctClasses = 0
const getData = () =>{
if (data == ""){
axios.get(host+"/api/site/docx/" + file.uuid).then(res => {
setData(res.data)
})
}
}
const onFileChange = (newFile:any) =>{
setData("")
axios.get(host+"/api/site/docx/" + newFile.uuid).then(res => {
setData(res.data)
})
setFile(newFile)
}
setTimeout(getData, 2000);
if (data != ""){
for(var name in data as any) {
if ((data as any)[name].correct){correctClasses++}
if (correct == false && (data as any)[name].correct == true){continue}
if (err == false && (data as any)[name].correct == false){continue}
cards.push(
<ErrorViewer
num={i}
paragraph={(data as any)[name].texts}
errText={name}
correct={(data as any)[name].correct}
></ErrorViewer>
)
i++
}
}
let select = new Array<SelectItemIE>()
files.forEach((value : any) => {
select.push(
{
name: value.file.slice(48, value.uuid.lenght),
value: value
} as SelectItemIE
)
});
return (
<div className={styles.container}>
<Head>
<title>Загрузите файл</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<Header></Header>
<div className={styles.selector}>
<ItemSelect
onChange={(val)=>onFileChange(val as any)}
items={select}
></ItemSelect>
</div>
<div className={styles.pagination}>
<div className={styles.tools}>
<div><a href={file.file}>Скачать файл</a></div>
<Checkbox checked={err} onChange={()=>setErr(!err)}>Есть замечания</Checkbox>
<Checkbox checked={correct} onChange={()=>setCorrect(!correct)}>Без замечаний </Checkbox>
</div>
{data == ""? <PulseLoader color={"#13377D"}></PulseLoader>:cards}
</div>
<div className={styles.progress}>
<CircularProgressbar
styles={{
root: {},
path: {
stroke: `#13377D`,
strokeLinecap: 'butt',
transition: 'stroke-dashoffset 0.5s ease 0s',
transform: 'rotate(1turn)',
transformOrigin: 'center center',
},
trail: {
stroke: '#fff',
strokeLinecap: 'round',
transformOrigin: 'center center',
},
text: {
fill: '#13377D',
fontWeight:'600',
fontSize: '20px',
},
background: {
fill: '#3e98c7',
},
}}
value={(correctClasses/39)*100} text={`${((correctClasses/39)*100).toFixed(0)}%`}></CircularProgressbar>
<div>Вероятность соответствия документа</div>
</div>
</main>
</div>
)
}
export default Home