...

4 files changed, 81 insertions, 54 deletions

diff --git a/src/PatternTable.tsx b/src/PatternTable.tsx
index 93be293..60acd3c 100644
--- a/src/PatternTable.tsx
+++ b/src/PatternTable.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles, withTheme } from '@material-ui/core/styles';
+import { Theme, 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';
@@ -13,8 +13,10 @@ import Popover from '@material-ui/core/Popover';
 import MaterialColorPicker from 'react-material-color-picker';
 import { CalendarField, EventField } from './RegexField';
 import { theme, defaultChartColor } from './theme';
+import { PatternEntry, PatternEntryColor } from './pattern';
+import { GCalendarMeta } from './gapi';
 
-const styles = theme => ({
+const styles = (theme: Theme) => ({
     deleteButton: {
         width: 0,
         position: 'absolute',
@@ -50,7 +52,12 @@ let nameFieldstyles = {
     }
 };
 
-function NameField(props) {
+function NameField(props: {
+        value: PatternEntry,
+        classes: { colorSample: string },
+        colorOnClick: (e: React.MouseEvent<HTMLDivElement>) => void,
+        onChange: (f: string, v: string) => void
+    }) {
     let color = props.value.color;
     return (
         <span>
@@ -68,23 +75,39 @@ function NameField(props) {
 const patternHead = [
     {label: "Name", elem: withStyles(nameFieldstyles)(NameField)},
     {label: "Calendar", elem: withTheme(theme)(CalendarField)},
-    {label: "Event", elem: withTheme(theme)(EventField)}];
+    {label: "Event", elem: withTheme(theme)(EventField)}] as {label: string, elem: any}[];
 
-class PatternTable extends React.Component {
+class PatternTable extends React.Component<{
+            classes: {
+                deleteButton: string,
+                deleteButtonHide: string,
+                deleteButtonShow: string,
+                deleteIcon: string,
+                patternTableWrapper: string,
+                patternTable: string,
+            },
+            calendars: { [id: string]: GCalendarMeta },
+            patterns: PatternEntry[],
+            onRemovePattern: (idx: number) => void,
+            onUpdatePattern: (field: string, idx: number, value: any) => void
+        }> {
+
+    activeColorPattern: number;
+    chosenColor: string;
     state = {
         page: 0,
         rowsPerPage: 5,
-        activePattern: null,
-        anchorEl: null,
+        activePattern: null as number,
+        anchorEl: null as HTMLElement,
         colorPickerOpen: false,
         colorPickerDefault: defaultChartColor
     };
 
-    handleChangePage = (event, page) => {
+    handleChangePage = (event: React.MouseEvent<HTMLButtonElement>, page: number) => {
         this.setState({ page });
     }
 
-    handleChangeRowsPerPage = event => {
+    handleChangeRowsPerPage = (event: any) => {
         this.setState({ rowsPerPage: event.target.value });
     }
 
@@ -93,7 +116,7 @@ class PatternTable extends React.Component {
         this.activeColorPattern !== null &&
             this.chosenColor &&
             this.props.onUpdatePattern('color', this.activeColorPattern,
-                {background: this.chosenColor.target.value})
+                {background: this.chosenColor})
     }
 
     render() {
@@ -123,8 +146,8 @@ class PatternTable extends React.Component {
                                 <CustomText
                                     value={p}
                                     calendars={calendars}
-                                    onChange={(field, value) => this.props.onUpdatePattern(field, p.idx, value)}
-                                    colorOnClick={event => {
+                                    onChange={(field: string, value: any) => this.props.onUpdatePattern(field, p.idx, value)}
+                                    colorOnClick={(event: any) => {
                                         this.activeColorPattern = p.idx;
                                         this.setState({
                                             anchorEl: event.currentTarget,
@@ -155,9 +178,9 @@ class PatternTable extends React.Component {
                     }}>
                     <MaterialColorPicker
                         initColor={this.state.colorPickerDefault}
-                        onSelect={color => {
+                        onSelect={(event: any) => {
                             console.log("select");
-                            this.chosenColor = color;
+                            this.chosenColor = event.target.value;
                         }}
                         onSubmit={this.handleColorPickerClose}
                         onReset={() => {}}
@@ -196,13 +219,4 @@ class PatternTable extends React.Component {
     }
 }
 
-
-PatternTable.propTypes = {
-    classes: PropTypes.object.isRequired,
-    patterns: PropTypes.array.isRequired,
-    calendars: PropTypes.object.isRequired,
-    onRemovePattern: PropTypes.func.isRequired,
-    onUpdatePattern: PropTypes.func.isRequired,
-};
-
 export default withStyles(styles)(PatternTable);
diff --git a/src/Settings.tsx b/src/Settings.tsx
index 1626a7a..e08a89b 100644
--- a/src/Settings.tsx
+++ b/src/Settings.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { Theme, withStyles } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
@@ -30,7 +30,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import { Duration } from './duration';
 
-const styles = theme => ({
+const styles = (theme: Theme) => ({
     tableHead: {
         verticalAlign: 'top',
         textAlign: 'right',
@@ -59,12 +59,19 @@ const CompactListItem = withStyles(theme => ({
     },
 }))(ListItem);
 
-class TrackedPeriod extends React.Component {
-    valueOnChange = (old, onChange) => event => {
+class TrackedPeriod extends React.Component<{
+            name: string
+            fromDuration: Duration,
+            toDuration: Duration,
+            nameOnChange: (name: string) => void,
+            fromOnChange: (d: Duration) => void,
+            toOnChange: (d: Duration) => void
+        }>{
+    valueOnChange = (old: Duration, onChange: (d: Duration) => void) => (event: any) => {
         onChange(new Duration(event.target.value, old.unit));
     }
 
-    unitOnChange = (old, onChange) => event => {
+    unitOnChange = (old: Duration, onChange: (d: Duration) => void) => (event: any) => {
         onChange(new Duration(old.value, event.target.value));
     }
 
@@ -78,7 +85,7 @@ class TrackedPeriod extends React.Component {
         }
     };
 
-    static toValue(value) {
+    static toValue(value: any) {
         if (isNaN(value)) return null;
         let v = parseInt(value, 10);
         if (v < 0 || v > 999) return null;
@@ -86,7 +93,7 @@ class TrackedPeriod extends React.Component {
     }
 
     render() {
-        let { classes, fromDuration, toDuration, nameOnChange, fromOnChange, toOnChange, name } = this.props;
+        let { fromDuration, toDuration, nameOnChange, fromOnChange, toOnChange, name } = this.props;
         let units = [
             <MenuItem key='days' value='days'>Day(s)</MenuItem>,
             <MenuItem key='weeks' value='weeks'>Week(s)</MenuItem>,
@@ -95,19 +102,19 @@ class TrackedPeriod extends React.Component {
         return (
             <span>
                 <TextField
-                    inputProps={{ style: TrackedPeriod.styles.periodName}}
+                    inputProps={{ style: TrackedPeriod.styles.periodName } as React.CSSProperties}
                     value={name}
                     onChange={event => nameOnChange(event.target.value)}/>:
                 from <TextField
                     error={TrackedPeriod.toValue(fromDuration.value) === null}
-                    inputProps={{style: TrackedPeriod.styles.periodValue}}
+                    inputProps={{ style: TrackedPeriod.styles.periodValue } as React.CSSProperties}
                     value={fromDuration.value}
                     onChange={this.valueOnChange(fromDuration, fromOnChange)} />
                 <Select value={fromDuration.unit}
                     onChange={this.unitOnChange(fromDuration, fromOnChange)}>{units}</Select> ago
                 to <TextField
                     error={TrackedPeriod.toValue(toDuration.value) === null}
-                    inputProps={{style: TrackedPeriod.styles.periodValue}}
+                    inputProps={{style: TrackedPeriod.styles.periodValue} as React.CSSProperties}
                     value={toDuration.value}
                     onChange={this.valueOnChange(toDuration, toOnChange)} />
                 <Select value={toDuration.unit}
@@ -117,7 +124,17 @@ class TrackedPeriod extends React.Component {
     }
 }
 
-class Settings extends React.Component {
+class Settings extends React.Component<{
+            classes: {
+                tableHead: string,
+                tableContent: string,
+                calendarList: string,
+            }
+        }> {
+
+    msgClient: MsgClient;
+    dialogPromiseResolver: (r: boolean) => void;
+
     state = {
         isLoggedIn: false,
         patterns: [],
@@ -137,26 +154,26 @@ class Settings extends React.Component {
         this.msgClient = new MsgClient('main');
 
         this.msgClient.sendMsg({
-            type: MsgType.getPatterns,
+            opt: MsgType.getPatterns,
             data: { id: 'main' }
         }).then(msg => {
             this.setState({ patterns: msg.data.map(p => PatternEntry.inflate(p)) });
         });
 
         this.msgClient.sendMsg({
-            type: MsgType.getCalendars,
+            opt: MsgType.getCalendars,
             data: { enabledOnly: false }
         }).then(msg => {
             this.setState({ calendars: msg.data });
         });
 
         this.msgClient.sendMsg({
-            type: MsgType.getConfig,
+            opt: MsgType.getConfig,
             data: ['trackedPeriods']
         }).then(msg => {
             let config = {
                 trackedPeriods: msg.data.trackedPeriods.map((p: TrackPeriodFlat) => (
-                    new TrackPeriod.inflate(p);
+                    new TrackPeriod.inflate(p)
                 ))
             };
             console.log(msg.data.trackedPeriods);
@@ -187,7 +204,7 @@ class Settings extends React.Component {
         var calendars = {...this.state.calendars};
         calendars[id].enabled = !calendars[id].enabled;
         this.msgClient.sendMsg({
-            type: MsgType.updateCalendars,
+            opt: MsgType.updateCalendars,
             data: calendars
         }).then(() => this.setState({ calendars }));
     }
@@ -236,14 +253,14 @@ class Settings extends React.Component {
                 calendars[id].enabled = this.state.calendars[id].enabled;
         }
         this.msgClient.sendMsg({
-            type: MsgType.updateCalendars,
+            opt: MsgType.updateCalendars,
             data: calendars
         }).then(() => this.setState({ calendars }));
     };
 
     loadPatterns = (patterns, id) => {
         this.msgClient.sendMsg({
-            type: MsgType.updatePatterns,
+            opt: MsgType.updatePatterns,
             data: { id, patterns: patterns.map(p => p.deflate()) }
         }).then(() => this.setState({ patterns }));
     };
@@ -293,8 +310,8 @@ class Settings extends React.Component {
 
     updateTrackedPeriods = trackedPeriods => {
         this.msgClient.sendMsg({
-            type: MsgType.updateConfig,
-            data: { trackedPeriods: trackedPeriods.map(p => p.deflate())) }
+            opt: MsgType.updateConfig,
+            data: { trackedPeriods: trackedPeriods.map(p => p.deflate()) }
         }).then(() => this.setState({...this.state.config, trackedPeriods }));
     }
 
@@ -422,8 +439,4 @@ class Settings extends React.Component {
     }
 }
 
-Settings.propTypes = {
-    classes: PropTypes.object.isRequired,
-};
-
 export default withStyles(styles)(Settings);
diff --git a/src/duration.ts b/src/duration.ts
index 34ccb91..ebd270d 100644
--- a/src/duration.ts
+++ b/src/duration.ts
@@ -3,14 +3,14 @@ import moment from 'moment';
 export type TimeUnit = moment.unitOfTime.DurationConstructor;
 
 export type DurationFlat = {
-    value: number,
+    value: string,
     unit: string
 };
 
 export class Duration {
-    value: number;
+    value: string;
     unit: TimeUnit;
-    constructor(value: number, unit: TimeUnit) {
+    constructor(value: string, unit: TimeUnit) {
         this.value = value
         this.unit = unit
     }
@@ -22,9 +22,9 @@ export class Duration {
         return null;
     }
 
-    static days(n: number) { return new Duration(n, 'days'); }
-    static weeks(n: number) { return new Duration(n, 'weeks'); }
-    static months(n: number) { return new Duration(n, 'months'); }
+    static days(n: number) { return new Duration(String(n), 'days'); }
+    static weeks(n: number) { return new Duration(String(n), 'weeks'); }
+    static months(n: number) { return new Duration(String(n), 'months'); }
 
     deflate() { return { value: this.value, unit: this.unit }; }
     static inflate = (obj: DurationFlat) => new Duration(obj.value, obj.unit as TimeUnit);
diff --git a/tsconfig.json b/tsconfig.json
index c15d47c..68f8f40 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,7 @@
         "noImplicitAny": true,
         "module": "commonjs",
         "target": "es5",
-        "lib": ["dom", "es2016", "es2017"],
+        "lib": ["dom", "es2016", "es2017", "esnext"],
         "jsx": "react",
         "typeRoots": ["./types", "./node_modules/@types"],
         "allowSyntheticDefaultImports": true