121 lines
4.4 KiB
HTML
121 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<base href="/">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<style type="text/css">
|
|
#mqtt{ border: 1px solid #444; overflow-x:hidden; overflow-y:auto; background-color:#333; color: #EEE; text-shadow:#000 0 0 2px; height: 400px; padding: 10px; font-size:12px; line-height:20px;}
|
|
.monospace{font-family: Monaco,"Bitstream Vera Sans Mono","Lucida Console",Terminal,monospace;}
|
|
.selection::selection , .selection *::selection{background: #EEE;color:#000;border-color:#000; text-shadow:#fff 0 0 2px;}
|
|
.selection::-moz-selection , .selection *::-moz-selection{background: #EEE;color:#000;border-color:#000; text-shadow:#fff 0 0 2px;}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
th, td {
|
|
border: 1px solid #ddd;
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
th {
|
|
background-color: #f4f4f4;
|
|
}
|
|
.new-row { background-color: #ff0099; transition: background-color 1.5s ease; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Live QSO-View</h1>
|
|
<table id="messagesTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Wann</th>
|
|
<th>Von</th>
|
|
<th>Von Grid</th>
|
|
<th>Nach</th>
|
|
<th>Nach Grid</th>
|
|
<th>Band</th>
|
|
<th>QRG</th>
|
|
<th>Mode</th>
|
|
<th>RSTR</th>
|
|
<th>RSTS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Rows will be dynamically added here -->
|
|
</tbody>
|
|
</table>
|
|
<script type="text/javascript">
|
|
const base = document.querySelector('base');
|
|
if (base) {
|
|
base.href = window.location.pathname;
|
|
}
|
|
document.write(`<script src="${base.href}/jquery/jquery.min.js"><\/script>`);
|
|
document.write(`<script src="${base.href}/socket.io/socket.io.js"><\/script>`);
|
|
</script>
|
|
<script type="text/javascript" defer>
|
|
(function() {
|
|
const queryString = window.location.search;
|
|
const urlParams = new URLSearchParams(queryString);
|
|
const filter = urlParams.get('call') || '';
|
|
const tableBody = document.getElementById('messagesTable').querySelector('tbody');
|
|
var lines = 0;
|
|
var buffer = $('#mqtt');
|
|
var socket = io.connect({ path: window.location.pathname+"/socket.io" }); // http://localhost:8000");
|
|
socket.on('connect', function() {
|
|
console.log('Connected to:', socket.host);
|
|
});
|
|
socket.on('mqtt', function(message) {
|
|
if ((filter == '') || (filter == message.station_call)) {
|
|
const row = document.createElement('tr');
|
|
const timestampCell = document.createElement('td');
|
|
const CellCall = document.createElement('td');
|
|
const CellGrid = document.createElement('td');
|
|
const CellStationCall = document.createElement('td');
|
|
const CellStationGrid = document.createElement('td');
|
|
const CellBand = document.createElement('td');
|
|
const CellQRG = document.createElement('td');
|
|
const CellMode = document.createElement('td');
|
|
const CellRSTR = document.createElement('td');
|
|
const CellRSTS = document.createElement('td');
|
|
|
|
CellCall.textContent = message.call;
|
|
CellGrid.textContent = message.grid;
|
|
CellStationCall.textContent = message.station_call;
|
|
CellStationGrid.textContent = message.station_grid;
|
|
CellBand.textContent = message.band;
|
|
CellQRG.textContent = message.qrg;
|
|
CellMode.textContent = message.mode;
|
|
CellRSTR.textContent = message.RST_RCVD;
|
|
CellRSTS.textContent = message.RST_SENT;
|
|
timestampCell.textContent = tsclean(message.qso_time);
|
|
|
|
row.appendChild(timestampCell);
|
|
row.appendChild(CellStationCall);
|
|
row.appendChild(CellStationGrid);
|
|
row.appendChild(CellCall);
|
|
row.appendChild(CellGrid);
|
|
row.appendChild(CellBand);
|
|
row.appendChild(CellQRG);
|
|
row.appendChild(CellMode);
|
|
row.appendChild(CellRSTR);
|
|
row.appendChild(CellRSTS);
|
|
row.classList.add('new-row');
|
|
tableBody.insertBefore(row, tableBody.firstChild);
|
|
setTimeout(() => {
|
|
row.classList.remove('new-row');
|
|
}, 1500);
|
|
}
|
|
|
|
});
|
|
})();
|
|
function tsclean(timestamp) {
|
|
const parts = timestamp.split(':');
|
|
if (parts.length === 2) {
|
|
return `${timestamp}:00`;
|
|
}
|
|
return timestamp; // Already normalized
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|