aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/Analyze.tsx16
-rw-r--r--src/Chart.tsx12
-rw-r--r--src/PatternTable.tsx26
-rw-r--r--src/Settings.tsx39
-rw-r--r--src/gapi.ts31
-rw-r--r--src/popup.tsx2
-rw-r--r--src/tab.tsx2
7 files changed, 78 insertions, 50 deletions
diff --git a/src/Analyze.tsx b/src/Analyze.tsx
index cf87cb3..bb3f38c 100644
--- a/src/Analyze.tsx
+++ b/src/Analyze.tsx
@@ -194,7 +194,7 @@ class Analyze extends React.Component<AnalyzeProps> {
const { classes } = this.props;
return (
- <Grid container spacing={16}>
+ <Grid container spacing={16}>
<AlertDialog
title={this.state.dialogMsg.title}
message={this.state.dialogMsg.message}
@@ -205,9 +205,8 @@ class Analyze extends React.Component<AnalyzeProps> {
open={this.state.snackBarOpen}
variant={this.state.snackBarVariant}
onClose={this.handleSnackbarClose}/>
- <Grid item md={6} xs={12}>
- <FormControl fullWidth={true}>
- <FormGroup>
+ <Grid item container md={6} xs={12} spacing={16}>
+ <Grid item xs={12}>
<Typography variant="h6" component="h1" gutterBottom>
Analyzed Events
<IconButton
@@ -219,11 +218,13 @@ class Analyze extends React.Component<AnalyzeProps> {
calendars={this.state.calendars}
onRemovePattern={this.removePattern}
onUpdatePattern={this.updatePattern} />
- </FormGroup>
- <FormGroup>
+ </Grid>
+ <Grid item xs={12}>
<Typography variant="h6" component="h1" gutterBottom>
Time Range
</Typography>
+ <FormControl fullWidth={true}>
+ <FormGroup>
<div style={{textAlign: 'center'}}>
<DateRangePicker
startDate={this.state.startDate}
@@ -254,7 +255,8 @@ class Analyze extends React.Component<AnalyzeProps> {
</FormGroup>
</Grid>
</Grid>
- </FormControl>
+ </FormControl>
+ </Grid>
</Grid>
<Grid item md={6} xs={12}>
<Typography variant="h6" component="h1" gutterBottom>
diff --git a/src/Chart.tsx b/src/Chart.tsx
index e1b9c6d..d70e4f0 100644
--- a/src/Chart.tsx
+++ b/src/Chart.tsx
@@ -17,7 +17,7 @@ type PatternPieChartProps = {
patternTableWrapper: string,
pieChart: string
},
- height?: number,
+ height?: number | string,
data: PatternGraphData[],
radialLabelsLinkStrokeWidth?: number,
radialLabelsLinkDiagonalLength?: number,
@@ -52,7 +52,6 @@ export class PatternPieChart extends React.Component<PatternPieChartProps> {
}
};
return (
- <div style={{height: (height ? height : 300)}}>
<ResponsivePie
data={data.map(p => ({
id: p.name,
@@ -88,7 +87,6 @@ export class PatternPieChart extends React.Component<PatternPieChartProps> {
motionDamping={15}
theme={theme}
tooltipFormat={v => `${v.toFixed(2)} hr`} />
- </div>
);
}
}
@@ -107,11 +105,11 @@ type DoublePieChartProps = {
function DoublePieChart(props: DoublePieChartProps) {
return (
<Grid container spacing={0}>
- <Grid item xs={12} lg={6}>
- <StyledPatternPieChart data={props.patternGraphData} height={300} />
+ <Grid item md={12} lg={12} style={{height: 300}}>
+ <StyledPatternPieChart data={props.patternGraphData} />
</Grid>
- <Grid item xs={12} lg={6}>
- <StyledPatternPieChart data={props.calendarGraphData} height={300} />
+ <Grid item md={12} lg={12} style={{height: 300}}>
+ <StyledPatternPieChart data={props.calendarGraphData} />
</Grid>
</Grid>);
}
diff --git a/src/PatternTable.tsx b/src/PatternTable.tsx
index b9d0e9e..e514551 100644
--- a/src/PatternTable.tsx
+++ b/src/PatternTable.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import classNames from 'classnames';
import { Theme, withStyles, withTheme, StyleRules } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Table from '@material-ui/core/Table';
@@ -20,17 +21,19 @@ const styles = (theme: Theme): StyleRules => ({
deleteButton: {
width: 0,
position: 'absolute',
- marginRight: '2em',
+ paddingRight: '24px',
right: 0,
- height: 48,
+ lineHeight: '48px',
},
deleteButtonHide: {
display: 'none'
},
- deleteButtonShow: {},
+ deleteButtonShow: {
+ backgroundColor: theme.palette.background.default,
+ zIndex: 1
+ },
deleteIcon: {
position: 'absolute',
- height: '100%',
cursor: 'pointer'
},
patternTableWrapper: {
@@ -62,7 +65,7 @@ type NameFieldProps = {
function NameField(props: NameFieldProps) {
let color = props.value.color.background;
return (
- <span>
+ <div style={{minWidth: 250}}>
<div
className={props.classes.colorSample}
style={{backgroundColor: (color ? color : defaultChartColor)}}
@@ -71,7 +74,7 @@ function NameField(props: NameFieldProps) {
<TextField
value={props.value.name}
onChange={event => props.onChange('name', event.target.value)} />
- </span>);
+ </div>);
}
const patternHead: {label: string, elem: any}[] = [
@@ -133,11 +136,11 @@ class PatternTable extends React.Component<PatternTableProps> {
onMouseOver={setActive} onMouseOut={unsetActive}
className={classes.deleteButton}>
<td>
- <span className={this.state.activePattern !== p.idx ? classes.deleteButtonHide : classes.deleteButtonShow}>
+ <div className={classNames(this.state.activePattern !== p.idx ? classes.deleteButtonHide : classes.deleteButtonShow, classes.deleteIcon)}>
<DeleteOutlinedIcon
- className={classes.deleteIcon}
+ style={{verticalAlign: 'middle'}}
onClick={() => this.props.onRemovePattern(p.idx)} />
- </span>
+ </div>
</td>
</TableRow>,
<TableRow key={i * 2 + 1} onMouseOver={setActive} onMouseOut={unsetActive}>
@@ -152,6 +155,7 @@ class PatternTable extends React.Component<PatternTableProps> {
onChange={(field: string, value: any) => this.props.onUpdatePattern(field, p.idx, value)}
colorOnClick={(event: React.MouseEvent<{}>) => {
this.activeColorPattern = p.idx;
+ console.log(p.color.background);
this.setState({
anchorEl: event.currentTarget,
colorPickerDefault: p.color.background,
@@ -165,7 +169,7 @@ class PatternTable extends React.Component<PatternTableProps> {
rows.flat();
return (
- <div>
+ <div style={{width: '100%', position: 'relative'}}>
<Popover
id="colorPicker"
open={this.state.colorPickerOpen}
@@ -207,7 +211,6 @@ class PatternTable extends React.Component<PatternTableProps> {
}
</TableBody>
</Table>
- </div>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
@@ -218,6 +221,7 @@ class PatternTable extends React.Component<PatternTableProps> {
nextIconButtonProps={{'aria-label': 'Next Page'}}
onChangePage={this.handleChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage} />
+ </div>
</div>);
}
}
diff --git a/src/Settings.tsx b/src/Settings.tsx
index 13488c4..1e5df42 100644
--- a/src/Settings.tsx
+++ b/src/Settings.tsx
@@ -20,6 +20,7 @@ import Checkbox from '@material-ui/core/Checkbox';
import TextField from '@material-ui/core/TextField';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
+import { getColorFamily } from 'materialcolorize'
import PatternTable from './PatternTable';
import Snackbar, { SnackbarVariant } from './Snackbar';
@@ -30,14 +31,21 @@ import { Pattern, PatternEntry, PatternEntryFlat } from './pattern';
import { DurationFlat, TrackedPeriodFlat } from './duration';
const styles = (theme: Theme): StyleRules => ({
+ patternTable: {
+ marginLeft: -24
+ },
tableHead: {
verticalAlign: 'top',
textAlign: 'right',
lineHeight: '3em',
+ minWidth: 250
},
tableContent: {
textAlign: 'left',
- maxWidth: 600,
+ maxWidth: 400,
+ },
+ list: {
+ marginLeft: -12
},
calendarList: {
maxHeight: 400,
@@ -45,11 +53,13 @@ const styles = (theme: Theme): StyleRules => ({
},
bottomButtons: {
marginTop: 10,
- textAlign: 'right'
+ textAlign: 'right',
+ minWidth: 600
},
trackedPeriodInput: {
paddingTop: 10,
- paddingBottom: 10
+ paddingBottom: 20,
+ overflowX: 'auto'
}
});
@@ -149,7 +159,9 @@ type SettingsProps = {
tableContent: string,
calendarList: string,
bottomButtons: string,
- trackedPeriodInput: string
+ trackedPeriodInput: string,
+ list: string,
+ patternTable: string
}
};
@@ -244,9 +256,12 @@ class Settings extends React.Component<SettingsProps> {
let [colors, _cals] = await Promise.all([pm_colors, pm_cals]);
var cals: { [id: string]: gapi.GCalendarMeta } = {};
_cals.forEach((cal: any) => {
+ let _color = colors[cal.colorId];
cals[cal.id] = {
name: cal.summary,
- color: colors[cal.colorId],
+ color: {
+ background: ('#' + getColorFamily(_color.background)[300]).toLowerCase()
+ },
enabled: true
};
});
@@ -429,7 +444,7 @@ class Settings extends React.Component<SettingsProps> {
</STableCell>
<STableCell className={classes.tableContent}>
{(this.state.isLoggedIn &&
- <List className={classes.calendarList}>
+ <List className={classNames(classes.calendarList, classes.list)} disablePadding>
{Object.keys(this.state.calendars).sort().map(id =>
<CompactListItem
key={id}
@@ -458,9 +473,9 @@ class Settings extends React.Component<SettingsProps> {
onClick={this.handleLoadDefault}>Load Default</Button>
</div>
</STableCell>
- <STableCell className={classes.tableContent}>
+ <STableCell className={classes.tableContent} style={{paddingRight: 0}}>
{(this.state.isLoggedIn &&
- <FormControl fullWidth={true}>
+ <FormControl fullWidth={true} className={classes.patternTable}>
<PatternTable
patterns={this.state.patterns}
calendars={this.state.calendars}
@@ -473,7 +488,9 @@ class Settings extends React.Component<SettingsProps> {
<STableCell className={classes.tableHead}>
Tracked Time Range
</STableCell>
- <STableCell className={classNames(classes.tableContent, classes.trackedPeriodInput)}>
+ <STableCell className={classes.tableContent}>
+ <div className={classes.trackedPeriodInput}>
+ <div style={{minWidth: 600}}>
{this.state.trackedPeriods &&
this.state.trackedPeriods.map((p, idx) =>
<FormGroup key={idx}>
@@ -485,6 +502,8 @@ class Settings extends React.Component<SettingsProps> {
fromOnChange={this.handlePeriodFromChange(idx)}
toOnChange={this.handlePeriodToChange(idx)}/>
</FormGroup>)}
+ </div>
+ </div>
</STableCell>
</TableRow>
<TableRow>
@@ -492,7 +511,7 @@ class Settings extends React.Component<SettingsProps> {
Misc
</STableCell>
<STableCell className={classes.tableContent}>
- <List>
+ <List className={classes.list} disablePadding>
<CompactListItem
key="overrideNewTab"
onClick={() => this.toggleOverrideNewTab()}
diff --git a/src/gapi.ts b/src/gapi.ts
index 8e74483..9ddf751 100644
--- a/src/gapi.ts
+++ b/src/gapi.ts
@@ -7,6 +7,7 @@ let loggedIn: boolean = null;
enum GApiError {
invalidSyncToken = "invalidSyncToken",
+ invalidAuthToken = "invalidAuthToken",
notLoggedIn = "notLoggedIn",
notLoggedOut = "notLoggedOut",
otherError = "otherError",
@@ -120,22 +121,24 @@ function getEvents(calId: string, token: string,
timeMax,
maxResults: resultsPerRequest
})}`, { method: 'GET' });
- if (response.status === 200)
- {
- let data = await response.json();
- results.push(...data.items);
- if (data.nextPageToken) {
- return singleFetch(data.nextPageToken, '');
- } else {
- return ({
- nextSyncToken: data.nextSyncToken,
- results
- });
+ switch (response.status) {
+ case 200: {
+ let data = await response.json();
+ results.push(...data.items);
+ if (data.nextPageToken) {
+ return singleFetch(data.nextPageToken, '');
+ } else {
+ return ({
+ nextSyncToken: data.nextSyncToken,
+ results
+ });
+ }
+ break;
}
+ case 410: throw GApiError.invalidSyncToken; break;
+ case 401: throw GApiError.invalidAuthToken; break;
+ default: throw GApiError.otherError;
}
- else if (response.status === 410)
- throw GApiError.invalidSyncToken;
- else throw GApiError.otherError;
};
return singleFetch('', syncToken);
diff --git a/src/popup.tsx b/src/popup.tsx
index 0c0c8cc..d0f714b 100644
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -108,7 +108,7 @@ class Popup extends React.Component<PopupProps> {
${moment(d.end).format('ddd, MMM Do, YYYY')}`}
</Typography>
{(d.data.some(dd => dd.value > 1e-3) &&
- <StyledPatternPieChart data={d.data} />) ||
+ <div style={{height: 300}}><StyledPatternPieChart data={d.data} /></div>) ||
<Typography variant="subtitle1" align="center" color="textSecondary">
No matching events.
</Typography>}
diff --git a/src/tab.tsx b/src/tab.tsx
index e720844..ebddc70 100644
--- a/src/tab.tsx
+++ b/src/tab.tsx
@@ -105,6 +105,7 @@ class Tab extends React.Component<TabProps> {
${moment(d.end).format('ddd, MMM Do, YYYY')}`}
</Typography>
{(d.data.some(dd => dd.value > 1e-3) &&
+ <div style={{height: 400}}>
<StyledPatternPieChart
data={d.data}
height={400}
@@ -114,6 +115,7 @@ class Tab extends React.Component<TabProps> {
radialLabelsLinkDiagonalLength={40}
labelFontSize={14}
padAngle={0.8} />
+ </div>
) ||
<Typography variant="subtitle1" align="center" color="textSecondary">
No matching events.