-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Firmware: -- Expanded SmartHome library -- Added new websocket fucntions to main - Webapp: -- Changed ws tester page -- Added DeviceBox component to tester page
- Loading branch information
1 parent
3930497
commit d4679e7
Showing
7 changed files
with
553 additions
and
174 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,182 @@ | ||
"use client" | ||
|
||
import React, { useState, useEffect } from "react" | ||
import setDeviceData from "@/lib/setDeviceData" | ||
import axios from "axios" | ||
|
||
/* | ||
got device prop: | ||
{ | ||
"DID": "05b31779-14ee-4233-8c9a-2749e81d3ccb", | ||
"DN": "Thermostat", | ||
"DD": "temperature-n-0-100-34--humidity-n-0-100-61--state-b-0-0-0--", | ||
"UID": "80ff2b60-bf4b-42fe-8de4-d21734a393c8" | ||
} | ||
properties: | ||
[ | ||
"temperature-n-0-100-34", | ||
"humidity-n-0-100-61", | ||
"state-b-0-0-0", | ||
"" | ||
] | ||
*/ | ||
|
||
function parseDeviceDataString(deviceDataString) { | ||
const properties = deviceDataString | ||
.split("--") | ||
.filter((property) => property) | ||
|
||
let deviceData = {} | ||
properties.forEach((property) => { | ||
const [name, type, min, max, value] = property.split("-") | ||
let v | ||
if (type === "b") { | ||
if (value === "0" || value.toLowerCase() === "false") { | ||
v = false | ||
} else if (value === "1" || value.toLowerCase() === "true") { | ||
v = true | ||
} | ||
} else if (type === "n") { | ||
v = Number(value) | ||
} | ||
|
||
deviceData[name] = { | ||
type, | ||
min: Number(min), | ||
max: Number(max), | ||
value: v, | ||
} | ||
}) | ||
return deviceData | ||
} | ||
|
||
function stringifyDeviceData(deviceData) { | ||
let properties = [] | ||
Object.keys(deviceData).forEach((name) => { | ||
let { type, min, max, value } = deviceData[name] | ||
let propertyString = [name, type, min, max, value].join("-") | ||
properties.push(propertyString) | ||
}) | ||
return properties.join("--") | ||
} | ||
|
||
export default function DeviceBox({ device, onDeviceChange }) { | ||
const [values, setValues] = useState(parseDeviceDataString(device.DD)) | ||
|
||
useEffect(() => { | ||
const initialValues = parseDeviceDataString(device.DD) | ||
setValues(initialValues) | ||
console.log("Initial Values:", initialValues) | ||
}, [device.dd]) | ||
|
||
useEffect(() => { | ||
const updateDeviceData = async () => { | ||
const deviceDataString = stringifyDeviceData(values) | ||
try { | ||
const response = await axios.put( | ||
`${process.env.API_SERVER_NAME}/api/devices/deviceDID`, | ||
{ | ||
did: device.did, | ||
dd: deviceDataString + "--", | ||
} | ||
) | ||
console.log("Data fetched... ", response) | ||
// Notify the parent component that the device data has been updated | ||
if (onDeviceChange) { | ||
onDeviceChange(device.did) | ||
} | ||
} catch (error) { | ||
console.log("ERROR - ", error) | ||
setValues(parseDeviceDataString(device.dd)) | ||
alert("Failed to update device data") | ||
} | ||
} | ||
|
||
updateDeviceData() | ||
}, [values]) | ||
|
||
// Updating the values object | ||
const handleInputChange = (variableName, variableNewValue) => { | ||
setValues((prevValues) => ({ | ||
...prevValues, | ||
[variableName]: { | ||
...prevValues[variableName], | ||
value: variableNewValue, | ||
}, | ||
})) | ||
} | ||
|
||
// Rendering out the corresponding component based on the variable type | ||
const renderComponents = (name, type, min, max, value) => { | ||
switch (type) { | ||
case "n": | ||
return ( | ||
<div key={name} className="mb-4"> | ||
<label className="text-sm font-medium">{name}</label> | ||
<input | ||
type="number" | ||
name={name} | ||
value={values[name].value || ""} | ||
min={min} | ||
max={max} | ||
disabled={name === "battery"} | ||
onChange={(e) => | ||
handleInputChange(name, e.target.value) | ||
} | ||
className="border p-2 rounded-md w-full" | ||
/> | ||
</div> | ||
) | ||
case "b": | ||
return ( | ||
<div key={name} className="mb-4"> | ||
<h1 className="text-sm font-medium"> | ||
{values[name].value} | ||
</h1> | ||
<label className="text-sm font-medium m-4"> | ||
{name} | ||
</label> | ||
{values[name].value ? ( | ||
<button | ||
className="text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 focus:outline-none dark:focus:ring-green-800" | ||
onClick={() => | ||
handleInputChange(name, !values[name].value) | ||
} | ||
> | ||
{name} | ||
</button> | ||
) : ( | ||
<button | ||
className="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none dark:focus:ring-red-800" | ||
onClick={() => | ||
handleInputChange(name, !values[name].value) | ||
} | ||
> | ||
{name} | ||
</button> | ||
)} | ||
</div> | ||
) | ||
default: | ||
return null | ||
} | ||
} | ||
|
||
return ( | ||
<div className="m-6 p-6 bg-white border border-gray-200 rounded-lg shadow-lg"> | ||
<h2 className="pb-8 text-2xl font-bold tracking-tight text-gray-900"> | ||
{device.DN} | ||
</h2> | ||
<div className="grid grid-cols-2 gap-8 justify-start"> | ||
{device.DD.split("--").map((item) => { | ||
if (item) { | ||
const [name, type, min, max, value] = item.split("-") | ||
return renderComponents(name, type, min, max, value) | ||
} | ||
return null | ||
})} | ||
</div> | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.