Display payment balance in events list

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue

@@ -10,6 +10,7 @@
                         <th>Reise</th>
                         <th>Teilnehmer</th>
                         <th>Preis</th>
+                        <th>offen</th>
                         <th>Status</th>
                         <th>Best./Rg.</th>
                     </tr>
@@ -24,7 +25,8 @@
                                 <li v-for="customer in event.customers">{{ customer.name }}, {{ customer.vorname }}</li>
                             </ul>
                         </td>
-                        <td>{{ event.preis }} EUR</td>
+                        <td style="white-space: nowrap">{{ event.preis }} EUR</td>
+                        <td style="white-space: nowrap">{{ calculateBalance(event) }}</td>
                         <td>{{ status[event.status] }}</td>
                         <td><a :href="getDownloadUrl(event)" target="_blank"><i class="fa fa-file-pdf-o"></i></a></td>
                     </tr>
@@ -67,7 +69,7 @@
                 if (!date) {
                     return '-';
                 }
-                return dayjs(date).format('DD.MM.YYYY, HH:mm') + ' Uhr';
+                return dayjs(date).format('DD.MM.YYYY');
             },
             getDownloadUrl (event) {
                 return this.$store.state.config.myEpApiBaseUrl
@@ -75,6 +77,19 @@
                     + event.id
                     + '/confirmation?token='
                     + this.$store.getters.authToken;
+            },
+            calculateBalance (event) {
+                if (!event.preis || !event.zahlung) {
+                    return '-';
+                }
+                const price = parseFloat(event.preis.replace(',', '.'));
+                const payment = parseFloat(event.zahlung.replace(',', '.'));
+                const balance = price - payment;
+                if (balance > 0) {
+                    return balance.toFixed(2).replace('.', ',') + ' EUR';
+                }
+
+                return '-';
             }
         },
         computed: {