♻️ : create specific date time vue filter with vanilly instead of moment

gaia-app · Jan 25, 2020 · 3f4381a · 3f4381a
1 parent 429ffb3
commit 3f4381a
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 34 deletions.
diff --git a/src/main/resources/templates/job.html b/src/main/resources/templates/job.html
@@ -89,6 +89,7 @@ <h2>Stack {{stack.name}}</h2>
 <div th:replace="vue_templates/job/job-step"></div>
 <div th:replace="vue_templates/job/job-apply-confirm"></div>
 <div th:replace="vue_templates/job/job-timer"></div>
+<div th:replace="vue_templates/filters/date-time"></div>
 
 <script src="/js/ansi_to_html.js"></script>
 

diff --git a/src/main/resources/templates/module_description.html b/src/main/resources/templates/module_description.html
@@ -57,8 +57,8 @@ <h1>
                         <div class="desc">{{description}}</div>
                         <hr>
                         <div class="metadata">
-                            <p>Published <b>{{moduleMetadata.createdAt | dateTime}}</b> by <a href="#">{{moduleMetadata.createdBy.username}}</a></p>
-                            <p v-if="moduleMetadata.updatedAt">Last modified <b>{{moduleMetadata.updatedAt | dateTime}}</b> by <a href="#">{{moduleMetadata.updatedBy.username}}</a></p>
+                            <p>Published <b>{{moduleMetadata.createdAt | dateTimeLong}}</b> by <a href="#">{{moduleMetadata.createdBy.username}}</a></p>
+                            <p v-if="moduleMetadata.updatedAt">Last modified <b>{{moduleMetadata.updatedAt | dateTimeLong}}</b> by <a href="#">{{moduleMetadata.updatedBy.username}}</a></p>
                             <p>Source: <a :href="gitRepositoryUrl">{{gitRepositoryUrl}}</a></p>
                             <p v-if="estimatedMonthlyCost">Estimated monthly cost: ${{estimatedMonthlyCost}}</p>
                         </div>
@@ -98,6 +98,7 @@ <h1>
 <div th:replace="vue_templates/markdown"></div>
 <div th:replace="vue_templates/breadcrumb"></div>
 <div th:replace="vue_templates/sidebar"></div>
+<div th:replace="vue_templates/filters/date-time"></div>
 
 <div th:replace="helpers/messenger"></div>
 
@@ -121,11 +122,6 @@ <h1>
         data: () => ({ page: 'module_description' }),
         template: "#template-navigation",
     });
-
-    Vue.filter('dateTime', function (value) {
-        if (!value || !moment(value).isValid()) return '';
-        return moment(value).format('LLL');
-    })
 </script>
 
 </body>

diff --git a/src/main/resources/templates/stack.html b/src/main/resources/templates/stack.html
@@ -44,6 +44,7 @@
 <div th:replace="vue_templates/user-badge"></div>
 <div th:replace="vue_templates/sidebar"></div>
 <div th:replace="vue_templates/job/job-timer"></div>
+<div th:replace="vue_templates/filters/date-time"></div>
 
 <template id="stack-controls">
     <div class="page_controls">
@@ -197,17 +198,6 @@ <h2><span><i class="fas fa-history"></i> Job history</span></h2>
         template: "#stack-outputs",
         props: ["outputs"]
     });
-
-    Vue.filter('dateTime', function (value) {
-        if (!value || !moment(value).isValid()) return '';
-        return moment(value).format('L LTS');
-    });
-
-    Vue.filter('dateTimeLong', function (value) {
-        if (!value || !moment(value).isValid()) return '';
-        return moment(value).format('LLL');
-    });
-
 </script>
 
 <div th:replace="helpers/messenger"></div>

diff --git a/src/main/resources/templates/vue_templates/filters/date-time.vue b/src/main/resources/templates/vue_templates/filters/date-time.vue
@@ -0,0 +1,29 @@
+<script>
+    function formatDate(value, options) {
+        if (!value) return '';
+        return new Intl.DateTimeFormat(undefined, options).format(Date.parse(value));
+    }
+
+    // display date like "05/04/2020, 4:20:20 AM"
+    Vue.filter('dateTime', function (value) {
+        return formatDate(value, {
+            "day": "2-digit",
+            "month": "2-digit",
+            "year": "numeric",
+            "hour": "numeric",
+            "minute": "2-digit",
+            "second": "2-digit"
+        });
+    });
+    // display date like "May 04, 2020, 4:20:20 AM"
+    Vue.filter('dateTimeLong', function (value) {
+        return formatDate(value, {
+            "day": "2-digit",
+            "month": "long",
+            "year": "numeric",
+            "hour": "numeric",
+            "minute": "2-digit",
+            "second": "2-digit"
+        });
+    });
+</script>
diff --git a/src/main/resources/templates/vue_templates/job/job-metadata.vue b/src/main/resources/templates/vue_templates/job/job-metadata.vue
@@ -19,11 +19,11 @@
             <span class="job-detail-title">Status&nbsp;{{job.status}}</span>
             <p>
                 <i class="fas fa-play"></i>
-                Started&nbsp;<b>{{job.startDateTime | dateTime}}</b>
+                Started&nbsp;<b>{{job.startDateTime | dateTimeLong}}</b>
             </p>
             <p v-if="job.endDateTime">
                 <i class="fas fa-stop"></i>
-                Ended&nbsp;<b>{{job.endDateTime | dateTime}}</b>
+                Ended&nbsp;<b>{{job.endDateTime | dateTimeLong}}</b>
             </p>
             <p>
                 <i class="fas fa-stopwatch"></i>
@@ -51,12 +51,6 @@
                 return this.job.status !== null &&
                     this.job.status.indexOf('FAILED') > 0;
             },
-        },
-        filters: {
-            dateTime: function (value) {
-                if (!value || !moment(value).isValid()) return '';
-                return moment(value).format('LL LTS');
-            }
         }
     });
 </script>

diff --git a/src/main/resources/templates/vue_templates/job/job-step.vue b/src/main/resources/templates/vue_templates/job/job-step.vue
@@ -21,11 +21,11 @@
                 <span class="job-step-status">Status&nbsp;{{step.status}}</span>
                 <p>
                     <i class="fas fa-play"></i>
-                    Started&nbsp;<b>{{step.startDateTime | dateTime}}</b>
+                    Started&nbsp;<b>{{step.startDateTime | dateTimeLong}}</b>
                 </p>
                 <p v-if="step.endDateTime">
                     <i class="fas fa-stop"></i>
-                    Ended&nbsp;<b>{{step.endDateTime | dateTime}}</b>
+                    Ended&nbsp;<b>{{step.endDateTime | dateTimeLong}}</b>
                 </p>
                 <p>
                     <i class="fas fa-stopwatch"></i>
@@ -62,12 +62,6 @@
             step: function (newValue) {
                 this.bodyVisible = newValue.status !== 'FINISHED';
             }
-        },
-        filters: {
-            dateTime: function (value) {
-                if (!value || !moment(value).isValid()) return '';
-                return moment(value).format('LL LTS');
-            }
         }
     });
 </script>