konrad
/
Konfi-Castle-Kasino
1
1
Fork 0
Code Issues Pull Requests Releases 4 Wiki Activity

Added vue js to handle data and view more easily
continuous-integration/drone/push Build is passing Details

This commit is contained in:
kolaente 2019-09-04 19:36:37 +02:00
parent 10ebc05799
commit b3d3a8ec88
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
4 changed files with 12058 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
assets/js/load.js
View File

@ -1,82 +1,105 @@
if(typeof(EventSource) !== "undefined") {
console.log('SSE supported');
const app = new Vue({
el: '#table',
template: `
<div style="width: 99%; margin: 0 auto;padding-top: 10px;">
<div class="ui error message" style="display: block;" v-if="error !== ''">{{ error }}</div>
<table class="ui celled table" v-if="error === ''">
<thead>
<tr class="top">
<th scope="col" v-if="mode === 0">Name</th>
<th scope="col" v-if="mode === 1">Gemeinde</th>
<th scope="col" v-if="mode === 0">Gemeinde</th>
<th scope="col">Eingezahlte KonfiCoins Gesamt</th>
<th scope="col" v-if="mode === 1">KonfiCoins p.P.</th>
</tr>
</thead>
<tbody>
<tr v-if="data.length === 0">
<td colspan="4">Laden...</td>
</tr>
<tr v-for="item in data">
<td>{{ item.name }}</td>
<td v-if="mode === 0">{{ item.gemeinde }}</td>
<td>{{ item.kcoins }}</td>
<td v-if="mode === 1">{{ (item.coins_quota).toFixed(2) }}</td>
</tr>
</tbody>
</table>
</div>`,
data() {
return {
mode: 1,
data: [],
error: '',
}
},
beforeMount() {
this.mode = mode
},
mounted() {
console.log(mode)
if (typeof (EventSource) === "undefined") {
this.error = 'Diese Browser wird nicht unterstützt.'
return
}
const tableName = '#konfis'
const table = $( tableName )
let source = new EventSource('/events');
source.onmessage = e => {
console.debug('unsupported event!', e)
};
source.addEventListener('init', e => {
console.debug('init', e)
const data = JSON.parse(e.data)
table.html('');
$.each( data, (i, item) => {
if (item.gemeinde !== undefined) {
table.append('<tr data-id="' + item.id + '"> ' +
'<td>' + item.name + '</td> ' +
'<td>' + item.gemeinde + '</td> ' +
'<td>' + item.kcoins + '</td>' +
'</tr>');
} else {
table.append('<tr data-id="' + item.id + '"> ' +
'<td>' + item.name + '</td> ' +
'<td>' + item.kcoins + '</td>' +
'<td>' + (item.coins_quota).toFixed(2) + '</td> ' +
'</tr>');
}
});
})
source.addEventListener('update', e => {
console.debug('update', e)
// TODO: Make sure everything is sorted...
const data = JSON.parse(e.data)
$(tableName + ` tr`).each((i, tr) => {
if(tr.dataset.id == data.id) {
tr.innerHTML = '<td>' + data.name + '</td> ' +
'<td>' + data.kcoins + '</td>' +
'<td>' + (data.coins_quota).toFixed(2) + '</td> '
}
let source = new EventSource('/events');
source.onmessage = e => {
console.debug('unsupported event!', e)
};
source.addEventListener('init', e => {
console.debug('init', e)
this.data = JSON.parse(e.data)
// We assume we get the data sorted, so we won't sort it here
})
})
source.addEventListener('create', e => {
console.debug('create', e)
const data = JSON.parse(e.data)
})
source.addEventListener('delete', e => {
console.debug('delete', e)
const data = JSON.parse(e.data)
})
source.onopen = evt => {
console.debug('SSE opened', evt)
}
source.onerror = evt => {
console.debug('SSE Error', evt)
}
} else {
console.log('SSE not supported!');
}
/*
setInterval(function() {
$.getJSON('/list', function (data) {
$( "#konfis" ).html('');
$.each( data, function( i, item ) {
if (item.gemeinde != undefined) {
$( "#konfis" ).append('<tr> ' +
'<td>' + item.name + '</td> ' +
'<td>' + item.gemeinde + '</td> ' +
'<td>' + item.kcoins + '</td>' +
'</tr>');
} else {
$( "#konfis" ).append('<tr> ' +
'<td>' + item.name + '</td> ' +
'<td>' + item.kcoins + '</td>' +
'<td>' + (item.coins_quota).toFixed(2) + '</td> ' +
'</tr>');
source.addEventListener('update', e => {
console.debug('update', e)
this.update(JSON.parse(e.data))
})
source.addEventListener('create', e => {
console.debug('create', e)
this.create(JSON.parse(e.data))
})
source.addEventListener('delete', e => {
console.debug('delete', e)
this.delete(JSON.parse(e.data))
})
source.onopen = evt => {
console.debug('SSE opened', evt)
}
source.onerror = evt => {
console.debug('SSE Error', evt)
}
},
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
}
}
});
});
}, 1000);
*/
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()
},
},
});

11944
assets/js/vue.js Normal file
View File

File diff suppressed because it is too large Load Diff

6
assets/js/vue.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

35
tpl/index.html
View File

@ -7,37 +7,14 @@
<link rel="stylesheet" type="text/css" href="/assets/semantic/semantic.min.css">
</head>
<body>
<div style="width: 99%; margin: 0 auto;padding-top: 10px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="ui celled table">
<thead>
<tr class="top">
<th scope="col">
{{if eq .Mode 0}}
Name
{{else}}
Gemeinde
{{end}}
</th>
{{if eq .Mode 0}}
<th scope="col">Gemeinde</th>
{{end}}
<th scope="col">Eingezahlte KonfiCoins Gesamt</th>
{{if eq .Mode 1}}
<th scope="col">KonfiCoins p.P.</th>
{{end}}
</tr>
</thead>
<tbody id="konfis">
<tr>
<td colspan="4">Laden...</td>
</tr>
</tbody>
</table>
</div>
<div id="table"></div>
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="/assets/js/jquery-3.1.1.min.js"></script>
<script>if (window.module) module = window.module;</script>
<script src="/assets/js/load.js?1504651531"></script>
<script>
const mode = {{.Mode}}
</script>
<script src="/assets/js/vue.min.js"></script>
<script src="/assets/js/load.js"></script>
</body>
</html>
{{end}}