From 1fc03771c09d03157303f8b5d3b4fd05c3d5fd8d Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Fri, 4 Aug 2017 13:04:33 -0700
Subject: [PATCH] Remove Moment and use built-in date functions instead

This saves about 216kb in the compiled JS and also formats dates/times based on the user's location.
---
 package.json                       |  1 -
 src/js/components/SalmonRunBox.vue |  5 ++++-
 src/js/components/ScheduleRow.vue  | 10 ++++++++++
 src/js/main.js                     | 26 ++++++++++++++++++++------
 yarn.lock                          |  2 +-
 5 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 6fef25d..7f91668 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     "html-loader": "^0.5.0",
     "html-webpack-plugin": "^2.30.1",
     "mkdirp": "^0.5.1",
-    "moment": "^2.18.1",
     "node-sass": "^4.5.3",
     "purify-css": "^1.2.5",
     "purifycss-webpack": "^0.7.0",
diff --git a/src/js/components/SalmonRunBox.vue b/src/js/components/SalmonRunBox.vue
index 8f5d64b..b123a9e 100644
--- a/src/js/components/SalmonRunBox.vue
+++ b/src/js/components/SalmonRunBox.vue
@@ -31,7 +31,10 @@
                             <span v-else>Soon!</span>
                         </div>
                         <div class="title-color is-size-5">
-                            {{ coop.schedule.start_time | time }} &ndash;
+                            {{ coop.schedule.start_time | date }}
+                            {{ coop.schedule.start_time | time }}
+                            &ndash;
+                            {{ coop.schedule.end_time | date }}
                             {{ coop.schedule.end_time | time }}
                         </div>
                         <div v-if="isOpen">
diff --git a/src/js/components/ScheduleRow.vue b/src/js/components/ScheduleRow.vue
index ae014e4..45ce065 100644
--- a/src/js/components/ScheduleRow.vue
+++ b/src/js/components/ScheduleRow.vue
@@ -23,6 +23,9 @@
                         in {{ schedule.start_time - now | duration }}
                         <br />
                     </template>
+                    <template v-if="!isToday">
+                        {{ schedule.start_time | date }}
+                    </template>
                     {{ schedule.start_time | time }} &ndash;
                     {{ schedule.end_time | time }}
                 </div>
@@ -43,5 +46,12 @@ import Stage from './Stage.vue';
 export default {
     components: { Stage },
     props: ['schedule', 'now'],
+    computed: {
+        isToday() {
+            let now = new Date(this.now * 1000);
+            let start = new Date(this.schedule.start_time * 1000);
+            return (now.getDate() == start.getDate() && now.getMonth() == start.getMonth() && now.getFullYear() == start.getFullYear());
+        }
+    }
 }
 </script>
diff --git a/src/js/main.js b/src/js/main.js
index b9ec802..65370d1 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import App from './components/App.vue';
-import moment from 'moment';
 
 Vue.directive('portal', {
     inserted(el) {
@@ -8,15 +7,30 @@ Vue.directive('portal', {
     }
 });
 
+Vue.filter('date', function(value) {
+    return (new Date(value * 1000)).toLocaleDateString([], { month: 'numeric', day: 'numeric' });
+});
+
 Vue.filter('time', function(value) {
-    return moment.unix(value).local().format('ha');
+    return (new Date(value * 1000)).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
 });
 
 Vue.filter('duration', function(value) {
-    let duration = moment.duration(value, 'seconds');
-    let hours = Math.floor(duration.asHours());
-    let minutes = ('0' + duration.minutes()).substr(-2);
-    let seconds = ('0' + duration.seconds()).substr(-2);
+    let days = Math.floor(value / 86400);
+    value -= days * 86400;
+    let hours = Math.floor(value / 3600) % 24;
+    value -= hours * 3600;
+    let minutes = Math.floor(value / 60) % 60;
+    value -= minutes * 60;
+    let seconds = value % 60;
+
+    // Add leading zeros
+    if (days || hours)
+        minutes = ('0' + minutes).substr(-2);
+    seconds = ('0' + seconds).substr(-2);
+
+    if (days)
+        return `${days}d ${hours}h ${minutes}m ${seconds}s`;
     if (hours)
         return `${hours}h ${minutes}m ${seconds}s`;
     return `${minutes}m ${seconds}s`;
diff --git a/yarn.lock b/yarn.lock
index fc2bc2b..4107f8d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3388,7 +3388,7 @@ moment-timezone@^0.5.x:
   dependencies:
     moment ">= 2.9.0"
 
-"moment@>= 2.9.0", moment@^2.18.1:
+"moment@>= 2.9.0":
   version "2.18.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"