UI: improved display of prices and currencies (#27)

lwitkowski · Aug 4, 2024 · 6e2a398 · 6e2a398
1 parent 7447d50
commit 6e2a398
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/ui/src/components/OfferThumb.vue b/ui/src/components/OfferThumb.vue
@@ -8,14 +8,7 @@
         <small>{{ offer.date }}, {{ offer.location }}</small>
         ,
         <small>
-          <strong>
-            {{ offer.price_in_euro }}
-            <div v-if="offer.currency_code != 'EUR'" class="tooltip">
-              <span class="tooltiptext">converted from {{ offer.price }} {{ offer.currency }}</span>
-              €
-            </div>
-            <div v-else style="display: inline">€</div>
-          </strong>
+          <strong>{{ formatPrice(offer.price, offer.currency_code) }}</strong>
         </small>
       </p>
       <small>
@@ -26,7 +19,7 @@
               params: { aircraftType: offer.aircraft_type, manufacturer: offer.manufacturer, model: offer.model }
             }"
           >
-            <a>Model: {{ offer.manufacturer }} {{ offer.model }}</a>
+            <a>all `{{ offer.model }}` offers</a>
           </router-link>
         </p>
       </small>
@@ -42,13 +35,18 @@
 </template>
 
 <script>
+import formatPrice from '@/utils.js'
+
 export default {
   name: 'OfferThumb',
   props: {
     offer: {
       type: Object,
       default: null
     }
+  },
+  methods: {
+    formatPrice
   }
 }
 </script>

diff --git a/ui/src/components/__tests__/OfferThumb.spec.js b/ui/src/components/__tests__/OfferThumb.spec.js
@@ -25,6 +25,6 @@ describe('OfferThumb', () => {
 
     const wrapper = mount(OfferThumb, { props: { offer: offer } })
 
-    expect(wrapper.text()).toContain('Rolladen Schneider LS4', '2020-02-26')
+    expect(wrapper.text()).toContain('LS4', '2020-02-26', '€28,000')
   })
 })
diff --git a/ui/src/utils.js b/ui/src/utils.js
@@ -0,0 +1,12 @@
+export default function formatPrice(input, currency) {
+  try {
+    let n = Number(input)
+    return n.toLocaleString(navigator.languages[0] || 'en', {
+      style: 'currency',
+      currency: currency || 'EUR',
+      maximumFractionDigits: 0
+    })
+  } catch {
+    return input
+  }
+}
diff --git a/ui/src/views/OfferDetails.vue b/ui/src/views/OfferDetails.vue
@@ -12,7 +12,7 @@
         <chartist type="Line" ratio=".ct-chart" :data="chartData" :options="chartOptions" />
       </div>
       <h2>Offers</h2>
-      <p>There were {{ offers.length }} offer(s). The average offer price is {{ avgPrice }} €.</p>
+      <p>There were {{ offers.length }} offer(s). The average offer price is {{ formatPrice(avgPrice, 'EUR') }}.</p>
       <table class="modelinformation-table">
         <tr>
           <th>Date</th>
@@ -25,7 +25,7 @@
           <td>{{ offer.date }}</td>
           <td>{{ offer.title }}</td>
           <td>{{ offer.location }}</td>
-          <td>{{ offer.price_in_euro }} €</td>
+          <td>{{ formatPrice(offer.price, offer.currency_code) }}</td>
           <td>
             <div class="icon">
               <small>
@@ -45,6 +45,7 @@
 import axios from 'axios'
 import moment from 'moment'
 import ChartistTooltip from 'chartist-plugin-tooltips-updated'
+import formatPrice from '@/utils.js'
 
 export default {
   name: 'OfferDetails',
@@ -87,6 +88,7 @@ export default {
   },
 
   methods: {
+    formatPrice,
     dateAlreadyPresent(date) {
       for (let j = 0; j < this.chartData.series[0].length; j++) {
         if (moment(this.chartData.series[0][j].x).isSame(date, 'day')) {
@@ -117,7 +119,7 @@ export default {
           const datapoint = {
             meta: offer.title,
             x: new Date(offer.date),
-            y: offer.price_in_euro
+            y: Number(offer.price_in_euro)
           }
           if (this.dateAlreadyPresent(datapoint.x)) {
             this.chartData.series.push([datapoint])
@@ -139,7 +141,7 @@ export default {
           plugins: [
             this.$chartist.plugins.tooltip({
               transformTooltipTextFnc: (datapoint) => {
-                return datapoint.split(',')[1] + ' €'
+                return formatPrice(datapoint.split(',')[1], 'EUR')
               }
             })
           ]