Skip to content

T
toiletcoin
Commit 72949ed5 by OuiAtichat
Options

update

parent d36504ae
Showing with 59 additions and 49 deletions
src/Pages/Home.js
...@@ -13,36 +13,46 @@ const Data = [ ...@@ -13,36 +13,46 @@ const Data = [
{ {
title: 'Current chart', title: 'Current chart',
backgroundColor: '#51ABAD', backgroundColor: '#51ABAD',
detail: [{ smtitle: 'Total current', smValue: 0, iconType: 'money' }], detail: [{ smtitle: 'Total current', iconType: 'money' }],
}, },
{ {
title: 'Revenue chart', title: 'Revenue chart',
backgroundColor: '#51ABAD', backgroundColor: '#51ABAD',
detail: [ detail: [
{ smtitle: 'Total revenue', smValue: 0, iconType: 'money' }, { smtitle: 'Total revenue', iconType: 'money' },
{ smtitle: 'Avg. revenue', smValue: 0, iconType: 'money' }, { smtitle: 'Avg. revenue', iconType: 'money' },
{ smtitle: 'Max. Revenue', smValue: 0, iconType: 'max' }, { smtitle: 'Max. Revenue', iconType: 'max' },
{ smtitle: 'Min. Revenue', smValue: 0, iconType: 'min' }, { smtitle: 'Min. Revenue', iconType: 'min' },
], ],
}, },
{ {
title: 'People chart', title: 'People chart',
backgroundColor: '#5E73F6', backgroundColor: '#5E73F6',
detail: [ detail: [
{ smtitle: 'Total People', smValue: 0 }, { smtitle: 'Total People' },
{ smtitle: 'Avg. People', smValue: 0 }, { smtitle: 'Avg. People' },
{ smtitle: 'Max. People', smValue: 0, iconType: 'max' }, { smtitle: 'Max. People', iconType: 'max' },
{ smtitle: 'Min. People', smValue: 0, iconType: 'min' }, { smtitle: 'Min. People', iconType: 'min' },
], ],
}, },
{ {
title: 'Remote chart', title: 'Remote chart',
backgroundColor: '#5E73F6', backgroundColor: '#5E73F6',
detail: [ detail: [
{ smtitle: 'Total Remote', smValue: 0 }, { smtitle: 'Total Remote' },
{ smtitle: 'Avg. Remote', smValue: 0 }, { smtitle: 'Avg. Remote' },
{ smtitle: 'Max. Remote', smValue: 0, iconType: 'max' }, { smtitle: 'Max. Remote', iconType: 'max' },
{ smtitle: 'Min. Remote', smValue: 0, iconType: 'min' }, { smtitle: 'Min. Remote', iconType: 'min' },
],
},
{
title: 'Fingerprint chart',
backgroundColor: '#5E73F6',
detail: [
{ smtitle: 'Total Fingerprint' },
{ smtitle: 'Avg. Fingerprint' },
{ smtitle: 'Max. Fingerprint', iconType: 'max' },
{ smtitle: 'Min. Fingerprint', iconType: 'min' },
], ],
}, },
{ {
...@@ -106,11 +116,17 @@ class Home extends Component { ...@@ -106,11 +116,17 @@ class Home extends Component {
table: null, table: null,
}; };
async componentDidMount() { componentDidMount = async () => {
await this.getConfig(); await this.getConfig();
await this.getCurrentUser(); await this.getCurrentUser();
this.getAllDevicesInfo(); this.getAllDevicesInfo();
} };
componentDidUpdate = async (prevProps, prevState) => {
if (prevState.allDevicesId !== this.state.allDevicesId) {
await this.getFeedData();
}
};
getConfig = async () => { getConfig = async () => {
const configData = await db.collection('config').get(); const configData = await db.collection('config').get();
...@@ -133,15 +149,12 @@ class Home extends Component { ...@@ -133,15 +149,12 @@ class Home extends Component {
getAllDevicesInfo = async () => { getAllDevicesInfo = async () => {
const { currentUid } = this.state; const { currentUid } = this.state;
// console.log('currentUid');
// console.log(currentUid);
const DevicesId = await db const DevicesId = await db
.collection('membership') .collection('membership')
.doc(currentUid) .doc(currentUid)
.get(); .get();
let allDevicesId = Object.keys(DevicesId.data()); let allDevicesId = Object.keys(DevicesId.data());
// console.log(allDevicesId);
let allDeviceInfo = []; let allDeviceInfo = [];
for (let i = 0, len = allDevicesId.length; i < len; i++) { for (let i = 0, len = allDevicesId.length; i < len; i++) {
...@@ -157,7 +170,16 @@ class Home extends Component { ...@@ -157,7 +170,16 @@ class Home extends Component {
this.setState({ allDevicesId }); this.setState({ allDevicesId });
}; };
getFeedData = async (deviceId, selectedRange, breakdown) => { getFeedData = async (
deviceId,
selectedRange = {
startDate: moment()
.subtract(1, 'days')
.valueOf(),
endDate: moment().valueOf(),
},
breakdown = 'minutes'
) => {
const { kairosUrl, userToken } = this.state; const { kairosUrl, userToken } = this.state;
const { startDate, endDate } = selectedRange; const { startDate, endDate } = selectedRange;
const now = moment().valueOf(); const now = moment().valueOf();
...@@ -166,7 +188,7 @@ class Home extends Component { ...@@ -166,7 +188,7 @@ class Home extends Component {
end_absolute: endDate || now, end_absolute: endDate || now,
metrics: [ metrics: [
{ {
name: deviceId, name: deviceId || this.state.allDevicesId[0],
group_by: [ group_by: [
{ {
name: 'tag', name: 'tag',
...@@ -240,9 +262,8 @@ class Home extends Component { ...@@ -240,9 +262,8 @@ class Home extends Component {
} }
}; };
getSelectedFeed = selectedFeed => { getSelectedFeed = ({ device, range, breakdown }) => {
const { device, range, breakdown } = selectedFeed; this.getFeedData(device, range, breakdown);
this.getFeedData(device || this.state.allDevicesId[0], range, breakdown);
}; };
getMax = data => { getMax = data => {
......
src/components/DataCard.js
...@@ -41,7 +41,6 @@ const DataCard = props => { ...@@ -41,7 +41,6 @@ const DataCard = props => {
xAxis: moment(value[0]).format('D/M/YY H:mm'), xAxis: moment(value[0]).format('D/M/YY H:mm'),
yAxis: value[1], yAxis: value[1],
})); }));
console.log(dataObj);
} }
return ( return (
......
src/components/DataTable.js
...@@ -13,22 +13,24 @@ export default class DataTable extends React.PureComponent { ...@@ -13,22 +13,24 @@ export default class DataTable extends React.PureComponent {
handlePageClick = data => { handlePageClick = data => {
let selected = data.selected + 1; let selected = data.selected + 1;
this.setState({ activePage: selected }); this.setState({ activePage: selected });
}; };
render() {
const { data, activePage, itemsPerPage } = this.state;
const lastIndex = activePage * itemsPerPage;
const firstIndex = lastIndex - itemsPerPage;
const currentItem = data.slice(firstIndex, lastIndex);
const totalPage = Math.ceil(data.length / itemsPerPage);
componentDidUpdate = () => {
if (this.props.table) { if (this.props.table) {
let data1 = this.props.table; let data1 = this.props.table;
this.setState({ this.setState({
data: data1, data: data1,
}); });
} }
};
render() {
const { data, activePage, itemsPerPage } = this.state;
const lastIndex = activePage * itemsPerPage;
const firstIndex = lastIndex - itemsPerPage;
const currentItem = data.slice(firstIndex, lastIndex);
const totalPage = Math.ceil(data.length / itemsPerPage);
const renderItem = currentItem.map((item, index) => { const renderItem = currentItem.map((item, index) => {
return ( return (
......
src/components/GetDataSelection/DateRangeSeletion.js
...@@ -26,9 +26,6 @@ class PredefinedRanges extends Component { ...@@ -26,9 +26,6 @@ class PredefinedRanges extends Component {
}, },
}; };
// handleEvent = (event, picker) => {
// };
handleApply = (event, picker) => { handleApply = (event, picker) => {
this.setState({ this.setState({
startDate: picker.startDate, startDate: picker.startDate,
...@@ -40,9 +37,6 @@ class PredefinedRanges extends Component { ...@@ -40,9 +37,6 @@ class PredefinedRanges extends Component {
startDate: this.state.startDate.valueOf(), startDate: this.state.startDate.valueOf(),
endDate: this.state.endDate.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() {
......
src/components/GetDataSelection/GetDataSelection.js
...@@ -15,8 +15,7 @@ class GetDataSelection extends PureComponent { ...@@ -15,8 +15,7 @@ class GetDataSelection extends PureComponent {
breakdown: 'minutes', breakdown: 'minutes',
}; };
handleClickGo = e => { handleClickGo = () => {
console.log(this.state)
this.props.onConfirm && this.props.onConfirm(this.state); this.props.onConfirm && this.props.onConfirm(this.state);
}; };
...@@ -24,16 +23,8 @@ class GetDataSelection extends PureComponent { ...@@ -24,16 +23,8 @@ class GetDataSelection extends PureComponent {
this.setState({ range: selectedRange }); this.setState({ range: selectedRange });
}; };
componentDidMount = () =>{
}
render() { render() {
let { allDevicesId, allDeviceInfo } = this.props; let { allDevicesId, allDeviceInfo } = this.props;
if (allDevicesId) {
this.setState({ device: allDevicesId[0]})
this.props.onConfirm && this.props.onConfirm(this.state);
}
return ( return (
<Col> <Col>
...@@ -44,8 +35,6 @@ class GetDataSelection extends PureComponent { ...@@ -44,8 +35,6 @@ class GetDataSelection extends PureComponent {
as="select" as="select"
defaultValue={this.state.device} defaultValue={this.state.device}
onChange={e => { onChange={e => {
console.log("e.target.value")
console.log(e.target.value)
this.setState({ device: e.target.value }); this.setState({ device: e.target.value });
}} }}
> >
......
src/styles.scss
...@@ -9,8 +9,13 @@ body { ...@@ -9,8 +9,13 @@ body {
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
} }
.pagination { .pagination {
justify-content: center;
border-radius: 5px; border-radius: 5px;
margin-top: 10px; margin-top: 10px;
li,
a {
cursor: pointer;
}
} }
// .myStyleGutters { // .myStyleGutters {
// > .col, // > .col,
......
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