changeset 2541:468c8dc796cf

client: convert lib helper functions to Vue filters
author Markus Kottlaender <markus@intevation.de>
date Thu, 07 Mar 2019 15:53:12 +0100
parents 3c17d401fbd4
children fc7d828695c9
files client/src/components/Bottlenecks.vue client/src/components/ImportStretches.vue client/src/components/fairway/Profiles.vue client/src/components/importoverview/staging/StagingDetail.vue client/src/lib/date.js client/src/lib/filters.js client/src/main.js
diffstat 7 files changed, 60 insertions(+), 75 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Bottlenecks.vue	Thu Mar 07 15:19:16 2019 +0100
+++ b/client/src/components/Bottlenecks.vue	Thu Mar 07 15:53:12 2019 +0100
@@ -29,7 +29,7 @@
         }}</a>
       </div>
       <div class="col-3 py-2">
-        {{ formatSurveyDate(bottleneck.properties.current) }}
+        {{ bottleneck.properties.current | surveyDate }}
       </div>
       <div class="col-3 py-2">
         {{
@@ -80,7 +80,7 @@
           :key="index"
           @click="selectSurvey(survey, bottleneck)"
         >
-          {{ formatSurveyDate(survey.date_info) }}
+          {{ survey.date_info | surveyDate }}
         </a>
       </div>
     </UITableBody>
@@ -125,7 +125,6 @@
 import { mapState } from "vuex";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors.js";
-import { formatSurveyDate } from "@/lib/date.js";
 
 export default {
   name: "bottlenecks",
@@ -152,9 +151,6 @@
     }
   },
   methods: {
-    formatSurveyDate(date) {
-      return formatSurveyDate(date);
-    },
     filteredAndSortedBottlenecks() {
       return this.bottlenecksList
         .filter(bn => {
--- a/client/src/components/ImportStretches.vue	Thu Mar 07 15:19:16 2019 +0100
+++ b/client/src/components/ImportStretches.vue	Thu Mar 07 15:53:12 2019 +0100
@@ -34,7 +34,7 @@
           }}</a>
         </div>
         <div class="py-2 col-2">
-          {{ formatSurveyDate(stretch.properties["date_info"]) }}
+          {{ stretch.properties["date_info"] | surveyDate }}
         </div>
         <div class="py-2 col-3">
           {{ stretch.properties["source_organization"] }}
@@ -254,7 +254,6 @@
  */
 import { mapState, mapGetters } from "vuex";
 import { displayError, displayInfo } from "@/lib/errors.js";
-import { formatSurveyDate } from "@/lib/date.js";
 import { LAYERS } from "@/store/map.js";
 
 export default {
@@ -376,9 +375,6 @@
         preventZoomOut: true
       });
     },
-    formatSurveyDate(d) {
-      return formatSurveyDate(d);
-    },
     loadStretches() {
       return new Promise((resolve, reject) => {
         this.$store
--- a/client/src/components/fairway/Profiles.vue	Thu Mar 07 15:19:16 2019 +0100
+++ b/client/src/components/fairway/Profiles.vue	Thu Mar 07 15:53:12 2019 +0100
@@ -47,7 +47,7 @@
                   :key="wl"
                   :value="wl"
                 >
-                  {{ formatSurveyDate(wl) }}
+                  {{ wl | surveyDate }}
                 </option>
               </select>
             </div>
@@ -61,7 +61,7 @@
                   v-for="survey in surveys"
                   :key="survey.date_info"
                   :value="survey"
-                  >{{ formatSurveyDate(survey.date_info) }}</option
+                  >{{ survey.date_info | surveyDate }}</option
                 >
               </select>
             </div>
@@ -81,7 +81,7 @@
                   v-for="survey in additionalSurveys"
                   :key="survey.date_info"
                   :value="survey"
-                  >{{ formatSurveyDate(survey.date_info) }}</option
+                  >{{ survey.date_info | surveyDate }}</option
                 >
               </select>
             </div>
@@ -244,7 +244,6 @@
 import Feature from "ol/Feature";
 import LineString from "ol/geom/LineString";
 import { displayError, displayInfo } from "@/lib/errors.js";
-import { formatSurveyDate } from "@/lib/date.js";
 import { LAYERS } from "@/store/map.js";
 
 export default {
@@ -366,9 +365,6 @@
     close() {
       this.$store.commit("application/showProfiles", false);
     },
-    formatSurveyDate(date) {
-      return formatSurveyDate(date);
-    },
     loadProfile(survey) {
       if (survey) {
         this.$store.commit("fairwayprofile/profileLoading", true);
--- a/client/src/components/importoverview/staging/StagingDetail.vue	Thu Mar 07 15:19:16 2019 +0100
+++ b/client/src/components/importoverview/staging/StagingDetail.vue	Thu Mar 07 15:53:12 2019 +0100
@@ -39,11 +39,11 @@
         {{ data.kind.toUpperCase() }}
       </div>
       <div v-if="data.summary" class="mt-auto mb-auto small text-left date">
-        {{ formatSurveyDate(data.summary.date) }}
+        {{ data.summary.date | surveyDate }}
       </div>
       <div v-else class="mt-auto mb-auto small text-left date">-</div>
       <div class="mt-auto mb-auto small text-left imported">
-        {{ formatSurveyDate(data.enqueued.split("T")[0]) }}
+        {{ data.enqueued.split("T")[0] | surveyDate }}
       </div>
       <div class="mt-auto mb-auto small text-left username">
         {{ data.user }}
@@ -207,7 +207,7 @@
               ><small>{{ result["fk-gauge-id"] }}</small></span
             >
             <span class="agmdetail text-left"
-              ><small>{{ formatDateTime(result["measure-date"]) }}</small></span
+              ><small>{{ result["measure-date"] | dateTime }}</small></span
             >
             <div
               @click="toggleDiff(index)"
@@ -299,7 +299,6 @@
  * Thomas Junk <thomas.junk@intevation.de>
  */
 
-import { formatSurveyDate, formatDateTime } from "@/lib/date.js";
 import { STATES } from "@/store/imports.js";
 import { HTTP } from "@/lib/http";
 import { WFS } from "ol/format.js";
@@ -462,12 +461,6 @@
     isSoundingResult(kind) {
       return kind === "SR";
     },
-    formatSurveyDate(date) {
-      return formatSurveyDate(date);
-    },
-    formatDateTime(date) {
-      return formatDateTime(date);
-    },
     needsApproval(item) {
       return item.status === STATES.NEEDSAPPROVAL;
     },
--- a/client/src/lib/date.js	Thu Mar 07 15:19:16 2019 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,43 +0,0 @@
-/* This is Free Software under GNU Affero General Public License v >= 3.0
- * without warranty, see README.md and license for details.
- *
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * License-Filename: LICENSES/AGPL-3.0.txt
- *
- * Copyright (C) 2018 by via donau
- *   – Österreichische Wasserstraßen-Gesellschaft mbH
- * Software engineering by Intevation GmbH
- *
- * Author(s):
- * Thomas Junk <thomas.junk@intevation.de>
- */
-
-import locale2 from "locale2";
-
-const formatSurveyDate = current => {
-  return current
-    ? new Date(current).toLocaleDateString(locale2, {
-        day: "2-digit",
-        month: "2-digit",
-        year: "numeric"
-      })
-    : "";
-};
-
-const formatDateTime = date => {
-  if (!date) return "";
-  const d = new Date(date);
-  return (
-    d.toLocaleDateString(locale2, {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric"
-    }) +
-    " - " +
-    d.toLocaleTimeString(locale2, {
-      hour12: false
-    })
-  );
-};
-
-export { formatSurveyDate, formatDateTime };
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/lib/filters.js	Thu Mar 07 15:53:12 2019 +0100
@@ -0,0 +1,43 @@
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+
+import locale2 from "locale2";
+
+export default {
+  surveyDate(date) {
+    return date
+      ? new Date(date).toLocaleDateString(locale2, {
+          day: "2-digit",
+          month: "2-digit",
+          year: "numeric"
+        })
+      : "";
+  },
+  dateTime(date) {
+    if (!date) return "";
+    const d = new Date(date);
+    return (
+      d.toLocaleDateString(locale2, {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric"
+      }) +
+      " - " +
+      d.toLocaleTimeString(locale2, {
+        hour12: false
+      })
+    );
+  }
+};
--- a/client/src/main.js	Thu Mar 07 15:19:16 2019 +0100
+++ b/client/src/main.js	Thu Mar 07 15:53:12 2019 +0100
@@ -15,7 +15,6 @@
 
 // 3rd-party
 import Vue from "vue";
-import App from "./components/App.vue";
 import VTooltip from "v-tooltip";
 import GetTextPlugin from "vue-gettext";
 import Snotify, { SnotifyPosition } from "vue-snotify";
@@ -25,10 +24,12 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 
 // local
-import router from "./router";
-import store from "./store";
-import translations from "./locale/translations.json";
+import router from "@/router";
+import store from "@/store";
+import translations from "@/locale/translations.json";
+import filters from "@/lib/filters";
 import { supportedLanguages, defaultLanguage } from "./locale/languages.js";
+import App from "@/components/App.vue";
 import UIBoxHeader from "@/components/ui/UIBoxHeader";
 import UITableHeader from "@/components/ui/UITableHeader";
 import UITableBody from "@/components/ui/UITableBody";
@@ -168,6 +169,9 @@
 Vue.component("UITableHeader", UITableHeader);
 Vue.component("UITableBody", UITableBody);
 
+// register global filters
+for (let name in filters) Vue.filter(name, filters[name]);
+
 // global vue config
 Vue.config.productionTip = false;