Create Notation component

This commit is contained in:
Gautier P 2021-01-29 19:24:46 +01:00
parent 7790eb0a32
commit e4aef0bfaf
6 changed files with 105 additions and 70 deletions

View File

@ -152,13 +152,7 @@
<nav> <nav>
<ul> <ul>
<template v-if="flat.status !== 'user_deleted'"> <template v-if="flat.status !== 'user_deleted'">
<li ref="notationButton"> <Notation :flat="flat"></Notation>
<template v-for="n in range(5)">
<button class="btnIcon" v-bind:key="n" v-on:mouseover="handleNotationHover(n)" v-on:mouseout="handleNotationOut()" v-on:click="updateFlatNotation(n)">
<i class="fa" v-bind:class="{'fa-star': n < notation, 'fa-star-o': n >= notation}" aria-hidden="true"></i>
</button>
</template>
</li>
<li> <li>
<button v-on:click="updateFlatStatus('user_deleted')" class="fullButton"> <button v-on:click="updateFlatStatus('user_deleted')" class="fullButton">
<i class="fa fa-trash" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
@ -189,30 +183,16 @@ import 'flatpickr/dist/flatpickr.css'
import FlatsMap from '../components/flatsmap.vue' import FlatsMap from '../components/flatsmap.vue'
import Slider from '../components/slider.vue' import Slider from '../components/slider.vue'
import Notation from '../components/notation.vue'
import { capitalize, range } from '../tools' import { capitalize } from '../tools'
export default { export default {
components: { components: {
FlatsMap, FlatsMap,
Slider, Slider,
flatPickr flatPickr,
}, Notation
filters: {
cost: function (value, currency) {
if (!value) {
return 'N/A'
}
if (currency === 'EUR') {
currency = ' €'
}
var valueStr = value.toString()
valueStr = ' '.repeat((3 + valueStr.length) % 3) + valueStr
return valueStr.match(/.{1,3}/g).join('.') + currency
}
}, },
created () { created () {
@ -294,20 +274,6 @@ export default {
this.$store.dispatch('getAllTimeToPlaces') this.$store.dispatch('getAllTimeToPlaces')
}, },
updateFlatNotation (notation) {
notation = notation + 1
if (notation === this.flat.notation) {
this.flat.notation = 0
this.$store.dispatch('updateFlatNotation', { flatId: this.flat.id, newNotation: 0 })
this.$store.dispatch('updateFlatStatus', { flatId: this.flat.id, newStatus: 'new' })
} else {
this.flat.notation = notation
this.$store.dispatch('updateFlatNotation', { flatId: this.flat.id, newNotation: notation })
this.$store.dispatch('updateFlatStatus', { flatId: this.flat.id, newStatus: 'followed' })
}
},
updateFlatStatus (status) { updateFlatStatus (status) {
this.$store.dispatch('updateFlatStatus', { flatId: this.flat.id, newStatus: status }) this.$store.dispatch('updateFlatStatus', { flatId: this.flat.id, newStatus: status })
}, },
@ -335,23 +301,13 @@ export default {
return minutes + ' ' + this.$tc('common.mins', minutes) return minutes + ' ' + this.$tc('common.mins', minutes)
}, },
handleNotationHover (n) {
this.overloadNotation = n + 1
},
handleNotationOut () {
this.overloadNotation = null
},
normalizePhoneNumber (phoneNumber) { normalizePhoneNumber (phoneNumber) {
phoneNumber = phoneNumber.replace(/ /g, '') phoneNumber = phoneNumber.replace(/ /g, '')
phoneNumber = phoneNumber.replace(/\./g, '') phoneNumber = phoneNumber.replace(/\./g, '')
return phoneNumber return phoneNumber
}, },
capitalize: capitalize, capitalize: capitalize
range: range
} }
} }
</script> </script>
@ -426,12 +382,6 @@ td {
list-style-type: none; list-style-type: none;
} }
.btnIcon {
border: none;
width: auto;
background-color: transparent;
}
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
.right-panel nav { .right-panel nav {
text-align: center; text-align: center;

View File

@ -1,16 +1,11 @@
<template> <template>
<tr> <tr>
<td v-if="showNotationColumn"> <td v-if="showNotationColumn">
<template v-for="n in notationRange"> <Notation :flat="flat" :title="capitalizedStatus"></Notation>
<i class="fa fa-star" aria-hidden="true" :title="capitalizedStatus"></i>
</template>
</td> </td>
<td class="no-padding"> <td class="no-padding">
<Notation v-if="!showNotationColumn" :flat="flat" :title="capitalizedStatus"></Notation>
<router-link class="fill" :to="{name: 'details', params: {id: flat.id}}"> <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.id.split("@")[1] }}]
<span class="expired">{{ flat.is_expired ? "[" + $t("common.expired") + "]" : null }}</span> <span class="expired">{{ flat.is_expired ? "[" + $t("common.expired") + "]" : null }}</span>
{{ flat.title }} {{ flat.title }}
@ -31,7 +26,7 @@
{{ flat.rooms ? flat.rooms : '?'}} {{ flat.rooms ? flat.rooms : '?'}}
</td> </td>
<td> <td>
{{ flat.cost }} {{ flat.currency }} {{ flat.cost | cost(flat.currency) }}
<template v-if="flat.utilities == 'included'"> <template v-if="flat.utilities == 'included'">
{{ $t("flatsDetails.utilities_included") }} {{ $t("flatsDetails.utilities_included") }}
</template> </template>
@ -60,7 +55,8 @@
</template> </template>
<script> <script>
import { capitalize, range } from '../tools' import { capitalize } from '../tools'
import Notation from '../components/notation.vue'
export default { export default {
props: { props: {
@ -69,6 +65,10 @@ export default {
showNotes: Boolean showNotes: Boolean
}, },
components: {
Notation
},
computed: { computed: {
capitalizedStatus () { capitalizedStatus () {
return capitalize(this.$t('status.followed')) return capitalize(this.$t('status.followed'))
@ -81,9 +81,6 @@ export default {
return this.flat.photos[0].url return this.flat.photos[0].url
} }
return null return null
},
notationRange () {
return range(this.flat.notation)
} }
}, },

View File

@ -0,0 +1,68 @@
<template>
<div>
<template v-for="n in range(5)">
<button v-bind:key="n" v-on:mouseover="handleHover(n)" v-on:mouseout="handleOut()" v-on:click="updateNotation(n)">
<i class="fa" v-bind:class="{'fa-star': n < notation, 'fa-star-o': n >= notation}" aria-hidden="true"></i>
</button>
</template>
</div>
</template>
<script>
import { range } from '../tools'
import 'flatpickr/dist/flatpickr.css'
export default {
data () {
return {
'overloadNotation': null
}
},
props: ['flat'],
computed: {
notation () {
if (this.overloadNotation) {
return this.overloadNotation
}
return this.flat.notation
}
},
methods: {
updateNotation (notation) {
notation = notation + 1
if (notation === this.flat.notation) {
this.flat.notation = 0
this.$store.dispatch('updateFlatNotation', { flatId: this.flat.id, newNotation: 0 })
this.$store.dispatch('updateFlatStatus', { flatId: this.flat.id, newStatus: 'new' })
} else {
this.flat.notation = notation
this.$store.dispatch('updateFlatNotation', { flatId: this.flat.id, newNotation: notation })
this.$store.dispatch('updateFlatStatus', { flatId: this.flat.id, newStatus: 'followed' })
}
},
handleHover (n) {
this.overloadNotation = n + 1
},
handleOut () {
this.overloadNotation = null
},
range: range
}
}
</script>
<style scoped>
button {
border: none;
width: auto;
background-color: transparent;
}
</style>

View File

@ -3,9 +3,12 @@ import Vue from 'vue'
import i18n from './i18n' import i18n from './i18n'
import router from './router' import router from './router'
import store from './store' import store from './store'
import { costFilter } from './tools'
import App from './components/app.vue' import App from './components/app.vue'
Vue.filter('cost', costFilter)
new Vue({ new Vue({
i18n, i18n,
router, router,

View File

@ -1,4 +1,4 @@
import { findFlatGPS } from '../tools' import { findFlatGPS, costFilter } from '../tools'
export default { export default {
allFlats: state => state.flats, allFlats: state => state.flats,
@ -42,7 +42,9 @@ export default {
// gps[1] += (Math.random() - 0.5) / 500 // gps[1] += (Math.random() - 0.5) / 500
} }
const href = router.resolve({ name: 'details', params: { id: flat.id }}).href const href = router.resolve({ name: 'details', params: { id: flat.id }}).href
const cost = flat.cost ? ' ( ' + flat.cost + '€)' : '' const cost = flat.cost
? costFilter(flat.cost, flat.currency)
: ''
markers.push({ markers.push({
'title': '', 'title': '',
'content': '<a href="' + href + '">' + flat.title + '</a>' + cost, 'content': '<a href="' + href + '">' + flat.title + '</a>' + cost,

View File

@ -25,3 +25,18 @@ export function capitalize (string) {
export function range (n) { export function range (n) {
return [...Array(n).keys()] return [...Array(n).keys()]
} }
export function costFilter (value, currency) {
if (!value) {
return 'N/A'
}
if (currency === 'EUR') {
currency = ' €'
}
var valueStr = value.toString()
valueStr = ' '.repeat((3 + valueStr.length) % 3) + valueStr
return valueStr.match(/.{1,3}/g).join('.') + currency
}