Display cost per square meter;

flatisfy/web/js_src/api/index.js

@@ -20,6 +20,10 @@ const postProcessAPIResults = function (flat) {
         })
         flat.flatisfy_time_to = momentifiedTimeTo
     }
+
+    // Fill cost per square meter.
+    flat.sqCost = Math.round(flat.cost * 100 / flat.area) / 100 | 0
+
     /* eslint-enable camelcase */
     return flat
 }

flatisfy/web/js_src/components/flatstable.vue

@@ -37,6 +37,13 @@
                         <span class="sr-only">{{ $t("common.sort" + capitalize(sortOrder)) }}</span>
                     </span>
                 </th>
+                <th class="pointer" v-on:click="updateSortBy('sqCost')">
+                    {{ $t("flatsDetails.SquareMeterCost") }}
+                    <span v-if="sortBy === 'sqCost'">
+                        <i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
+                        <span class="sr-only">{{ $t("common.sort" + capitalize(sortOrder)) }}</span>
+                    </span>
+                </th>
                 <th>{{ $t("common.Actions") }}</th>
             </tr>
         </thead>
@@ -79,6 +86,9 @@
                         {{ $t("flatsDetails.utilities_excluded") }}
                     </template>
                 </td>
+                <td>
+                    {{ flat.sqCost }} {{ flat.currency }}
+                </td>
                 <td>
                     <router-link :to="{name: 'details', params: {id: flat.id}}" :aria-label="$t('common.More_about') + ' ' + flat.id" :title="$t('common.More_about') + ' ' + flat.id">
                         <i class="fa fa-plus" aria-hidden="true"></i>

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

@@ -34,6 +34,7 @@ export default {
         'Area': 'Area',
         'Rooms': 'Rooms',
         'Cost': 'Cost',
+        'SquareMeterCost': 'Cost / m²',
         'utilities_included': '(utilities included)',
         'utilities_excluded': '(utilities excluded)',
         'Description': 'Description',

flatisfy/web/js_src/views/details.vue

@@ -97,6 +97,14 @@
                                 </template>
                             </td>
                         </tr>
+                        <tr>
+                            <th>
+                                {{ $t("flatsDetails.SquareMeterCost") }}
+                            </th>
+                            <td>
+                                {{ flat.sqCost }} {{ flat.currency }}
+                            </td>
+                        </tr>
                     </table>
                 </div>
                 <div>