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 +++++++++++++++++----------------------------------- src/PatternTable.js | 121 ++++++++++++++++++++++++ src/RegexField.js | 95 +++++++++++-------- src/theme.js | 18 ++++ 4 files changed, 280 insertions(+), 213 deletions(-) create mode 100644 src/PatternTable.js create mode 100644 src/theme.js (limited to 'src') 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); diff --git a/src/PatternTable.js b/src/PatternTable.js new file mode 100644 index 0000000..001c468 --- /dev/null +++ b/src/PatternTable.js @@ -0,0 +1,121 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles, withTheme } from '@material-ui/core/styles'; +import TextField from '@material-ui/core/TextField'; +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 DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined'; +import { CalendarField, EventField } from './RegexField'; +import theme from './theme'; + +const styles = theme => ({ + deleteButtonShow: { + position: 'absolute', + right: 0, + height: 48 + }, + deleteButtonHide: { + display: 'none' + }, + deleteIcon: { + height: '100%', + cursor: 'pointer' + }, + patternTableWrapper: { + overflowX: 'auto', + overflowY: 'hidden' + }, + patternTable: { + minWidth: 600 + } +}); + +const patternHead = [ + {label: "Name", field: "name", elem: TextField}, + {label: "Calendar", field: "cal", elem: withTheme(theme)(CalendarField)}, + {label: "Event", field: 'event', elem: withTheme(theme)(EventField)}]; + +class PatternTable extends React.Component { + state = { + page: 0, + rowsPerPage: 5, + }; + + handleChangePage(event, page) { + this.setState({ page }); + } + + handleChangeRowsPerPage(event) { + this.setState({ rowsPerPage: event.target.value }); + } + + render() { + const { classes, cached, patterns } = this.props; + const { rowsPerPage, page } = this.state; + const nDummy = rowsPerPage - Math.min(rowsPerPage, patterns.length - page * rowsPerPage); + let rows = patterns.slice(page * rowsPerPage, (page + 1) * rowsPerPage).map(p => ( + this.setState({ activePattern: p.idx })} + onMouseOut={() => this.setState({ activePattern: null })}> + { + patternHead.map(s => { + const CustomText = s.elem; + return ( + + this.updatePattern(s.field, p.idx, event.target.value)}/> + )}) + } + + this.removePattern(p.idx)} /> + + )); + + return ( +
+
+ + + {patternHead.map((s, i) => ({s.label}))} + + + {rows} + { + nDummy > 0 && ( + + + ) + } + +
+
+ +
); + } +} + + +PatternTable.propTypes = { + classes: PropTypes.object.isRequired, + patterns: PropTypes.array.isRequired, + cached: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(PatternTable); diff --git a/src/RegexField.js b/src/RegexField.js index 104512e..926a3bc 100644 --- a/src/RegexField.js +++ b/src/RegexField.js @@ -1,54 +1,75 @@ import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; import Select from '@material-ui/core/Select'; import MenuItem from '@material-ui/core/MenuItem'; import TextField from '@material-ui/core/TextField'; import FormControl from '@material-ui/core/FormControl'; import { Pattern } from './pattern'; +const styles = theme => ({ + fieldNoRegex: { + width: 200 + }, + fieldRegex: { + marginRight: '0.5em' + } +}); + class RegexField extends React.Component { render() { - var pitems = this.props.options; - var p0 = new Pattern.emptyPattern(); + const { classes } = this.props; let items = []; + var pitems = this.props.options; + const p0 = new Pattern.emptyPattern(); pitems[p0.id] = p0; for (let id in pitems) - items.push( - - {!pitems[id].isEmpty ? - pitems[id].label : - Custom} - ); + { + const label = !pitems[id].isEmpty ? pitems[id].label : + Custom; + items.push({label}); + } + const selectOnClick = event => { + let value; + if (pitems[event.target.value].label == null) { + value = new Pattern(0, true, + this.props.value.isRegex ? + this.props.value.value : + `^${this.props.value.value}$`, null); + } else { + value = pitems[event.target.value]; + } + this.props.onChange({target: {value}}); + }; + + const regexTextOnChange = event => this.props.onChange({ + target: { value: new Pattern(0, true, event.target.value, null)}}); + + const className = this.props.value.isRegex ? classes.fieldRegex: classes.fieldNoRegex; return ( - - - {this.props.value.label == null && ( - - this.props.onChange({target: { value: new Pattern(0, true, event.target.value, null)}})} /> - )} - + + + {this.props.value.label == null && ( + + )} + ); } } +RegexField.propTypes = { + classes: PropTypes.object.isRequired, +}; + +const RegexFieldWithStyles = withStyles(styles)(RegexField); + export function CalendarField(props) { let options = {}; for (let id in props.cached.calendars) { @@ -57,10 +78,9 @@ export function CalendarField(props) { props.cached.calendars[id].name); } return ( - ); } @@ -70,10 +90,9 @@ export function EventField(props) { let options = {}; options[any.id] = any; return ( - ); + theme={props.theme} />); } diff --git a/src/theme.js b/src/theme.js new file mode 100644 index 0000000..3773e6e --- /dev/null +++ b/src/theme.js @@ -0,0 +1,18 @@ +import { createMuiTheme } from '@material-ui/core/styles'; +import orange from '@material-ui/core/colors/orange'; + +const theme = createMuiTheme({ + palette: { + primary: { + light: orange[300], + main: orange[500], + dark: orange[700], + contrastText: "#fff" + } + }, + typography: { + useNextVariants: true, + } +}); + +export default theme; -- cgit v1.2.3