From ec404a971bca523dde755687bad7999f55af1c65 Mon Sep 17 00:00:00 2001 From: Determinant Date: Thu, 31 Jan 2019 18:06:05 -0500 Subject: ... --- build/static/js/main.0c8ec738.chunk.js | 2 ++ build/static/js/main.0c8ec738.chunk.js.map | 1 + build/static/js/main.36efdf67.chunk.js | 2 -- build/static/js/main.36efdf67.chunk.js.map | 1 - 4 files changed, 3 insertions(+), 3 deletions(-) create mode 100644 build/static/js/main.0c8ec738.chunk.js create mode 100644 build/static/js/main.0c8ec738.chunk.js.map delete mode 100644 build/static/js/main.36efdf67.chunk.js delete mode 100644 build/static/js/main.36efdf67.chunk.js.map (limited to 'build/static/js') diff --git a/build/static/js/main.0c8ec738.chunk.js b/build/static/js/main.0c8ec738.chunk.js new file mode 100644 index 0000000..f55a1f0 --- /dev/null +++ b/build/static/js/main.0c8ec738.chunk.js @@ -0,0 +1,2 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{308:function(e,t,a){e.exports=a(655)},655:function(e,t,a){"use strict";a.r(t);var n=a(1),r=a.n(n),c=a(28),o=a.n(c),i=a(137),l=a(101),s=a(39),u=a(45),h=a(78),d=a(74),m=a(79),p=(a(313),a(315),a(341),a(286)),f=a(31),v=a(99),g=a.n(v),y=a(306),E=a.n(y),w=a(305),b=a.n(w),P=a(173),x=a.n(P),k=a(81),S=a.n(k),T=a(177),C=a.n(T),D=a(93),O=a.n(D),j=a(103),R=a.n(j),N=a(40),B=a.n(N),G=a(307),I=a.n(G),W=a(174),K=a.n(W),A=function(e){return r.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 98.905998 93.557997",version:"1.1",style:e.style},r.a.createElement("g",{id:"g13",transform:"translate(-153.533,-203.047)"},r.a.createElement("g",{id:"g29"},r.a.createElement("g",{id:"g27"},r.a.createElement("polygon",{id:"polygon7",points:"252.439,241.924 234.556,288.703 185.103,296.605 153.533,257.728 171.416,210.949 220.869,203.047 ",style:{fill:"#ff8000"}}),r.a.createElement("g",{id:"g11",transform:"translate(167.24355,224.20734)"},r.a.createElement("text",{id:"text9",style:{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:75,fontFamily:"TypoPRO Fantasque Sans Mono",fill:"#ffeade"},transform:"translate(0.586,49.072)"},"Cr"))))))},_="https://www.googleapis.com/calendar/v3",M={invalidSyncToken:1,otherError:2};function z(e){return Object.entries(e).map(function(e){var t=Object(i.a)(e,2),a=t[0],n=t[1];return"".concat(encodeURIComponent(a),"=").concat(encodeURIComponent(n))}).join("&")}function F(){return new Promise(function(e){return chrome.identity.getAuthToken({interactive:!0},function(t){return e(t)})})}function U(e){return fetch("".concat(_,"/users/me/calendarList?").concat(z({access_token:e})),{method:"GET",async:!0}).then(function(e){return e.json()}).then(function(e){return e.items})}function L(e){return fetch("".concat(_,"/colors?").concat(z({access_token:e})),{method:"GET",async:!0}).then(function(e){return e.json()})}var $=function(){function e(t,a){Object(s.a)(this,e),this.calId=t,this.name=a,this.token=F(),this.syncToken="",this.cache={}}return Object(u.a)(e,[{key:"getSlot",value:function(e){return this.cache[e]||(this.cache[e]={}),this.cache[e]}},{key:"addEvent",value:function(t){var a=e.dateToCacheKey(t.start),n=e.dateToCacheKey(new Date(t.end.getTime()-1));if(a===n)this.getSlot(a)[t.id]={start:t.start,end:t.end,id:t.id};else{this.getSlot(a)[t.id]={start:t.start,end:e.slotEndDate(a),id:t.id},this.getSlot(n)[t.id]={start:e.slotStartDate(n),end:t.end,id:t.id};for(var r=a+1;r=a||n[c].end<=t))(n[c].start(n[c].end>a?a:n[c].end)&&console.log(n[c],t,a),r.push({id:c,start:n[c].starta?a:n[c].end})}return r}},{key:"getCachedEvents",value:function(t,a){for(var n=e.dateToCacheKey(t),r=e.dateToCacheKey(new Date(a.getTime()-1)),c=this.getSlotEvents(n,t,a),o=n+1;on&&c.push.apply(c,Object(l.a)(this.getSlotEvents(r,t,a))),c}},{key:"sync",value:function(){var e=this;return this.token.then(function(t){return function(e,t,a){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:100,r=[];return function a(c,o){return fetch("".concat(_,"/calendars/").concat(e,"/events?").concat(z({access_token:t,pageToken:c,syncToken:o,maxResults:n})),{method:"GET",async:!0}).then(function(e){if(200===e.status)return e.json();throw 410==e.status?M.invalidSyncToken:M.otherErrors}).then(function(e){return r.push.apply(r,Object(l.a)(e.items)),e.nextPageToken?a(e.nextPageToken,""):{nextSyncToken:e.nextSyncToken,results:r}})}("",a)}(e.calId,t,e.syncToken).then(function(a){e.syncToken=a.nextSyncToken;var n=a.results.map(function(a){return a.start?Promise.resolve(a):function(e,t,a){return fetch("".concat(_,"/calendars/").concat(e,"/events/").concat(t,"?").concat(z({access_token:a})),{method:"GET",async:!0}).then(function(e){return e.json()})}(e.calId,a.id,t)});return Promise.all(n).then(function(t){return t.forEach(function(t){t.start=new Date(t.start.dateTime),t.end=new Date(t.end.dateTime),"confirmed"===t.status?e.addEvent(t):"cancelled"===t.status&&e.removeEvent(t)})})})}).catch(function(t){if(t!=M.invalidSyncToken)throw t;e.syncToken="",e.sync()})}},{key:"getEvents",value:function(e,t){var a=this;return this.sync().then(function(){return a.getCachedEvents(e,t)})}}],[{key:"dateToCacheKey",value:function(e){return Math.floor(e/864e5)}},{key:"slotStartDate",value:function(e){return new Date(864e5*e)}},{key:"slotEndDate",value:function(e){return new Date(864e5*(e+1))}}]),e}(),H=function(){function e(t,a,n,r){Object(s.a)(this,e),this.id=t,this.isRegex=a,this.value=n,this.label=r}return Object(u.a)(e,[{key:"regex",get:function(){return new RegExp(this.isRegex?this.value:"^".concat(this.value,"$"))}},{key:"isEmpty",get:function(){return null===this.label}}]),e}();H.emptyPattern=function(){return new H(0,!0,"",null)},H.anyPattern=function(){return new H("any",!0,".*","Any")};var J=function e(t,a,n,r){Object(s.a)(this,e),this.name=t,this.idx=a,this.cal=n,this.event=r};J.defaultPatternEntry=function(e){return new J("",e,H.emptyPattern(),H.anyPattern())};var V=a(299),q=a.n(V),X=a(659),Y=a(657),Q=a(656),Z=a(554);function ee(e){var t=e.cx,a=e.cy,n=e.x,c=e.y,o=e.fill,i=e.name,l="middle",s=0,u=0;return nt+2&&(s=5,l="start"),ca+2&&(u=10),r.a.createElement("text",{x:n,y:c,dx:s,dy:u,fill:o,textAnchor:l},"".concat(i))}var te=Object(f.withStyles)(function(e){return{pieChart:{margin:"0 auto"}}})(function(e){return r.a.createElement(B.a,{container:!0,spacing:0},r.a.createElement(B.a,{item:!0,xs:12,lg:6},r.a.createElement("div",{className:e.classes.patternTableWrapper},r.a.createElement(X.a,{width:400,height:250,className:e.classes.pieChart},r.a.createElement(Y.a,{data:e.patternGraphData,dataKey:"value",cx:200,cy:125,outerRadius:60,fill:q.a[300],label:ee}),r.a.createElement(Q.a,{formatter:function(e){return"".concat(e.toFixed(2)," hr")}})))),r.a.createElement(B.a,{item:!0,xs:12,lg:6},r.a.createElement("div",{className:e.classes.patternTableWrapper},r.a.createElement(X.a,{width:400,height:250,className:e.classes.pieChart},r.a.createElement(Y.a,{data:e.calendarGraphData,dataKey:"value",cx:200,cy:125,innerRadius:40,outerRadius:70,fill:g.a[300],label:ee},e.calendarGraphData.map(function(e,t){return r.a.createElement(Z.a,{key:t,fill:e.color})})),r.a.createElement(Q.a,{formatter:function(e){return"".concat(e.toFixed(2)," hr")}})))))}),ae=a(136),ne=a.n(ae),re=a(301),ce=a.n(re),oe=a(303),ie=a.n(oe),le=a(140),se=a.n(le),ue=a(100),he=a.n(ue),de=a(302),me=a.n(de),pe=a(304),fe=a.n(pe),ve=a(300),ge=a.n(ve),ye=a(131),Ee=a.n(ye),we=a(172),be=a.n(we),Pe=function(e){function t(){return Object(s.a)(this,t),Object(h.a)(this,Object(d.a)(t).apply(this,arguments))}return Object(m.a)(t,e),Object(u.a)(t,[{key:"render",value:function(){var e=this,t=this.props.classes,a=[],n=this.props.options,c=new H.emptyPattern;for(var o in n[c.id]=c,n){var i=n[o].isEmpty?r.a.createElement("span",{style:{color:this.props.theme.palette.primary.dark}},"Custom"):n[o].label;a.push(r.a.createElement(be.a,{key:o,value:o},i))}var l=this.props.value.isRegex?t.fieldRegex:t.fieldNoRegex;return r.a.createElement(O.a,null,r.a.createElement("span",null,r.a.createElement(Ee.a,{value:this.props.value.id,onChange:function(t){var a;a=null==n[t.target.value].label?new H(0,!0,e.props.value.isRegex?e.props.value.value:"^".concat(e.props.value.value,"$"),null):n[t.target.value],e.props.onChange({target:{value:a}})},className:l},a),null==this.props.value.label&&r.a.createElement(ne.a,{value:this.props.value.value,onChange:function(t){return e.props.onChange({target:{value:new H(0,!0,t.target.value,null)}})}})))}}]),t}(r.a.Component),xe=Object(f.withStyles)(function(e){return{fieldNoRegex:{width:200},fieldRegex:{marginRight:"0.5em"}}})(Pe);var ke=a(139),Se=a.n(ke),Te=Object(f.createMuiTheme)({palette:{primary:{light:Se.a[300],main:Se.a[500],dark:Se.a[700],contrastText:"#fff"}},typography:{useNextVariants:!0}}),Ce=[{label:"Name",field:"name",elem:ne.a},{label:"Calendar",field:"cal",elem:Object(f.withTheme)(Te)(function(e){var t={};for(var a in e.cached.calendars)t[a]=new H(a,!1,e.cached.calendars[a].name,e.cached.calendars[a].name);return r.a.createElement(xe,{value:e.value,options:t,onChange:e.onChange,theme:e.theme})})},{label:"Event",field:"event",elem:Object(f.withTheme)(Te)(function(e){var t=H.anyPattern(),a={};return a[t.id]=t,r.a.createElement(xe,{value:e.value,options:a,onChange:e.onChange,theme:e.theme})})}],De=function(e){function t(){var e,a;Object(s.a)(this,t);for(var n=arguments.length,r=new Array(n),c=0;c0&&r.a.createElement(se.a,{style:{height:48*s}},r.a.createElement(he.a,{colSpan:Ce.length}))))),r.a.createElement(fe.a,{rowsPerPageOptions:[5,10,25],component:"div",count:c.length,rowsPerPage:i,page:l,backIconButtonProps:{"aria-label":"Previous Page"},nextIconButtonProps:{"aria-label":"Next Page"},onChangePage:this.handleChangePage,onChangeRowsPerPage:this.handleChangeRowsPerPage}))}}]),t}(r.a.Component),Oe=Object(f.withStyles)(function(e){return{deleteButtonShow:{position:"absolute",right:0,height:48},deleteButtonHide:{display:"none"},deleteIcon:{height:"100%",cursor:"pointer"},patternTableWrapper:{overflowX:"auto",overflowY:"hidden"},patternTable:{minWidth:600}}})(De),je=[{name:"Work",value:10,color:g.a[300]},{name:"Wasted",value:10,color:g.a[300]}];var Re=function(e){function t(){var e,a;Object(s.a)(this,t);for(var n=arguments.length,r=new Array(n),c=0;c\n \n \n \n \n \n \n Cr\n \n \n \n \n \n","/* global chrome */\nconst gapi_base = 'https://www.googleapis.com/calendar/v3';\n\nconst GApiError = {\n invalidSyncToken: 1,\n otherError: 2,\n};\n\nfunction to_params(dict) {\n return Object.entries(dict).map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&');\n}\n\nexport function getAuthToken() {\n return new Promise(resolver =>\n chrome.identity.getAuthToken(\n {interactive: true}, token => resolver(token)));\n}\n\nexport function getCalendars(token) {\n return fetch(`${gapi_base}/users/me/calendarList?${to_params({access_token: token})}`,\n { method: 'GET', async: true })\n .then(response => response.json())\n .then(data => data.items);\n}\n\nexport function getColors(token) {\n return fetch(`${gapi_base}/colors?${to_params({access_token: token})}`,\n { method: 'GET', async: true })\n .then(response => response.json());\n}\n\nfunction getEvent(calId, eventId, token) {\n return fetch(`${gapi_base}/calendars/${calId}/events/${eventId}?${to_params({access_token: token})}`,\n { method: 'GET', async: true })\n .then(response => response.json());\n}\n\nfunction getEvents(calId, token, syncToken, resultsPerRequest=100) {\n let results = [];\n const singleFetch = (pageToken, syncToken) => fetch(`${gapi_base}/calendars/${calId}/events?${to_params({\n access_token: token,\n pageToken,\n syncToken,\n maxResults: resultsPerRequest\n })}`, { method: 'GET', async: true })\n .then(response => {\n if (response.status === 200)\n return response.json();\n else if (response.status == 410)\n throw GApiError.invalidSyncToken;\n else throw GApiError.otherErrors;\n })\n .then(data => {\n results.push(...data.items);\n if (data.nextPageToken) {\n return singleFetch(data.nextPageToken, '');\n } else {\n return ({\n nextSyncToken: data.nextSyncToken,\n results\n });\n }\n })\n\n return singleFetch('', syncToken);\n}\n\nexport class GCalendar {\n constructor(calId, name) {\n this.calId = calId;\n this.name = name;\n this.token = getAuthToken();\n this.syncToken = '';\n this.cache = {};\n }\n\n static dateToCacheKey(date) {\n return Math.floor(date / 8.64e7);\n }\n\n getSlot(k) {\n if (!this.cache[k])\n this.cache[k] = {};\n return this.cache[k];\n }\n\n static slotStartDate(k) { return new Date(k * 8.64e7); }\n static slotEndDate(k) { return new Date((k + 1) * 8.64e7); }\n\n addEvent(e) {\n let ks = GCalendar.dateToCacheKey(e.start);\n let ke = GCalendar.dateToCacheKey(new Date(e.end.getTime() - 1));\n if (ks === ke)\n this.getSlot(ks)[e.id] = {\n start: e.start,\n end: e.end,\n id: e.id };\n else\n {\n this.getSlot(ks)[e.id] = {\n start: e.start,\n end: GCalendar.slotEndDate(ks),\n id: e.id };\n this.getSlot(ke)[e.id] = {\n start: GCalendar.slotStartDate(ke),\n end: e.end,\n id: e.id };\n for (let k = ks + 1; k < ke; k++)\n this.getSlot(k)[e.id] = {\n start: GCalendar.slotStartDate(k),\n end: GCalendar.slotEndDate(k),\n id: e.id };\n }\n }\n\n removeEvent(e) {\n let ks = GCalendar.dateToCacheKey(e.start);\n let ke = GCalendar.dateToCacheKey(new Date(e.end.getTime() - 1));\n for (let k = ks; k <= ke; k++)\n delete this.getSlot(k)[e.id];\n }\n\n getSlotEvents(k, start, end) {\n let s = this.getSlot(k);\n let results = [];\n for (let id in s) {\n if (!(s[id].start >= end || s[id].end <= start))\n {\n let nstart = s[id].start < start ? start: s[id].start;\n let nend = s[id].end > end ? end: s[id].end;\n if (nstart > nend) console.log(s[id], start, end);\n results.push({\n id,\n start: s[id].start < start ? start: s[id].start,\n end: s[id].end > end ? end: s[id].end\n });\n }\n }\n return results;\n }\n\n getCachedEvents(start, end) {\n let ks = GCalendar.dateToCacheKey(start);\n let ke = GCalendar.dateToCacheKey(new Date(end.getTime() - 1));\n let results = this.getSlotEvents(ks, start, end);\n for (let k = ks + 1; k < ke; k++)\n {\n let s = this.getSlot(k);\n for (let id in s)\n results.push(s[id]);\n }\n if (ke > ks)\n results.push(...this.getSlotEvents(ke, start, end));\n return results;\n }\n\n sync() {\n return this.token.then(token => getEvents(this.calId, token, this.syncToken).then(r => {\n this.syncToken = r.nextSyncToken;\n let pm_results = r.results.map(e => e.start ? Promise.resolve(e) : getEvent(this.calId, e.id, token));\n return Promise.all(pm_results).then(results => results.forEach(e => {\n e.start = new Date(e.start.dateTime);\n e.end = new Date(e.end.dateTime);\n if (e.status === 'confirmed')\n this.addEvent(e);\n else if (e.status === 'cancelled')\n this.removeEvent(e);\n }));\n })).catch(e => {\n if (e == GApiError.invalidSyncToken) {\n this.syncToken = '';\n this.sync();\n } else throw e;\n });\n }\n\n getEvents(start, end) {\n return this.sync().then(() => this.getCachedEvents(start, end));\n }\n}\n","export class Pattern {\n constructor(id, isRegex, value, label) {\n this.id = id;\n this.isRegex = isRegex;\n this.value = value;\n this.label = label;\n }\n\n get regex() { return new RegExp(this.isRegex ? this.value : `^${this.value}$`); }\n get isEmpty() { return this.label === null; }\n static emptyPattern = () => new Pattern(0, true, '', null);\n static anyPattern = () => new Pattern('any', true, '.*', 'Any');\n}\n\nexport class PatternEntry {\n constructor(name, idx, calPattern, eventPattern) {\n this.name = name;\n this.idx = idx;\n this.cal = calPattern;\n this.event = eventPattern;\n }\n\n static defaultPatternEntry = (idx) => new PatternEntry('', idx, Pattern.emptyPattern(), Pattern.anyPattern());\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Grid from '@material-ui/core/Grid';\nimport deepOrange from '@material-ui/core/colors/deepOrange';\nimport cyan from '@material-ui/core/colors/cyan';\nimport { PieChart, Pie, Cell, Tooltip } from 'recharts';\n\nconst styles = theme => ({\n pieChart: {\n margin: '0 auto',\n }\n});\n\nfunction customizedLabel(props) {\n const {cx, cy, x, y, fill, name} = props;\n let anchor = \"middle\";\n const EPS = 2;\n let dx = 0;\n let dy = 0;\n if (x < cx - EPS) {\n dx = -5;\n anchor = \"end\"\n } else if (x > cx + EPS) {\n dx = 5;\n anchor = \"start\";\n }\n\n if (y < cy - EPS) {\n dy = -5;\n } else if (y > cy + EPS) {\n dy = 10;\n }\n\n return ({`${name}`});\n}\n\nfunction ChromiclePieChart(props) {\n return (\n \n \n
\n \n \n `${value.toFixed(2)} hr`}/>\n \n
\n \n \n
\n \n \n {props.calendarGraphData.map((d, i) => )}\n \n `${value.toFixed(2)} hr`}/>\n \n
\n \n );\n}\n\nChromiclePieChart.propTypes = {\n patternGraphData: PropTypes.array.isRequired,\n calendarGraphData: PropTypes.array.isRequired,\n};\n\nexport default withStyles(styles)(ChromiclePieChart);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport TextField from '@material-ui/core/TextField';\nimport FormControl from '@material-ui/core/FormControl';\nimport { Pattern } from './pattern';\n\nconst styles = theme => ({\n fieldNoRegex: {\n width: 200\n },\n fieldRegex: {\n marginRight: '0.5em'\n }\n});\n\nclass RegexField extends React.Component {\n render() {\n const { classes } = this.props;\n let items = [];\n var pitems = this.props.options;\n const p0 = new Pattern.emptyPattern();\n pitems[p0.id] = p0;\n for (let id in pitems)\n {\n const label = !pitems[id].isEmpty ? pitems[id].label :\n Custom;\n items.push({label});\n }\n const selectOnClick = event => {\n let value;\n if (pitems[event.target.value].label == null) {\n value = new Pattern(0, true,\n this.props.value.isRegex ?\n this.props.value.value :\n `^${this.props.value.value}$`, null);\n } else {\n value = pitems[event.target.value];\n }\n this.props.onChange({target: {value}});\n };\n\n const regexTextOnChange = event => this.props.onChange({\n target: { value: new Pattern(0, true, event.target.value, null)}});\n\n const className = this.props.value.isRegex ? classes.fieldRegex: classes.fieldNoRegex;\n return (\n \n \n {items}\n \n {this.props.value.label == null && (\n \n )}\n \n );\n }\n}\n\nRegexField.propTypes = {\n classes: PropTypes.object.isRequired,\n};\n\nconst RegexFieldWithStyles = withStyles(styles)(RegexField);\n\nexport function CalendarField(props) {\n let options = {};\n for (let id in props.cached.calendars) {\n options[id] = new Pattern(id, false,\n props.cached.calendars[id].name,\n props.cached.calendars[id].name);\n }\n return (\n );\n}\n\nexport function EventField(props) {\n let any = Pattern.anyPattern();\n let options = {};\n options[any.id] = any;\n return (\n );\n}\n","import { createMuiTheme } from '@material-ui/core/styles';\nimport orange from '@material-ui/core/colors/orange';\n\nconst theme = createMuiTheme({\n palette: {\n primary: {\n light: orange[300],\n main: orange[500],\n dark: orange[700],\n contrastText: \"#fff\"\n }\n },\n typography: {\n useNextVariants: true,\n }\n});\n\nexport default theme;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles, withTheme } from '@material-ui/core/styles';\nimport TextField from '@material-ui/core/TextField';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableRow from '@material-ui/core/TableRow';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableHead from '@material-ui/core/TableHead';\nimport TablePagination from '@material-ui/core/TablePagination';\nimport DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';\nimport { CalendarField, EventField } from './RegexField';\nimport theme from './theme';\n\nconst styles = theme => ({\n deleteButtonShow: {\n position: 'absolute',\n right: 0,\n height: 48\n },\n deleteButtonHide: {\n display: 'none'\n },\n deleteIcon: {\n height: '100%',\n cursor: 'pointer'\n },\n patternTableWrapper: {\n overflowX: 'auto',\n overflowY: 'hidden'\n },\n patternTable: {\n minWidth: 600\n }\n});\n\nconst patternHead = [\n {label: \"Name\", field: \"name\", elem: TextField},\n {label: \"Calendar\", field: \"cal\", elem: withTheme(theme)(CalendarField)},\n {label: \"Event\", field: 'event', elem: withTheme(theme)(EventField)}];\n\nclass PatternTable extends React.Component {\n state = {\n page: 0,\n rowsPerPage: 5,\n };\n\n handleChangePage = (event, page) => {\n this.setState({ page });\n }\n\n handleChangeRowsPerPage = event => {\n this.setState({ rowsPerPage: event.target.value });\n }\n\n render() {\n const { classes, cached, patterns } = this.props;\n const { rowsPerPage, page } = this.state;\n const nDummy = rowsPerPage - Math.min(rowsPerPage, patterns.length - page * rowsPerPage);\n let rows = patterns.slice(page * rowsPerPage, (page + 1) * rowsPerPage).map(p => (\n this.setState({ activePattern: p.idx })}\n onMouseOut={() => this.setState({ activePattern: null })}>\n {\n patternHead.map(s => {\n const CustomText = s.elem;\n return (\n \n this.props.onUpdatePattern(s.field, p.idx, event.target.value)}/>\n )})\n }\n \n this.props.onRemovePattern(p.idx)} />\n \n ));\n\n return (\n
\n
\n \n \n {patternHead.map((s, i) => ({s.label}))}\n \n \n {rows}\n {\n nDummy > 0 && (\n \n \n )\n }\n \n
\n
\n \n
);\n }\n}\n\n\nPatternTable.propTypes = {\n classes: PropTypes.object.isRequired,\n patterns: PropTypes.array.isRequired,\n cached: PropTypes.object.isRequired,\n onRemovePattern: PropTypes.func.isRequired,\n onUpdatePattern: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(PatternTable);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport 'typeface-roboto';\nimport 'react-dates/initialize';\nimport 'react-dates/lib/css/_datepicker.css';\nimport { DateRangePicker } from 'react-dates';\nimport { withStyles } from '@material-ui/core/styles';\nimport { MuiThemeProvider } from '@material-ui/core/styles';\nimport cyan from '@material-ui/core/colors/cyan';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Typography from '@material-ui/core/Typography';\nimport Button from '@material-ui/core/Button';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormGroup from '@material-ui/core/FormGroup';\nimport Grid from '@material-ui/core/Grid';\nimport AddCircleIcon from '@material-ui/icons/AddCircle';\nimport IconButton from '@material-ui/core/IconButton';\nimport Logo from './Logo';\nimport * as gapi from './gapi';\nimport { Pattern, PatternEntry } from './pattern';\nimport PieChart from './Chart';\nimport PatternTable from './PatternTable';\nimport theme from './theme';\n\nconst default_chart_data = [\n {name: 'Work', value: 10, color: cyan[300]},\n {name: 'Wasted', value: 10, color: cyan[300]}];\n\nfunction filterPatterns(patterns, calName) {\n return patterns.filter(p => {\n return p.cal.regex.test(calName);\n });\n}\n\nconst styles = theme => ({\n root: {\n display: 'flex',\n height: '100vh',\n },\n appBar: {\n zIndex: theme.zIndex.drawer + 1,\n transition: theme.transitions.create(['width', 'margin'], {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen,\n }),\n },\n title: {\n flexGrow: 1,\n },\n sectionTitle: {\n flex: '0 0 auto'\n },\n appBarSpacer: theme.mixins.toolbar,\n content: {\n flexGrow: 1,\n padding: theme.spacing.unit * 3,\n overflow: 'auto',\n },\n buttonSpacer: {\n marginBottom: theme.spacing.unit * 4,\n },\n fab: {\n margin: theme.spacing.unit,\n },\n});\n\nclass Dashboard extends React.Component {\n state = {\n patterns: [],\n timeRange: null,\n token: gapi.getAuthToken(),\n patternGraphData: default_chart_data,\n calendarGraphData: default_chart_data,\n activePattern: null\n };\n\n cached = {\n calendars: {}\n };\n\n updatePattern = (field, idx, value) => {\n let patterns = this.state.patterns;\n patterns[idx][field] = value;\n this.setState({ patterns });\n };\n\n removePattern = idx => {\n let patterns = this.state.patterns;\n patterns.splice(idx, 1);\n for (let i = 0; i < patterns.length; i++)\n patterns[i].idx = i;\n this.setState({ patterns });\n };\n\n newPattern = () => {\n let patterns = [PatternEntry.defaultPatternEntry(), ...this.state.patterns];\n for (let i = 1; i < patterns.length; i++)\n patterns[i].idx = i;\n this.setState({ patterns });\n };\n\n analyze = () => {\n if (!(this.state.startDate && this.state.endDate)) {\n alert(\"Please choose a valid time range.\");\n return;\n }\n let start = this.state.startDate.startOf('day').toDate();\n let end = this.state.endDate.startOf('day').toDate();\n console.log(start, end);\n let event_pms = [];\n for (let id in this.cached.calendars)\n event_pms.push(this.cached.calendars[id].cal.getEvents(start, end)\n .then(r => { return { id, events: r }; })\n .catch(e => {\n console.log(`cannot load calendar ${id}`);\n return { id, events: [] };\n }));\n\n Promise.all(event_pms).then(all_events => {\n let events = {};\n let results = {}; // pattern idx => time\n let cal_results = {}; // cal id => time\n all_events.forEach(e => events[e.id] = e.events);\n for (let i = 0; i < this.state.patterns.length; i++)\n results[i] = 0;\n for (let id in this.cached.calendars) {\n if (!events[id]) continue;\n let patterns = filterPatterns(this.state.patterns, this.cached.calendars[id].name);\n events[id].forEach(event => {\n patterns.forEach(p => {\n if (!p.event.regex.test(event.summary)) return;\n if (!cal_results.hasOwnProperty(id)) {\n cal_results[id] = 0;\n }\n let duration = (event.end - event.start) / 60000;\n results[p.idx] += duration;\n cal_results[id] += duration;\n });\n });\n }\n let patternGraphData = [];\n let calendarGraphData = [];\n for (let i = 0; i < this.state.patterns.length; i++) {\n patternGraphData.push({ name: this.state.patterns[i].name, value: results[i] / 60.0 });\n }\n for (let id in cal_results) {\n calendarGraphData.push({\n name: this.cached.calendars[id].name,\n value: (cal_results[id] / 60.0),\n color: this.cached.calendars[id].color.background});\n }\n //console.log(patternGraphData, calendarGraphData);\n this.setState({ patternGraphData, calendarGraphData });\n });\n };\n\n loadPatterns = () => {\n let token = this.state.token;\n let colors = token.then(gapi.getColors).then(color => {\n return color.calendar;\n });\n let cals = token.then(gapi.getCalendars);\n Promise.all([colors, cals]).then(([colors, items]) => {\n items.forEach(item => {\n this.cached.calendars[item.id] = {\n name: item.summary,\n color: colors[item.colorId],\n cal: new gapi.GCalendar(item.id, item.summary)\n };\n });\n this.setState({ patterns: items.map((item, idx) => {\n return new PatternEntry(item.summary, idx,\n new Pattern(item.id, false, item.summary, item.summary),\n Pattern.anyPattern());\n })});\n });\n };\n\n render() {\n const { classes } = this.prop