bt-sensors-plugin-sk 1.2.5 → 1.2.6-beta-1

package/src/components/PluginConfigurationPanel.js

@@ -1,11 +1,10 @@
 import Form from '@rjsf/core' ;
 import validator from '@rjsf/validator-ajv8';
-import React from "react";
 import ReactHtmlParser from 'react-html-parser';
-
+import React from 'react'
 import {useEffect, useState} from 'react'
 
-import {Button, Grid } from '@material-ui/core';
+import {Button, Grid, Snackbar } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
 import { SignalCellular0Bar, SignalCellular1Bar, SignalCellular2Bar, SignalCellular3Bar, SignalCellular4Bar, SignalCellularConnectedNoInternet0Bar    } from '@material-ui/icons';
@@ -20,13 +19,14 @@ import { ListGroupItem } from 'react-bootstrap';
 
 import ProgressBar from 'react-bootstrap/ProgressBar';
 
-var _sensorMap, _sensorDomains={}, _sensorList={}
-
-export default function BTConfig (props)  {
+export function BTConfig (props)  {
 
    const _uiSchema= {
     "ui:options": {label: false},
-    'title': { 'ui:widget': 'hidden' }
+    "paths":{
+      enableMarkdownInDescription:true
+    },
+    'title': { 'ui:widget': 'hidden' },
   }
 
   const baseUISchema = 
@@ -71,10 +71,12 @@ const useStyles = makeStyles((theme) => ({
 
   const [schema, setSchema] = useState({}) 
   const [ uiSchema, setUISchema] = useState(_uiSchema )
-  const [sensorList, setSensorList] = useState([])
 
   const [sensorData, setSensorData] = useState()
-  const [sensorMap, setSensorMap ] = useState(new Map() )
+  const [sensorClassChanged, setSensorClassChanged] = useState(false)
+
+  const [enableSchema, setEnableSchema] = useState(true)
+  const [sensorMap, setSensorMap ] = useState(new Map())
  
   const [progress, setProgress ] = useState({
     "progress":0, "maxTimeout": 100, 
@@ -84,13 +86,14 @@ const useStyles = makeStyles((theme) => ({
  
   const [pluginState, setPluginState ] = useState("unknown")
   const [error, setError ] = useState()
+  const [snackbarOpen, setSnackbarOpen] = useState(false)
+  const [snackbarMessage, setSnackbarMessage] = useState("")
   const classes = useStyles();
 
+  
  
   function sendJSONData(cmd, data){
 
-    console.log(`sending ${cmd}`) 
-    console.log(data)
     const headers = new Headers();
     headers.append("Content-Type", "application/json");
     return fetch(`/plugins/bt-sensors-plugin-sk/${cmd}`, {
@@ -100,91 +103,85 @@ const useStyles = makeStyles((theme) => ({
       headers:headers
     })
   }
-
-  async function fetchJSONData(path){
-    console.log(`fetching ${path}`)
-    var result
-    try {
-      result = fetch(`/plugins/bt-sensors-plugin-sk/${path}`, {
-        credentials: 'include'
-      })
-    } catch (e) {
-      result=
-        {
-          status: 500,
-          statusText: e.toString()
-        }
-    }
-    return result
+async function fetchJSONData(path, data = {}) {
+  let result;
+  try {
+    // Convert data object to query string
+    const query = Object.keys(data).length
+      ? '?' + new URLSearchParams(data).toString()
+      : '';
+    result = await fetch(`/plugins/bt-sensors-plugin-sk/${path}${query}`, {
+      credentials: 'include',
+      method: 'GET'
+    });
+  } catch (e) {
+    result = {
+      status: 500,
+      statusText: e.toString()
+    };
   }
-
+  return result;
+}
   async function getSensors(){
-    console.log("getSensors")
     const response = await fetchJSONData("getSensors")
     if (response.status!=200){
       throw new Error(`Unable get sensor data: ${response.statusText} (${response.status}) `)
     }
     const json = await response.json()
-    console.log(json)
-    //for (let i=0;i<json.length;i++){
-    //  json[i].schema.htmlDescription=<div>{ReactHtmlParser(json[i].schema.htmlDescription)}<p></p></div>
-    //}
+
     return json
 
   }
-  async function getDomains(){
-    console.log("getDomains")
-    const response = await fetchJSONData("getDomains")
+
+
+  async function getSensorInfo(mac, sensorClass){
+    
+    const response = await fetchJSONData("getSensorInfo",{mac_address: mac, class: sensorClass})
     if (response.status!=200){
-      throw new Error(`Unable get domain data: ${response.statusText} (${response.status}) `)
+      debugger
+      throw new Error(`Unable get sensor info: ${response.statusText} (${response.status}) `)
     }
     const json = await response.json()
-    console.log(json)
     return json
-
   }
+
   async function getBaseData(){
-    console.log("getBaseData")
     const response = await fetchJSONData("getBaseData")
     if (response.status!=200){
       throw new Error(`Unable to get base data: ${response.statusText} (${response.status}) `)
     }
     const json = await response.json()
-    console.log(json)
     json.schema.htmlDescription=<div>{ReactHtmlParser(json.schema.htmlDescription)}<p></p></div>
     return json
   }
+
   async function getProgress(){
-    console.log("getProgress")
     const response = await fetchJSONData("getProgress")
     if (response.status!=200){
       throw new Error(`Unable to get progress: ${response.statusText} (${response.status}) `)
     }
     const json = await response.json()
-    console.log(json)
     return json
   }
 
   function updateSensorData(data){
-    console.log("updateSensorData")
     sendJSONData("updateSensorData", data).then((response)=>{ 
       if (response.status != 200) {
         throw new Error(response.statusText)
       }
-      sensorMap.get(data.mac_address)._changesMade=false
-      sensorMap.get(data.mac_address).config = data
-      
+      setSensorMap((sm)=>{sm.delete(data.mac_address); return new Map(sm) })
+      setSchema( {} )
+
     })
   } 
 
   function undoChanges(mac) {
-    console.log("undoChanges")
     sensorMap.get(mac)._changesMade = false
+    sensorMap.get(mac).config = JSON.parse(JSON.stringify(sensorMap.get(mac).configCopy))
     setSensorData( sensorMap.get(mac).config )
   }
 
   function removeSensorData(mac){
-    console.log("removeSensorData")
 
     try{ 
     
@@ -193,131 +190,151 @@ const useStyles = makeStyles((theme) => ({
             throw new Error(response.statusText)
         }
         })
-
-        _sensorMap.delete(mac)
-        
-        setSensorMap(new Map(_sensorMap))
+        setSensorMap((sm)=>{sm.delete(mac); return new Map(sm) })
         setSchema( {} )
     } catch {(e)=>
-      setError( new Error(`Couldn't remove ${mac}: ${e}`))
+      setError( `Couldn't remove ${mac}: ${e}`)
     }
      
   }
 
 
   function updateBaseData(data){
-    console.log("updateBaseData")
-
+    setSensorMap(new Map())
+    //setSensorList({})
     sendJSONData("updateBaseData", data).then( (response )=>{
       if (response.status != 200) {
-        setError(new Error(`Unable to update base data: ${response.statusText} (${response.status})`))
-      } /*else {
-        getProgress().then((json)=>{
-          setProgress(json)
-        }).catch((e)=>{
-          setError(e)
-        })
-      }*/
+        setError(`Unable to update base data: ${response.statusText} (${response.status})`)
+      } 
       })
-  }
-    
 
-  function refreshSensors(){
-    console.log('refreshing sensor map')
-
-    getSensors().then((sensors)=>{
-      setSensorMap (new Map(sensors.map((sensor)=>[sensor.info.mac,sensor])));    
-    })
-    .catch((e)=>{
-      setError(e)
-    })
   }
 
-
   useEffect(()=>{
-    console.log("useEffect([])")
     let eventSource=null
-
     fetchJSONData("getPluginState").then( async (response)=> {
+    
+      function newSensorEvent(event){
+        let json = JSON.parse(event.data)
+        console.log(`New sensor: ${json.info.mac}`)
+        setSensorMap( (_sm)=> {
+          //if (!_sm.has(json.info.mac))
+          _sm.set(json.info.mac, json)
+        
+          return new Map(_sm)
+        }
+        )
+      }
+      function sensorChangedEvent(event){
+        console.log("sensorchanged")
+        const json = JSON.parse(event.data)      
+        
+        setSensorMap( (_sm) => {
+          const sensor = _sm.get(json.mac)
+          if (sensor) 
+            Object.assign(sensor.info, json )
+          return new Map(_sm)
+        })
+      }
+      
+
       if (response.status==404) {
         setPluginState("unknown")
         throw new Error("unable to get plugin state")
       }
       const json = await response.json()
-      console.log("Setting up eventsource")
       eventSource = new EventSource("/plugins/bt-sensors-plugin-sk/sse", { withCredentials: true })
 
-      setPluginState(json.state)
-      
-      _sensorDomains = await getDomains()
-
       eventSource.addEventListener("newsensor", (event) => {
-        console.log("newsensor")
-        let json = JSON.parse(event.data)
-        
-        if (!_sensorMap.has(json.info.mac)) {
-          console.log(`New sensor: ${json.info.mac}`)
-          setSensorMap(new Map(_sensorMap.set(json.info.mac, json)))
-        }
+        newSensorEvent(event)
       });
 
       eventSource.addEventListener("sensorchanged", (event) => {
-        let json = JSON.parse(event.data)      
-        console.log("sensorchanged")
-        console.log(json)
-        
-        if (_sensorMap.has(json.mac)) {      
-          let sensor = _sensorMap.get(json.mac)
-
-          Object.assign(sensor.info, json )
-          setSensorMap(new Map ( _sensorMap ))
-        }
+        sensorChangedEvent(event)
       });
+
       eventSource.addEventListener("progress", (event) => {
-        console.log("progress")
         const json = JSON.parse(event.data)  
         setProgress(json)
-        console.log(json)
       });
 
       eventSource.addEventListener("pluginstate", (event) => {
-        console.log("pluginstate")
         const json = JSON.parse(event.data)  
         setPluginState(json.state)
       });
-     
-    })
+      
+    setPluginState(json.state);
 
+    (async ()=>{
+      const sensors = await getSensors()
+      setSensorMap ( new Map(sensors.map((sensor)=>[sensor.info.mac,sensor])) )
+    })()
+
+    })
     .catch( (e) => { 
-        setError(e)
+        setError(e.message)
       }
     )
     return () => { 
       console.log("Closing connection to SSE")
       eventSource.close()
     };
+    
  },[])
 
+
+ useEffect(()=>{
+  
+  if (!sensorClassChanged) return
+  if (!(sensorData && sensorMap) )  return
+  
+  const _sensor = sensorMap.get(sensorData.mac_address)
+  if (_sensor && schema && sensorData  &&
+    Object.hasOwn(sensorData,"params" )){
+      if (_sensor.info.class == "UNKNOWN" && sensorData.params.sensorClass && sensorData.params.sensorClass != "UNKNOWN") {
+      setEnableSchema(false)
+      setSnackbarMessage(`Please wait. Fetching schema for ${sensorData.params.sensorClass}...`)
+      getSensorInfo(sensorData.mac_address, sensorData.params.sensorClass).then((json)=>{
+        setSchema(json.schema)
+      }).catch((e)=>{
+        alert(e.message)
+      })
+      .finally(()=>{
+        setSnackbarMessage("")
+        setEnableSchema(true)
+        setSensorClassChanged(false)
+      })
+    }
+  
+  }
+  
+ },[sensorClassChanged])
+
 useEffect(()=>{
-  console.log("useEffect([pluginState])")
-  if (pluginState=="started"){
-    refreshSensors()
-    
+  if (snackbarMessage=="")
+    setSnackbarOpen(false)
+  else {
+    setSnackbarOpen(true)
+  }     
+
+},[snackbarMessage])
+
+useEffect(()=>{
+  if (pluginState=="started") {
     getBaseData().then((json) => {
       setBaseSchema(json.schema);    
       setBaseData(json.data);
     }).catch((e)=>{
-      setError(e)
+      setError(e.message)
     })
 
     getProgress().then((json)=>{
       setProgress(json)
     }).catch((e)=>{
-      setError(e)
+      setError(e.message)
     })
 
   } else{
-    setSensorMap(new Map())
     setBaseSchema({})
     setBaseData({})
   }
@@ -325,9 +342,10 @@ useEffect(()=>{
 },[pluginState])
 
 
-
 function confirmDelete(mac){
-  const result = window.confirm(`Delete configuration for ${mac}?`)
+  
+  const sensor = sensorMap.get(mac)
+  const result = !hasConfig(sensor) || window.confirm(`Delete configuration for ${sensor.info.name}?`)
   if (result)
     removeSensorData(mac)
 }
@@ -352,7 +370,7 @@ function signalStrengthIcon(sensor){
 
 }
 function hasConfig(sensor){
-  return Object.keys(sensor.config).length>0;
+  return Object.keys(sensor.configCopy).length>0;
 }
 
 function createListGroupItem(sensor){
@@ -376,66 +394,43 @@ function createListGroupItem(sensor){
         </ListGroupItem>
 }
 
-function configuredDevices(){
-  return Array.from(sensorMap.entries()).filter((entry)=>hasConfig(entry[1]))
-}
 
 function devicesInDomain(domain){
-  if (domain==="_configured")
-    return configuredDevices()
-  else
+
   return Array.from(sensorMap.entries()).filter((entry)=>entry[1].info.domain===domain)
 }
 
+  function ifNullNaN(value){
+    return value==null? NaN : value
+  }
 
-useEffect(()=>{
-  console.log("useEffect([sensorMap])")
-
-    _sensorMap = sensorMap
-    
-    const _sensorDomains = [... (new Set(sensorMap.entries().map((entry)=>{ return entry[1].info.domain})))].sort()
-    const sl = {
-      _configured: configuredDevices().length==0?
+  function getTabs(){
+    const sensorDomains = [... (new Set(sensorMap.entries().map((entry)=>{ return entry[1].info.domain})))].sort()
+    const cd = Array.from(sensorMap.entries()).filter((entry)=>hasConfig(entry[1]))
+    let sensorList={}
+    sensorList["_configured"]=
+      cd.length==0?
         "Select a device from its domain tab (Electrical etc.) and configure it.":
-        configuredDevices().map((entry) =>  {
+        cd.map((entry) =>  {
          return createListGroupItem(sensorMap.get(entry[0]))
       })
-      } 
-
-      _sensorDomains.forEach((d)=>{
-        sl[d]=devicesInDomain(d).map((entry) =>  {
+      
+      sensorDomains.forEach((d)=>{
+        sensorList[d]=devicesInDomain(d).map((entry) =>  {
         return createListGroupItem(sensorMap.get(entry[0]))
        })
-    })
-    _sensorList=sl 
-    
-    
-  },[sensorMap]
-  )
-
-  function ifNullNaN(value){
-    return value==null? NaN : value
-  }
-
-  function getSensorList(domain){
-    return _sensorList[domain]
-  }
-
-  function getTabs(){
+      })
     
-    return Object.keys(_sensorList).map((domain)=> {return getTab(domain)})
+    return Object.keys(sensorList).map((domain)=> {return getTab(domain, sensorList[domain])})
   }
-    // <div style={{paddingBottom: 20}} class="d-flex flex-wrap justify-content-start align-items-start">
-    //    <div class="d-flex flex-column" >
 
-  function getTab(key){
-    var title = key.slice(key.charAt(0)==="_"?1:0)
-    let sl = getSensorList(key)
+  function getTab(key, sensorList){
+    let  title = key.slice(key.charAt(0)==="_"?1:0)
     
-    return <Tab eventKey={key} title={`${title.charAt(0).toUpperCase()}${title.slice(1)}${devicesInDomain(key).length==0?'':' ('+devicesInDomain(key).length+')'}` }  >
+    return <Tab eventKey={key} title={`${title.charAt(0).toUpperCase()}${title.slice(1)}${typeof sensorList=='string'?'':' ('+sensorList.length+')'}` }  >
         
     <ListGroup style={{  maxHeight: '300px', overflowY: 'auto' }}>
-      {sl}
+      {sensorList}
     </ListGroup>
     
 
@@ -447,22 +442,6 @@ useEffect(()=>{
     window.open(url, "_blank", "noreferrer");
   }
 
-  function CustomFieldTemplate(props) {
-  const { id, classNames, style, label, help, required, description, errors, children } = props;
-  return (
-    <div className={classNames} style={style}>
-      <Grid container xs={12} direction="row" spacing="1">
-        <Grid item xs={1} sm container direction="column">
-        <Grid item ><label htmlFor={id}>{label}{required ? '*' : null}</label></Grid>
-        <Grid item> {description}</Grid>
-        </Grid>
-        <Grid item>{children}</Grid>
-      </Grid>
-      {errors}
-      {help}
-    </div>
-  );
-}
 
   if (pluginState=="stopped" || pluginState=="unknown")
     return (<h3>Enable plugin to see configuration</h3>)
@@ -470,6 +449,14 @@ useEffect(()=>{
   return(
 
     <div>
+
+      <Snackbar
+        anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
+        onClose={() => setSnackbarOpen(false)}
+        open={snackbarOpen}
+        message={snackbarMessage}
+        key={"snackbar"}
+      />  
        <div className={classes.root}>
           
           <Button  variant="contained" onClick={()=>{openInNewTab("https://github.com/naugehyde/bt-sensors-plugin-sk/tree/1.2.0-beta#configuration")}}>Documentation</Button>
@@ -480,7 +467,7 @@ useEffect(()=>{
       </div>
       <hr style={{"width":"100%","height":"1px","color":"gray","background-color":"gray","text-align":"left","margin-left":0}}></hr>
 
-      {error?<h2 style="color: red;">{error}</h2>:""}
+      {error?<h2 style={{color: 'red'}}>{error}</h2>:""}
       <Form 
         schema={baseSchema}
         validator={validator}
@@ -504,7 +491,7 @@ useEffect(()=>{
       defaultActiveKey="_configured"
       id="domain-tabs"
       className="mb-3"
-      onClick={()=>{setSchema({})}}
+  
       >
       {getTabs()}
       </Tabs>
@@ -513,20 +500,27 @@ useEffect(()=>{
       <Grid item><h2>{schema?.title}</h2><p></p></Grid>
       <Grid item>{ReactHtmlParser(schema?.htmlDescription)}</Grid>
       </Grid>
-    
+     <fieldset disabled={!enableSchema}>
     <Form
       schema={schema}
       validator={validator}
       uiSchema={uiSchema}
-      onChange={(e) => {
+      onChange={(e,id) => {
           const s = sensorMap.get(e.formData.mac_address)
-          s._changesMade=true
-          setSensorData(e.formData)
+          if(s) {
+            s._changesMade=true
+            s.config = e.formData
+            setSensorData(e.formData)
+          }
+          
+            if (id=="root_params_sensorClass") {
+              setSensorClassChanged(true)
+            }
+
         }
       }
       onSubmit={({ formData }, e) => {
         updateSensorData(formData)
-        setSchema({})
         alert("Changes saved")
       }}
       onError={log('errors')}
@@ -537,11 +531,12 @@ useEffect(()=>{
         <Button variant="contained" color="secondary" onClick={(e)=>confirmDelete(sensorData.mac_address)}>Delete</Button>
       </div>  
     </Form>
-
+      </fieldset>
    
     </div>
     </div>
   )
     
 
-  }
+  }
+  export default BTConfig