const app = new Vue({
el: '#table',
template: `
{{ error }}
Platz |
Name |
Gemeinde |
Gemeinde |
Eingezahlte KonfiCoins Gesamt |
KonfiCoins pro Person |
Laden... |
{{ (i + 1) }}. |
{{ item.name }} |
{{ item.gemeinde }} |
{{ item.kcoins }} |
{{ (item.coins_quota).toFixed(2) }} |
`,
data() {
return {
mode: 1,
data: [],
error: '',
}
},
beforeMount() {
this.mode = mode
},
mounted() {
if (typeof (EventSource) === "undefined") {
this.error = 'Diese Browser wird nicht unterstützt.'
return
}
let source = new EventSource('/events');
source.onmessage = e => {
console.debug('unsupported event!', e)
};
source.addEventListener('init', e => {
// We assume we get the data sorted, so we won't sort it here
this.data = JSON.parse(e.data)
})
source.addEventListener('update', e => {
this.update(JSON.parse(e.data))
})
source.addEventListener('create', e => {
this.create(JSON.parse(e.data))
})
source.addEventListener('delete', e => {
this.delete(JSON.parse(e.data))
})
},
methods: {
sortData() {
this.data.sort((a, b) => {
if (this.mode === 1) { // Gemeinden
return a.coins_quota > b.coins_quota ? -1 : 1
}
// Sonst kofis
return a.kcoins > b.kcoins ? -1 : 1
})
},
update(updatedData) {
for (const i in this.data) {
if (this.data[i].id === updatedData.id) {
this.data[i] = updatedData
}
}
this.sortData()
},
create(createdData) {
this.data.push(createdData)
this.sortData()
},
delete(deletedData) {
for (const i in this.data) {
if (this.data[i].id === deletedData.id) {
this.data.splice(i, 1)
}
}
this.sortData()
},
},
});