Skip to content

Commit

Permalink
Merge pull request #413 from decert-me/chore-398
Browse files Browse the repository at this point in the history 
feat: annotation
  • Loading branch information
@0xdwong
0xdwong authored May 9, 2024
2 parents 7c55dda + 271134e commit 9cde536
Show file tree
Hide file tree
Showing 10 changed files with 198 additions and 19 deletions.
Binary file added src/assets/images/icon/icon-annotation.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/icon/icon-answer.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/assets/locales/en-US/rate.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"h1": "Grading List",
"quest": "Quiz",
"tips": "批注",
"challenger": "Challenger",
"ans": "Answer",
"status": "Status",
Expand Down
1 change: 1 addition & 0 deletions src/assets/locales/zh-CN/rate.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"h1": "评分列表",
"quest": "题目",
"tips": "批注",
"challenger": "挑战者",
"ans": "答案",
"status": "状态",
Expand Down
70 changes: 70 additions & 0 deletions src/assets/styles/component-style/challenge.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,56 @@
line-height: 19px;
}

.annotationModal, .answerModal{
.title{
margin: 24px 21px 27px;
font-weight: 500;
font-size: 20px;
}
.text-center{
text-align: center;
}
.mh480{
max-height: 480px;
}
.box{
width: 100%;
min-height: 100px;
padding: 11px 17px;
box-sizing: border-box;
border-radius: 10px;
background-color: #F2F4F6;
overflow-y: auto;
.box{
padding: 0;
}
&:hover{
background-color: #F2F4F6;
}
.last-rate{
padding: 5px 10px;
margin-bottom: 14px;
border-radius: 3px;
float: left;
display: flex;
align-items: center;
gap: 4px;
background-color: rgba($color: #915938, $alpha: 0.1);
color: #915938;
}
}
.btns{
margin-top: 32px;
display: flex;
justify-content: center;
button{
width: 266px;
height: 50px;
border: none;
font-weight: 600;
}
}
}
.CustomInput{
padding: 0 50px;
color: #343434;
Expand All @@ -15,12 +65,32 @@
// border: 1px solid #DCDCDC !important;
border-bottom: 1px solid #DCDCDC !important;
}
.mh{
max-height: 250px;
}
.bd{
border: 1px solid #DCDCDC !important;
border-radius: 10px;
}
.CustomInput-content{
margin-top: 100px;
.check-item{
margin-left: 10px;
margin-bottom: 20px;
display: flex;
gap: 30px;
color: #666666;
div{
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
img{
width: 16px;
height: 16px;
}
}
}
.correct-content{
margin-top: 15px;
margin-left: 10px;
Expand Down
82 changes: 79 additions & 3 deletions src/components/CustomChallenge/CustomOpen.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,27 @@
import { useTranslation } from "react-i18next";
import { Button, Input, Space, Upload, message } from "antd";
import { Button, Input, Modal, Rate, Space, Upload, message } from "antd";
import { UploadOutlined } from '@ant-design/icons';
import CustomViewer from "../CustomViewer";
import { uploadFile } from "@/request/api/public";
import { useContext, useEffect, useState } from "react";
import { useAddress } from "@/hooks/useAddress";
import MyContext from "@/provider/context";
import CustomIcon from "../CustomIcon";

const { TextArea } = Input;

export default function CustomOpen(props) {

const { label, value, defaultValue, defaultFileList } = props;
const { label, value, defaultValue, defaultFileList, question, detail } = props;
const { connectWallet } = useContext(MyContext);
const { t } = useTranslation(["explore"]);
const { isConnected } = useAddress();
const [annotationModal, setAnnottaionModal] = useState(false);
const [answerModal, setAnswerModal] = useState(false);
let [annex, setAnnex] = useState([]);
let [inner, setInner] = useState("");


const upload = {
name: 'file',
headers: {
Expand Down Expand Up @@ -88,6 +92,14 @@ export default function CustomOpen(props) {
setInner(inner);
onChangeValue();
}

function openAnnotation() {
setAnnottaionModal(true);
}

function openAnswer() {
setAnswerModal(true);
}

function init() {
// const fileList = [];
Expand All @@ -107,17 +119,81 @@ export default function CustomOpen(props) {
}

useEffect(() => {
console.log(detail);
defaultValue && init();
},[])

return (
<div className="CustomInput">
<Modal
width={987}
open={annotationModal}
onCancel={() => setAnnottaionModal(false)}
footer={<></>}
className="annotationModal"
>
<p className="title">批注</p>
<TextArea
className="box"
readOnly
bordered={false}
value={defaultValue?.annotation}
maxLength={2000}
autoSize={{ minRows: 7 }}
/>
<div className="btns">
<Button id="hover-btn-full" onClick={() => setAnnottaionModal(false)}>我知道了</Button>
</div>
</Modal>
<Modal
open={answerModal}
onCancel={() => setAnswerModal(false)}
footer={<></>}
className="answerModal"
width={1560}
>
<p className="title text-center">上次答案</p>
<div className="box mh480">
<div className="last-rate">
<p>上次得分：</p>
<Rate
allowHalf
disabled
value={defaultValue?.value ? (defaultValue.score / question.score) * 5 : 0}
style={{ color: "#DD8C53" }}
character={
<CustomIcon
type="icon-star"
className="icon"
/>
}
/>
</div>
<TextArea
className="box"
readOnly
bordered={false}
value={defaultValue?.value}
style={{borderRadius: 0}}
maxLength={2000}
autoSize={{ minRows: 7 }}
/>
</div>
<div className="btns">
<Button id="hover-btn-full" onClick={() => setAnswerModal(false)}>我知道了</Button>
</div>
</Modal>
<div className="inner-title">
<CustomViewer label={label} />
</div>
<div className="CustomInput-content">

<div className="check-item">
<div onClick={() => openAnnotation()}><img src={require("@/assets/images/icon/icon-annotation.png")} />查看批注</div>
<div onClick={() => openAnswer()}><img src={require("@/assets/images/icon/icon-answer.png")} />查看上次答案</div>
</div>
<TextArea
className={`custom-input bd`}
className={`custom-input bd mh`}
bordered={false}
onChange={e => changeInner(e.target.value)}
defaultValue={defaultValue?.value}
Expand Down
8 changes: 4 additions & 4 deletions src/provider/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,10 @@ export default function MyProvider(props) {
// 校验签名 && particle 登录添加 userInfo JSON
const res_token = await authLoginSign({ address, message, signature: sign_hash, particle_userinfo: particleInfo });
localStorage.setItem(`decert.token`, res_token.data.token);
setTimeout(() => {
// 上传可领取挑战答案
submitClaimable();
}, 100);
// setTimeout(() => {
// // 上传可领取挑战答案
// submitClaimable();
// }, 100);
} catch (error) {
if (walletType === "evm") {
await disconnectAsync();
Expand Down
4 changes: 2 additions & 2 deletions src/views/Challenge/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -456,9 +456,9 @@ export default function Challenge(params) {
<CustomOpen
key={i}
label={question.title}
options={question.options}
question={question}
value={changeAnswer}
defaultValue={answers[i]}
defaultValue={detail.answer ? detail.answer[i] : null}
defaultFileList={fileList}
isPreview={isPreview}
// answer={realAnswer[i]}
Expand Down
1 change: 1 addition & 0 deletions src/views/Rating/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,7 @@
.box{
width: 100%;
min-height: 100px;
max-height: 180px;
padding: 11px 17px;
box-sizing: border-box;
border-radius: 10px;
Expand Down
50 changes: 40 additions & 10 deletions src/views/Rating/modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@ function RatingModal({ data, isMobile, onFinish }, ref) {
let [selectOpenQs, setSelectOpenQs] = useState({});
let [page, setPage] = useState(0);
let [pageNum, setPageNum] = useState(1);
let [rateCache, setRateCache] = useState({
rate: 0,
annotation: ""
});

const steps = [
{
Expand Down Expand Up @@ -104,7 +108,6 @@ function RatingModal({ data, isMobile, onFinish }, ref) {
} catch (error) {
console.log("===>", error);
}

// 判断是否是第一次进入该页面 => 提示如何评分动画
const isFrist = localStorage.getItem("decert.rate");
if (!isFrist) {
Expand All @@ -129,7 +132,19 @@ function RatingModal({ data, isMobile, onFinish }, ref) {
setSelectOpenQs({ ...selectOpenQs });
}

function getScore(percent) {
function setAnnotation(text) {
// 批注
list[page].annotation = text;
setList([...list]);
selectOpenQs.annotation = text;
setSelectOpenQs({ ...selectOpenQs });

rateCache.annotation = text;
setRateCache({...rateCache});
setCache()
}

function setPercent(percent) {
// 记录rate
list[page].rate = percent;
setList([...list]);
Expand All @@ -140,13 +155,21 @@ function RatingModal({ data, isMobile, onFinish }, ref) {
const p = (percent * 20) / 100;
const info = list[page];
const score = GetPercentScore(info.score, p);
rateCache.score = score;
setRateCache({...rateCache});
setCache()
}

function setCache() {
const info = list[page];
const obj = {
id: info.ID,
answer: {
type: "open_quest",
annex: selectOpenQs.answer.annex,
value: selectOpenQs.answer.value,
score: score,
score: rateCache.score,
annotation: rateCache.annotation,
open_quest_review_time: new Date()
.toLocaleString()
.replace(/\//g, "-"),
Expand Down Expand Up @@ -219,13 +242,21 @@ function RatingModal({ data, isMobile, onFinish }, ref) {
className="item-content box"
value={selectOpenQs?.answer?.value}
maxLength={2000}
autoSize={{
minRows: 7,
}}
placeholder={t("inner.text")}
autoSize={{ minRows: 7 }}
/>
</div>

<div className="item">
<p className="item-title">{t("tips")}:</p>
<TextArea
className="item-content box"
style={{backgroundColor: "transparent"}}
value={selectOpenQs?.annotation || selectOpenQs.answer?.annotation}
onChange={(e) => setAnnotation(e.target.value)}
maxLength={2000}
autoSize={{ minRows: 7 }}
/>
</div>
<div className="item">
<p className="item-title">{t("annex")}:</p>
<div className="item-content">
Expand Down Expand Up @@ -254,8 +285,7 @@ function RatingModal({ data, isMobile, onFinish }, ref) {
: selectOpenQs?.rate
? selectOpenQs.rate
: (selectOpenQs.answer?.score /
selectOpenQs?.score) *
5
selectOpenQs?.score) * 5
}
style={{ color: "#DD8C53" }}
character={
Expand All @@ -264,7 +294,7 @@ function RatingModal({ data, isMobile, onFinish }, ref) {
className="icon"
/>
}
onChange={(percent) => getScore(percent)}
onChange={(percent) => setPercent(percent)}
/>
</div>
</div>
Expand Down

0 comments on commit 9cde536

Please sign in to comment.