Further work on localization

2018-12-15 15:15:48 +01:00 · 2018-12-15 15:15:48 +01:00 · cb1fc5b28d
commit cb1fc5b28d
parent fa451fc8da
35 changed files with 430 additions and 2796 deletions
--- a/client/src/campaigns/Statistics.js
+++ b/client/src/campaigns/Statistics.js
@ -0,0 +1,124 @@
+'use strict';
+
+import React, {Component} from 'react';
+import PropTypes
+    from 'prop-types';
+import {withTranslation} from '../lib/i18n';
+import {
+    requiresAuthenticatedUser,
+    Title,
+    withPageHelpers
+} from '../lib/page';
+import {
+    withAsyncErrorHandler,
+    withErrorHandling
+} from '../lib/error-handling';
+import axios
+    from "../lib/axios";
+import {getUrl} from "../lib/urls";
+
+import Chart from 'react-google-charts';
+
+@withTranslation()
+@withPageHelpers
+@withErrorHandling
+@requiresAuthenticatedUser
+export default class Statistics extends Component {
+    constructor(props) {
+        super(props);
+
+        const t = props.t;
+
+        this.state = {
+            entity: props.entity
+        };
+
+        this.refreshTimeoutHandler = ::this.periodicRefreshTask;
+        this.refreshTimeoutId = 0;
+    }
+
+    static propTypes = {
+        entity: PropTypes.object
+    }
+
+    @withAsyncErrorHandler
+    async refreshEntity() {
+        let resp;
+
+        resp = await axios.get(getUrl(`rest/campaigns-stats/${this.props.entity.id}`));
+        const entity = resp.data;
+
+        this.setState({
+            entity
+        });
+    }
+
+    async periodicRefreshTask() {
+        // The periodic task runs all the time, so that we don't have to worry about starting/stopping it as a reaction to the buttons.
+        await this.refreshEntity();
+        if (this.refreshTimeoutHandler) { // For some reason the task gets rescheduled if server is restarted while the page is shown. That why we have this check here.
+            this.refreshTimeoutId = setTimeout(this.refreshTimeoutHandler, 10000);
+        }
+    }
+
+    componentDidMount() {
+        // noinspection JSIgnoredPromiseFromCall
+        this.periodicRefreshTask();
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.refreshTimeoutId);
+        this.refreshTimeoutHandler = null;
+    }
+
+
+    render() {
+        const t = this.props.t;
+        const entity = this.state.entity;
+
+
+        return (
+            <div>
+                <Title>{t('Campaign Statistics')}</Title>
+
+                <Chart
+                    width="100%"
+                    height="500px"
+                    chartType="PieChart"
+                    loader={<div>Loading Chart</div>}
+                    data={[
+                        ['Task', 'Hours per Day'],
+                        ['Work', 11],
+                        ['Eat', 2],
+                        ['Commute', 2],
+                        ['Watch TV', 2],
+                        ['Sleep', 7],
+                    ]}
+                    options={{
+                        title: 'My Daily Activities',
+                    }}
+                    rootProps={{ 'data-testid': '1' }}
+                />
+
+                <Chart
+                    width="100%"
+                    height="500px"
+                    chartType="GeoChart"
+                    data={[
+                        ['Country', 'Popularity'],
+                        ['Germany', 200],
+                        ['United States', 300],
+                        ['Brazil', 400],
+                        ['Canada', 500],
+                        ['France', 600],
+                        ['RU', 700],
+                    ]}
+                    // Note: you will need to get a mapsApiKey for your project.
+                    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
+                    mapsApiKey="YOUR_KEY_HERE"
+                    rootProps={{ 'data-testid': '1' }}
+                />
+            </div>
+        );
+    }
+}