Browse Source

Create Notation component

master
Gautier P 2 years ago
parent
commit
e4aef0bfaf
  1. 62
      flatisfy/web/js_src/components/flat.vue
  2. 21
      flatisfy/web/js_src/components/flatstableline.vue
  3. 68
      flatisfy/web/js_src/components/notation.vue
  4. 3
      flatisfy/web/js_src/main.js
  5. 6
      flatisfy/web/js_src/store/getters.js
  6. 15
      flatisfy/web/js_src/tools/index.js

62
flatisfy/web/js_src/components/flat.vue

@ -152,13 +152,7 @@ @@ -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' @@ -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 { @@ -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 { @@ -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 { @@ -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;

21
flatisfy/web/js_src/components/flatstableline.vue

@ -1,16 +1,11 @@ @@ -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 @@ @@ -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 @@ @@ -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 { @@ -69,6 +65,10 @@ export default {
showNotes: Boolean
},
components: {
Notation
},
computed: {
capitalizedStatus () {
return capitalize(this.$t('status.followed'))
@ -81,9 +81,6 @@ export default { @@ -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

@ -0,0 +1,68 @@ @@ -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
flatisfy/web/js_src/main.js

@ -3,9 +3,12 @@ import Vue from 'vue' @@ -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,

6
flatisfy/web/js_src/store/getters.js

@ -1,4 +1,4 @@ @@ -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 { @@ -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,

15
flatisfy/web/js_src/tools/index.js

@ -25,3 +25,18 @@ export function capitalize (string) { @@ -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…
Cancel
Save