feat: вкладка Сейчас с текущей запущенной записью

viasite · Jul 6, 2018 · 13f64dc · 13f64dc
1 parent 94c3331
commit 13f64dc
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 38 deletions.
diff --git a/components/Entry.vue b/components/Entry.vue
@@ -2,7 +2,7 @@
   <v-ons-card class="entry">
     <span class="entry__group-count">{{ entry.planfix.group_count }}</span>
     <span class="entry__name">{{ entry.description | rejoin(', ') }}</span>
-    <span class="entry__duration">{{ (entry.dur / 1000 / 60) | round }}</span>
+    <span class="entry__duration">{{ duration }}</span>
     <div class="entry__second">
       <span class="entry__project" :style="'color:' + entry.project_hex_color">{{ entry.project }}</span>
       <a v-if="entry.planfix.task_id" class="entry__link"
@@ -15,43 +15,93 @@
 </template>
 
 <style>
-  .entry__name {
-  }
-  .entry__duration {
-    margin-left: 1rem;
-    float: right;
-  }
-  .entry__group-count {
-    color: #999;
-    display: inline-block;
-    width: 2rem;
-  }
-  .entry__second {
-    margin-left: 2rem;
-  }
-  .entry__project {
-  }
-  .entry__link {
-    color: #4573b1;
-    text-decoration: none;
-    font-size: 0.9rem;
-    margin-left: 1rem;
-  }
+.entry__name {
+}
+.entry__duration {
+  margin-left: 1rem;
+  float: right;
+}
+.entry__group-count {
+  color: #999;
+  display: inline-block;
+  width: 2rem;
+}
+.entry__second {
+  margin-left: 2rem;
+}
+.entry__project {
+}
+.entry__link {
+  color: #4573b1;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-left: 1rem;
+}
 </style>
 
 <script type="text/javascript">
-  export default {
-    props: {
-      entry: {
-        type: Object,
-        required: true
-      }
+export default {
+  props: {
+    entry: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      interval: false,
+      currentTickTime: 0
+    };
+  },
+
+  filters: {
+    round: value => Math.round(value),
+    replace: (value, search, replace) => value.replace(search, replace),
+    rejoin: (value, delim) => value.split('\n').join(delim),
+    brize: (value, search, replace) => value.replace('\n', '<br>')
+  },
+
+  computed: {
+    duration() {
+      // normal entry
+      if (this.entry.dur > 0) return Math.round(this.entry.dur / 1000 / 60);
+
+      // running entry
+      const seconds = Math.round(this.entry.dur + this.currentTickTime / 1000);
+      const t = {
+        h: Math.floor(seconds / 3600),
+        m: Math.floor((seconds % 3600) / 60),
+        s: seconds % 60
+      };
+      t.m = t.m.toString().padStart(2, '0');
+      t.s = t.s.toString().padStart(2, '0');
+      return `${t.h}:${t.m}:${t.s}`;
+    }
+  },
+
+  methods: {
+    startTick() {
+      this.currentTickTime = new Date().getTime();
+      this.interval = setInterval(() => {
+        this.currentTickTime = new Date().getTime();
+      }, 1000);
     },
-    filters: {
-      round: value => Math.round(value),
-      replace: (value, search, replace) => value.replace(search, replace),
-      rejoin: (value, delim) => value.split('\n').join(delim),
-      brize: (value, search, replace) => value.replace("\n", "<br>")
+
+    stopTick() {
+      clearInterval(this.interval);
+    }
+  },
+
+  created() {
+    // current running entry
+    if (this.entry.dur < 1) {
+      this.startTick();
     }
+  },
+
+  beforeDestroy() {
+    this.stopTick();
   }
-</script>
+};
+</script>
diff --git a/pages/SettingsPage.vue b/pages/SettingsPage.vue
@@ -2,6 +2,11 @@
   <v-ons-page>
     <v-ons-list>
 
+      <v-ons-list-item>
+        Основные секции имеют кнопку проверки правильности настроек.
+        После изменения настроек перезапустите сервер, чтобы всё применилось
+      </v-ons-list-item>
+
       <v-ons-list-header>Toggl</v-ons-list-header>
       <div>
         <ConfigEntry
@@ -259,7 +264,7 @@
           message = 'Подключение не удалось: ' + errors.join(', ');
         }
 
-        return { ok, message };
+        return {ok, message};
       },
 
       // проверяет подключение к Toggl и правильность workspace id
@@ -291,7 +296,7 @@
           message = 'Подключение не удалось: ' + errors.join(', ');
         }
 
-        return { ok, message };
+        return {ok, message};
       },
 
       // проверяет правильность аналитики Планфикса
@@ -309,7 +314,7 @@
           message = errors.join(', ');
         }
 
-        return { ok, message };
+        return {ok, message};
       }
     }
   }

diff --git a/pages/index.vue b/pages/index.vue
@@ -45,17 +45,23 @@
       let apiUrl = store.state.apiUrl;
       try {
         asyncData = {
+          entries_current: [await app.$axios.$get(apiUrl + '/toggl/entries/current')],
           entries_today: await app.$axios.$get(apiUrl + '/toggl/entries', {params: {type: 'today'}}),
           entries_pending: await app.$axios.$get(apiUrl + '/toggl/entries', {params: {type: 'pending'}}),
           entries_last: await app.$axios.$get(apiUrl + '/toggl/entries', {params: {type: 'last'}}),
         };
 
+        if(asyncData.entries_current[0].id == 0){
+          asyncData.entries_current = [];
+        }
+
         // sort by date desc
         asyncData.entries_today.sort((a, b) => b.id - a.id);
         asyncData.entries_pending.sort((a, b) => b.id - a.id);
         asyncData.entries_last.sort((a, b) => b.id - a.id);
 
         asyncData.tabs = [
+          {label: 'Сейчас', props: {entries: asyncData.entries_current}},
           {label: 'Сегодня', props: {entries: asyncData.entries_today}},
           {label: 'Ожидают', props: {entries: asyncData.entries_pending}},
           {label: 'Неделя', props: {entries: asyncData.entries_last}},