From 88fca6dbadbc18dd1c39b0f11eb9ee0bb2012a19 Mon Sep 17 00:00:00 2001 From: leandrofars Date: Sat, 21 Oct 2023 12:54:50 -0300 Subject: [PATCH 1/5] chore(frontend): initial parameters value edit --- .../src/sections/devices/devices-discovery.js | 102 +++++++++++------- 1 file changed, 65 insertions(+), 37 deletions(-) diff --git a/frontend/src/sections/devices/devices-discovery.js b/frontend/src/sections/devices/devices-discovery.js index 882b67c..78094fc 100644 --- a/frontend/src/sections/devices/devices-discovery.js +++ b/frontend/src/sections/devices/devices-discovery.js @@ -7,17 +7,21 @@ import { List, ListItem, ListItemText, - Box, } 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 { useRouter } from 'next/router'; +const AccessType = { + ReadOnly: 0, + ReadWrite: 1, + WriteOnly: 2, +} + function ShowParamsWithValues({x, deviceParametersValue}) { - console.log("estoy aqui") let paths = x.supported_obj_path.split(".") - console.log(paths) if(paths[paths.length -2] == "{i}"){ return Object.keys(deviceParametersValue).map((paramKey, h)=>{ return ( @@ -35,7 +39,6 @@ function ShowParamsWithValues({x, deviceParametersValue}) { /> {deviceParametersValue[paramKey].map((param, i) => { - console.log("opa") return ( - {Object.values(param)[0]} + {Object.values(param)[0].value} + {Object.values(param)[0].access > 0 && + + + + + + } } > @@ -84,7 +94,14 @@ function ShowParamsWithValues({x, deviceParametersValue}) { }} secondaryAction={
- {deviceParametersValue[y.param_name]} + {deviceParametersValue[y.param_name].value} + {deviceParametersValue[y.param_name].access > 0 && + + + + + + }
} > @@ -286,12 +303,35 @@ const getDeviceParameterInstances = async (raw) =>{ console.log("content:",content) + let values = {} + let multiInstanceParamsInfo = {} + 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] !== "*"){ + values[param.param_name] = { + "value_change":param["value_change"], + "value_type":param["value_type"], + "access": param["access"], + "value": "-", + } + }else{ + multiInstanceParamsInfo[param.param_name] = { + "value_change":param["value_change"], + "value_type":param["value_type"], + "access": param["access"], + "value":"-", + } + } } return paramsToFetch } @@ -308,21 +348,6 @@ const getDeviceParameterInstances = async (raw) =>{ let result = await getDeviceParametersValue(raw) console.log("result:", result) - 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)=>{ if (!x.resolved_path_results){ return @@ -331,29 +356,32 @@ const getDeviceParameterInstances = async (raw) =>{ 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{ - 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) - // } - // }) + Object.keys(y.result_params).forEach((key, index) =>{ + if (!values[y.resolved_path]){ + values[y.resolved_path] = [] + } + if (y.result_params[key] == ""){ + y.result_params[key] = "\"\"" + } + multiInstanceParamsInfo[key].value = y.result_params[key] + let obj = {}; + obj[key] = multiInstanceParamsInfo[key] + values[y.resolved_path].push(obj) + }) }) }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] != ""){ + values[key].value = x.resolved_path_results[0].result_params[key] + }else{ + values[key].value = "\"\"" + } }) } return values })} + console.log("VALUES:",values) setvalues() console.log(values) setDeviceParametersValue(values) From 214151c7ce876d6cce1b4472554b9aff78669973 Mon Sep 17 00:00:00 2001 From: leandrofars Date: Sat, 21 Oct 2023 18:10:15 -0300 Subject: [PATCH 2/5] chore(frontend): add modal to edit parameter --- .../src/sections/devices/devices-discovery.js | 69 +++++++++++++++++-- 1 file changed, 65 insertions(+), 4 deletions(-) diff --git a/frontend/src/sections/devices/devices-discovery.js b/frontend/src/sections/devices/devices-discovery.js index 78094fc..918b74c 100644 --- a/frontend/src/sections/devices/devices-discovery.js +++ b/frontend/src/sections/devices/devices-discovery.js @@ -7,6 +7,14 @@ import { List, ListItem, ListItemText, + Box, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + TextField, + Button } from '@mui/material'; import CircularProgress from '@mui/material/CircularProgress'; import PlusCircleIcon from '@heroicons/react/24/outline/PlusCircleIcon'; @@ -20,8 +28,19 @@ const AccessType = { WriteOnly: 2, } -function ShowParamsWithValues({x, deviceParametersValue}) { +function ShowParamsWithValues({x, deviceParametersValue, setOpen, setParameter, setParameterValue}) { let paths = x.supported_obj_path.split(".") + + 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)=>{ return ( @@ -57,7 +76,13 @@ function ShowParamsWithValues({x, deviceParametersValue}) {
{Object.values(param)[0].value} {Object.values(param)[0].access > 0 && - + { + showDialog( + paramKey+Object.keys(param)[0], + Object.values(param)[0].value) + } + }> @@ -96,7 +121,13 @@ function ShowParamsWithValues({x, deviceParametersValue}) {
{deviceParametersValue[y.param_name].value} {deviceParametersValue[y.param_name].access > 0 && - + { + showDialog( + x.supported_obj_path + y.param_name, + deviceParametersValue[y.param_name].value) + } + }> @@ -119,7 +150,10 @@ export const DevicesDiscovery = () => { const router = useRouter() const [deviceParameters, setDeviceParameters] = useState(null) +const [parameter, setParameter] = useState(null) +const [parameterValue, setParameterValue] = useState(null) const [deviceParametersValue, setDeviceParametersValue] = useState({}) +const [open, setOpen] = useState(false) const initialize = async (raw) => { let content = await getDeviceParameters(raw) @@ -497,7 +531,13 @@ const getDeviceParameterInstances = async (raw) =>{ /> { x.supported_params && - + } { x.supported_commands && x.supported_commands.map((y)=>{ @@ -555,6 +595,27 @@ const getDeviceParameterInstances = async (raw) =>{ {showParameters()} + + + + {parameter} + + + + + + + + : From 5ecf6ffc102b6d89a4bf3de4ae33bb78a0e7e1ea Mon Sep 17 00:00:00 2001 From: leandrofars Date: Sun, 22 Oct 2023 17:32:07 -0300 Subject: [PATCH 3/5] feat(frontend): device parameter edition --- .../src/sections/devices/devices-discovery.js | 160 ++++++++++++++---- 1 file changed, 129 insertions(+), 31 deletions(-) diff --git a/frontend/src/sections/devices/devices-discovery.js b/frontend/src/sections/devices/devices-discovery.js index 918b74c..d7ab51a 100644 --- a/frontend/src/sections/devices/devices-discovery.js +++ b/frontend/src/sections/devices/devices-discovery.js @@ -28,9 +28,22 @@ const AccessType = { 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}) { let paths = x.supported_obj_path.split(".") - const showDialog = (param, paramvalue) => { setParameter(param); if (paramvalue == "\"\"") { @@ -75,7 +88,7 @@ function ShowParamsWithValues({x, deviceParametersValue, setOpen, setParameter, secondaryAction={
{Object.values(param)[0].value} - {Object.values(param)[0].access > 0 && + {Object.values(param)[0].access > AccessType.ReadOnly && { showDialog( @@ -120,7 +133,7 @@ function ShowParamsWithValues({x, deviceParametersValue, setOpen, setParameter, secondaryAction={
{deviceParametersValue[y.param_name].value} - {deviceParametersValue[y.param_name].access > 0 && + {deviceParametersValue[y.param_name].access > AccessType.ReadOnly && { showDialog( @@ -152,6 +165,7 @@ 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) @@ -337,8 +351,7 @@ const getDeviceParameterInstances = async (raw) =>{ console.log("content:",content) - let values = {} - let multiInstanceParamsInfo = {} + let paramsInfo = {} let supportedParams = content.req_obj_results[0].supported_objs[0].supported_params let parametersToFetch = () => { @@ -352,14 +365,14 @@ const getDeviceParameterInstances = async (raw) =>{ let paths = supported_obj_path.split(".") if (paths[paths.length -2] !== "*"){ - values[param.param_name] = { + paramsInfo[param.param_name] = { "value_change":param["value_change"], "value_type":param["value_type"], "access": param["access"], "value": "-", } }else{ - multiInstanceParamsInfo[param.param_name] = { + paramsInfo[param.param_name] = { "value_change":param["value_change"], "value_type":param["value_type"], "access": param["access"], @@ -381,8 +394,10 @@ const getDeviceParameterInstances = async (raw) =>{ let result = await getDeviceParametersValue(raw) console.log("result:", result) - - let setvalues = () => {result.req_path_results.map((x)=>{ + console.log("/-------------------------------------------------------/") + let values = {} + console.log("VALUES:",values) + result.req_path_results.map((x)=>{ if (!x.resolved_path_results){ return } @@ -390,35 +405,50 @@ const getDeviceParameterInstances = async (raw) =>{ let paths = x.requested_path.split(".") if(paths[paths.length -2] == "*"){ x.resolved_path_results.map(y=>{ - Object.keys(y.result_params).forEach((key, index) =>{ - if (!values[y.resolved_path]){ - values[y.resolved_path] = [] - } - if (y.result_params[key] == ""){ - y.result_params[key] = "\"\"" - } - multiInstanceParamsInfo[key].value = y.result_params[key] - let obj = {}; - obj[key] = multiInstanceParamsInfo[key] - values[y.resolved_path].push(obj) - }) + 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("OLHA AQUI, tem que tar diferente:",{...paramsInfo[key], value: y.result_params[key]}) + if (!values[y.resolved_path]){ + values[y.resolved_path] = [] + } + if (y.result_params[key] == ""){ + y.result_params[key] = "\"\"" + } + values[y.resolved_path].push({[key]:{...paramsInfo[key], value: y.result_params[key]}}) + // let obj = {}; + // obj[key] = paramsInfo[key] + // obj[key].value = y.result_params[key] + // values[y.resolved_path].push({[key]:obj[key]}) + // console.log("key",key) + // console.log("obj[key]",obj[key]) + // console.log("obj[key].value",obj[key].value) + // console.log("obj",obj) + // console.log("values",values) + // console.log("values[y.resolved_path]",values[y.resolved_path]) + // console.log("y.result_params[key]",y.result_params[key]) }) }else{ Object.keys(x.resolved_path_results[0].result_params).forEach((key, index) =>{ if (x.resolved_path_results[0].result_params[key] != ""){ - values[key].value = x.resolved_path_results[0].result_params[key] + paramsInfo[key].value = x.resolved_path_results[0].result_params[key] }else{ - values[key].value = "\"\"" + paramsInfo[key].value = "\"\"" } + values = paramsInfo }) } - return values - })} - console.log("VALUES:",values) - setvalues() - console.log(values) - setDeviceParametersValue(values) + console.log(values) + setDeviceParametersValue(values) + }) + + console.log("/-------------------------------------------------------/") setDeviceParameters(content) }else{ setDeviceParameters(content) @@ -446,6 +476,7 @@ const getDeviceParameterInstances = async (raw) =>{ } } + const showParameters = () => { return deviceParameters.req_obj_results.map((a,b)=>{ @@ -530,7 +561,7 @@ const getDeviceParameterInstances = async (raw) =>{ sx={{fontWeight:'bold'}} /> - { x.supported_params && + { x.supported_params && deviceParametersValue && { fullWidth variant="standard" defaultValue={parameterValue} + autoComplete='off' + onChange={(e)=>setParameterValueChange(e.target.value)} /> - + From 8d1c2c36473b3bfe198a2bfdee61b4f5892f2e9f Mon Sep 17 00:00:00 2001 From: leandrofars Date: Mon, 23 Oct 2023 01:41:27 -0300 Subject: [PATCH 4/5] feat(frontend): show param edit error --- .../src/sections/devices/devices-discovery.js | 126 +++++++++++++----- 1 file changed, 90 insertions(+), 36 deletions(-) diff --git a/frontend/src/sections/devices/devices-discovery.js b/frontend/src/sections/devices/devices-discovery.js index d7ab51a..c5b15fc 100644 --- a/frontend/src/sections/devices/devices-discovery.js +++ b/frontend/src/sections/devices/devices-discovery.js @@ -20,6 +20,8 @@ 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'; const AccessType = { @@ -43,6 +45,7 @@ const ParamValueType = { } function ShowParamsWithValues({x, deviceParametersValue, setOpen, setParameter, setParameterValue}) { + console.log("HEY jow:", deviceParametersValue) let paths = x.supported_obj_path.split(".") const showDialog = (param, paramvalue) => { setParameter(param); @@ -56,6 +59,8 @@ function ShowParamsWithValues({x, deviceParametersValue, setOpen, setParameter, if(paths[paths.length -2] == "{i}"){ return Object.keys(deviceParametersValue).map((paramKey, h)=>{ + console.log(deviceParametersValue) + console.log(paramKey) return ( - {deviceParametersValue[paramKey].map((param, i) => { + {deviceParametersValue[paramKey].length > 0 ? + deviceParametersValue[paramKey].map((param, i) => { return ( ) - })} + }):<>} ) }) @@ -168,6 +174,8 @@ 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 initialize = async (raw) => { let content = await getDeviceParameters(raw) @@ -399,6 +407,8 @@ const getDeviceParameterInstances = async (raw) =>{ console.log("VALUES:",values) result.req_path_results.map((x)=>{ if (!x.resolved_path_results){ + values[x.requested_path] = {} + setDeviceParametersValue(values) return } @@ -413,7 +423,7 @@ const getDeviceParameterInstances = async (raw) =>{ console.log(paramsInfo[key]) console.log(y.result_params[key]) console.log({[key]:paramsInfo[key]}) - console.log("OLHA AQUI, tem que tar diferente:",{...paramsInfo[key], value: y.result_params[key]}) + console.log("Take a look here mate: ",{...paramsInfo[key], value: y.result_params[key]}) if (!values[y.resolved_path]){ values[y.resolved_path] = [] } @@ -421,17 +431,6 @@ const getDeviceParameterInstances = async (raw) =>{ y.result_params[key] = "\"\"" } values[y.resolved_path].push({[key]:{...paramsInfo[key], value: y.result_params[key]}}) - // let obj = {}; - // obj[key] = paramsInfo[key] - // obj[key].value = y.result_params[key] - // values[y.resolved_path].push({[key]:obj[key]}) - // console.log("key",key) - // console.log("obj[key]",obj[key]) - // console.log("obj[key].value",obj[key].value) - // console.log("obj",obj) - // console.log("values",values) - // console.log("values[y.resolved_path]",values[y.resolved_path]) - // console.log("y.result_params[key]",y.result_params[key]) }) }else{ Object.keys(x.resolved_path_results[0].result_params).forEach((key, index) =>{ @@ -451,6 +450,7 @@ const getDeviceParameterInstances = async (raw) =>{ console.log("/-------------------------------------------------------/") setDeviceParameters(content) }else{ + console.log("fixme") setDeviceParameters(content) } } @@ -476,8 +476,11 @@ 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)=> { @@ -687,33 +690,84 @@ const getDeviceParameterInstances = async (raw) =>{ if (result.status != 200) { throw new Error('Please check your email and password'); }else{ - setDeviceParametersValue((prevState) => ({ - ...prevState, [objToChange+"."]: prevState[objToChange+"."].map(el => { - Object.keys(el).forEach(key=>{ - // if (key === parameterToChange){ - // return {...el, value: parameterValueChange} - // }else{ - // console.log(el) - // return el - // } + 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") + setOpen(false) + 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 + } }) - if (el[parameterToChange] !== undefined){ - console.log(el[parameterToChange]) - el[parameterToChange].value = parameterValueChange - return el - }else{ - console.log(el) - return el - } - }) - })); - console.log(deviceParametersValue) + })); + }else{ + setDeviceParametersValue((prevState) => ({ + ...prevState, + [parameterToChange] : { + ...prevState[parameterToChange], + value: parameterValueChange} + })); + } + setOpen(false) - return result.json() } }}>Apply + + + + Response + + + { + setErrorModalText("") + setErrorModal(false) + }} + > + < XMarkIcon/> + + + + + + + + 
+                        {errorModalText}
+
+ + + + + + : From a6b6cc47795fbf49ff62a11e31ffd63fc54d6718 Mon Sep 17 00:00:00 2001 From: leandrofars Date: Mon, 23 Oct 2023 10:05:11 -0300 Subject: [PATCH 5/5] chore(frontend): show loading at set parameter value request --- .../src/sections/devices/devices-discovery.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/frontend/src/sections/devices/devices-discovery.js b/frontend/src/sections/devices/devices-discovery.js index c5b15fc..cd93e42 100644 --- a/frontend/src/sections/devices/devices-discovery.js +++ b/frontend/src/sections/devices/devices-discovery.js @@ -14,7 +14,8 @@ import { DialogContentText, DialogTitle, TextField, - Button + Button, + Backdrop, } from '@mui/material'; import CircularProgress from '@mui/material/CircularProgress'; import PlusCircleIcon from '@heroicons/react/24/outline/PlusCircleIcon'; @@ -176,6 +177,7 @@ 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) @@ -686,16 +688,19 @@ const getDeviceParameterInstances = async (raw) =>{ 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") - setOpen(false) setErrorModalText(feedback) setErrorModal(true) return @@ -768,6 +773,16 @@ const getDeviceParameterInstances = async (raw) =>{ }}>OK + theme.zIndex.drawer + 1, + overflow: 'hidden' + }} + open={showLoading} + > + + :