Vue JS all the things

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('<tr id="kcoins_row_' + item.id + '">' +
-                    '<td>' + item.name + '</td>  ' +
-                    '<td>' + item.gemeinde + '</td>  ' +
-                    '<td id="kcoins_display_' + item.id + '">' + item.kcoins + '</td>' +
-                    '<td><span class="ui action input" id="kcoins_container_' + item.id + '"><input type="number" value="0" tabindex="' + (i +1) + '" id="kcoins_' + item.id + '" name="kcoins" autocomplete="off" /><button class="ui right labeled icon button green" onclick="updateCoins(\'' + item.id + '\');"><i class="right dollar icon"></i>KonfiCoins Hinzufügen</button></span>&nbsp;&nbsp;&nbsp;&nbsp;<button class="ui button red" onclick="deleteKonfi(\'' + item.id + '\');"  id="kcoins_container_' + item.id + '">Konfi Löschen</button></td></tr>');
-            } else {
-                $("#list").append('<tr id="kcoins_row_' + item.id + '">  ' +
-                    '<td>' + item.name + '</td>  ' +
-                    '<td id="kcoins_display_' + item.id + '">' + item.kcoins + '</td>' +
-                    '<td>' + item.konfi_count + '</td>  ' +
-                    '<td id="kcoins_quota_' + item.id + '">' + (item.coins_quota).toFixed(2) + '</td>  ' +
-                    '<td><span class="ui action input" id="kcoins_container_' + item.id + '"><input type="number" value="0" tabindex="' + (i +1) + '" id="kcoins_' + item.id + '" name="kcoins" autocomplete="off" /><button class="ui right labeled icon button green" onclick="updateCoins(\'' + item.id + '\');"><i class="right dollar icon"></i>KonfiCoins Hinzufügen</button></span>&nbsp;&nbsp;&nbsp;&nbsp;<button class="ui button red" onclick="deleteGemeinde(\'' + item.id + '\');"  id="kcoins_container_' + item.id + '">Gemeinde Löschen</button></td></tr>');
+const app = new Vue({
+    el: '#adminedit',
+    template: `
+<div>
+<div id="msg" v-if="error !== ''"> {{ error }}</div>
+<table class="ui celled table">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <td v-if="mode === 0">Gemeinde</td>
+        <th>KonfiCoins</th>
+        <th v-if="mode === 1">Konfis</th>
+        <th v-if="mode === 1">Konficoins pro Person</th>
+        <th>Bearbeiten</th>
+    </tr>
+    </thead>
+    <tbody id="list">
+    <tr v-if="data.length === 0">
+        <td colspan="5">Laden...</td>
+    </tr>
+    <tr v-for="(item, i) in data">
+        <td>{{ item.name }}</td>
+        <td v-if="mode === 0">{{ item.gemeinde }}</td>
+        <td>{{ item.kcoins }}</td>
+        <td v-if="mode === 1">{{ item.konfi_count }}</td>
+        <td v-if="mode === 1">{{ (item.coins_quota).toFixed(2) }}</td>
+        <td>
+            <span class="ui action input">
+                <input type="number" :tabindex="(i +1)" @keyup.enter="updateCoins(item.id)" autocomplete="off" v-model="formStuff[item.id].addCoins"/>
+                <a class="ui right labeled icon button green" @click="updateCoins(item.id)">
+                    <i class="right dollar icon"></i>
+                    KonfiCoins Hinzufügen
+                </a>
+            </span>
+            &nbsp;&nbsp;&nbsp;&nbsp;
+            <a v-if="!formStuff[item.id].showDelete" class="ui button red" @click="formStuff[item.id].showDelete = true">
+                Löschen
+            </a>
+            <span v-if="formStuff[item.id].showDelete">
+                Sicher?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a class="ui button red" @click="deleteStuff(item.id)">
+                    Löschen
+                </a>
+                <a class="ui button" @click="formStuff[item.id].showDelete = false">
+                    Abbrechen
+                </a>
+            </span>
+        </td>
+    </tr>
+    </tbody>
+</table>
+</div>`,
+    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('<div class="ui error message" style="display: block;">Ein Fehler trat auf.</div>');
+            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('<div class="ui success message" style="display: block;">Der Konfi wurde erfolgreich gelöscht.</div>');
-                        } else {
-                            $('#msg').html('<div class="ui error message" style="display: block;">Ein Fehler trat auf.</div>');
-                        }
-                    }
-                });
+            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('<div class="ui success message" style="display: block;">Die Gemeinde wurde erfolgreich gelöscht.</div>');
-                        } else {
-                            $('#msg').html('<div class="ui error message" style="display: block;">Ein Fehler trat auf.</div>');
-                        }
-                    }
-                });
+            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')

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)
 	}

tpl/admin_footer.html

@@ -1,4 +1,9 @@
 {{define "admin_footer"}}
+
+    <script>
+        const mode = {{.Mode}}
+    </script>
+    <script src="/assets/js/vue.js"></script>
     <script src="/assets/js/admin.js"></script>
 
     </body>

tpl/admin_mode_1.html

@@ -10,23 +10,10 @@
             </a>
         </p>
 
-        <div id="msg"></div>
-        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="ui celled table">
-            <thead>
-            <tr>
-                <th>Name</th>
-                <th>KonfiCoins</th>
-                <th>Konfis</th>
-                <th>KonfiCoins p.P.</th>
-                <th>Bearbeiten</th>
-            </tr>
-            </thead>
-            <tbody id="list">
-            <tr>
-                <td colspan="5">Laden...</td>
-            </tr>
-            </tbody>
-        </table>
+            <div id="adminedit">
+            </div>
+
+
         <p style="color: #ccc;">© 2017-2019 <a href="http://konradlangenberg.de" target="_blank" style="color:#ccc;">Konrad
                 Langenberg</a> | Version: {{.Version}}</p>
         </div>
@@ -79,6 +66,6 @@
             </div>
         </div>
 
-        {{template "admin_footer"}}
+        {{template "admin_footer" .}}
     {{end}}
 {{end}}