joseph
/
Log_service
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update edit value UI

This commit is contained in:
joseph le 2023-10-10 14:09:43 +07:00
parent b2aaa60f6e
commit 4d7ec55456
4 changed files with 157 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/Controllers/Http/ValuesController.ts
View File

@ -24,7 +24,16 @@ export default class ValuesController {
public async show({}: HttpContextContract) {}
public async edit({}: HttpContextContract) {}
public async edit({ request, response }: HttpContextContract) {
try {
const value = await KeyValue.findOrFail(request.all().id);
value.value = request.all().value;
await value.save();
response.status(200).send("EDIT VALUE SUCCESS!");
} catch (error) {
response.status(500).send("EDIT VALUE FAIL!");
}
}
public async update({}: HttpContextContract) {}

5
manage-view/src/api/apiLog.js
View File

@ -1,7 +1,8 @@
const API = process.env.REACT_APP_API_SERVER_ADDRESS;
// const API = "http://localhost:3333/api";
// const API = process.env.REACT_APP_API_SERVER_ADDRESS;
const API = "http://localhost:3333/api";
export const getKeyValues = API + "/getKeyValue";
export const deleteValue = API + "/deleteValue";
export const addKeyValue = API + "/addValue";
export const editValue = API + "/editValue";
export const getLog = API + "/log/showLog";
export const getListLog = API + "/getAllLogDetect";

179
manage-view/src/pages/ManageValues.jsx
View File

@ -1,13 +1,13 @@
import axios from "axios";
import React, { useEffect, useState } from "react";
import { addKeyValue, deleteValue, getKeyValues } from "../api/apiLog";
import { addKeyValue, deleteValue, editValue, getKeyValues } from "../api/apiLog";
import { Link } from "react-router-dom";
const ManageValues = () => {
const [keyValue, setKeyValue] = useState([]);
const [key, setKey] = useState([]);
const [addValue, setAddValue] = useState({key: "CATCH_FAULTY", value:""});
const [addValue, setAddValue] = useState({ key: "CATCH_FAULTY", value: "" });
const [inputSelect, setInpuSelect] = useState(0)
const [inputValue, setInputValue] = useState("")
const getValues = async () => {
try {
const res = await axios.post(getKeyValues);
@ -17,22 +17,22 @@ const ManageValues = () => {
console.log(error);
}
};
useEffect(() => {
getValues();
}, []);
console.log(inputValue)
return (
<div
style={{
display: "flex",
alignItems:"center",
flexFlow: "column"
alignItems: "center",
flexFlow: "column",
}}
>
<div style={{ height: "80vh", overflow: "auto" }}>
<table>
<thead style={{width:"100%"}}>
<thead style={{ width: "100%" }}>
<tr>
<th
style={{ position: "sticky", top: 0, backgroundColor: "white" }}
@ -40,7 +40,12 @@ const ManageValues = () => {
Key
</th>
<th
style={{ position: "sticky", top: 0, backgroundColor: "white", width:"400px" }}
style={{
position: "sticky",
top: 0,
backgroundColor: "white",
width: "400px",
}}
>
Value
</th>
@ -53,30 +58,99 @@ const ManageValues = () => {
</thead>
<tbody>
{keyValue?.map((value) => (
<tr style={{backgroundColor:value.key==="MODEL_SPECIAL"?"rgb(219 219 255 / 47%)":value.key==="CATCH_FAULTY"?"rgb(166 255 165 / 43%)":"rgb(253 189 152 / 41%)"}}>
<tr
style={{
backgroundColor:
value.key === "MODEL_SPECIAL"
? "rgb(219 219 255 / 47%)"
: value.key === "CATCH_FAULTY"
? "rgb(166 255 165 / 43%)"
: value.key === "MEMORY_DEFAULT"
? "rgb(253 244 52 / 41%)"
: "rgb(253 189 152 / 41%)",
}}
>
<td>{value.key}</td>
<td>
<input value={value.value} disabled style={{width:"100%"}}></input>
<input
value={inputSelect===value.id_key?inputValue:value.value}
disabled={inputSelect===value.id_key?false:true}
style={{ width: "100%" }}
onChange={(e)=>{
setInputValue(e.target.value)
}}
></input>
</td>
<td>
<button style={{cursor:"pointer", backgroundColor:"red", color:"white"}} onClick={async()=>{
const res = await axios.post(deleteValue, {id: value.id_key})
if(res.status !== 200){
alert(res.data)
}else{
<button
style={{
cursor: "pointer",
backgroundColor: "red",
color: "white",
}}
onClick={async () => {
const res = await axios.post(deleteValue, {
id: value.id_key,
});
if (res.status !== 200) {
alert(res.data);
} else {
getValues();
}
}}>Delete</button>
}
}}
>
Delete
</button>
<button
style={{
cursor: "pointer",
backgroundColor: "yellow",
color: "black",
display:inputSelect===value.id_key?"none":"inline"
}}
onClick={async () => {
setInpuSelect(value.id_key)
setInputValue(value.value)
}}
>
Edit
</button>
<button
style={{
cursor: "pointer",
backgroundColor: "green",
color: "white",
display:inputSelect===value.id_key?"inline":"none"
}}
onClick={async () => {
setInpuSelect(0)
const res = await axios.post(editValue, {
id: value.id_key,
value: inputValue
});
if (res.status !== 200) {
alert(res.data);
} else {
getValues();
}
}}
>
Done
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
<div style={{ width: "50%", display:"flex", margin:10 }}>
<select style={{ width: "35%" }} onChange={(e)=>{
setAddValue({...addValue, key:e.target.value})
}}>
<div style={{ width: "50%", display: "flex", margin: 10 }}>
<select
style={{ width: "35%" }}
onChange={(e) => {
setAddValue({ ...addValue, key: e.target.value });
}}
>
{key
.filter((value, index, self) => {
return self.indexOf(value) === index;
@ -85,27 +159,52 @@ const ManageValues = () => {
<option value={u}>{u}</option>
))}
</select>
<input placeholder="value" style={{margin:"0 5px", width:"50%"}} onChange={(e)=>{
setAddValue({...addValue, value: e.target.value})
}}></input>
<button style={{cursor:"pointer", backgroundColor:"green", color:"white"}} onClick={async()=>{
if(addValue.key !=="" && addValue.value!==""){
const res = await axios.post(addKeyValue,{key: addValue.key, value: addValue.value})
if(res.status !== 200){
alert(res.data)
}else{
getValues();
}
}else{
alert("Value is empty!")
<input
placeholder="value"
style={{ margin: "0 5px", width: "50%" }}
onChange={(e) => {
setAddValue({ ...addValue, value: e.target.value });
}}
></input>
<button
style={{
cursor: "pointer",
backgroundColor: "green",
color: "white",
}}
onClick={async () => {
if (addValue.key !== "" && addValue.value !== "") {
const res = await axios.post(addKeyValue, {
key: addValue.key,
value: addValue.value,
});
if (res.status !== 200) {
alert(res.data);
} else {
getValues();
}
} else {
alert("Value is empty!");
}
}}>Add</button>
}}
>
Add
</button>
</div>
<div>
<Link to={"/logs"}> <button style={{color:"white", backgroundColor:"blue", cursor:"pointer"}}>List of detected files</button></Link>
<Link to={"/logs"}>
{" "}
<button
style={{
color: "white",
backgroundColor: "blue",
cursor: "pointer",
}}
>
List of detected files
</button>
</Link>
</div>
</div>
);
};

6
start/routes.ts
View File

@ -228,6 +228,10 @@ Route.post("/api/deleteValue", "ValuesController.destroy").middleware(
"writeLog"
);
Route.post("/api/editValue", "ValuesController.edit").middleware(
"writeLog"
);
Route.post("/api/addValue", "ValuesController.create").middleware("writeLog");
Route.post("/api/backupProduct", async ({ request, response }) => {
@ -277,7 +281,7 @@ Route.post("/api/backupProduct", async ({ request, response }) => {
}
}).middleware("writeLog");
Route.post("/api/sendMailInforDevice", async ({ request, response }) => {
Route.post("/api/sendMailInforDevice", async () => {
try {
sendDeviceInfora()
} catch (error) {