Merge pull request #144 from OktopUSP/device_parameter_edition

Device parameter edition

frontend/src/sections/devices/devices-discovery.js

@@ -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}) {
+const AccessType = {
-    console.log("estoy aqui")
+    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) => {
+            {deviceParametersValue[paramKey].length > 0 ?
-                console.log("opa")
+            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)=>{
+        console.log("VALUES:",values)
-        //     // let path = x.requested_path.split(".")
+        result.req_path_results.map((x)=>{
-        //     // 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){
+                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]){
+                    console.log(y.result_params)
-                        values[y.resolved_path].push(y.result_params)
+                    console.log(y.resolved_path)
-                    }else{
+                    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 (y.result_params[key] == ""){
-                    //     if (values[y.resolved_path]){
+                        y.result_params[key] = "\"\""
-                    //         values[y.resolved_path].push(y.result_params)
+                    }
-                    //     }else{
+                    values[y.resolved_path].push({[key]:{...paramsInfo[key], value: y.result_params[key]}})
-                    //         values[y.resolved_path] = []
-                    //         values[y.resolved_path].push(y.result_params)
-                    //     }
-                    // })
                 })
             }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
+            console.log(values)
-        })}
+            setDeviceParametersValue(values)
-        setvalues()
+        })
-        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 && 
+                { x.supported_params && deviceParametersValue && 
-                    <ShowParamsWithValues x={x} deviceParametersValue={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'}}>