2016-11-26 14:39:29 +00:00
|
|
|
'use strict';
|
|
|
|
|
2018-05-03 08:54:22 +00:00
|
|
|
import { h, Component } from 'preact';
|
2016-12-05 20:55:25 +00:00
|
|
|
import * as numbers from '../lib/numbers.js';
|
2016-12-08 11:27:19 +00:00
|
|
|
import Client from '../lib/client.js';
|
2018-05-01 14:06:17 +00:00
|
|
|
import { bind } from 'decko';
|
|
|
|
|
|
|
|
function getSundayOfCurrentWeek(d){
|
|
|
|
var day = d.getDay();
|
|
|
|
return new Date(d.getFullYear(), d.getMonth(), d.getDate() + (day == 0?0:7)-day );
|
|
|
|
}
|
|
|
|
|
2016-11-26 16:40:37 +00:00
|
|
|
const dayInSeconds = 60 * 60 * 24;
|
2016-11-26 14:39:29 +00:00
|
|
|
|
|
|
|
class CountWidget extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props)
|
|
|
|
|
|
|
|
this.state = {
|
2018-05-01 14:06:17 +00:00
|
|
|
value: '-',
|
2018-05-01 17:45:52 +00:00
|
|
|
loading: false,
|
|
|
|
before: props.before,
|
|
|
|
after: props.after,
|
2016-11-26 14:39:29 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-05-01 17:45:52 +00:00
|
|
|
componentDidMount() {
|
|
|
|
this.fetchData();
|
2016-11-26 14:39:29 +00:00
|
|
|
}
|
|
|
|
|
2018-05-01 17:45:52 +00:00
|
|
|
componentWillReceiveProps(newProps, prevState) {
|
2018-05-02 12:52:52 +00:00
|
|
|
if(newProps.before == prevState.before && newProps.after == prevState.after) {
|
|
|
|
return;
|
|
|
|
}
|
2018-05-01 14:06:17 +00:00
|
|
|
|
2018-05-02 12:52:52 +00:00
|
|
|
this.setState({
|
|
|
|
before: newProps.before,
|
|
|
|
after: newProps.after,
|
2018-05-04 09:05:55 +00:00
|
|
|
value: '-',
|
2018-05-02 12:52:52 +00:00
|
|
|
});
|
|
|
|
this.fetchData();
|
2018-05-01 17:45:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@bind
|
|
|
|
fetchData() {
|
2016-12-10 17:19:44 +00:00
|
|
|
this.setState({ loading: true })
|
2018-05-04 09:05:55 +00:00
|
|
|
let before = this.state.before;
|
|
|
|
let after = this.state.after;
|
2016-11-26 16:40:37 +00:00
|
|
|
|
2018-05-04 09:05:55 +00:00
|
|
|
Client.request(`${this.props.endpoint}/count?before=${before}&after=${after}`)
|
2018-05-01 14:06:17 +00:00
|
|
|
.then((d) => {
|
2018-05-04 09:05:55 +00:00
|
|
|
// request finished; check if timestamp range is still the one user wants to see
|
|
|
|
if( this.state.before != before || this.state.after != after ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2018-05-01 14:06:17 +00:00
|
|
|
this.setState({
|
|
|
|
loading: false,
|
|
|
|
value: numbers.formatWithComma(d),
|
|
|
|
})
|
|
|
|
})
|
2016-11-26 16:40:37 +00:00
|
|
|
}
|
2016-11-26 14:39:29 +00:00
|
|
|
|
2018-05-01 14:06:17 +00:00
|
|
|
render(props, state) {
|
2016-11-26 16:40:37 +00:00
|
|
|
return (
|
2018-05-04 09:05:55 +00:00
|
|
|
<div class={"totals-detail " + ( state.loading ? "loading" : '')}>
|
2018-05-01 14:06:17 +00:00
|
|
|
<div class="total-heading">{props.title}</div>
|
|
|
|
<div class="total-numbers">{state.value}</div>
|
2016-11-26 14:39:29 +00:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default CountWidget
|