Adding configurable location selector

.env.example

@@ -1,5 +1,8 @@
 #### In .env ###
 
+
+VUE_APP_REPORT_LOCATION_SELECTOR=postal-code
+
 # Data sources
 VUE_APP_VISU_DATA_SOURCE_URL=<your data source CSV file: https://raw.githubusercontent.com/...>
 VUE_APP_VISU_GEOCODE_URL=<your geocoding info CSV file: https://raw.githubusercontent.com/...>

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [1.1.0] 2020-03-30
+
+### Added
+
+- Location selector is now customizable with VUE_APP_REPORT_LOCATION_SELECTOR (only postal code available tough)
+
 ## [1.0.1] 2020-03-30
 
 ### Fixed

README.md

@@ -66,6 +66,7 @@ Please be sure to use 'yarn' instead of 'npm' as package manager.
 
 #### Configuration
 
+1. Choose you location selector (default: postal-code) (only postal code available for now)
 1. Setup the data source and geocoding data URLs
 2. Set the map default position and zoom level
 3. Set the recaptcha key (not the secret) with the value from the reCAPTCHA console.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "covid-self-report",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "author": {
     "name": "Christian Müller",
     "email": "muller.ch@gmail.com"

src/views/LocationEditors/LocationFromAddress.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>Location from address (TBD)</div>
+</template>
+
+<script>
+
+  export default {
+    name: "location-from-address",
+    components: {},
+    props: {
+      location: null,
+      valid: Boolean,
+    },
+    methods: {
+      locationChanged(value) {
+        //this.$emit('update:valid', ...);
+        //this.$emit('update:location', value);
+      }
+    },
+  }
+</script>
+
+<style>
+
+</style>

src/views/LocationEditors/LocationFromPostalCode.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <base-input :value="location"
+                @input="locationChanged"
+                type="number"
+                :placeholder="$t('report.locationPlaceholder')"
+                :error="enableCheck && !valid ? $t('report.locationValidError') : ''"
+                @focusout="enableCheck = true"
+                :valid="!enableCheck ? null : valid"></base-input>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "location-from-postal-code",
+    components: {},
+    props: {
+      location: null,
+      valid: Boolean,
+    },
+    data() {
+      return {
+        enableCheck: false,
+      }
+    },
+    methods: {
+      locationChanged(value) {
+        this.$emit('update:location', value);
+      },
+      isValid(value) {
+        return value.length === 4 && !isNaN(value);
+      },
+    },
+    watch: {
+      location: function (value) {
+        this.$emit('update:valid', this.isValid(value));
+      },
+    }
+  }
+</script>
+
+<style>
+
+</style>

src/views/Report.vue

@@ -164,19 +164,21 @@
             <div class="row mt-3" v-show="reportData.sick !== null">
               <div class="col-lg-6">
                 <h3 class="text-white">{{ $t('report.locationQuestion') }}</h3>
-                <base-input v-model="reportData.postalCode"
-                            type="number"
-                            :placeholder="$t('report.locationPlaceholder')"
-                            :error="postalCodeCheck && !validPostalCode ? $t('report.locationValidError') : ''"
-                            @focusout="postalCodeCheck = true"
-                            :valid="!postalCodeCheck ? null : validPostalCode"></base-input>
+
+                <location-from-address v-if="locationSelector === 'address'"
+                                       :location.sync="reportData.postalCode"
+                                       :valid.sync="validLocation"></location-from-address>
+
+                <location-from-postal-code v-else
+                                           :location.sync="reportData.postalCode"
+                                           :valid.sync="validLocation"></location-from-postal-code>
               </div>
             </div>
 
             <div class="row mt-3" v-show="reportData.sick !== null">
               <div class="col-lg-6">
                 <base-button @click="send"
-                             :disabled="!validPostalCode || reportData.diagnostic === null"
+                             :disabled="!validLocation || reportData.diagnostic === null"
                              class="mb-3 mb-sm-0"
                              type="white"
                              icon="fa fa-send">
@@ -244,10 +246,14 @@
 
   import Modal from '@/components/Modal.vue';
   import newGithubIssueUrl from 'new-github-issue-url';
+  import LocationFromPostalCode from "./LocationEditors/LocationFromPostalCode";
+  import LocationFromAddress from "./LocationEditors/LocationFromAddress";
 
   export default {
     name: "report",
     components: {
+      LocationFromAddress,
+      LocationFromPostalCode,
       Modal
     },
     async mounted() {
@@ -291,15 +297,17 @@
         healthyOfficialConfirmModal: false,
         sendErrorModal: false,
         sendError: '',
-        postalCodeCheck: false,
         forceReportAgain: false,
 
+        locationSelector: process.env.VUE_APP_REPORT_LOCATION_SELECTOR,
+        validLocation: false,
+
         reportData: {
           sessionId: null,
           sick: null,
           symptoms: [],
           diagnostic: null,
-          postalCode: '',
+          postalCode: null,
           lastReport: null,
         },
         sending: false,
@@ -315,9 +323,6 @@
       }
     },
     computed: {
-      validPostalCode: function () {
-        return (this.reportData.postalCode.length === 4 && !isNaN(this.reportData.postalCode));
-      },
       daysSinceLastReport: function () {
 
         if (this.reportData.lastReport === null) {
@@ -417,7 +422,7 @@
       githubIssue: async function () {
         const url = newGithubIssueUrl({
           user: process.env.VUE_APP_GITHUB_REPO_OWNER,
-          repo:  process.env.VUE_APP_GITHUB_REPO_NAME,
+          repo: process.env.VUE_APP_GITHUB_REPO_NAME,
           title: 'Error when sending from the front-end',
           body: `The error is:\n> ${this.sendError}\n\n---\nAuto-generated from the front-end`
         });