aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/PatternTable.tsx60
-rw-r--r--src/Settings.tsx61
-rw-r--r--src/duration.ts12
3 files changed, 80 insertions, 53 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);