after pause display time as separate message and reset timer

Author: Michał Czyż

app/components/msg-show/component.js

@@ -7,11 +7,13 @@ const {
 export default Ember.Component.extend({
   lastMessage: service(),
   show: alias('lastMessage.present'),
-  messages: computed('lastMessage.msg.{numberPresent,numberListening,comment}', function () {
-    let {numberPresent, numberListening, comment} = this.get('lastMessage.msg');
+  messages: computed('lastMessage.msg.{numberPresent,numberListening,lastDuration,comment}', function () {
+    let {numberPresent, numberListening, lastDuration, comment} = this.get('lastMessage.msg');
+    console.log(lastDuration);
     return [
       {text: numberPresent, suffix: 'obecnych', icon: 'person', component: 'msg-show/people'},
       {text: numberListening, suffix: 'przez łącza tel.', icon: 'phone', component: 'msg-show/people'},
+      {text: lastDuration, icon: 'timer', component: 'msg-show/time'},
       {text: comment, component: 'msg-show/pre'},
     ];
   })

app/components/msg-show/time/template.hbs

@@ -0,0 +1,9 @@
+{{#paper-item class="md-3-line msg-show-time"}}
+  {{paper-icon item.icon classNames="big"}}
+  <div class="md-list-item-text">
+    <strong>
+      {{item.text}}
+    </strong>
+  </div>
+  {{paper-divider inset=true}}
+{{/paper-item}}

app/controllers/index.js

@@ -8,4 +8,5 @@ const {
 export default Ember.Controller.extend({
   lastMessage: service(),
   showMessage: alias('lastMessage.present')
+
 });

app/services/last-message.js

@@ -23,25 +23,28 @@ export default Ember.Service.extend({
   },
   _setMsg(info) {
     this._scheduleClear();
+    console.log(this.get('msg'));
     for (let property in info) this.get('msg').set(property, info[property]);
+    console.log(this.get('msg'));
   },
 
-  present: computed('msg.{numberPresent,comment}', function() {
-    return (this.get('msg.numberPresent') != null) || (this.get('msg.comment') != null)
+  present: computed('msg.{numberPresent,comment,lastDuration}', function() {
+    return (this.get('msg.numberPresent') != null) || (this.get('msg.comment') != null) || (this.get('msg.lastDuration') != null);
   }),
 
   clear() {
     this.set('msg', new Object({
       numberPresent: null,
       numberListening: null,
+      lastDuration: null,
       comment: null,
     }));
   },
   _scheduleClear() {
     if (this.get('nextClear')) {
       cancel(this.get('nextClear'));
     }
-    this.set('nextClear', later(this, this.clear, 30*1000));
+    this.set('nextClear', later(this, this.clear, 60*1000));
   }
 
 });

app/services/timer.js

@@ -1,15 +1,16 @@
 import Ember from 'ember';
-import { padStart } from 'lodash/string';
+import {padStart} from 'lodash/string';
 
 const {
   computed,
-  computed: { notEmpty },
+  computed: {notEmpty},
   run: {cancel, later},
-  inject: { service }
+  inject: {service}
 } = Ember;
 
 export default Ember.Service.extend({
   ipcRenderer: service(),
+  lastMessage: service(),
   minutes: 0,
   seconds: 0,
   firstTick: null,
@@ -21,11 +22,11 @@ export default Ember.Service.extend({
     return this._format(this.get('duration') / 60);
   }),
 
-  second: computed('duration', function() {
+  second: computed('duration', function () {
     return this._format(this.get('duration') % 60);
   }),
 
-  duration: computed('lastTick', function() {
+  duration: computed('lastTick', function () {
     let start = this.get('firstTick'),
       end = this.get('lastTick');
 
@@ -47,8 +48,7 @@ export default Ember.Service.extend({
   },
 
   pause() {
-    cancel(this.get('nextTick'));
-    this.set('nextTick', null);
+    this._pause();
     this.get('ipcRenderer').setLastTick(this.get('lastTick'));
   },
 
@@ -86,8 +86,15 @@ export default Ember.Service.extend({
   _pause() {
     cancel(this.get('nextTick'));
     this.set('nextTick', null);
+    this._notifyLastTick({minute: this.get('minute'), second: this.get('second')});
+    this.reset();
+
   },
   _currentTime() {
-    return new Date(Math.floor(new Date() / 1000)*1000)
+    return new Date(Math.floor(new Date() / 1000) * 1000)
+  },
+
+  _notifyLastTick(lastDuration) {
+    this.get('lastMessage').setMsg({lastDuration: `${lastDuration.minute}:${lastDuration.second}`})
   }
 });

app/styles/invert.sass

@@ -4,3 +4,6 @@
   .msg-show-people
     md-icon.big
       color: white
+  .msg-show-time
+    md-icon.big
+      color: white

app/styles/msg.sass

@@ -10,6 +10,18 @@
     width: 2.25em
     padding-right: .25em
 
+.msg-show-time
+  font-size: 10vh
+  md-icon.big
+    font-size: 16vh
+  strong
+    font-weight: 600
+    font-size: 18vh
+    text-align: right
+    display: inline-block
+    width: 3.25em
+    padding-right: .25em
+
 .msg-show-pre
   p
     text-align: center

app/templates/external-screen.hbs

@@ -1,6 +1,6 @@
 {{title "Ekran"}}
 
-<div class="inverted">
+<div class="inverted" style="-webkit-app-region: drag">
 
   <div class="flex no-select">
     {{msg-show}}

electron.js

@@ -42,17 +42,20 @@ app.on('window-all-closed', function onWindowAllClosed() {
 
 app.on('ready', function onReady() {
   mainWindow = new BrowserWindow({
-    title: 'Zegar - Panel',
+    title: 'ZegarPanel',
     width: 1200,
     height: 800
   });
 
   delete mainWindow.module;
 
   sideWindow = new BrowserWindow({
-    title: 'Zegar - Ekran',
+    title: 'ZegarEkran',
     width: 1200,
     height: 800,
+    x: 10,
+    y: 10,
+    closable: false,
     frame: false
   });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nat-app",
-  "version": "0.0.0",
+  "version": "0.2.0",
   "description": "Small description for nat-app goes here",
   "license": "MIT",
   "author": "",
@@ -62,7 +62,7 @@
     "name": null,
     "platform": "win32",
     "arch": "x64",
-    "version": null,
+    "version": "0.2.0",
     "app-bundle-id": null,
     "app-category-type": null,
     "app-copyright": null,