support dropdown selection

1 files changed, 97 insertions, 12 deletions

diff --git a/src/App.js b/src/App.js
index a8acbc8..4cd1610 100755
--- a/src/App.js
+++ b/src/App.js
@@ -30,6 +30,8 @@ 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 MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
 import { PieChart, Pie, Cell, Tooltip } from 'recharts';
 import Logo from './Logo';
 
@@ -85,7 +87,7 @@ function getColors(token) {
 
 function filterPatterns(patterns, calName) {
     return patterns.filter(p => {
-        let re = new RegExp(p.cal);
+        let re = new RegExp(p.cal.regex && p.cal.value || `^${p.cal.value}$`);
         return re.test(calName);
     });
 }
@@ -129,6 +131,12 @@ const styles = theme => ({
     },
     fab: {
         margin: theme.spacing.unit,
+    },
+    fieldNoRegex: {
+        width: 200
+    },
+    fieldRegex: {
+        marginRight: '0.5em'
     }
 });
 
@@ -195,6 +203,77 @@ ChromiclePieChart.propTypes = {
     patterncalendarData: PropTypes.object.isRequired,
 };
 
+class RegexField extends React.Component {
+    render() {
+        var pitems = this.props.items;
+        let items = [];
+        pitems['0'] = {regex: true, label: null, id: '0'};
+        for (let id in pitems)
+        {
+            items.push(
+                <MenuItem key={id} value={id}>
+                    {pitems[id].label != null && pitems[id].label || 'Regex'}
+                </MenuItem>);
+        }
+        return (
+            <span>
+            <Select
+                value={this.props.value.id}
+                onChange={event => {
+                    let value;
+                    if (pitems[event.target.value].label == null) {
+                        if (this.props.value.regex)
+                            value = {regex: true, value: this.props.value.value, label: null, id: '0'};
+                        else
+                            value = {regex: true, value: `^${this.props.value.value}$`, label: null, id: '0'};
+                    } else {
+                        value = pitems[event.target.value];
+                    }
+                    this.props.onChange({target: {value}});
+                }}
+                className={this.props.value.regex &&
+                        this.props.fieldStyles.regex ||
+                        this.props.fieldStyles.noRegex}>{items}</Select>
+            {this.props.value.label == null && (
+                <TextField
+                 value={this.props.value.value}
+                 onChange={event =>
+                    this.props.onChange({target: { value: {regex: true, value: event.target.value, label: null, id: '0'}}})} />
+            )}
+            </span>
+        );
+    }
+}
+
+function CalendarField(props) {
+    let items = {};
+    for (let id in props.cached.calendars) {
+        items[id] = {
+            regex: false,
+            value: props.cached.calendars[id].name,
+            label: props.cached.calendars[id].name, id}
+    }
+    return (
+        <RegexField
+            value={props.value}
+            items={items}
+            fieldStyles={props.fieldStyles}
+            onChange={props.onChange} />);
+}
+
+function EventField(props) {
+    let items = {'any': {
+        regex: true,
+        value: '.*',
+        label: 'Any', id: 'any'}};
+    return (
+        <RegexField
+            value={props.value}
+            items={items}
+            fieldStyles={props.fieldStyles}
+            onChange={props.onChange} />);
+}
+
 class Dashboard extends React.Component {
     state = {
         open: true,
@@ -213,9 +292,9 @@ class Dashboard extends React.Component {
     };
 
     static patternHead = [
-        {label: "Name", field: "name"},
-        {label: "Calendar", field: "cal"},
-        {label: "Event", field: 'event'}];
+        {label: "Name", field: "name", elem: TextField},
+        {label: "Calendar", field: "cal", elem: CalendarField},
+        {label: "Event", field: 'event', elem: EventField}];
 
     handleChangePage = (event, page) => {
         this.setState({ page });
@@ -240,8 +319,10 @@ class Dashboard extends React.Component {
     };
 
     newPattern = () => {
-        let patterns = [{name: '', cal: '', event: '', idx: 0 },
-                        ...this.state.patterns];
+        let patterns = [{name: '',
+            cal: { regex: true, label: null, id: '0' },
+            event: { regex: true, value: '.*', label: 'Any', id: 'any' },
+            idx: 0 }, ...this.state.patterns];
         for (let i = 1; i < patterns.length; i++)
             patterns[i].idx = i;
     	this.setState({ patterns });
@@ -269,7 +350,7 @@ class Dashboard extends React.Component {
                 results[i] = 0;
             for (let id in this.cached.calendars) {
                 let patterns = filterPatterns(this.state.patterns, this.cached.calendars[id].name)
-                    .map(p => { return { regex: new RegExp(p.event), idx: p.idx } });
+                    .map(p => { return { regex: new RegExp(p.event.value), idx: p.idx } });
                 if (!this.cached.calendars[id].events) continue;
                 this.cached.calendars[id].events.forEach(event => {
                     if (event.status != "confirmed") return;
@@ -315,8 +396,8 @@ class Dashboard extends React.Component {
             });
             this.setState({ patterns: items.map((item, idx) => {
                 return { name: item.summary,
-                         cal: item.summary,
-                         event: '.*',
+                         cal: { regex: false, value: item.summary, label: item.summary, id: item.id },
+                         event: { regex: true, value: '.*', label: 'Any', id: 'any' },
                          idx }
             })});
         });
@@ -362,12 +443,16 @@ class Dashboard extends React.Component {
                             <TableRow
                              onMouseOver={() => this.setState({ activePattern: p.idx })}
                              onMouseOut={() => this.setState({ activePattern: null })}>
-                              {Dashboard.patternHead.map(s => (
+                                {Dashboard.patternHead.map(s => {
+                                    const CustomText = s.elem;
+                                    return (
                                 <TableCell>
-                                  <TextField
+                                  <CustomText
                                    value={p[s.field]}
+                                   cached={this.cached}
+                                   fieldStyles={{noRegex: classes.fieldNoRegex, regex: classes.fieldRegex}}
                                    onChange={event => this.updatePattern(s.field, p.idx, event.target.value)}/>
-                                  </TableCell>))}
+                                  </TableCell>)})}
                                   <span style={(this.state.activePattern == p.idx &&
                                                   { position: 'absolute', right: 0, height: 48 }) ||
                                                   { display: 'none' }}>