add score

Components/ErrorViewer/error.module.css

@@ -56,7 +56,6 @@
     font-size: 14px;
     line-height: 22px;
     color: rgba(0, 0, 0, 0.45);
-
 }
 
 .paragraphs{
@@ -74,4 +73,16 @@
 
 .correct{
     width: 110px;
+}
+
+.circle{
+    border-radius: 50%;
+    height: 16px;
+    width: 16px;
+}
+
+.num{
+    display: flex;
+    gap:5px;
+    align-items: center;
 }

Components/ErrorViewer/index.tsx

@@ -14,8 +14,6 @@ interface ErrorViewerIE{
 
 export const ErrorViewer : React.FC<ErrorViewerIE> = (props) =>{
     const [open, setOpen] = useState(false)
-    console.log(props.paragraph)
-
     return(
         <div className={styles.viewer}>
             <div className={styles.card}>
@@ -41,7 +39,7 @@ export const ErrorViewer : React.FC<ErrorViewerIE> = (props) =>{
                     {
                         props.paragraph.map(
                             (value, index)=><div className={styles.paragraph}>
-                                    <div><strong>№{index+1}</strong></div>
+                                    <div className={styles.num}><strong>№{index+1}</strong> <div className={styles.circle} style={{opacity:"0.5",background: Number(value[1])<50? "#F5222D": Number(value[1]) < 70? "#E3F32A":"#52C41A", display:props.correct? "":"none"}}></div></div>
                                     <div className={styles.paragraph}>{value[0]}</div>
                                     <div><strong>Score:{value[1]}</strong></div>
                                 </div>

Components/FileUploader/index.tsx

@@ -20,7 +20,6 @@ export const FileUploader:React.FC<FileUploaderIE> = (data) =>{
       
         onChange(info:any) {
           if (info.file.status !== 'uploading') {
-            console.log(info.file, info.fileList);
           }
       
           if (info.file.status === 'done') {

Components/ItemSelect/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "./itemSelect.module.css"
 
 export interface SelectItemIE{
@@ -13,46 +13,30 @@ interface SelectIE{
 }
 
 export const ItemSelect: React.FC<SelectIE> = (props) =>{
+    const [selected, setSelected] = useState(props.items[0])
+    const [open, setOpen] = useState(false)
     let options = new Array()
     
     props.items.map((item:SelectItemIE)=>{
         options.push(
-            <option>{item.name}</option> 
+            <div className={selected.name == item.name? styles.selected:styles.option} onClick={()=>onItemChange(item)}>{item.name}</div>
             )
     })
-    
-    const getValue = (name:string) =>{
-        let val;
-        props.items.map((item:SelectItemIE) => {
-            if (item.name == name){
-                val =  item.value
-            }
-        })
-        return val
+    const onItemChange = (item:SelectItemIE) =>{
+        setSelected(item)
+        props.onChange(item.value)
     }
-    const getName = (value:number) =>{
-        let name;
-        props.items.map((item:SelectItemIE) => {
-            if (item.value == value){
-                name =  item.name
-            }
-        })
-        return name
-    }
-    
     
     return(
-        <div>
-            {
-                props.value == undefined?
-                    <select className={styles.myselect} onChange={(e)=>props.onChange(getValue(e.target.value) as any)}>    
+        <div >
+            <div className={styles.myselect}>
+                <div className={styles.head} onClick={()=>setOpen(!open)}>Выберите документ <img style={{transform: open? "rotate(180deg)":""}} src="/images/arrow.svg"></img></div>
+                {
+                    open? <div className={styles.options}>
                         {options}
-                    </select>
-                :
-                    <select value={getName(props.value)} className={styles.myselect} onChange={(e)=>props.onChange(getValue(e.target.value) as any)}>    
-                        {options}
-                    </select>
-            }
+                    </div>: ""
+                }
+            </div>
         </div>
     )
 }

Components/ItemSelect/itemSelect.module.css

@@ -1,25 +1,61 @@
 .myselect{
     border: none;
+    width: 240px;
     font-size: 14px;
-    color: #1C85BF;
+    color: #1890FF;
     font-weight: 500;
     outline: none;
     width: inherit;
 }
+.head{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 10px;
+    cursor: pointer;
+    width: 240px ;
+}
+.options{
+    display: flex;
+    flex-direction: column;
+    gap:8px
+}
+.option{
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    justify-content: right;
+    color: #0E1A33;
+    background: #F4F7FD;
+    width: 100%;
+    cursor: pointer;
+}
+.selected{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    justify-content: right;
+    color: #1890FF;
+    background: #E6F7FF;
+    box-shadow: inset -3px 0px 0px #1890FF;
+    border-right: solid 3px #1890FF;
+    cursor: pointer;
 
+}
 @media screen and (max-width: 1300px) {
     .myselect{
-        font-size: 18px;
+        font-size: 12px;
     }
 }
 
 @media screen and (max-width: 900px) {
     .myselect{
-        font-size: 14px;
+        font-size: 12px;
     }
 }
 @media screen and (max-width: 500px) {
     .myselect{
-        font-size: 12px;
+        font-size: 10px;
     }
 }

Components/header/header.module.css

@@ -16,6 +16,7 @@
 
 .logo{
     cursor: pointer;
+    user-select: none;
 }
 .itemWrapper{
     display: flex;

pages/404.tsx

@@ -0,0 +1,38 @@
+import type { NextPage } from 'next'
+
+import { Header } from '../Components/header'
+import styles from '../styles/Home.module.css'
+import 'antd/dist/antd.css';
+import { useState } from 'react'
+import { host } from './api/consts'
+import { PulseLoader } from 'react-spinners'
+import axios from 'axios'
+import { useRouter } from 'next/router'
+import Head from 'next/head';
+
+
+
+const History: NextPage = () => {
+
+
+let router = useRouter()
+  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.upload}>
+            <div style={{fontSize:"44px"}}>404 страница не найдена</div>
+            <div className={styles.btn} onClick={()=>router.push("/")}>Главная</div>
+
+        </div>
+      </main>
+    </div>
+  )
+}
+
+export default History

pages/api/consts.ts

@@ -1 +1 @@
-export const host = "http://192.168.9.152:8000"
+export const host = "http://192.168.9.201:8000"

pages/files.tsx

@@ -11,27 +11,33 @@ import { get } from './api/fetch'
 import { host } from './api/consts'
 import { PulseLoader } from 'react-spinners'
 import axios from 'axios'
+import { Checkbox } from 'antd'
 
 
 
 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].uuid)
+  const [file, setFile] = useState(files[0])
   const [data,setData]  = useState("")
   let i = 1;
   let cards = new Array<JSX.Element>()
 
   const getData = () =>{
     if (data == ""){
-      axios.get(host+"/api/site/docx/" + file).then(res => {
+      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).then(res => {
+    axios.get(host+"/api/site/docx/" + newFile.uuid).then(res => {
       setData(res.data)
     })
       setFile(newFile)
@@ -40,6 +46,8 @@ const Home: NextPage = () => {
   setTimeout(getData, 2000);
   if (data != ""){
     for(var name in data as any) { 
+      if (correct == false && (data as any)[name][0]!=undefined){continue}
+      if (err == false && (data as any)[name][0]==undefined){continue}
       cards.push(
       <ErrorViewer
         num={i}
@@ -49,7 +57,7 @@ const Home: NextPage = () => {
       ></ErrorViewer>
       )
       i++
-  } 
+    }
   }
 
   let select = new Array<SelectItemIE>()
@@ -57,7 +65,7 @@ const Home: NextPage = () => {
       select.push(
         {
           name: value.file.slice(48, value.uuid.lenght),
-          value: value.uuid
+          value: value
         } as SelectItemIE
       )
   });
@@ -79,6 +87,11 @@ const Home: NextPage = () => {
             ></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>
       </main>

styles/Home.module.css

@@ -69,4 +69,12 @@
     text-align: center;
     color: #13377D;
     cursor: pointer;
+}
+
+.tools{
+    display: flex;
+    flex-direction: row;
+    gap:25px;
+    justify-content: left;
+    
 }