285 lines
11 KiB
PHP
Executable File
285 lines
11 KiB
PHP
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type" />
|
|
<meta name="theme-color" content="#1a237e">
|
|
<title>Liveresultater</title>
|
|
|
|
<link rel="icon" type="image/png" href="./common/kok-144x144.png">
|
|
<link rel="stylesheet" href="common/bootstrap/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="common/main.css">
|
|
</head>
|
|
|
|
<body class="theme-auto">
|
|
<header>
|
|
<div id="header-brand">
|
|
<img src="./common/kok-144x144.png" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
|
|
Liveresultater
|
|
</div>
|
|
<div class="spacer"></div>
|
|
<div class="StatusDiv" id="lastUpdate">status</div>
|
|
<div class="StatusDiv" id="lastMessage">status</div>
|
|
</header>
|
|
|
|
<!--
|
|
<nav class="navbar navbar-dark shadow" style="background-color: #303f9f;">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">
|
|
<img src="./common/kok-144x144.png" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
|
|
Liveresultater
|
|
</a>
|
|
<div>
|
|
<span class="navbar-text mr-md-3" id="lastUpdate">
|
|
Status
|
|
</span>
|
|
<span class="navbar-text" id="lastMessage">
|
|
Status
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
-->
|
|
|
|
<div class="container alert alert-warning hiddendiv" role="alert" id="ConnectionAlert">
|
|
Du har mistet kontakten med serveren. Last inn sida på nytt får å koble til igjen <button type="button" class="btn btn-warning" onclick="location.reload()">Last inn på nytt</button>
|
|
</div>
|
|
|
|
<ul class="container nav nav-pills bd-highlight" id="classes-tabs" role="tablist" style="margin-bottom: 1rem; margin-top: 1rem;">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" id="alle-tab" data-toggle="tab" href="#alle" role="tab" aria-controls="alle" aria-selected="true">Alle klasser</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<div class="tab-content" id="classes-tab-content">
|
|
<div class="tab-pane fade show active" id="alle" role="tabpanel" aria-labelledby="alle">
|
|
<div class="all-result" id="alle-cont"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="liveresults" class="container"></div>
|
|
|
|
<script>
|
|
var tabsCreated = false;
|
|
|
|
function createTabs(tabArray, tabNameArray) {
|
|
for (let i = 0; i < tabArray.length; i++) {
|
|
let startStrTab = '<li class="nav-item" role="presentation"><a class="nav-link" role="tab" data-toggle="tab"'
|
|
console.log(tabNameArray)
|
|
let StrTab = startStrTab + 'id="' + tabArray[i] + '-tab" href="#' + tabArray[i] + '" aria-controls="' + tabArray[i] + '" aria-selected="false">' + tabNameArray[i].Class.Name + '</a></li>';
|
|
let StrCont = '<div class="result-div tab-pane fade show" id="' + tabArray[i] + '" role="tabpanel" aria-labelledby="' + tabArray[i] + '-tab"></div>'
|
|
document.getElementById("classes-tabs").innerHTML += StrTab;
|
|
document.getElementById("classes-tab-content").innerHTML += StrCont;
|
|
tabsCreated = true;
|
|
}
|
|
}
|
|
|
|
function TimeFormater(stamp) {
|
|
//diff /= 60;
|
|
let minutes = Math.floor(stamp / 60);
|
|
let seconds = stamp - minutes * 60;
|
|
let hours = Math.floor(stamp / 3600);
|
|
return minutes + ":" + seconds;
|
|
}
|
|
|
|
function sortTable(tableToCheck) {
|
|
var table, rows, switching, i, x, y, shouldSwitch;
|
|
table = document.getElementById(tableToCheck);
|
|
switching = true;
|
|
/* Make a loop that will continue until
|
|
no switching has been done: */
|
|
while (switching) {
|
|
// Start by saying: no switching is done:
|
|
switching = false;
|
|
rows = table.rows;
|
|
/* Loop through all table rows (except the
|
|
first, which contains table headers): */
|
|
for (i = 1; i < (rows.length - 1); i++) {
|
|
// Start by saying there should be no switching:
|
|
shouldSwitch = false;
|
|
/* Get the two elements you want to compare,
|
|
one from current row and one from the next: */
|
|
x = rows[i].getElementsByTagName("td")[2];
|
|
y = rows[i + 1].getElementsByTagName("td")[2];
|
|
// Check if the two rows should switch place:
|
|
if (parseInt(x.persTime, 10) > parseInt(y.persTime, 10)) {
|
|
// If so, mark as a switch and break the loop:
|
|
shouldSwitch = true;
|
|
break;
|
|
}
|
|
}
|
|
if (shouldSwitch) {
|
|
/* If a switch has been marked, make the switch
|
|
and mark that a switch has been done: */
|
|
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
|
|
switching = true;
|
|
}
|
|
}
|
|
for (i = 1; i < (rows.length); i++) {
|
|
rows[i].getElementsByTagName("td")[0].innerHTML = i+1+".";
|
|
}
|
|
}
|
|
|
|
|
|
function loadresults() {
|
|
var xmlhttp = new XMLHttpRequest();
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
let xmlObj = JSON.parse(this.responseText);
|
|
var classesArray = [];
|
|
for (let i = 0; i < xmlObj.ClassResult.length; i++) {
|
|
classesArray[i] = xmlObj.ClassResult[i].Class.Name.replace(/ |\//g, "_");;
|
|
}
|
|
console.log(classesArray);
|
|
if (tabsCreated == false) {
|
|
createTabs(classesArray, xmlObj.ClassResult);
|
|
}
|
|
document.getElementById("alle-cont").innerHTML = "";
|
|
|
|
//create tables
|
|
for (let i = 0; i < xmlObj.ClassResult.length; i++) {
|
|
let tableLabels = '<tr class="table-labels"><td></td><td>Løper</td><td class="club-collum">Klubb</td><td>Tid</td><td>Diff</td></tr>';
|
|
let resultTable = '<table class="ResultTable " id="'+classesArray[i]+'-table">'+tableLabels;
|
|
let winnerTime;
|
|
resultTable += '<h4>'+xmlObj.ClassResult[i].Class.Name+'</h4>';
|
|
for (let k = 0; k < xmlObj.ClassResult[i].PersonResult.length; k++) {
|
|
resultTable += '<tr><td id="Ranking"></td>';
|
|
//add name
|
|
resultTable += "<td>" + xmlObj.ClassResult[i].PersonResult[k].Person.Name.Given + " " + xmlObj.ClassResult[i].PersonResult[k].Person.Name.Family + "</td>"
|
|
//add club
|
|
if (xmlObj.ClassResult[i].PersonResult[k].Organisation.Name!='[object Object]'){
|
|
resultTable += '<td class="club-collum">' + xmlObj.ClassResult[i].PersonResult[k].Organisation.Name + '</td>'
|
|
}
|
|
else{
|
|
resultTable += '<td class="club-collum">' + "" + '</td>'
|
|
}
|
|
|
|
|
|
let timeUsedStamp = xmlObj.ClassResult[i].PersonResult[k].Result.Time;
|
|
let timeUsed = TimeFormater(timeUsedStamp);
|
|
console.log(xmlObj.ClassResult[i].PersonResult[k].Result.Status );
|
|
//Check if person is dsq and add uime
|
|
let persStatus = xmlObj.ClassResult[i].PersonResult[k].Result.Status;
|
|
if (persStatus == 'OK') {
|
|
resultTable += '<td persTime="'+timeUsedStamp+'" persStatus="'+xmlObj.ClassResult[i].PersonResult[k].Result.Status+'">' + timeUsed + '</td>'
|
|
}
|
|
else if (persStatus == 'Disqualified') {
|
|
resultTable += '<td persTime="'+timeUsedStamp+'" persStatus="'+xmlObj.ClassResult[i].PersonResult[k].Result.Status+'">' + 'DSQ' +'</td>';
|
|
}
|
|
else if (persStatus == 'Active'){
|
|
resultTable += '<td persTime="'+timeUsedStamp+'" persStatus="'+xmlObj.ClassResult[i].PersonResult[k].Result.Status+'">' + 'Ikke i mål' +'</td>';
|
|
}
|
|
else {
|
|
resultTable += '<td persTime="'+timeUsedStamp+'" persStatus="'+xmlObj.ClassResult[i].PersonResult[k].Result.Status+'">' + persStatus +'</td>';
|
|
}
|
|
|
|
//add time difference to winner
|
|
if (!xmlObj.ClassResult[i].PersonResult[k].Result.Position){
|
|
resultTable += '<td>' + "" + '</td>'
|
|
}
|
|
else if (xmlObj.ClassResult[i].PersonResult[k].Result.Position!=1){
|
|
let timeDiff = xmlObj.ClassResult[i].PersonResult[k].Result.Time-winnerTime;
|
|
resultTable += '<td>+' + TimeFormater(timeDiff) + '</td>'
|
|
}
|
|
else if (xmlObj.ClassResult[i].PersonResult[k].Result.Position=1){
|
|
winnerTime = xmlObj.ClassResult[i].PersonResult[k].Result.Time;
|
|
resultTable += '<td>' + "" + '</td>'
|
|
}
|
|
resultTable += "</tr>";
|
|
}
|
|
resultTable += "</table>"
|
|
document.getElementById(classesArray[i].replace(/ |\//g, "_")).innerHTML = resultTable;
|
|
|
|
sortTable(classesArray[i].replace(/ |\//g, "_")+'-table');
|
|
|
|
document.getElementById("alle-cont").innerHTML += '<div class="all-result-div">'+resultTable.replace(/-table/g, "-all-table")+'</div>';
|
|
sortTable(classesArray[i].replace(/ |\//g, "_")+'-all-table');
|
|
}
|
|
|
|
//console.log(xmlObj)
|
|
}
|
|
};
|
|
xmlhttp.open("GET", "xmlToJson.php", true);
|
|
xmlhttp.send();
|
|
}
|
|
|
|
loadresults()
|
|
|
|
function mkTimeStr(timestmp) {
|
|
var date = new Date(timestmp * 1000);
|
|
// Hours part from the timestamp
|
|
var hours = date.getHours();
|
|
// Minutes part from the timestamp
|
|
var minutes = "0" + date.getMinutes();
|
|
// Seconds part from the timestamp
|
|
var seconds = "0" + date.getSeconds();
|
|
|
|
// Will display time in 10:30:23 format
|
|
var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
|
|
return formattedTime;
|
|
}
|
|
|
|
|
|
var lastUpdate;
|
|
|
|
if (typeof(EventSource) !== "undefined") {
|
|
var source = new EventSource("updater.php");
|
|
source.onmessage = function(event) {
|
|
//console.log(event);
|
|
statusArray = event.data.split(",");
|
|
lastMessage = parseInt(statusArray[3], 10);
|
|
console.log(statusArray);
|
|
document.getElementById("lastUpdate").innerHTML = "Siste oppdatering: " + mkTimeStr(statusArray[1]);
|
|
document.getElementById("lastMessage").innerHTML = "Siste sjekket: " + mkTimeStr(statusArray[2]);
|
|
updateInt = parseInt(statusArray[0], 10);
|
|
console.log(updateInt);
|
|
//check if update has accured
|
|
if (parseInt(statusArray[1], 10) + 6 > parseInt(statusArray[2], 10)) {
|
|
updateInt = 1;
|
|
}
|
|
if (lastUpdate == undefined) {
|
|
window.lastUpdate == parseInt(statusArray[1], 10)
|
|
}
|
|
console.log(statusArray);
|
|
|
|
//update results
|
|
if (updateInt == 1) {
|
|
loadresults()
|
|
console.log("Update!!!!! :=)");
|
|
window.lastUpdate = parseInt(statusArray[1], 10);
|
|
|
|
var jdata = JSON.parse(statusArray[3]);
|
|
console.log(jdata);
|
|
} else {
|
|
console.log("No update");
|
|
}
|
|
|
|
};
|
|
} else {
|
|
document.getElementById("serverStatus").innerHTML = "Sorry, your browser does not support server-sent events...";
|
|
}
|
|
|
|
const checkConnection = async function() {
|
|
cTime = Math.round(Date.now() / 1000);
|
|
|
|
if (cTime > lastMessage + 30) {
|
|
//mistet tilkobling
|
|
var element = document.getElementById("ConnectionAlert");
|
|
element.classList.remove("hiddendiv");
|
|
|
|
} else {
|
|
//fortsatt tilkoblet
|
|
var element = document.getElementById("ConnectionAlert");
|
|
element.classList.add("hiddendiv");
|
|
}
|
|
}
|
|
|
|
var interval = setInterval(checkConnection, 10000);
|
|
</script>
|
|
|
|
<script src="common/bootstrap/js/bootstrap.min.js"></script>
|
|
</body>
|
|
</html>
|