Better display of time_to, close issue #32.

flatisfy/web/js_src/api/index.js

@@ -3,18 +3,34 @@ import moment from 'moment'
 require('es6-promise').polyfill()
 require('isomorphic-fetch')
 
+const postProcessAPIResults = function (flat) {
+    /* eslint-disable camelcase */
+    if (flat.date) {
+        flat.date = moment(flat.date)
+    }
+    if (flat.flatisfy_time_to) {
+        const momentifiedTimeTo = {}
+        Object.keys(flat.flatisfy_time_to).forEach(key => {
+            const value = flat.flatisfy_time_to[key]
+            momentifiedTimeTo[key] = Object.assign(
+                {},
+                value,
+                { time: moment.duration(value.time, 'seconds') }
+            )
+        })
+        flat.flatisfy_time_to = momentifiedTimeTo
+    }
+    /* eslint-enable camelcase */
+    return flat
+}
+
 export const getFlats = function (callback) {
     fetch('/api/v1/flats', { credentials: 'same-origin' })
     .then(function (response) {
         return response.json()
     }).then(function (json) {
         const flats = json.data
-        flats.map(flat => {
+        flats.map(postProcessAPIResults)
-            if (flat.date) {
-                flat.date = moment(flat.date)
-            }
-            return flat
-        })
         callback(flats)
     }).catch(function (ex) {
         console.error('Unable to parse flats: ' + ex)
@@ -29,11 +45,8 @@ export const getFlat = function (flatId, callback) {
     .then(function (response) {
         return response.json()
     }).then(function (json) {
-        const flat = json.data
+        const flat = postProcessAPIResults(json.data)
-        if (flat.date) {
+        callback(flat)
-            flat.date = moment(flat.date)
-        }
-        callback(json.data)
     }).catch(function (ex) {
         console.error('Unable to parse flats: ' + ex)
     })

flatisfy/web/js_src/components/flatsmap.vue

@@ -23,12 +23,12 @@
 import L from 'leaflet'
 // Fix for a bug in Leaflet default icon
 // see https://github.com/PaulLeCam/react-leaflet/issues/255#issuecomment-261904061
-delete L.Icon.Default.prototype._getIconUrl;
+delete L.Icon.Default.prototype._getIconUrl
 L.Icon.Default.mergeOptions({
     iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
     iconUrl: require('leaflet/dist/images/marker-icon.png'),
-    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
-});
+})
 
 import 'leaflet/dist/leaflet.css'
 

flatisfy/web/js_src/i18n/en/index.js

@@ -11,7 +11,8 @@ export default {
         'Unfollow': 'Unfollow',
         'Close': 'Close',
         'sortUp': 'Sort in ascending order',
-        'sortDown': 'Sort in descending order'
+        'sortDown': 'Sort in descending order',
+        'mins': 'min | mins'
     },
     home: {
         'new_available_flats': 'New available flats'

flatisfy/web/js_src/views/details.vue

@@ -85,7 +85,7 @@
                                 <template v-if="Object.keys(flat.flatisfy_time_to).length">
                                     <ul class="time_to_list">
                                         <li v-for="(time_to, place) in flat.flatisfy_time_to" :key="place">
-                                            {{ place }}: {{ time_to["time"] }}
+                                            {{ place }}: {{ humanizeTimeTo(time_to["time"]) }}
                                         </li>
                                     </ul>
                                 </template>
@@ -242,6 +242,11 @@ export default {
             this.$store.dispatch('updateFlatStatus', { flatId: this.$route.params.id, newStatus: status })
         },
 
+        humanizeTimeTo (time) {
+            const minutes = Math.floor(time.as('minutes'))
+            return minutes + ' ' + this.$tc('common.mins', minutes)
+        },
+
         capitalize: capitalize
     }
 }