43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
import { Component, h } from "preact";
|
|
import { useEffect, useState } from "preact/hooks";
|
|
import * as style from "./style.css";
|
|
|
|
export interface DatasetProps {
|
|
name: string,
|
|
}
|
|
|
|
export interface Datapoint {
|
|
id: number,
|
|
devicename: string,
|
|
value: number,
|
|
timestamp: string,
|
|
}
|
|
|
|
export interface DatasetState {
|
|
data: Datapoint[],
|
|
}
|
|
|
|
class Dataset extends Component<DatasetProps, DatasetState> {
|
|
constructor(){
|
|
super();
|
|
this.state = { data: [] };
|
|
}
|
|
|
|
async componentDidMount() {
|
|
var devicesResponse = await fetch(`/api/device/${this.props.name}`);
|
|
this.setState({ data: await devicesResponse.json() as Datapoint[] })
|
|
}
|
|
|
|
// Lifecycle: Called just before our component will be destroyed
|
|
componentWillUnmount() {
|
|
// stop when not renderable
|
|
}
|
|
|
|
render() {
|
|
var deviceLinks = this.state.data.map((d) => <div>{d.devicename},{d.value},{d.timestamp}</div>)
|
|
return <div class={style.profile}>{this.props.name}<span>{deviceLinks}</span></div>;
|
|
}
|
|
}
|
|
|
|
export default Dataset;
|