report.html

{% comment 
# Copyright (c) 2017 Artur Wiebe <artur@4wiebe.de>
#
# Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
# associated documentation files (the "Software"), to deal in the Software without restriction,
# including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
# and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
# subject to the following conditions:
#
# The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
#
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
# INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
# IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
# WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
%}

{% extends "page.html" %}


{% block html %}
<table class="table table-hover">
	<tbody data-bind="foreach:messages">
		<tr data-bind="class:$model.priorityCss[msg.PRIORITY]">
			<td data-bind="text:timestamp()"></td>
			<td width="85%">
				<strong data-bind="l10n:msg.REPORT" style="white-space:pre-line"></strong>
				<p data-bind="l10n:msg.REPORT+'-help', visible:details" class="mt-3"></p>
			</td>
			<td data-bind="click:()=>{details(details()?0:1)}"><i class="fas fa-question-circle"></i></td>
		</tr>
	</tbody>
</table>
{% end %}


{% block script %}
class Message {
	constructor(msg) {
		msg.PRIORITY	= parseInt(msg.PRIORITY);
		this.details	= ko.observable(0);
		this.msg = msg;
	}
	
	timestamp() {
		const timestamp = parseInt(this.msg._SOURCE_REALTIME_TIMESTAMP ?? this.msg.__REALTIME_TIMESTAMP);
		return new Date(timestamp/1000).toLocaleString(navigator.language, {hour12:false});
	}
}
{% end %}


{% block model %}
class {
	constructor() {
		this.priorityCss = ['bg-danger','bg-danger','bg-danger','table-danger','table-warning','table-info','',''];
		
		this.messages = ko.observableArray();
		this.messages.extend({rateLimit:100});
	}
	
	start()	{
		model.log = webSocket(wsUrl('log', null, null, {filter:'REPORTS=1'}), (msg)=>{
			model.messages.unshift(new Message(msg));
			if (model.messages().length > 50)
				model.messages.pop();
		});
	}
	
	stop() {
		model.log.close();
		model.messages([]);
	}
}
{% end %}