Fix serve images locally client side + some client optimizations

.gitignore

@@ -9,3 +9,5 @@ flatisfy/web/static/assets
 data/
 package-lock.json
 doc/_build
+yarn.lock
+data_rework/

flatisfy/web/app.py

@@ -121,5 +121,15 @@ def get_app(config):
         "/img/<filename:path>", "GET",
         lambda filename: _serve_static_file("/img/{}".format(filename))
     )
+    app.route(
+        "/data/img/<filename:path>", "GET",
+        lambda filename: bottle.static_file(
+            filename,
+            root=os.path.join(
+                config["data_directory"],
+                "images"
+            )
+        )
+    )
 
     return app

flatisfy/web/js_src/components/flatstable.vue

@@ -48,62 +48,7 @@
             </tr>
         </thead>
         <tbody>
-            <tr v-for="flat in sortedFlats" :key="flat.id">
+            <FlatsTableLine :flat="flat" :showNotationColumn="showNotationColumn" :showNotes="showNotes" v-for="flat in sortedFlats" :key="flat.id"></FlatsTableLine>
-                <td v-if="showNotationColumn">
-                    <template v-for="n in range(flat.notation)">
-                        <i class="fa fa-star" aria-hidden="true" :title="capitalize($t('status.followed'))"></i>
-                    </template>
-                </td>
-                <td class="no-padding">
-                    <router-link class="fill" :to="{name: 'details', params: {id: flat.id}}">
-                        <template v-if="!showNotationColumn" v-for="n in range(flat.notation)">
-                            <i class="fa fa-star" aria-hidden="true" :title="capitalize($t('status.followed'))"></i>
-                        </template>
-
-                        [{{ flat.id.split("@")[1] }}] {{ flat.title }}
-
-                        <template v-if="flat.photos && flat.photos.length > 0">
-                            <br/>
-                            <img :src="flat.photos[0].url"/>
-                        </template>
-
-                        <template v-if="showNotes">
-                            <br/>
-                            <pre>{{ flat.notes }}</pre>
-                        </template>
-                    </router-link>
-                </td>
-                <td>{{ flat.area }} m²</td>
-                <td>
-                    {{ flat.rooms ? flat.rooms : '?'}}
-                </td>
-                <td>
-                    {{ flat.cost }} {{ flat.currency }}
-                    <template v-if="flat.utilities == 'included'">
-                        {{ $t("flatsDetails.utilities_included") }}
-                    </template>
-                    <template v-else-if="flat.utilities == 'excluded'">
-                        {{ $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-eye" aria-hidden="true"></i>
-                    </router-link>
-                    <a :href="flat.urls[0]" :aria-label="$t('common.Original_post_for') + ' ' + flat.id" :title="$t('common.Original_post_for') + ' ' + flat.id" target="_blank">
-                        <i class="fa fa-external-link" aria-hidden="true"></i>
-                    </a>
-                    <button v-if="flat.status !== 'user_deleted'" v-on:click="updateFlatStatus(flat.id, 'user_deleted')" :aria-label="$t('common.Remove') + ' ' + flat.id" :title="$t('common.Remove') + ' ' + flat.id">
-                        <i class="fa fa-trash" aria-hidden="true"></i>
-                    </button>
-                    <button v-else v-on:click="updateFlatStatus(flat.id, 'new')" :aria-label="$t('common.Restore') + ' ' + flat.id" :title="$t('common.Restore') + ' ' + flat.id">
-                        <i class="fa fa-undo" aria-hidden="true"></i>
-                    </button>
-                </td>
-            </tr>
         </tbody>
     </table>
 </template>
@@ -111,9 +56,15 @@
 <script>
 import 'font-awesome-webpack'
 
-import { capitalize, range } from '../tools'
+import FlatsTableLine from './flatstableline.vue';
+
+import { capitalize } from '../tools'
 
 export default {
+    components: {
+        FlatsTableLine,
+    },
+
     data () {
         return {
             sortBy: this.initialSortBy,
@@ -182,7 +133,6 @@ export default {
             }
         },
         capitalize: capitalize,
-        range: range
     }
 }
 </script>

flatisfy/web/js_src/components/flatstableline.vue

@@ -0,0 +1,88 @@
+<template>
+    <tr>
+        <td v-if="showNotationColumn">
+            <template v-for="n in notationRange">
+                <i class="fa fa-star" aria-hidden="true" :title="capitalizedStatus"></i>
+            </template>
+        </td>
+        <td class="no-padding">
+            <router-link class="fill" :to="{name: 'details', params: {id: flat.id}}">
+                <template v-if="!showNotationColumn" v-for="n in notationRange">
+                    <i class="fa fa-star" aria-hidden="true" :title="capitalizedStatus"></i>
+                </template>
+
+                [{{ flat.id.split("@")[1] }}] {{ flat.title }}
+
+                <template v-if="photo">
+                    <br/>
+                    <img :src="photo" height=200 />
+                </template>
+
+                <template v-if="showNotes">
+                    <br/>
+                    <pre>{{ flat.notes }}</pre>
+                </template>
+            </router-link>
+        </td>
+        <td>{{ flat.area }} m²</td>
+        <td>
+            {{ flat.rooms ? flat.rooms : '?'}}
+        </td>
+        <td>
+            {{ flat.cost }} {{ flat.currency }}
+            <template v-if="flat.utilities == 'included'">
+                {{ $t("flatsDetails.utilities_included") }}
+            </template>
+            <template v-else-if="flat.utilities == 'excluded'">
+                {{ $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-eye" aria-hidden="true"></i>
+            </router-link>
+            <a :href="flat.urls[0]" :aria-label="$t('common.Original_post_for') + ' ' + flat.id" :title="$t('common.Original_post_for') + ' ' + flat.id" target="_blank">
+                <i class="fa fa-external-link" aria-hidden="true"></i>
+            </a>
+            <button v-if="flat.status !== 'user_deleted'" v-on:click="updateFlatStatus(flat.id, 'user_deleted')" :aria-label="$t('common.Remove') + ' ' + flat.id" :title="$t('common.Remove') + ' ' + flat.id">
+                <i class="fa fa-trash" aria-hidden="true"></i>
+            </button>
+            <button v-else v-on:click="updateFlatStatus(flat.id, 'new')" :aria-label="$t('common.Restore') + ' ' + flat.id" :title="$t('common.Restore') + ' ' + flat.id">
+                <i class="fa fa-undo" aria-hidden="true"></i>
+            </button>
+        </td>
+    </tr>
+</template>
+
+<script>
+import { capitalize, range } from '../tools'
+
+export default {
+    props: {
+        flat: Object,
+        showNotationColumn: Boolean,
+        showNotes: Boolean,
+    },
+
+    computed: {
+        capitalizedStatus() {
+            return capitalize($t('status.followed'));
+        },
+        photo() {
+            if (this.flat.photos && this.flat.photos.length > 0) {
+                if (this.flat.photos[0].local) {
+                    return `/data/img/${this.flat.photos[0].local}`;
+                }
+                return this.flat.photos[0].url;
+            }
+            return null;
+        },
+        notationRange() {
+            return range(this.flat.notation);
+        },
+    },
+};
+</script>

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

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

flatisfy/web/js_src/views/home.vue

@@ -6,7 +6,12 @@
 
         <template v-if="Object.keys(postalCodesFlatsBuckets).length > 0">
             <template v-for="(postal_code_data, postal_code) in postalCodesFlatsBuckets">
-                <h3>{{ postal_code_data.name }} ({{ postal_code }}) - {{ postal_code_data.flats.length }} {{ $tc("common.flats", postal_code_data.flats.length) }}</h3>
+                <h3>{{ postal_code_data.name || $t('common.Unknown') }}
+                    <span v-if="postal_code !== 'undefined'">
+                        ({{ postal_code }})
+                    </span>
+                    - {{ postal_code_data.flats.length }} {{ $tc("common.flats", postal_code_data.flats.length) }}
+                </h3>
                 <FlatsTable :flats="postal_code_data.flats"></FlatsTable>
             </template>
         </template>