Skip to content

T
toiletcoin
Commit 82ea8c4e by OuiAtichat
Options

api feed

parent 3b2fa26c
Showing with 159 additions and 110 deletions
src/Pages/Home.js
...@@ -7,7 +7,6 @@ import DataCard from '../components/DataCard'; ...@@ -7,7 +7,6 @@ import DataCard from '../components/DataCard';
import GetDataSelection from '../components/GetDataSelection/GetDataSelection'; import GetDataSelection from '../components/GetDataSelection/GetDataSelection';
import Mapbox from '../components/Mapbox'; import Mapbox from '../components/Mapbox';
import axios from 'axios'; import axios from 'axios';
import qs from 'qs';
import moment from 'moment'; import moment from 'moment';
const Data = [ const Data = [
...@@ -70,108 +69,113 @@ const Data = [ ...@@ -70,108 +69,113 @@ const Data = [
class Home extends Component { class Home extends Component {
state = { state = {
userToken: null,
kairosUrl: null,
currentUser: null, currentUser: null,
feedData: null, feedData: null,
}; };
componentDidMount() { // constructor(props) {
// super(props);
// // Don't call this.setState() here!
// this.state = { userToken: null, kairosUrl: null, currentUser: null, feedData: null };
// }
async componentDidMount() {
await this.getFireStoreData();
this.getCurrentUser(); this.getCurrentUser();
this.getFeedData(); // await this.getFeedData();
// this.getFireStoreData();
this.currentWeight();
} }
getFireStoreData = async () => {
const configData = await db.collection('config').get();
//get all data from collection 'config'
configData.forEach(doc => {
this.setState({
kairosUrl: doc.data().kairosUrl,
userToken: doc.data().userToken,
});
});
};
getCurrentUser = async () => { getCurrentUser = async () => {
const { displayName, email } = await app.auth().currentUser; const { displayName, email } = await app.auth().currentUser;
this.setState({ currentUser: displayName || email }); this.setState({ currentUser: displayName || email });
}; };
// getFireStoreData = () => { // getFeedData = async () => {
// db.collection('user') // const response = await axios.get(
// .get() // 'https://api.nexpie.io/feed/metric/11add2ec-89e7-4985-8525-b0421896b7a2?token=eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJjdHgiOnsib3duZXIiOiJVNDMwMDQ1Mzc3ODY2In0sInNjb3BlIjpbXSwiaWF0IjoxNTU3MjIzOTQwLCJuYmYiOjE1NTcyMjM5NDAsImV4cCI6MTYyMDMzOTE0MCwiZXhwaXJlSW4iOjYzMTE1MjAwLCJqdGkiOiJua1NKcHMyMSIsImlzcyI6ImNlcjp1c2VydG9rZW4ifQ.1I2m6qdNxPzicYNRuKrFOp-Jn9DaSfV0pdAyDtjD7-BOZzRmsqBeIUWxmE24MQWIFlGXuDXq0tLxvBtiEdySBA&starttime=1564938060076&endtime=1565024340076'
// .then(querySnapshot => { // );
// querySnapshot.forEach(doc => { // this.setState({ feedData: response.data.metrics[0].value });
// console.log(`${doc.id} => ${doc.data()}`);
// });
// });
// }; // };
getFeedData = async () => { // queryGenerator = (device_id, selectedRange) => {
const response = await axios.get( // // let now = endtime ? endtime : new Date().getTime();
'https://api.nexpie.io/feed/metric/11add2ec-89e7-4985-8525-b0421896b7a2?token=eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJjdHgiOnsib3duZXIiOiJVNDMwMDQ1Mzc3ODY2In0sInNjb3BlIjpbXSwiaWF0IjoxNTU3MjIzOTQwLCJuYmYiOjE1NTcyMjM5NDAsImV4cCI6MTYyMDMzOTE0MCwiZXhwaXJlSW4iOjYzMTE1MjAwLCJqdGkiOiJua1NKcHMyMSIsImlzcyI6ImNlcjp1c2VydG9rZW4ifQ.1I2m6qdNxPzicYNRuKrFOp-Jn9DaSfV0pdAyDtjD7-BOZzRmsqBeIUWxmE24MQWIFlGXuDXq0tLxvBtiEdySBA&starttime=1564938060076&endtime=1565024340076' // // console.log(now);
); // // console.log(moment().valueOf());
this.setState({ feedData: response.data.metrics[0].value }); // // const { startDate, endDate } = selectedRange;
}; // // console.log(startDate, endDate);
// let q_data = ;
// return q_data;
// };
currentWeight = async (ctx = '', traceback = '1y') => { getFeedData = async (
// let device_id = ctx.device_id; deviceId,
const query_generator = (device_id, range, endtime) => { selectedRange = { startDate: moment().valueOf(), endDate: moment().valueOf() },
// var mls = ms('1s'); breakdown
let now = endtime ? endtime : new Date().getTime(); ) => {
let q_data = { const { kairosUrl, userToken } = this.state;
start_absolute: now - (60 * 60 * 24 * 1000 * 30), const { startDate, endDate } = selectedRange;
end_absolute: now,
metrics: [ // let q_data = this.queryGenerator(deviceId, selectedRange);
{ // let now = new Date().getTime();
name: device_id, let q_data = {
group_by: [ start_absolute: startDate,
{ end_absolute: endDate,
name: 'tag', metrics: [
tags: ['attr'], {
}, name: deviceId,
], group_by: [
tags: { {
// attr: ['a12'], name: 'tag',
tags: ['attr'],
}, },
aggregators: [ ],
{ tags: {
name: 'avg', // attr: ['a12'],
sampling: {
value: 1000,
unit: 'milliseconds',
},
},
],
}, },
], aggregators: [
}; {
return q_data; name: 'avg',
sampling: {
value: 1000,
unit: 'milliseconds',
},
},
],
},
],
}; };
let device_id = '3d2951a5-fa10-4d56-abae-bc471f3d2e1f';
// let q_data = qs.stringify({ device_id, traceback });
let q_data = query_generator(device_id, traceback);
console.log(q_data); console.log(q_data);
const userToken =
'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJjdHgiOnsib3duZXIiOiJVNDY0NzAxMzI2MjYwIn0sInNjb3BlIjpbXSwiaWF0IjoxNTY0OTc3MTY4LCJuYmYiOjE1NjQ5NzcxNjgsImV4cCI6MTYyODE0NDg5MSwiZXhwaXJlSW4iOjYzMTY3NzIzLCJqdGkiOiI3QzRNNUY1VyIsImlzcyI6ImNlcjp1c2VydG9rZW4ifQ.B0zXLSlsUucj4ohvH4lNVectCAt4hk--qMPEv-qhCUu82puCnNMsK2ZnnPeO_KE3up-vqVsjMVxLQ2jvmuspNg';
const kairos_url = 'https://feed.nexpie.io/api/v1/datapoints/query';
// const options = {
// url: kairos_url,
// medthod: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// // Authorization: 'Bearer ' + userToken,
// },
// data: q_data,
// // data: q_data,
// auth: {
// username: userToken,
// password: '',
// },
// };
try {
const response = await axios.post(kairos_url, q_data);
// const response = await axios(options);
try {
const response = await axios.post(kairosUrl, q_data);
console.log(response); console.log(response);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
}; };
handleConfirm = selectedFeed => {
console.log(selectedFeed);
const { device, range, breakdown } = selectedFeed;
this.getFeedData(device, range, breakdown);
};
render() { render() {
const { currentUser, feedData } = this.state; const { currentUser, feedData } = this.state;
...@@ -180,7 +184,7 @@ class Home extends Component { ...@@ -180,7 +184,7 @@ class Home extends Component {
<NavBar user={currentUser} /> <NavBar user={currentUser} />
<Container style={{ padding: '30px', maxWidth: '990px' }}> <Container style={{ padding: '30px', maxWidth: '990px' }}>
<Row> <Row>
<GetDataSelection /> <GetDataSelection onConfirm={this.handleConfirm} />
</Row> </Row>
<Row> <Row>
<Mapbox /> <Mapbox />
......
src/components/GetDataSelection/DateRangeSeletion.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import DateRangePicker from 'react-bootstrap-daterangepicker'; import DateRangePicker from 'react-bootstrap-daterangepicker';
import moment from 'moment'; import moment from 'moment';
import { FaRegCalendarAlt } from 'react-icons/fa'; import { FaRegCalendarAlt } from 'react-icons/fa';
import { InputGroup, FormControl } from 'react-bootstrap'; import { InputGroup, FormControl } from 'react-bootstrap';
...@@ -27,11 +26,24 @@ class PredefinedRanges extends Component { ...@@ -27,11 +26,24 @@ class PredefinedRanges extends Component {
}, },
}; };
handleEvent = (event, picker) => { // handleEvent = (event, picker) => {
// };
handleApply = (event, picker) => {
this.setState({ this.setState({
startDate: picker.startDate, startDate: picker.startDate,
endDate: picker.endDate, endDate: picker.endDate,
}); });
this.props.selectedRange &&
this.props.selectedRange({
startDate: this.state.startDate.valueOf(),
endDate: this.state.endDate.valueOf(),
});
// console.log(picker.startDate.format('DD MMM YY HH:MM:SS'));
// console.log(picker.endDate.format('DD MMM YY HH:MM:SS'));
}; };
render() { render() {
...@@ -48,7 +60,8 @@ class PredefinedRanges extends Component { ...@@ -48,7 +60,8 @@ class PredefinedRanges extends Component {
startDate={this.state.startDate} startDate={this.state.startDate}
endDate={this.state.endDate} endDate={this.state.endDate}
ranges={this.state.ranges} ranges={this.state.ranges}
onEvent={this.handleEvent} onApply={this.handleApply}
// onEvent={this.handleEvent}
> >
<InputGroup> <InputGroup>
<InputGroup.Append> <InputGroup.Append>
......
src/components/GetDataSelection/GetDataSelection.js
import React from 'react'; import React, { Component } from 'react';
import { Col, Form, Button } from 'react-bootstrap'; import { Col, Form, Button } from 'react-bootstrap';
import DateRangeSeletion from './DateRangeSeletion'; import DateRangeSeletion from './DateRangeSeletion';
const GetDataSelection = () => { class GetDataSelection extends Component {
return ( state = {
<Col> device: '',
<Form.Label>Get data from</Form.Label> range: [],
<Form.Row> breakdown: 'minute',
<Col md> };
<Form.Control as="select">
<option>Choose...</option> handleClickGo = e => {
<option>...</option> this.props.onConfirm && this.props.onConfirm(this.state);
</Form.Control> };
</Col>
<Col md> handleSelectedRange = selectedRange => {
<DateRangeSeletion /> this.setState({ range: selectedRange });
</Col> };
<Col md={3}>
<Form.Control as="select"> render() {
<option>Choose...</option> return (
<option>...</option> <Col>
</Form.Control> <Form.Label>Get data from</Form.Label>
</Col> <Form.Row>
<Col md={1}> <Col md>
<Button block variant="success"> <Form.Control
Go as="select"
</Button> onChange={e => {
</Col> console.log(e.target.value);
</Form.Row> this.setState({ device: e.target.value });
</Col> }}
); >
}; <option value="">Choose...</option>
<option>3d2951a5-fa10-4d56-abae-bc471f3d2e1f</option>
<option>3d2951a5-fa10-4d56-abae-bc471f3d2e12</option>
</Form.Control>
</Col>
<Col md>
<DateRangeSeletion selectedRange={this.handleSelectedRange} />
</Col>
<Col md={3}>
<Form.Control
as="select"
onChange={e => {
console.log(e.target.value);
this.setState({ breakdown: e.target.value });
}}
>
<option value="minute">Breakdown by minute</option>
<option value="hour">Breakdown by hour</option>
<option value="day">Breakdown by day</option>
<option value="week">Breakdown by week</option>
<option value="month">Breakdown by month</option>
</Form.Control>
</Col>
<Col md={1}>
<Button block variant="success" onClick={this.handleClickGo}>
Go
</Button>
</Col>
</Form.Row>
</Col>
);
}
}
export default GetDataSelection; export default GetDataSelection;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment