From e458b7a692d9ac4ab91b2ef6ee36ff439c528c50 Mon Sep 17 00:00:00 2001 From: Determinant Date: Wed, 30 Jan 2019 11:53:44 -0500 Subject: re-organize even more --- src/App.js | 259 ++++++++++++++++++++----------------------------------------- 1 file changed, 84 insertions(+), 175 deletions(-) (limited to 'src/App.js') diff --git a/src/App.js b/src/App.js index 2f9624f..6e9dc27 100755 --- a/src/App.js +++ b/src/App.js @@ -4,51 +4,29 @@ import 'typeface-roboto'; import 'react-dates/initialize'; import 'react-dates/lib/css/_datepicker.css'; import { DateRangePicker } from 'react-dates'; -import { withStyles, withTheme } from '@material-ui/core/styles'; -import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; -import orange from '@material-ui/core/colors/orange'; +import { withStyles } from '@material-ui/core/styles'; +import { MuiThemeProvider } from '@material-ui/core/styles'; import cyan from '@material-ui/core/colors/cyan'; import CssBaseline from '@material-ui/core/CssBaseline'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; -import TextField from '@material-ui/core/TextField'; import Typography from '@material-ui/core/Typography'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableRow from '@material-ui/core/TableRow'; -import TableCell from '@material-ui/core/TableCell'; -import TableHead from '@material-ui/core/TableHead'; -import TablePagination from '@material-ui/core/TablePagination'; -import Paper from '@material-ui/core/Paper'; import Button from '@material-ui/core/Button'; import FormControl from '@material-ui/core/FormControl'; import FormGroup from '@material-ui/core/FormGroup'; import Grid from '@material-ui/core/Grid'; -import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined'; import AddCircleIcon from '@material-ui/icons/AddCircle'; import IconButton from '@material-ui/core/IconButton'; import Logo from './Logo'; import * as gapi from './gapi'; import { Pattern, PatternEntry } from './pattern'; import PieChart from './Chart'; -import { CalendarField, EventField } from './RegexField'; +import PatternTable from './PatternTable'; +import theme from './theme'; -const default_chart_data = [{name: 'Work', value: 10, color: cyan[300]}, - {name: 'Wasted', value: 10, color: cyan[300]}]; - -const theme = createMuiTheme({ - palette: { - primary: { - light: orange[300], - main: orange[500], - dark: orange[700], - contrastText: "#fff" - } - }, - typography: { - useNextVariants: true, - } -}); +const default_chart_data = [ + {name: 'Work', value: 10, color: cyan[300]}, + {name: 'Wasted', value: 10, color: cyan[300]}]; function filterPatterns(patterns, calName) { return patterns.filter(p => { @@ -83,30 +61,14 @@ const styles = theme => ({ buttonSpacer: { marginBottom: theme.spacing.unit * 4, }, - patternTableWrapper: { - overflowX: 'auto', - overflowY: 'hidden' - }, - patternTable: { - minWidth: 600 - }, fab: { margin: theme.spacing.unit, }, - fieldNoRegex: { - width: 200 - }, - fieldRegex: { - marginRight: '0.5em' - } }); class Dashboard extends React.Component { state = { - open: true, patterns: [], - page: 0, - rowsPerPage: 5, timeRange: null, token: gapi.getAuthToken(), patternGraphData: default_chart_data, @@ -118,11 +80,6 @@ class Dashboard extends React.Component { calendars: {} }; - static patternHead = [ - {label: "Name", field: "name", elem: TextField}, - {label: "Calendar", field: "cal", elem: withTheme(theme)(CalendarField)}, - {label: "Event", field: 'event', elem: withTheme(theme)(EventField)}]; - handleChangePage = (event, page) => { this.setState({ page }); }; @@ -149,7 +106,7 @@ class Dashboard extends React.Component { let patterns = [PatternEntry.defaultPatternEntry(), ...this.state.patterns]; for (let i = 1; i < patterns.length; i++) patterns[i].idx = i; - this.setState({ patterns }); + this.setState({ patterns }); }; analyze = () => { @@ -219,140 +176,92 @@ class Dashboard extends React.Component { }); this.setState({ patterns: items.map((item, idx) => { return new PatternEntry(item.summary, idx, - new Pattern(item.id, false, item.summary, item.summary), - Pattern.anyPattern()); + new Pattern(item.id, false, item.summary, item.summary), + Pattern.anyPattern()); })}); }); }; render() { - const { classes } = this.props; - const { patterns, rows, rowsPerPage, page } = this.state; - const nDummy = rowsPerPage - Math.min(rowsPerPage, patterns.length - page * rowsPerPage); + const { classes } = this.props; - return ( - -
- - - - Chromicle - - - -
-
- - - - - - - Event Patterns - this.newPattern()}> - -
- - - {Dashboard.patternHead.map((s, i) => ({s.label}))} - - - {patterns.slice(page * rowsPerPage, (page + 1) * rowsPerPage).map(p => ( - this.setState({ activePattern: p.idx })} - onMouseOut={() => this.setState({ activePattern: null })}> - {Dashboard.patternHead.map(s => { - const CustomText = s.elem; - return ( - - this.updatePattern(s.field, p.idx, event.target.value)}/> - )})} - - this.removePattern(p.idx)} /> - - ))} - {nDummy > 0 && ( - - - )} - -
-
- - - - - Time Range - -
- { - //if (startDate && endDate) - // this.setState({ timeRange: [startDate.toISOString(), endDate.toISOString()]}); - this.setState({ startDate, endDate }); - }} // PropTypes.func.isRequired, - focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null, - onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired, - isOutsideRange={() => false}/> -
- -
- - - - - - - - - - - - - - - - - Graph - - - - -
-
- ); + return ( + +
+ + + + Chromicle + + + +
+
+ + + + + + + Event Patterns + this.newPattern()}> + + + + + + Time Range + +
+ { + this.setState({ startDate, endDate }); + }} + focusedInput={this.state.focusedInput} + onFocusChange={focusedInput => this.setState({ focusedInput })} + isOutsideRange={() => false}/> +
+ +
+ + + + + + + + + + + + + + + + + Graph + + + + +
+
+ ); } } Dashboard.propTypes = { - classes: PropTypes.object.isRequired, + classes: PropTypes.object.isRequired, }; export default withStyles(styles)(Dashboard); -- cgit v1.2.3