128 lines
4.4 KiB
Handlebars
128 lines
4.4 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Event Log</title>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="card static">
|
|
<div class="table-wrapper">
|
|
<table id="eventTable" >
|
|
<thead class="no-wrap">
|
|
<tr>
|
|
<th class="text-align:left" onclick="">ID</th>
|
|
<th class="text-align:left" onclick="">Datum</th>
|
|
<th class="text-align:left" onclick="">Level</th>
|
|
<th class="text-align:left" onclick="">Plugin</th>
|
|
<th class="text-align:left" onclick="">Message</th>
|
|
<th class="text-align:left" onclick="">Trace</th>
|
|
<th class="text-align:left" onclick="">User</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{#each logs}}
|
|
<tr>
|
|
<td>{{this.ID}}</td>
|
|
<td class="no-wrap">{{dateFormat this.Date "yyyy-mm-dd HH:MM:SS"}}</td>
|
|
<td class="{{this.Level_ID}}">
|
|
{{LevelDisplayName}}
|
|
</td>
|
|
<td>{{this.PluginName}}</td>
|
|
<td><span>{{replaceAll this.Message "||" "<br>"}}</span> <span class="copy-icon" onclick="copyToClipboard(`{{replaceAll this.Message "||" "<br>"}}`)">⧉</span></td>
|
|
<td>{{this.Trace}}</td>
|
|
<td class="no-wrap">{{this.ClearTextUser}}</td>
|
|
</tr>
|
|
{{/each}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid" style="pointer-events:auto;position:absolute; bottom:18px;right:18px;grid-template-columns: 1fr;">
|
|
<button class="redbutton" id="confirmClearLog" data-tooltip="Löscht alle Einträge aus der Datenbank">Log leeren</button>
|
|
</div>
|
|
<script type="text/javascript">
|
|
const eventTable = document.getElementById("eventTable");
|
|
let mappedLogs = [];
|
|
|
|
|
|
confirmClearLog.onclick = evt => {
|
|
feedbox(
|
|
{ title: `Hast Du Sie nicht mehr Alle?`,
|
|
message: `<p>Damit werden alle Einträge aus dem EventLog entfernt!</p>`,
|
|
buttons: {
|
|
yes: {
|
|
text: 'Ich weiß, <b>Geht auf meinen Nacken!</b>',
|
|
onClick: async () => await clearLog()
|
|
},
|
|
no: {
|
|
text: 'Dazu habe ich nicht die Eier'
|
|
}
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
async function clearLog() {
|
|
const res = await fetch(`/api/eventlog/clearlog`, { method: 'POST' });
|
|
const data = await res.json();
|
|
vt.source([]);
|
|
}
|
|
|
|
|
|
const vt = virtualTable({
|
|
tableEl: eventTable,
|
|
rowHeight: 40,
|
|
buffer: 5,
|
|
groupKey: null, // optional zum Gruppieren
|
|
filterConfig:{
|
|
exceptedColumns: [''],
|
|
columnModes:{
|
|
Plugin: 'dropdown',
|
|
Level: 'dropdown',
|
|
User: 'dropdown'
|
|
},
|
|
checkboxFilter:{
|
|
column:'Level_ID',
|
|
rules:[
|
|
{ label:'Erfolgreich', test:v => parseInt(v) === 0 },
|
|
{ label:'Information', test:v => parseInt(v) === 1 },
|
|
{ label:'Warnung', test:v => parseInt(v) === 2 },
|
|
{ label:'Fehler', test:v => parseInt(v) === 4 },
|
|
{ label:'Absturz', test:v => parseInt(v) === 8 },
|
|
]
|
|
}
|
|
},
|
|
customRender: (row, tr) => {
|
|
tr.style.height = '40px';
|
|
createTd(tr, row['ID'], { classes: [ 'text-align:left'] });
|
|
createTd(tr, row['Datum']);
|
|
createTd(tr, row['Level']);
|
|
createTd(tr, row['Plugin']);
|
|
createTd(tr, row['Message'], { classes: [ 'no-wrap' ], attributes: { 'data-tooltip': formatHtml(row['Message']) } });
|
|
createTd(tr, row['Trace'], { attributes: { 'data-tooltip': formatHtml(row['Trace']) } });
|
|
createTd(tr, row['User']);
|
|
}
|
|
});
|
|
|
|
|
|
fetch('/api/eventlog/getLogs', { method: 'POST' })
|
|
.then(logs => logs.json())
|
|
.then(logs => {
|
|
mappedLogs = logs.map(row => ({ ...row, Plugin: row['PluginName'], Level: row['LevelDisplayName'], Datum: dateFormat(row['Date'], 'yyyy-mm-dd HH:MM:SS'), User: row['ClearTextUser'] }))
|
|
vt.addData(mappedLogs.length != 0 ? mappedLogs : {});
|
|
});
|
|
|
|
|
|
adminSocket.on('eventlog_table', (data) => {
|
|
data = {...data, Plugin: data['PluginName'], Level: data['LevelDisplayName'], Datum: dateFormat(data['Date'], 'yyyy-mm-dd HH:MM:SS'), User: data['ClearTextUser'] };
|
|
mappedLogs.unshift(data)
|
|
vt.source(mappedLogs);
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|