Fix serve images locally client side + some client optimizations

This commit is contained in:
Lucas Verney 2018-09-07 15:06:59 +02:00
parent 07cb54b179
commit c7fa6c8b5b
6 changed files with 116 additions and 60 deletions

2
.gitignore vendored
View File

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

View File

@ -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

View File

@ -48,62 +48,7 @@
</tr>
</thead>
<tbody>
<tr v-for="flat in sortedFlats" :key="flat.id">
<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 }} </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>
<FlatsTableLine :flat="flat" :showNotationColumn="showNotationColumn" :showNotes="showNotes" v-for="flat in sortedFlats" :key="flat.id"></FlatsTableLine>
</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>

View File

@ -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 }} </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>

View File

@ -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'

View File

@ -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>