Add break timer, and set length & type on db model (break or pomodoro for now)

assets/less/public.less

@@ -0,0 +1,12 @@
+h1 {
+  text-align: center;
+}
+.timer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  > .time {
+    font-size: 4em;
+    font-weight: bold;
+  }
+}

client/components/Layout.jsx

@@ -6,7 +6,8 @@ export default () => (
   <div id="app">
     <main>
       <h1>Pomodoro Time!</h1>
-      <Timer />
+      <Timer type="pomodoro" time={25 * 60 * 1000} />
+      <Timer type="break" time={5 * 60 * 1000} />
     </main>
   </div>
 );

client/components/Timer.jsx

@@ -1,18 +1,16 @@
 import { h, Component } from 'preact';
 
-import { bindAll } from 'lowline';
+import { startCase, bindAll } from 'lowline';
 
 import timeFilter from '../util/time-filter';
 
-const length = 25 * 60 * 1000;
-
 export default class Timer extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.state = {
-      time: length,
-      totalTime: length,
+      time: props.time,
+      totalTime: props.time,
       startTime: undefined,
     };
 
@@ -28,7 +26,7 @@ export default class Timer extends Component {
       startTime: Date.now(),
     });
 
-    this.interval = setInterval(this.updateTimer.bind(this), 10);
+    this.interval = setInterval(this.updateTimer, 10);
   }
 
   pause() {
@@ -39,8 +37,8 @@ export default class Timer extends Component {
     clearInterval(this.interval);
 
     this.setState({
-      time: length,
-      totalTime: length,
+      time: this.props.time,
+      totalTime: this.props.time,
       startTime: undefined,
     });
   }
@@ -67,6 +65,8 @@ export default class Timer extends Component {
     const data = {
       startTime: this.state.startTime,
       endTime: new Date(),
+      type: this.props.type,
+      length: this.props.time,
     };
 
     document.title = 'Pling!';
@@ -74,9 +74,11 @@ export default class Timer extends Component {
     if (Notification.permission !== 'granted') {
       Notification.requestPermission();
     } else {
-      const notification = new Notification('Pomodoro complete!', {
+      const title = this.props.type === 'pomodoro' ? 'Pomodoro Complete!' : 'Break is over!';
+      const body = this.props.type === 'pomodoro' ? 'Time for a break!' : 'Get back to work!';
+      const notification = new Notification(title, {
         icon: 'https://www.planetnatural.com/wp-content/uploads/2014/03/tomato-supplies.jpg',
-        body: 'Time for a break!',
+        body,
       });
     }
 
@@ -96,14 +98,15 @@ export default class Timer extends Component {
 
   render(props, state) {
     return (
-      <div class="timer">
+      <section class="timer">
+        <h1>{startCase(props.type)}</h1>
+
         <div class="time">{timeFilter(state.time || 0)}</div>
         <div class="buttons">
           <button onClick={this.start}>Start</button>
-          <button>Pause</button>
-          <button>Reset</button>
-        </div>
+          <button onClick={this.reset}>Reset</button>
         </div>
+      </section>
     );
   }
 }

server/services/pomodoros/model.js

@@ -11,6 +11,14 @@ const PomodoroSchema = new mongoose.Schema({
     type: Date,
     required: true,
   },
+  type: {
+    type: String,
+    required: true,
+  },
+  length: {
+    type: Number,
+    required: true,
+  },
   name: String,
   location: String,
   user: {