From 0b4083e611cfeb9fb20061ad8f9582398ead1cd0 Mon Sep 17 00:00:00 2001 From: kolaente Date: Sat, 14 Sep 2019 17:08:22 +0200 Subject: [PATCH] Vue JS all the things --- assets/js/admin.js | 270 ++++++++++++++++++++++++------------------ pkg/router/admin.go | 6 +- tpl/admin_footer.html | 5 + tpl/admin_mode_1.html | 23 +--- 4 files changed, 168 insertions(+), 136 deletions(-) diff --git a/assets/js/admin.js b/assets/js/admin.js index 9e2bf8d..816b284 100644 --- a/assets/js/admin.js +++ b/assets/js/admin.js @@ -1,126 +1,162 @@ -function getList() { - $.getJSON('/list?asc=name', function (data) { - $("#list").html(''); - $.each(data, function (i, item) { - // Modus nach Gemeindeb - if(item.gemeinde !== undefined) { - $("#list").append('' + - '' + item.name + ' ' + - '' + item.gemeinde + ' ' + - '' + item.kcoins + '' + - '    '); - } else { - $("#list").append(' ' + - '' + item.name + ' ' + - '' + item.kcoins + '' + - '' + item.konfi_count + ' ' + - '' + (item.coins_quota).toFixed(2) + ' ' + - '    '); +const app = new Vue({ + el: '#adminedit', + template: ` +
+
{{ error }}
+ + + + + + + + + + + + + + + + + + + + + + + + +
NameGemeindeKonfiCoinsKonfisKonficoins pro PersonBearbeiten
Laden...
{{ item.name }}{{ item.gemeinde }}{{ item.kcoins }}{{ item.konfi_count }}{{ (item.coins_quota).toFixed(2) }} + + + + + KonfiCoins Hinzufügen + + +      + + Löschen + + + Sicher?      + + Löschen + + + Abbrechen + + +
+
`, + data() { + return { + mode: 1, + data: [], + error: '', + addCoins: 0, + loading: false, + formStuff: {}, + } + }, + 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 => { + this.data = JSON.parse(e.data) + for (const i in this.data) { + this.$set(this.formStuff, this.data[i].id, {addCoins: 0, showDelete: false}) } - - $('#kcoins_' + item.id).on('keypress', function (e) { - if(e.which === 13){ - $(this).attr('disabled', 'disabled'); - updateCoins(item.id); - $(this).removeAttr('disabled'); - } - }); - - }); - }); -} - -getList(); - -function updateCoins(id) { - let addcoins = $('#kcoins_' + id).val(); - - if(addcoins !== 0) { - $('#coins_container_' + id).addClass('disabled'); - - $.ajax({ - url: '/admin/update', - method: 'POST', - data: 'id=' + id + '&addcoins=' + addcoins, - success: function (msg) { - $('#coins_container_' + id).removeClass('disabled'); - - if (msg.message === 'success') { - $('#kcoins_' + id).val("0"); - $('#kcoins_display_' + id).html(msg.data.kcoins); - if(msg.data.coins_quota !== undefined) { - $('#kcoins_quota_' + id).html(msg.data.coins_quota.toFixed(2)); - } - - } else { - $('#msg').html('
Ein Fehler trat auf.
'); + this.sortData() + }) + 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) => { + return a.name < b.name ? -1 : 1 + }) + }, + update(updatedData) { + for (const i in this.data) { + if (this.data[i].id === updatedData.id) { + this.$set(this.data, i, updatedData) } } - }); - } -} - -function deleteKonfi(id) { - $('#kcoins_container_' + id).addClass('disabled'); - - $('.ui.basic.kofidel.modal') - .modal({ - closable : false, - duration: 200, - onDeny : function(){ - $('#kcoins_container_' + id).removeClass('disabled'); - return true; - }, - onApprove : function() { - $.ajax({ - url: '/admin/delete', - method: 'POST', - data: 'id=' + id, - success: function (msg) { - if (msg === 'success') { - getList(); - $('#msg').html('
Der Konfi wurde erfolgreich gelöscht.
'); - } else { - $('#msg').html('
Ein Fehler trat auf.
'); - } - } - }); + 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) + } } - }) - .modal('show') - ; -} + this.sortData() + }, + updateCoins(id) { + this.loading = true -function deleteGemeinde(id) { - $('#kcoins_container_' + id).addClass('disabled'); - - $('.ui.basic.gemeindedel.modal') - .modal({ - closable : false, - duration: 200, - onDeny : function(){ - $('#kcoins_container_' + id).removeClass('disabled'); - return true; - }, - onApprove : function() { - $.ajax({ - url: '/admin/delete', - method: 'POST', - data: 'id=' + id, - success: function (msg) { - if (msg === 'success') { - getList(); - $('#msg').html('
Die Gemeinde wurde erfolgreich gelöscht.
'); - } else { - $('#msg').html('
Ein Fehler trat auf.
'); - } - } - }); + if (this.formStuff[id].addCoins == 0) { + return } - }) - .modal('show') - ; -} + + let formData = new FormData(); + formData.append('id', id); + formData.append('addcoins', this.formStuff[id].addCoins); + + fetch('/admin/update', { + method: 'POST', + body: formData + }) + .catch(e => { + this.error = e + }) + .finally(() => { + this.loading = false + this.$set(this.formStuff, id, {addCoins: 0, showDelete: false}) + }) + }, + deleteStuff(id) { + this.loading = true + let formData = new FormData(); + formData.append('id', id); + + fetch('/admin/delete', { + method: 'POST', + body: formData + }) + .catch(e => { + this.error = e + }) + .finally(() => { + this.loading = false + }) + }, + }, +}); // Konfi hinzufügen $('.ui.kofiadd.modal') diff --git a/pkg/router/admin.go b/pkg/router/admin.go index c5a0fd2..a4f43ac 100644 --- a/pkg/router/admin.go +++ b/pkg/router/admin.go @@ -24,7 +24,11 @@ func isLoggedIn(c echo.Context) bool { } func adminHandler(c echo.Context) error { - adminInfos := AdminInfos{true, config.GetMode(), models.Version} + adminInfos := AdminInfos{ + Loggedin: true, + Mode: config.GetMode(), + Version: models.Version, + } if isLoggedIn(c) { return c.Render(http.StatusOK, "admin_mode_"+strconv.Itoa(config.GetMode()), adminInfos) } diff --git a/tpl/admin_footer.html b/tpl/admin_footer.html index 34d7b95..297a7b0 100644 --- a/tpl/admin_footer.html +++ b/tpl/admin_footer.html @@ -1,4 +1,9 @@ {{define "admin_footer"}} + + + diff --git a/tpl/admin_mode_1.html b/tpl/admin_mode_1.html index 89f99fb..4a67c71 100644 --- a/tpl/admin_mode_1.html +++ b/tpl/admin_mode_1.html @@ -10,23 +10,10 @@

-
- - - - - - - - - - - - - - - -
NameKonfiCoinsKonfisKonfiCoins p.P.Bearbeiten
Laden...
+
+
+ +

© 2017-2019 Konrad Langenberg | Version: {{.Version}}

@@ -79,6 +66,6 @@ - {{template "admin_footer"}} + {{template "admin_footer" .}} {{end}} {{end}} \ No newline at end of file