Merge pull request #33 from copios-jp/master

Completed Reporting
copios-jp · Jan 22, 2019 · 3d2cd7f · 3d2cd7f
2 parents 8c52ed3 + 3329aad
commit 3d2cd7f
Show file tree

Hide file tree

Showing 19 changed files with 168 additions and 230 deletions.
diff --git a/app/renderer/components/SensorsView.jsx b/app/renderer/components/SensorsView.jsx
@@ -2,7 +2,7 @@ import { ipcRenderer } from 'electron'
 import * as React from 'react'
 import { Component } from 'react'
 import { withStyles } from '@material-ui/core/styles'
-import { CircularProgress } from '@material-ui/core'
+
 import TopBar from './top_bar/'
 import SensorList from './SensorList'
 import StatusBar from './status_bar/'
@@ -34,17 +34,9 @@ export class SensorsView extends Component {
 
   render() {
     const { classes } = this.props
-    const { isActive, isLoading } = this.state
+    const { isActive } = this.state
     return (
       <div className={classes.wrapper}>
-        {//  For future version - show loader until transmitter received
-        // TODO - extrac this into its own component that shows when
-        // receiver is > 0 and transmitter is  < 1
-        isLoading && (
-          <div className={classes.loaderWrapper}>
-            <CircularProgress size={90} className={classes.loader} />
-          </div>
-        )}
         <TopBar isActive={isActive} toggle={this.toggleActivation} />
         <SensorList />
         <StatusBar />

diff --git a/app/renderer/components/sensor/body/index.jsx b/app/renderer/components/sensor/body/index.jsx
@@ -4,17 +4,13 @@ import { Component } from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import styles from '../../../styles/'
 import { getZone, getPercentageOfMax } from '../../../../services/analytics/'
+import { constrainedUpdate } from '../shared/'
 
 export class Body extends Component {
   shouldComponentUpdate(nextProps) {
     const nextSensor = nextProps.sensor
     const { sensor } = this.props
-
-    return (
-      nextSensor.rate !== sensor.rate ||
-      nextSensor.method !== sensor.method ||
-      nextSensor.max !== sensor.max
-    )
+    return constrainedUpdate(sensor, nextSensor, ['max', 'method', 'rate'])
   }
 
   render() {

diff --git a/app/renderer/components/sensor/footer/index.jsx b/app/renderer/components/sensor/footer/index.jsx
@@ -15,7 +15,7 @@ export class Footer extends Component {
   render() {
     const { classes, sensor } = this.props
     return (
-      <div className={classes.cardFooter}>
+      <div className={classes.cardBar}>
         <Rate rate={sensor.rate} />
       </div>
     )

diff --git a/app/renderer/components/sensor/footer/rate.jsx b/app/renderer/components/sensor/footer/rate.jsx
@@ -14,7 +14,7 @@ export class Rate extends Component {
     const { classes, rate } = this.props
     return (
       <span className={classes.cardRate}>
-        <Favorite fontSize="small" />
+        <Favorite fontSize="small" className={classes.cardRateIcon} />
         {rate}
       </span>
     )

diff --git a/app/renderer/components/sensor/header/index.jsx b/app/renderer/components/sensor/header/index.jsx
@@ -8,24 +8,19 @@ import StopWatch from '../../stop_watch/'
 import RecordButton from './record_button'
 import HistoryButton from './history_button'
 import { getZone } from '../../../../services/analytics/'
+import { constrainedUpdate } from '../shared/'
 
 export class Header extends Component {
   shouldComponentUpdate(nextProps) {
     const nextSensor = nextProps.sensor
     const { sensor } = this.props
-
-    return (
-      nextSensor.name !== sensor.name ||
-      nextSensor.active !== sensor.active ||
-      nextSensor.recording !== sensor.recording ||
-      getZone(nextSensor) !== getZone(sensor)
-    )
+    return constrainedUpdate(sensor, nextSensor, ['name', 'active', 'recording', getZone])
   }
 
   render() {
     const { classes, sensor } = this.props
     return (
-      <div className={classes.cardHeader}>
+      <div className={classes.cardBar}>
         <ActivityIndicator fontSize="small" active={sensor.active} />
         <div className={classes.cardName}>{sensor.name}&nbsp;</div>
 

diff --git a/app/renderer/components/sensor/report/charts/time_in_zone/index.jsx b/app/renderer/components/sensor/report/charts/time_in_zone/index.jsx
@@ -1,15 +1,14 @@
 import React, { Component } from 'react'
+import { FlexibleXYPlot, XAxis, YAxis, VerticalBarSeries, LabelSeries } from 'react-vis'
 import { withStyles } from '@material-ui/core/styles'
 
 import { formatSeconds } from '../../../../../helpers/time_formatter'
-import { FlexibleXYPlot, XAxis, YAxis, VerticalBarSeries, LabelSeries } from 'react-vis'
-
 import styles from '../../../../../styles/'
 
-const colors = ['#000', '#0d47a1', '#1b5e20', '#f57f17', '#e65100', '#b71c1c']
-const labels = ['休憩', '回復', '脂肪燃焼', '持久力向上', '筋肉向上', '瞬発力向上']
+export const colors = ['#000', '#0d47a1', '#1b5e20', '#f57f17', '#e65100', '#b71c1c']
+export const labels = ['休憩', '回復', '脂肪燃焼', '持久力向上', '筋肉向上', '瞬発力向上']
 
-function seriesData({ zones = [] }) {
+export const seriesData = ({ zones = [] }) => {
   return zones.map((zone, index) => {
     return {
       x: labels[index],
@@ -19,6 +18,16 @@ function seriesData({ zones = [] }) {
   })
 }
 
+export const labelData = ({ zones = [] }) => {
+  return zones.map((zone, index) => ({
+    x: labels[index],
+    y: zone,
+    style: { fill: '#6b6b76' },
+    yOffset: -2,
+    label: zone ? formatSeconds(zone, 14, 5) : '',
+  }))
+}
+
 class TimeInZoneChart extends Component {
   render() {
     const { zones, classes } = this.props
@@ -32,17 +41,11 @@ class TimeInZoneChart extends Component {
           colorType="literal">
           <YAxis tickFormat={(t) => formatSeconds(t, 14, 5)} />
           <XAxis tickLabelAngle={-45} />
-          <VerticalBarSeries data={seriesData({ zones })} />
+          <VerticalBarSeries data={seriesData(this.props)} />
           <LabelSeries
             labelAnchorX="middle"
             labelAnchorY="before-edge"
-            data={zones.map((zone, index) => ({
-              x: labels[index],
-              y: zone,
-              style: { fill: '#6b6b76' },
-              yOffset: -2,
-              label: zone ? formatSeconds(zone, 14, 5) : '',
-            }))}
+            data={labelData(this.props)}
           />
         </FlexibleXYPlot>
       </div>

diff --git a/app/renderer/components/sensor/report/index.jsx b/app/renderer/components/sensor/report/index.jsx
@@ -1,14 +1,7 @@
 import { ipcRenderer } from 'electron'
 
 import React, { Component } from 'react'
-import {
-  Typography,
-  Button,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-} from '@material-ui/core'
+import { Button, Dialog, DialogTitle, DialogContent, DialogActions } from '@material-ui/core'
 import { Print } from '@material-ui/icons'
 import styles from '../../../styles'
 import { formatDateTime } from '../../../helpers/time_formatter'
@@ -23,34 +16,8 @@ import TimeInZoneSection from './sections/time_in_zone/'
 import HeartRateSection from './sections/heart_rate/'
 import MemoSection from './sections/memo/'
 import ProgrammingSection from './sections/program/'
+import { TitledRow } from './shared/'
 
-export const TitledRow = withStyles(styles)(
-  ({ classes, title, text, inline = false, color = 'inherit' }) => (
-    <div
-      className={classes.reportRow}
-      style={{ textAlign: 'left', display: inline ? 'flex' : 'block' }}>
-      <Typography color={color} variant="body1" className={classes.titledRowTitle}>
-        {title}
-      </Typography>
-      <Typography color={color} variant="body1" className={classes.titledRowText}>
-        {' '}
-        {text}{' '}
-      </Typography>
-    </div>
-  ),
-)
-
-export const DataGroup = withStyles(styles)(({ classes, icon, header, data, width = '32%' }) => (
-  <div className={classes.reportDataGroup} style={{ width: width }}>
-    <div className={classes.reportDataGroupHeader}>
-      {icon}
-      <Typography color="inherit" variant="body1">
-        {header}
-      </Typography>
-    </div>
-    <div className={classes.reportDataGroupData}>{data}</div>
-  </div>
-))
 export class Report extends Component {
   constructor() {
     super()
@@ -70,7 +37,7 @@ export class Report extends Component {
     // and print media queries will not wait.
     window.setTimeout(() => {
       ipcRenderer.send('print', fileName)
-    }, 1000)
+    }, 2000)
   }
 
   printComplete = () => {
@@ -87,46 +54,55 @@ export class Report extends Component {
     this.props.handleChange({ showReport: false })
   }
 
-  render() {
+  dialogTitle = () => {
+    return (
+      <DialogTitle variant="dense">
+        <TitledRow color="primary" title="トレーニング報告" text={formatDateTime()} inline={true} />
+      </DialogTitle>
+    )
+  }
+
+  dialogContent = () => {
     const {
-      sensor: { history, showReport },
+      sensor: { history },
       classes,
     } = this.props
     const summary = getReport(history)
+    return (
+      <DialogContent className={classes.reportDialogContent}>
+        <div className={classes.reportGroup}>
+          <UserSection {...this.props.sensor} max={history[0].max} />
+          <TrainingSection created={history[0].created} summary={summary} />
+          <MemoSection />
+        </div>
+        <div className={classes.reportGroup}>
+          <TrainingScoreSection {...summary} />
+          <TimeInZoneSection {...summary} />
+        </div>
+        <div className={classes.reportGroup}>
+          <HeartRateSection history={history} max={history[0].max} />
+        </div>
+        <div className={classes.reportGroup}>
+          <ProgrammingSection />
+        </div>
+      </DialogContent>
+    )
+  }
+
+  render() {
+    const {
+      sensor: { showReport },
+      classes,
+    } = this.props
 
     return (
       <Dialog
         PaperProps={{ elevation: 0, style: { border: 'none' } }}
         fullScreen={true}
         open={showReport}
         onClick={this.onClick}>
-        <DialogTitle variant="dense">
-          <TitledRow
-            color="primary"
-            title="トレーニング報告"
-            text={formatDateTime()}
-            inline={true}
-          />
-        </DialogTitle>
-
-        <DialogContent className={classes.reportDialogContent}>
-          <div className={classes.reportGroup}>
-            <UserSection {...this.props.sensor} max={history[0].max} />
-            <TrainingSection created={history[0].created} summary={summary} />
-            <MemoSection />
-          </div>
-          <div className={classes.reportGroup}>
-            <TrainingScoreSection {...summary} />
-            <TimeInZoneSection {...summary} />
-          </div>
-          <div className={classes.reportGroup}>
-            <HeartRateSection history={history} max={history[0].max} />
-          </div>
-          <div className={classes.reportGroup}>
-            <ProgrammingSection />
-          </div>
-        </DialogContent>
-
+        {this.dialogTitle()}
+        {this.dialogContent()}
         <DialogActions className={classes['no-print']}>
           <Button onClick={this.onPrint}>
             <Print /> Print

diff --git a/app/renderer/components/sensor/report/sections/heart_rate/index.jsx b/app/renderer/components/sensor/report/sections/heart_rate/index.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-import { DataGroup } from '../../'
+import { DataGroup } from '../../shared'
 import HeartRateChart from '../../charts/heart_rate/'
 import { Timeline } from '@material-ui/icons/'
 class HeartRateSection extends Component {

diff --git a/app/renderer/components/sensor/report/sections/memo/index.jsx b/app/renderer/components/sensor/report/sections/memo/index.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { DataGroup } from '../../'
+import { DataGroup } from '../../shared'
 import { Edit } from '@material-ui/icons/'
 
 class MemoSection extends Component {

diff --git a/app/renderer/components/sensor/report/sections/program/index.jsx b/app/renderer/components/sensor/report/sections/program/index.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-import { DataGroup } from '../../'
+import { DataGroup } from '../../shared'
 
 import { Menu } from '@material-ui/icons/'
 import Table from '@material-ui/core/Table'

diff --git a/app/renderer/components/sensor/report/sections/time_in_zone/index.jsx b/app/renderer/components/sensor/report/sections/time_in_zone/index.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-import { DataGroup } from '../../'
+import { DataGroup } from '../../shared'
 import TimeInZoneChart from '../../charts/time_in_zone/'
 import { Assessment } from '@material-ui/icons/'
 

diff --git a/app/renderer/components/sensor/report/sections/training/index.jsx b/app/renderer/components/sensor/report/sections/training/index.jsx
@@ -2,8 +2,7 @@ import React, { Component } from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import { DirectionsRun } from '@material-ui/icons'
 
-import { TitledRow } from '../../'
-import { DataGroup } from '../../'
+import { TitledRow, DataGroup } from '../../shared'
 import { formatSeconds, formatDateTime } from '../../../../../helpers/time_formatter'
 import styles from '../../../../../styles'
 

diff --git a/app/renderer/components/sensor/report/sections/training_score/index.jsx b/app/renderer/components/sensor/report/sections/training_score/index.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { Typography } from '@material-ui/core'
 
 import { Score } from '@material-ui/icons/'
-import { DataGroup } from '../../'
+import { DataGroup } from '../../shared'
 import TrainingScoreChart from '../../charts/training_score/'
 import { withStyles } from '@material-ui/core/styles'
 import styles from '../../../../../styles'

diff --git a/app/renderer/components/sensor/report/sections/user/index.jsx b/app/renderer/components/sensor/report/sections/user/index.jsx
@@ -1,10 +1,9 @@
 import React, { Component } from 'react'
-import { getBMI } from '../../../../../../services/analytics/'
 import { AccountCircle } from '@material-ui/icons'
 import { withStyles } from '@material-ui/core/styles'
 
-import { TitledRow } from '../../'
-import { DataGroup } from '../../'
+import { getBMI } from '../../../../../../services/analytics/'
+import { TitledRow, DataGroup } from '../../shared'
 import styles from '../../../../../styles'
 
 class UserSection extends Component {

diff --git a/app/renderer/components/sensor/report/shared/index.jsx b/app/renderer/components/sensor/report/shared/index.jsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import styles from '../../../../styles'
+import { Typography } from '@material-ui/core'
+
+export const DataGroup = withStyles(styles)(({ classes, icon, header, data, width = '32%' }) => (
+  <div className={classes.reportDataGroup} style={{ width: width }}>
+    <div className={classes.reportDataGroupHeader}>
+      {icon}
+      <Typography color="inherit" variant="body1">
+        {header}
+      </Typography>
+    </div>
+    <div className={classes.reportDataGroupData}>{data}</div>
+  </div>
+))
+
+export const TitledRow = withStyles(styles)(
+  ({ classes, title, text, inline = false, color = 'inherit' }) => (
+    <div
+      className={classes.reportRow}
+      style={{ textAlign: 'left', display: inline ? 'flex' : 'block' }}>
+      <Typography color={color} variant="body1" className={classes.titledRowTitle}>
+        {title}
+      </Typography>
+      <Typography color={color} variant="body1" className={classes.titledRowText}>
+        {' '}
+        {text}{' '}
+      </Typography>
+    </div>
+  ),
+)