Merge pull request #144 from OktopUSP/device_parameter_edition
Device parameter edition
This commit is contained in:
Leandro Antônio Farias Machado
GitHub
commit
638c6f54bd
|
|
@ -8,18 +8,60 @@ import {
|
|||
ListItem,
|
||||
ListItemText,
|
||||
Box,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogTitle,
|
||||
TextField,
|
||||
Button,
|
||||
Backdrop,
|
||||
} from '@mui/material';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import PlusCircleIcon from '@heroicons/react/24/outline/PlusCircleIcon';
|
||||
import Pencil from "@heroicons/react/24/outline/PencilIcon"
|
||||
import ArrowUturnLeftIcon from '@heroicons/react/24/outline/ArrowUturnLeftIcon'
|
||||
import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
|
||||
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
function ShowParamsWithValues({x, deviceParametersValue}) {
|
||||
console.log("estoy aqui")
|
||||
const AccessType = {
|
||||
ReadOnly: 0,
|
||||
ReadWrite: 1,
|
||||
WriteOnly: 2,
|
||||
}
|
||||
|
||||
const ParamValueType = {
|
||||
Unknown: 0,
|
||||
Base64: 1,
|
||||
Boolean: 2,
|
||||
DateTime: 3,
|
||||
Decimal: 4,
|
||||
HexBinary: 5,
|
||||
Int: 6,
|
||||
Long: 7,
|
||||
String: 8,
|
||||
UnisgnedInt: 9,
|
||||
UnsignedLong: 10,
|
||||
}
|
||||
|
||||
function ShowParamsWithValues({x, deviceParametersValue, setOpen, setParameter, setParameterValue}) {
|
||||
console.log("HEY jow:", deviceParametersValue)
|
||||
let paths = x.supported_obj_path.split(".")
|
||||
console.log(paths)
|
||||
const showDialog = (param, paramvalue) => {
|
||||
setParameter(param);
|
||||
if (paramvalue == "\"\"") {
|
||||
setParameterValue("")
|
||||
}else{
|
||||
setParameterValue(paramvalue);
|
||||
}
|
||||
setOpen(true);
|
||||
}
|
||||
|
||||
if(paths[paths.length -2] == "{i}"){
|
||||
return Object.keys(deviceParametersValue).map((paramKey, h)=>{
|
||||
console.log(deviceParametersValue)
|
||||
console.log(paramKey)
|
||||
return (
|
||||
<List dense={true} key={h}>
|
||||
<ListItem
|
||||
|
|
@ -34,8 +76,8 @@ function ShowParamsWithValues({x, deviceParametersValue}) {
|
|||
sx={{fontWeight:'bold'}}
|
||||
/>
|
||||
</ListItem>
|
||||
{deviceParametersValue[paramKey].map((param, i) => {
|
||||
console.log("opa")
|
||||
{deviceParametersValue[paramKey].length > 0 ?
|
||||
deviceParametersValue[paramKey].map((param, i) => {
|
||||
return (
|
||||
<List
|
||||
component="div"
|
||||
|
|
@ -52,7 +94,20 @@ function ShowParamsWithValues({x, deviceParametersValue}) {
|
|||
}}
|
||||
secondaryAction={
|
||||
<div>
|
||||
{Object.values(param)[0]}
|
||||
{Object.values(param)[0].value}
|
||||
{Object.values(param)[0].access > AccessType.ReadOnly && <IconButton>
|
||||
<SvgIcon sx={{width:'20px'}}
|
||||
onClick={()=>{
|
||||
showDialog(
|
||||
paramKey+Object.keys(param)[0],
|
||||
Object.values(param)[0].value)
|
||||
}
|
||||
}>
|
||||
|
||||
<Pencil></Pencil>
|
||||
|
||||
</SvgIcon>
|
||||
</IconButton>}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
|
|
@ -62,7 +117,7 @@ function ShowParamsWithValues({x, deviceParametersValue}) {
|
|||
</ListItem>
|
||||
</List>
|
||||
)
|
||||
})}
|
||||
}):<></>}
|
||||
</List>
|
||||
)
|
||||
})
|
||||
|
|
@ -84,7 +139,20 @@ function ShowParamsWithValues({x, deviceParametersValue}) {
|
|||
}}
|
||||
secondaryAction={
|
||||
<div>
|
||||
{deviceParametersValue[y.param_name]}
|
||||
{deviceParametersValue[y.param_name].value}
|
||||
{deviceParametersValue[y.param_name].access > AccessType.ReadOnly && <IconButton>
|
||||
<SvgIcon sx={{width:'20px'}}
|
||||
onClick={()=>{
|
||||
showDialog(
|
||||
x.supported_obj_path + y.param_name,
|
||||
deviceParametersValue[y.param_name].value)
|
||||
}
|
||||
}>
|
||||
|
||||
<Pencil></Pencil>
|
||||
|
||||
</SvgIcon>
|
||||
</IconButton>}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
|
|
@ -102,7 +170,14 @@ export const DevicesDiscovery = () => {
|
|||
const router = useRouter()
|
||||
|
||||
const [deviceParameters, setDeviceParameters] = useState(null)
|
||||
const [parameter, setParameter] = useState(null)
|
||||
const [parameterValue, setParameterValue] = useState(null)
|
||||
const [parameterValueChange, setParameterValueChange] = useState(null)
|
||||
const [deviceParametersValue, setDeviceParametersValue] = useState({})
|
||||
const [open, setOpen] = useState(false)
|
||||
const [errorModal, setErrorModal] = useState(false)
|
||||
const [errorModalText, setErrorModalText] = useState("")
|
||||
const [showLoading, setShowLoading] = useState(false)
|
||||
|
||||
const initialize = async (raw) => {
|
||||
let content = await getDeviceParameters(raw)
|
||||
|
|
@ -286,12 +361,34 @@ const getDeviceParameterInstances = async (raw) =>{
|
|||
|
||||
console.log("content:",content)
|
||||
|
||||
let paramsInfo = {}
|
||||
|
||||
let supportedParams = content.req_obj_results[0].supported_objs[0].supported_params
|
||||
let parametersToFetch = () => {
|
||||
let paramsToFetch = []
|
||||
for (let i =0; i < supportedParams.length ;i++){
|
||||
|
||||
let supported_obj_path = content.req_obj_results[0].supported_objs[0].supported_obj_path.replaceAll("{i}","*")
|
||||
paramsToFetch.push(supported_obj_path+supportedParams[i].param_name)
|
||||
let param = supportedParams[i]
|
||||
|
||||
paramsToFetch.push(supported_obj_path+param.param_name)
|
||||
|
||||
let paths = supported_obj_path.split(".")
|
||||
if (paths[paths.length -2] !== "*"){
|
||||
paramsInfo[param.param_name] = {
|
||||
"value_change":param["value_change"],
|
||||
"value_type":param["value_type"],
|
||||
"access": param["access"],
|
||||
"value": "-",
|
||||
}
|
||||
}else{
|
||||
paramsInfo[param.param_name] = {
|
||||
"value_change":param["value_change"],
|
||||
"value_type":param["value_type"],
|
||||
"access": param["access"],
|
||||
"value":"-",
|
||||
}
|
||||
}
|
||||
}
|
||||
return paramsToFetch
|
||||
}
|
||||
|
|
@ -307,58 +404,55 @@ const getDeviceParameterInstances = async (raw) =>{
|
|||
|
||||
let result = await getDeviceParametersValue(raw)
|
||||
console.log("result:", result)
|
||||
|
||||
console.log("/-------------------------------------------------------/")
|
||||
let values = {}
|
||||
// let setvalues = () => {resultValues.req_path_results.map((x)=>{
|
||||
// // let path = x.requested_path.split(".")
|
||||
// // let param = path[path.length -1]
|
||||
// if (!x.resolved_path_results){
|
||||
// return
|
||||
// }
|
||||
|
||||
// Object.keys(x.resolved_path_results[0].result_params).forEach((key, index) =>{
|
||||
// values[key] = x.resolved_path_results[0].result_params[key]
|
||||
// })
|
||||
// return values
|
||||
// })}
|
||||
// setvalues()
|
||||
|
||||
let setvalues = () => {result.req_path_results.map((x)=>{
|
||||
console.log("VALUES:",values)
|
||||
result.req_path_results.map((x)=>{
|
||||
if (!x.resolved_path_results){
|
||||
values[x.requested_path] = {}
|
||||
setDeviceParametersValue(values)
|
||||
return
|
||||
}
|
||||
|
||||
let paths = x.requested_path.split(".")
|
||||
if(paths[paths.length -2] == "*"){
|
||||
x.resolved_path_results.map(y=>{
|
||||
if (values[y.resolved_path]){
|
||||
values[y.resolved_path].push(y.result_params)
|
||||
}else{
|
||||
console.log(y.result_params)
|
||||
console.log(y.resolved_path)
|
||||
let key = Object.keys(y.result_params)[0]
|
||||
console.log(key)
|
||||
console.log(paramsInfo[key].value)
|
||||
console.log(paramsInfo[key])
|
||||
console.log(y.result_params[key])
|
||||
console.log({[key]:paramsInfo[key]})
|
||||
console.log("Take a look here mate: ",{...paramsInfo[key], value: y.result_params[key]})
|
||||
if (!values[y.resolved_path]){
|
||||
values[y.resolved_path] = []
|
||||
values[y.resolved_path].push(y.result_params)
|
||||
}
|
||||
// Object.keys(y.result_params).forEach((key, index) =>{
|
||||
// if (values[y.resolved_path]){
|
||||
// values[y.resolved_path].push(y.result_params)
|
||||
// }else{
|
||||
// values[y.resolved_path] = []
|
||||
// values[y.resolved_path].push(y.result_params)
|
||||
// }
|
||||
// })
|
||||
if (y.result_params[key] == ""){
|
||||
y.result_params[key] = "\"\""
|
||||
}
|
||||
values[y.resolved_path].push({[key]:{...paramsInfo[key], value: y.result_params[key]}})
|
||||
})
|
||||
}else{
|
||||
Object.keys(x.resolved_path_results[0].result_params).forEach((key, index) =>{
|
||||
values[key] = x.resolved_path_results[0].result_params[key]
|
||||
if (x.resolved_path_results[0].result_params[key] != ""){
|
||||
paramsInfo[key].value = x.resolved_path_results[0].result_params[key]
|
||||
}else{
|
||||
paramsInfo[key].value = "\"\""
|
||||
}
|
||||
values = paramsInfo
|
||||
})
|
||||
}
|
||||
|
||||
return values
|
||||
})}
|
||||
setvalues()
|
||||
console.log(values)
|
||||
setDeviceParametersValue(values)
|
||||
console.log(values)
|
||||
setDeviceParametersValue(values)
|
||||
})
|
||||
|
||||
console.log("/-------------------------------------------------------/")
|
||||
setDeviceParameters(content)
|
||||
}else{
|
||||
console.log("fixme")
|
||||
setDeviceParameters(content)
|
||||
}
|
||||
}
|
||||
|
|
@ -385,6 +479,10 @@ const getDeviceParameterInstances = async (raw) =>{
|
|||
|
||||
}
|
||||
|
||||
function isInteger(value) {
|
||||
return /^\d+$/.test(value);
|
||||
}
|
||||
|
||||
const showParameters = () => {
|
||||
return deviceParameters.req_obj_results.map((a,b)=>{
|
||||
return a.supported_objs.map((x,i)=> {
|
||||
|
|
@ -468,8 +566,14 @@ const getDeviceParameterInstances = async (raw) =>{
|
|||
sx={{fontWeight:'bold'}}
|
||||
/>
|
||||
</ListItem>
|
||||
{ x.supported_params &&
|
||||
<ShowParamsWithValues x={x} deviceParametersValue={deviceParametersValue}/>
|
||||
{ x.supported_params && deviceParametersValue &&
|
||||
<ShowParamsWithValues
|
||||
x={x}
|
||||
deviceParametersValue={deviceParametersValue}
|
||||
setOpen={setOpen}
|
||||
setParameter={setParameter}
|
||||
setParameterValue={setParameterValue}
|
||||
/>
|
||||
}
|
||||
{ x.supported_commands &&
|
||||
x.supported_commands.map((y)=>{
|
||||
|
|
@ -527,6 +631,158 @@ const getDeviceParameterInstances = async (raw) =>{
|
|||
<CardContent>
|
||||
{showParameters()}
|
||||
</CardContent>
|
||||
<Dialog open={open}
|
||||
slotProps={{ backdrop: { style: { backgroundColor: 'rgba(255,255,255,0.5)' } } }}
|
||||
>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
{parameter}
|
||||
</DialogContentText>
|
||||
<TextField
|
||||
autoFocus
|
||||
margin="dense"
|
||||
id="parameterValue"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
defaultValue={parameterValue}
|
||||
autoComplete='off'
|
||||
onChange={(e)=>setParameterValueChange(e.target.value)}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={()=>{setOpen(false)}}>Cancel</Button>
|
||||
<Button onClick={async ()=>{
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
myHeaders.append("Authorization", localStorage.getItem("token"));
|
||||
|
||||
let params = parameter.split(".")
|
||||
let objToChange;
|
||||
let parameterToChange;
|
||||
console.log("params",params)
|
||||
parameterToChange = params.pop()
|
||||
objToChange = params.join(".")
|
||||
|
||||
var requestOptions = {
|
||||
method: 'PUT',
|
||||
headers: myHeaders,
|
||||
redirect: 'follow',
|
||||
body: JSON.stringify(
|
||||
{
|
||||
"allow_partial":true,
|
||||
"update_objs":[
|
||||
{
|
||||
"obj_path":objToChange,
|
||||
"param_settings":[
|
||||
{
|
||||
"param":parameterToChange,
|
||||
"value":parameterValueChange,
|
||||
"required":true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
};
|
||||
|
||||
console.log(requestOptions.body)
|
||||
|
||||
setOpen(false)
|
||||
setShowLoading(true)
|
||||
let result = await (await fetch(`${process.env.NEXT_PUBLIC_REST_ENPOINT}/device/${router.query.id[0]}/set`, requestOptions))
|
||||
if (result.status != 200) {
|
||||
setShowLoading(false)
|
||||
throw new Error('Please check your email and password');
|
||||
}else{
|
||||
setShowLoading(false)
|
||||
let response = await result.json()
|
||||
let feedback = JSON.stringify(response, null, 2)
|
||||
|
||||
if (response.updated_obj_results[0].oper_status.OperStatus["OperSuccess"] === undefined) {
|
||||
console.log("Error to set parameter change")
|
||||
setErrorModalText(feedback)
|
||||
setErrorModal(true)
|
||||
return
|
||||
}
|
||||
|
||||
//Means it has more than one instance
|
||||
if(isInteger(params[params.length -1])){
|
||||
setDeviceParametersValue((prevState) => ({
|
||||
...prevState, [objToChange+"."]: prevState[objToChange+"."].map(el => {
|
||||
if (el[parameterToChange] !== undefined){
|
||||
console.log(el[parameterToChange])
|
||||
el[parameterToChange].value = parameterValueChange
|
||||
return el
|
||||
}else{
|
||||
console.log(el)
|
||||
return el
|
||||
}
|
||||
})
|
||||
}));
|
||||
}else{
|
||||
setDeviceParametersValue((prevState) => ({
|
||||
...prevState,
|
||||
[parameterToChange] : {
|
||||
...prevState[parameterToChange],
|
||||
value: parameterValueChange}
|
||||
}));
|
||||
}
|
||||
|
||||
setOpen(false)
|
||||
}
|
||||
}}>Apply</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
<Dialog open={errorModal}
|
||||
slotProps={{ backdrop: { style: { backgroundColor: 'rgba(255,255,255,0.5)' } } }}
|
||||
fullWidth={ true }
|
||||
maxWidth={"md"}
|
||||
scroll={"paper"}
|
||||
aria-labelledby="scroll-dialog-title"
|
||||
aria-describedby="scroll-dialog-description"
|
||||
>
|
||||
<DialogTitle id="scroll-dialog-title">
|
||||
<Box display="flex" alignItems="center">
|
||||
<Box flexGrow={1} >Response</Box>
|
||||
<Box>
|
||||
<IconButton >
|
||||
<SvgIcon
|
||||
onClick={()=>{
|
||||
setErrorModalText("")
|
||||
setErrorModal(false)
|
||||
}}
|
||||
>
|
||||
< XMarkIcon/>
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogTitle>
|
||||
<DialogContent dividers={scroll === 'paper'}>
|
||||
<DialogContentText id="scroll-dialog-description"tabIndex={-1}>
|
||||
<pre style={{color: 'black'}}>
|
||||
{errorModalText}
|
||||
</pre>
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={()=>{
|
||||
setErrorModalText("")
|
||||
setErrorModal(false)
|
||||
}}>OK</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
<Backdrop
|
||||
sx={{
|
||||
color: '#fff',
|
||||
zIndex: (theme) => theme.zIndex.drawer + 1,
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
open={showLoading}
|
||||
>
|
||||
<CircularProgress color="inherit" />
|
||||
</Backdrop>
|
||||
</Card>
|
||||
:
|
||||
<Box sx={{display:'flex',justifyContent:'center'}}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user