Create Notation component
This commit is contained in:
Gautier P
parent
7790eb0a32
commit
e4aef0bfaf
@ -152,13 +152,7 @@
|
||||
<nav>
|
||||
<ul>
|
||||
<template v-if="flat.status !== 'user_deleted'">
|
||||
<li ref="notationButton">
|
||||
<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>
|
||||
<Notation :flat="flat"></Notation>
|
||||
<li>
|
||||
<button v-on:click="updateFlatStatus('user_deleted')" class="fullButton">
|
||||
<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 Slider from '../components/slider.vue'
|
||||
import Notation from '../components/notation.vue'
|
||||
|
||||
import { capitalize, range } from '../tools'
|
||||
import { capitalize } from '../tools'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FlatsMap,
|
||||
Slider,
|
||||
flatPickr
|
||||
},
|
||||
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
|
||||
}
|
||||
flatPickr,
|
||||
Notation
|
||||
},
|
||||
|
||||
created () {
|
||||
@ -294,20 +274,6 @@ export default {
|
||||
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) {
|
||||
this.$store.dispatch('updateFlatStatus', { flatId: this.flat.id, newStatus: status })
|
||||
},
|
||||
@ -335,23 +301,13 @@ export default {
|
||||
return minutes + ' ' + this.$tc('common.mins', minutes)
|
||||
},
|
||||
|
||||
handleNotationHover (n) {
|
||||
this.overloadNotation = n + 1
|
||||
},
|
||||
|
||||
handleNotationOut () {
|
||||
this.overloadNotation = null
|
||||
},
|
||||
|
||||
normalizePhoneNumber (phoneNumber) {
|
||||
phoneNumber = phoneNumber.replace(/ /g, '')
|
||||
phoneNumber = phoneNumber.replace(/\./g, '')
|
||||
return phoneNumber
|
||||
},
|
||||
|
||||
capitalize: capitalize,
|
||||
|
||||
range: range
|
||||
capitalize: capitalize
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -426,12 +382,6 @@ td {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.btnIcon {
|
||||
border: none;
|
||||
width: auto;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.right-panel nav {
|
||||
text-align: center;
|
||||
|
||||
@ -1,16 +1,11 @@
|
||||
<template>
|
||||
<tr>
|
||||
<td v-if="showNotationColumn">
|
||||
<template v-for="n in notationRange">
|
||||
<i class="fa fa-star" aria-hidden="true" :title="capitalizedStatus"></i>
|
||||
</template>
|
||||
<Notation :flat="flat" :title="capitalizedStatus"></Notation>
|
||||
</td>
|
||||
<td class="no-padding">
|
||||
<Notation v-if="!showNotationColumn" :flat="flat" :title="capitalizedStatus"></Notation>
|
||||
<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] }}]
|
||||
<span class="expired">{{ flat.is_expired ? "[" + $t("common.expired") + "]" : null }}</span>
|
||||
{{ flat.title }}
|
||||
@ -31,7 +26,7 @@
|
||||
{{ flat.rooms ? flat.rooms : '?'}}
|
||||
</td>
|
||||
<td>
|
||||
{{ flat.cost }} {{ flat.currency }}
|
||||
{{ flat.cost | cost(flat.currency) }}
|
||||
<template v-if="flat.utilities == 'included'">
|
||||
{{ $t("flatsDetails.utilities_included") }}
|
||||
</template>
|
||||
@ -60,7 +55,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { capitalize, range } from '../tools'
|
||||
import { capitalize } from '../tools'
|
||||
import Notation from '../components/notation.vue'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@ -69,6 +65,10 @@ export default {
|
||||
showNotes: Boolean
|
||||
},
|
||||
|
||||
components: {
|
||||
Notation
|
||||
},
|
||||
|
||||
computed: {
|
||||
capitalizedStatus () {
|
||||
return capitalize(this.$t('status.followed'))
|
||||
@ -81,9 +81,6 @@ export default {
|
||||
return this.flat.photos[0].url
|
||||
}
|
||||
return null
|
||||
},
|
||||
notationRange () {
|
||||
return range(this.flat.notation)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
68
flatisfy/web/js_src/components/notation.vue
Normal file
68
flatisfy/web/js_src/components/notation.vue
Normal 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>
|
||||
@ -3,9 +3,12 @@ import Vue from 'vue'
|
||||
import i18n from './i18n'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import { costFilter } from './tools'
|
||||
|
||||
import App from './components/app.vue'
|
||||
|
||||
Vue.filter('cost', costFilter)
|
||||
|
||||
new Vue({
|
||||
i18n,
|
||||
router,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { findFlatGPS } from '../tools'
|
||||
import { findFlatGPS, costFilter } from '../tools'
|
||||
|
||||
export default {
|
||||
allFlats: state => state.flats,
|
||||
@ -42,7 +42,9 @@ export default {
|
||||
// gps[1] += (Math.random() - 0.5) / 500
|
||||
}
|
||||
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({
|
||||
'title': '',
|
||||
'content': '<a href="' + href + '">' + flat.title + '</a>' + cost,
|
||||
|
||||
@ -25,3 +25,18 @@ export function capitalize (string) {
|
||||
export function range (n) {
|
||||
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
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user