Add TimeSpan js class

assets/App.vue

@@ -3,22 +3,26 @@
     <section
       v-if="today_time"
       class="timer"
-      v-bind:class="{ overtime: isOvertime }"
+      v-bind:class="{ overtime: today_time.isOvertime() }"
     >
-      {{ today_time | str_time }}
+      {{ today_time.toStr() }}
     </section>
     <section class="actions">
       <a v-if="started" v-on:click.prevent="finish" href="#">Закончить</a>
       <a v-else v-on:click.prevent="start" href="#">Начать</a>
     </section>
     <section v-if="total_time" class="total">
-      Всего {{ total_time | str_time }}
+      Всего
+      <span v-bind:class="{ overtime: total_time.isOvertime() }">
+        {{ total_time.toStr() }}
+      </span>
     </section>
     <p class="profile-info">Профиль: {{ profileId }}</p>
   </div>
 </template>
 
 <script>
+import TimeSpan from './TimeSpan';
 import h from './helpers';
 export default {
   data() {
@@ -34,17 +38,12 @@ export default {
     this.get_status();
     setInterval(() => this.get_status(), 60 * 1000);
   },
-  computed: {
-    isOvertime() {
-      return this.total_time && this.total_time.status === 'overtime';
-    },
-  },
   methods: {
     get_status() {
       h.get_status(this.profileId).then(data => {
         this.started = data.started;
-        this.total_time = data.total.time;
-        this.today_time = data.today.time;
+        this.total_time = TimeSpan.fromObject(data.total.time);
+        this.today_time = TimeSpan.fromObject(data.today.time);
       });
     },
     start() {
@@ -54,12 +53,6 @@ export default {
       h.finish(this.profileId).then(() => this.get_status());
     },
   },
-  filters: {
-    str_time(time) {
-      const sign = time.status === 'overtime' ? '+' : '';
-      return sign + time.hours + ':' + String(time.minutes).padStart(2, '0');
-    },
-  },
 };
 </script>
 

assets/TimeSpan.js

@@ -0,0 +1,24 @@
+const STATUS_OVERTIME = 'overtime';
+
+class TimeSpan {
+  static fromObject({ hours, minutes, status }) {
+    return new TimeSpan(hours, minutes, status);
+  }
+
+  constructor(hours, minutes, status) {
+    this.hours = hours;
+    this.minutes = minutes;
+    this.status = status;
+  }
+
+  isOvertime() {
+    return this.status === STATUS_OVERTIME;
+  }
+
+  toStr() {
+    const sign = this.isOvertime() ? '+' : '';
+    return sign + this.hours + ':' + String(this.minutes).padStart(2, '0');
+  }
+}
+
+export default TimeSpan;

assets/helpers.js

@@ -7,7 +7,6 @@ function extract_profile_id() {
   const q = haystack.substring(haystack.indexOf('?') + 1, haystack.length);
   const query = qs.parse(q);
   const profile = query[PROFILE_QUERY] || '';
-  // console.log('PROFILE', query, profile);
   return profile;
 }
 
@@ -18,7 +17,6 @@ async function get_status(profileId) {
     method: 'GET',
   });
   const data = await response.json();
-  // console.log('DATA', data);
   return data;
 }