Create Notation component

flatisfy/web/js_src/components/flat.vue

@@ -152,13 +152,7 @@
             <nav>
                 <ul>
                     <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>
                             <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
+        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 () {
@@ -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,
+        capitalize: capitalize
-
-        range: range
     }
 }
 </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;

flatisfy/web/js_src/components/flatstableline.vue

@@ -1,16 +1,11 @@
 <template>
     <tr>
         <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 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)
         }
     },
 

flatisfy/web/js_src/components/notation.vue

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

flatisfy/web/js_src/main.js

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

flatisfy/web/js_src/store/getters.js

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

flatisfy/web/js_src/tools/index.js

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