frontend/pages/files.tsx

143 lines
4.5 KiB
TypeScript
Raw Normal View History

2022-08-27 12:17:39 +03:00
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'
2022-08-27 17:41:59 +03:00
import { Checkbox } from 'antd'
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';
2022-08-27 12:17:39 +03:00
const Home: NextPage = () => {
2022-08-27 17:41:59 +03:00
const [correct, setCorrect] = useState(true)
const [err, setErr] = useState(true)
2022-08-28 05:05:05 +03:00
const [files, setFiles] = useState([])
const [file, setFile] = useState({})
2022-08-27 12:17:39 +03:00
const [data,setData] = useState("")
let i = 1;
let cards = new Array<JSX.Element>()
let correctClasses = 0
2022-08-28 05:05:05 +03:00
const getData = () =>{
let localFiles = JSON.parse(localStorage == undefined? "":localStorage.getItem("files") as string)
setFiles(localFiles)
setFile(localFiles[0])
2022-08-27 12:17:39 +03:00
if (data == ""){
2022-08-28 11:05:58 +03:00
axios.get(host+"/api/site/state/" + (localFiles[0] as any).uuid).then(res => {
if (res.data.paragraphs_processed > 0){
setTimeout(getData, 1000);
}
else{
axios.get(host+"/api/site/docx/" + (localFiles[0] as any).uuid).then(res => {
setData(res.data)
})
}
2022-08-27 12:17:39 +03:00
})
}
}
const onFileChange = (newFile:any) =>{
setData("")
2022-08-27 17:41:59 +03:00
axios.get(host+"/api/site/docx/" + newFile.uuid).then(res => {
2022-08-27 12:17:39 +03:00
setData(res.data)
})
setFile(newFile)
}
2022-08-28 11:05:58 +03:00
if (data == ""){
setTimeout(getData, 2000);
}
2022-08-27 12:17:39 +03:00
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}
2022-08-27 12:17:39 +03:00
cards.push(
<ErrorViewer
num={i}
paragraph={(data as any)[name].texts}
2022-08-27 12:17:39 +03:00
errText={name}
correct={(data as any)[name].correct}
2022-08-27 12:17:39 +03:00
></ErrorViewer>
)
i++
2022-08-28 05:05:05 +03:00
2022-08-27 17:41:59 +03:00
}
2022-08-28 05:05:05 +03:00
2022-08-27 12:17:39 +03:00
}
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>
2022-08-28 11:05:58 +03:00
<div className={styles.selector}>{
files.length == 0? "" : <ItemSelect
onChange={(val)=>onFileChange(val as any)}
items={files.map((value:any)=> ({
2022-08-28 12:53:03 +03:00
name: value.file,
2022-08-28 11:05:58 +03:00
value: value
} as SelectItemIE)
)}
></ItemSelect>
}
2022-08-27 12:17:39 +03:00
</div>
<div className={styles.pagination}>
2022-08-27 17:41:59 +03:00
<div className={styles.tools}>
2022-08-28 05:05:05 +03:00
<div><a href={(file as any).file}>Скачать файл</a></div>
2022-08-27 17:41:59 +03:00
<Checkbox checked={err} onChange={()=>setErr(!err)}>Есть замечания</Checkbox>
<Checkbox checked={correct} onChange={()=>setCorrect(!correct)}>Без замечаний </Checkbox>
</div>
2022-08-27 12:17:39 +03:00
{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>
2022-08-27 12:17:39 +03:00
</main>
</div>
)
}
export default Home