删除冗余代码
This commit is contained in:
宇阳
File diff suppressed because one or more lines are too long
@@ -1,228 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import dataJSON from '../../public/data.json';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
|
|
||||||
const fields=Object.keys(Object.values(dataJSON)[0]).filter((item:any)=>!(item.startsWith("delta_")));
|
|
||||||
|
|
||||||
const [formState, setFormState] = useState(
|
|
||||||
defaultValue || {
|
|
||||||
id: "",
|
|
||||||
para: "price",
|
|
||||||
criterion: "0",
|
|
||||||
value: "",
|
|
||||||
type: "0",
|
|
||||||
|
|
||||||
}
|
|
||||||
);
|
|
||||||
const [errors, setErrors] = useState<string[]>([]);
|
|
||||||
|
|
||||||
const validateForm = () => {
|
|
||||||
if (formState.id && formState.value) {
|
|
||||||
setErrors([]);
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
let errorFields = [];
|
|
||||||
for (const [key, value] of Object.entries(formState)) {
|
|
||||||
if (!value) {
|
|
||||||
errorFields.push(key=="id"?"Bond ID":key);
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
if (key=='id'){
|
|
||||||
if (!(Object.keys(dataJSON).includes(value)||value=="ALL")){
|
|
||||||
errorFields.push("INVALID_ID_"+value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setErrors(errorFields);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleChange = (e) => {
|
|
||||||
if (e.target.name=="para"&&e.target.value=='rating'&&formState.criterion>1&&formState.criterion<4) {setFormState({ ...formState, ["criterion"]: 0 });}
|
|
||||||
|
|
||||||
setFormState({ ...formState, [e.target.name]: e.target.value });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if (!validateForm()) return;
|
|
||||||
|
|
||||||
onSubmit(formState);
|
|
||||||
|
|
||||||
closeModal();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="modal-container fixed z-50 flex top-25 bottom-5 "
|
|
||||||
onClick={(e) => {
|
|
||||||
if (e.target.className === "modal-container") closeModal();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
|
|
||||||
<div className="modal rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark overflow-auto">
|
|
||||||
<div className="border-b border-stroke py-4 px-7 dark:border-strokedark">
|
|
||||||
<div className="w-full flex justify-end">
|
|
||||||
<strong className="text-xl align-center cursor-pointer "
|
|
||||||
onClick={closeModal}
|
|
||||||
>×</strong>
|
|
||||||
</div>
|
|
||||||
<form>
|
|
||||||
<div className="grid grid-cols-3 gap-5 justify-normal">
|
|
||||||
<div className="form-group w-full col-span-3">
|
|
||||||
<label className="mb-3 block text-sm font-medium text-black dark:text-white"
|
|
||||||
htmlFor="id">Bond ID (Input "ALL" to track all bonds with paramaters below)</label>
|
|
||||||
<input className="w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
|
|
||||||
name="id" onChange={handleChange} value={formState.id} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="form-group ">
|
|
||||||
<label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="para">Parameter</label>
|
|
||||||
<div className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
|
|
||||||
<div className="flex flex-wrap items-center"></div>
|
|
||||||
<span className="m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray py-1.5 px-2.5 text-sm font-medium dark:border-strokedark dark:bg-white/30">
|
|
||||||
{formState.para}
|
|
||||||
|
|
||||||
|
|
||||||
</span>
|
|
||||||
<select
|
|
||||||
className="absolute top-0 left-0 z-20 h-full w-full bg-transparent opacity-0"
|
|
||||||
|
|
||||||
name="para"
|
|
||||||
onChange={handleChange}
|
|
||||||
value={formState.para}
|
|
||||||
>
|
|
||||||
{fields.map((item:any,idx:number)=>(<option key={idx} value={item}>{item}</option>))}
|
|
||||||
|
|
||||||
</select>
|
|
||||||
<span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
|
|
||||||
<svg
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<g opacity="0.8">
|
|
||||||
<path
|
|
||||||
fillRule="evenodd"
|
|
||||||
clipRule="evenodd"
|
|
||||||
d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
|
|
||||||
fill="#637381"
|
|
||||||
></path>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="form-group">
|
|
||||||
<label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="criterion">Criterion</label>
|
|
||||||
<div className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
|
|
||||||
<div className="flex flex-wrap items-center"></div>
|
|
||||||
<span className="m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray py-1.5 px-2.5 text-sm font-medium dark:border-strokedark dark:bg-white/30">
|
|
||||||
{formState.criterion==0?"goes down by":formState.criterion==1?"goes up by":formState.criterion==2?"is smaller than":formState.criterion==3?"is greater than":"is equal to"}
|
|
||||||
</span>
|
|
||||||
<select
|
|
||||||
className="absolute top-0 left-0 z-20 h-full w-full bg-transparent opacity-0"
|
|
||||||
name="criterion"
|
|
||||||
onChange={handleChange}
|
|
||||||
value={formState.criterion}
|
|
||||||
>
|
|
||||||
<option value="0">goes down by</option>
|
|
||||||
<option value="1">goes up by</option>
|
|
||||||
{!(formState.para=='rating')&&<option value="2">is smaller than</option>}
|
|
||||||
{!(formState.para=='rating')&&<option value="3">is greater than</option>}
|
|
||||||
|
|
||||||
<option value="4">is equal to</option>
|
|
||||||
</select>
|
|
||||||
<span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
|
|
||||||
<svg
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<g opacity="0.8">
|
|
||||||
<path
|
|
||||||
fillRule="evenodd"
|
|
||||||
clipRule="evenodd"
|
|
||||||
d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
|
|
||||||
fill="#637381"
|
|
||||||
></path>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="form-group w-full">
|
|
||||||
<label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="value">Value to give Alert</label>
|
|
||||||
<input className="w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
|
|
||||||
name="value" onChange={handleChange} value={formState.value} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="form-group">
|
|
||||||
<label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="type">Alert Type</label>
|
|
||||||
<div className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
|
|
||||||
<div className="flex flex-wrap items-center"></div>
|
|
||||||
<span className={`${formState.type==0?"bg-[#04b20c]":formState.type==1?"bg-[#eab90f]":"bg-[#e13f32]"} m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke py-1.5 px-2.5 text-white font-medium dark:border-strokedark`}>
|
|
||||||
{formState.type==0?"Info":formState.type==1?"Warning":"Alert"}
|
|
||||||
|
|
||||||
|
|
||||||
</span>
|
|
||||||
<select
|
|
||||||
className="absolute top-0 left-0 z-20 h-full w-full bg-transparent opacity-0"
|
|
||||||
name="type"
|
|
||||||
onChange={handleChange}
|
|
||||||
value={formState.type}
|
|
||||||
>
|
|
||||||
<option value="0">Info</option>
|
|
||||||
<option value="1">Warning</option>
|
|
||||||
<option value="2">Alert</option>
|
|
||||||
</select>
|
|
||||||
<span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
|
|
||||||
<svg
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<g opacity="0.8">
|
|
||||||
<path
|
|
||||||
fillRule="evenodd"
|
|
||||||
clipRule="evenodd"
|
|
||||||
d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
|
|
||||||
fill="#637381"
|
|
||||||
></path>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{errors.filter((item:string)=>(item.startsWith("INVALID_ID"))).length>0 && <><br/><div className="error">{errors.filter((item:string)=>(item.startsWith("INVALID_ID")))[0].replace("INVALID_ID_","")} is not a valid bond</div></>}
|
|
||||||
{errors.filter((item:string)=>!(item.startsWith("INVALID_ID"))).length>0 && (<div className="error">Please input {errors.filter((item:string)=>!(item.startsWith("INVALID_ID"))).join(", ")}</div>)}
|
|
||||||
|
|
||||||
|
|
||||||
<br></br>
|
|
||||||
<button className="btn flex justify-center rounded bg-primary py-2 px-6 font-medium text-gray hover:shadow-1"
|
|
||||||
type="submit" onClick={handleSubmit}>
|
|
||||||
Submit
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,68 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { BsFillTrashFill, BsFillPencilFill } from "react-icons/bs";
|
|
||||||
import dataJSON from '../../public/data.json';
|
|
||||||
|
|
||||||
export const Table = ({ rows, deleteRow, editRow }) => {
|
|
||||||
const fields=Object.keys(Object.values(dataJSON)[0]).filter((item:any)=>!(item.startsWith("delta_")));
|
|
||||||
|
|
||||||
return (
|
|
||||||
|
|
||||||
<div className="max-w-full overflow-x-auto table-wrapper">
|
|
||||||
<table className="table">
|
|
||||||
<thead>
|
|
||||||
<tr className="bg-gray-2 text-left dark:bg-meta-4">
|
|
||||||
<th className="min-w-[220px] py-4 px-4 font-medium text-black dark:text-white xl:pl-11">Bond</th>
|
|
||||||
<th className="min-w-[150px] py-4 px-4 font-medium text-black dark:text-white">Paramter</th>
|
|
||||||
<th className="py-4 px-4 font-medium text-black dark:text-white">Criterion</th>
|
|
||||||
<th className="py-4 px-4 font-medium text-black dark:text-white">Value to give alert</th>
|
|
||||||
<th className="py-4 px-4 font-medium text-black dark:text-white">Alert type</th>
|
|
||||||
<th className="py-4 px-4 font-medium text-black dark:text-white">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{rows.map((row:any, idx:number) => {
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<tr key={idx} className="content-center">
|
|
||||||
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">{row.id}</td>
|
|
||||||
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
|
|
||||||
<span className={`label label-${row.para}`}>
|
|
||||||
{row.para}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
|
|
||||||
<span>
|
|
||||||
{row.criterion==0?"goes down by":row.criterion==1?"goes up by":row.criterion==2?"is smaller than":row.criterion==3?"is greater than":"is equal to"}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">{row.value}</td>
|
|
||||||
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
|
|
||||||
<span>
|
|
||||||
{row.type==0?'Info':row.type==1?"Warning":"Alert"}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
|
|
||||||
<span className="actions flex grid-cols-2 gap-4">
|
|
||||||
<BsFillTrashFill
|
|
||||||
className="delete-btn cursor-pointer"
|
|
||||||
onClick={() => deleteRow(idx)} />
|
|
||||||
|
|
||||||
<BsFillPencilFill
|
|
||||||
className="edit-btn cursor-pointer"
|
|
||||||
onClick={() => editRow(idx)} />
|
|
||||||
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,110 +0,0 @@
|
|||||||
import toast from 'react-hot-toast';
|
|
||||||
import dataJSON from '../../public/data.json';
|
|
||||||
|
|
||||||
|
|
||||||
const createToast=(title: string, msg: string, type: number)=>{toast.custom((t) => (
|
|
||||||
|
|
||||||
<div
|
|
||||||
className={`${
|
|
||||||
t.visible ? 'animate-enter' : 'animate-leave'
|
|
||||||
}
|
|
||||||
max-w-md w-full ${type=='0'?"bg-[#04b20c]":type=='1'?"bg-[#eab90f]":"bg-[#e13f32]"} shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
|
|
||||||
>
|
|
||||||
<div className="flex-1 w-0 p-4 ">
|
|
||||||
<div className="flex items-start">
|
|
||||||
|
|
||||||
<div className="ml-3 flex-1">
|
|
||||||
<p className="text-sm font-medium text-white">
|
|
||||||
{title}
|
|
||||||
</p>
|
|
||||||
<p className="mt-1 text-sm text-white">
|
|
||||||
{msg}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex">
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => toast.dismiss(t.id)}
|
|
||||||
type="button"
|
|
||||||
className="mr-2 box-content rounded-none border-none opacity-100 hover:no-underline hover:opacity-50 focus:opacity-50 focus:shadow-none focus:outline-none text-white"
|
|
||||||
data-te-toast-dismiss
|
|
||||||
aria-label="Close">
|
|
||||||
<span
|
|
||||||
className="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke="currentColor"
|
|
||||||
className="h-6 w-6">
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))};
|
|
||||||
// let dataJSON: any;
|
|
||||||
// let headers = new Headers();
|
|
||||||
// headers.append('Access-Control-Allow-Origin', 'http://127.0.0.1:8000');
|
|
||||||
// headers.append("Access-Control-Allow-Methods", 'POST');
|
|
||||||
// headers.append("Access-Control-Allow-Headers", 'Content-Type, Authorization');
|
|
||||||
// fetch("http://127.0.0.1:8000/data",{method:'POST',headers:headers})
|
|
||||||
// .then(response => {
|
|
||||||
// return response
|
|
||||||
// })
|
|
||||||
// .then(data => {
|
|
||||||
// console.log(data);
|
|
||||||
// dataJSON=data;
|
|
||||||
// })
|
|
||||||
const fireToast = () => {
|
|
||||||
const alertSettings=localStorage.getItem("alertSettings");
|
|
||||||
if (alertSettings){
|
|
||||||
for (const alertSetting of JSON.parse(alertSettings)) {
|
|
||||||
const value=isNaN(parseFloat(alertSetting.value))?alertSetting.value:parseFloat(alertSetting.value);
|
|
||||||
const para=alertSetting.criterion<2?"delta_"+alertSetting.para:alertSetting.para;
|
|
||||||
if (alertSetting.id=="ALL"){
|
|
||||||
Object.keys(dataJSON).map((id:string)=>
|
|
||||||
{
|
|
||||||
const condition=alertSetting.criterion=='0'?value<=-1*dataJSON[id][para]:
|
|
||||||
alertSetting.criterion=='1'||alertSetting.criterion=='3'?value>=dataJSON[id][para]:
|
|
||||||
alertSetting.criterion=='2'?value<=dataJSON[id][para]:
|
|
||||||
value==dataJSON[id][para];
|
|
||||||
const realValue=alertSetting.criterion=='0'?dataJSON[id][para]*-1:dataJSON[id][para];
|
|
||||||
if (condition){
|
|
||||||
const msg=`${alertSetting.para} of ${id} ${alertSetting.criterion==0?"goes down by":alertSetting.criterion==1?"goes up by":alertSetting.criterion==2?"is smaller than":alertSetting.criterion==3?"is greater than":"is equal to"} ${realValue}`;
|
|
||||||
createToast(id,msg,alertSetting.type)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
const id=alertSetting.id;
|
|
||||||
|
|
||||||
const condition=alertSetting.criterion=='0'?value>=-1*dataJSON[id][para]:
|
|
||||||
alertSetting.criterion=='1'||alertSetting.criterion=='3'?value>=dataJSON[id][para]:
|
|
||||||
alertSetting.criterion=='2'?value<=dataJSON[id][para]:
|
|
||||||
value==dataJSON[id][para];
|
|
||||||
const realValue=alertSetting.criterion=='0'?dataJSON[id][para]*-1:dataJSON[id][para];
|
|
||||||
|
|
||||||
if (condition){
|
|
||||||
const msg=`${alertSetting.para} of ${id} ${alertSetting.criterion==0?"goes down by":alertSetting.criterion==1?"goes up by":alertSetting.criterion==2?"is smaller than":alertSetting.criterion==3?"is greater than":"is equal to"} ${realValue}`;
|
|
||||||
createToast(id,msg,alertSetting.type)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default fireToast;
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user