Trygve
/
simple-liveresults
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed splittimes for dsq runners and improved css

This commit is contained in:
Trygve 2020-10-20 16:47:16 +02:00
parent 238fb7123e
commit 0b3e621cda
3 changed files with 80 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
common/main.css
View File

@ -3,7 +3,7 @@
--button-color-dark: #045d56; --button-color-dark: #045d56;
--text-accent-color-dark: #1eb980; --text-accent-color-dark: #1eb980;
--table-border-dark: #00000000; --table-border-dark: #00000000;
--tr-color-dark: #1e1e1e; --tr-color-dark: #1b1b1b;
--tr-nth-color-dark: #121212; --tr-nth-color-dark: #121212;
--table-highlight-dark: #616161; --table-highlight-dark: #616161;
--dark-background-color: #121212; --dark-background-color: #121212;
@ -98,8 +98,8 @@ th {
} }
h4 { h4 {
font-size: 20px; font-size: 20px;
margin-bottom: 6px; margin-bottom: auto;
margin-top: 20px; margin-top: auto;
margin-left: 1rem; margin-left: 1rem;
font-weight: 600; font-weight: 600;
} }
@ -228,36 +228,54 @@ h4 {
color: var(--text-accent-color); color: var(--text-accent-color);
text-align: center; text-align: center;
display: inline-block; display: inline-block;
border: 4px solid var(--button-color); border: thin solid #3c4043;
font-weight: 700; font-weight: 700;
border-radius: 0.25rem; border-radius: 0.25rem;
transition: 0.05s; transition: all 0.2s ease 0s;;
margin: 0.4rem; margin: 0.4rem;
} padding-top: 0.2rem;
.fancy-button:link, padding-bottom: 0.2rem;
.fancy-button:visited {
color: #7986cb;
padding: 10px 20px;
text-align: center;
text-decoration: underline;
display: inline-block;
border: 4px solid var(--button-color);
font-weight: 700;
} }
.fancy-button:hover,
.fancy-button:active { @media (hover: hover) {
.fancy-button:hover {
color: white; color: white;
background-color: var(--button-color); background-color: var(--button-color);
border: 4px solid var(--button-color); border: thin solid var(--button-color);
font-weight: 700; font-weight: 700;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
transition: all 0.4s ease 0s;
} }
}
.fancy-button:active{
background-color: var(--accent-color);
box-shadow:0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 20px 31px 3px rgba(0, 0, 0, 0.14),0px 8px 38px 7px rgba(0,0,0,.12);
transform: translateY(3px);
color: var(--dark-text-color);
}
.fancy-button:focus{
outline: none;
}
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
header { header {
flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 0.2rem; padding-left: 0.2rem;
padding-right: 0.2rem; padding-right: 0.2rem;
max-height: 5rem;
}
.header-column{
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
width: fit-content;
justify-items: left;
} }
.status-div{ .status-div{
margin-left: auto; margin-left: auto;

10
index.php
View File

@ -13,13 +13,17 @@
<body class="theme-auto"> <body class="theme-auto">
<header class="shadow-8"> <header class="shadow-8">
<div id="header-brand"> <div class='header-column'>
<div>
<img src="./common/kok-144x144.png" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy"> <img src="./common/kok-144x144.png" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
Liveresultater
</div> </div>
<div class="spacer"></div> <div id="header-brand">
</div>
</div>
<div class='header-column'>
<div class="status-div" id="lastUpdate">status</div> <div class="status-div" id="lastUpdate">status</div>
<div class="status-div" id="lastMessage">status</div> <div class="status-div" id="lastMessage">status</div>
</div>
</header> </header>
<div class="container alert alert-warning hiddendiv" role="alert" id="ConnectionAlert"> <div class="container alert alert-warning hiddendiv" role="alert" id="ConnectionAlert">

68
liveresults.js
View File

@ -3,7 +3,7 @@ var tabsCreated = false;
function createTabs(tabArray, tabNameArray) { function createTabs(tabArray, tabNameArray) {
for (let i = 0; i < tabArray.length; i++) { 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"' let startStrTab = '<li class="nav-item" role="presentation"><a class="nav-link" role="tab" data-toggle="tab"'
console.log(tabNameArray) //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 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="tab-pane fade show" id="' + tabArray[i]+'" role="tabpanel" aria-labelledby="' + tabArray[i] + '-tab"></div>' let StrCont = '<div class="tab-pane fade show" id="' + tabArray[i]+'" role="tabpanel" aria-labelledby="' + tabArray[i] + '-tab"></div>'
document.getElementById("classes-tabs").innerHTML += StrTab; document.getElementById("classes-tabs").innerHTML += StrTab;
@ -76,31 +76,32 @@ function loadresults() {
for (let i = 0; i < xmlObj.ClassResult.length; i++) { for (let i = 0; i < xmlObj.ClassResult.length; i++) {
classesArray[i] = xmlObj.ClassResult[i].Class.Name.replace(/ |\//g, "_");; classesArray[i] = xmlObj.ClassResult[i].Class.Name.replace(/ |\//g, "_");;
} }
console.log(classesArray); //console.log(classesArray);
if (tabsCreated == false) { if (tabsCreated == false) {
createTabs(classesArray, xmlObj.ClassResult); createTabs(classesArray, xmlObj.ClassResult);
} }
document.getElementById("alle-cont").innerHTML = ""; document.getElementById("alle-cont").innerHTML = "";
console.log(xmlObj); //console.log(xmlObj);
document.getElementById("header-brand").innerHTML=xmlObj.Event.Name;
//create tables //create tables
for (let i = 0; i < xmlObj.ClassResult.length; i++) { for (let i = 0; i < xmlObj.ClassResult.length; i++) {
let resultTable = ""; let resultTable = "";
let splitTimes = '<table class="ResultTable splits-table shadow-2" id="'+classesArray[i]+'-splits">' + '<tr class="splits-labels">'; let splitTimes = '<table class="ResultTable splits-table shadow-2" id="'+classesArray[i]+'-splits">' + '<tr class="splits-labels">';
let winnerTime; let winnerTime;
let controlArray = [];
if(typeof(xmlObj.ClassResult[i].PersonResult[0])!== 'undefined' && typeof(xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime)!== 'undefined'){ if(typeof(xmlObj.ClassResult[i].PersonResult[0])!== 'undefined' && typeof(xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime)!== 'undefined'){
splitTimes += '<td></td>' splitTimes += '<td></td>'
controlArray = Array.from(xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime);
for (let s = 0; s < xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime.length; s++){ for (let s = 0; s < xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime.length; s++){
splitTimes += '<td>' + (s+1) + '-' + xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime[s].ControlCode +'</td>'; splitTimes += '<td ctrlcode="'+xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime[s].ControlCode+'">' + (s+1) + '-' + xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime[s].ControlCode +'</td>';
} }
} }
splitTimes += '</tr>' splitTimes += '</tr>'
for (let k = 0; k < xmlObj.ClassResult[i].PersonResult.length; k++) { for (let k = 0; k < xmlObj.ClassResult[i].PersonResult.length; k++) {
resultTable += '<tr><td id="Ranking"></td>'; resultTable += '<tr><td id="Ranking"></td>';
//add name //add name
@ -112,11 +113,9 @@ function loadresults() {
else{ else{
resultTable += '<td class="club-collum">' + "" + '</td>' resultTable += '<td class="club-collum">' + "" + '</td>'
} }
let timeUsedStamp = xmlObj.ClassResult[i].PersonResult[k].Result.Time; let timeUsedStamp = xmlObj.ClassResult[i].PersonResult[k].Result.Time;
let timeUsed = TimeFormater(timeUsedStamp); let timeUsed = TimeFormater(timeUsedStamp);
console.log(xmlObj.ClassResult[i].PersonResult[k].Result.Status );
//Check if person is dsq and add time //Check if person is dsq and add time
let persStatus = xmlObj.ClassResult[i].PersonResult[k].Result.Status; let persStatus = xmlObj.ClassResult[i].PersonResult[k].Result.Status;
if (persStatus == 'OK') { if (persStatus == 'OK') {
@ -152,30 +151,42 @@ function loadresults() {
} }
resultTable += "</tr>"; resultTable += "</tr>";
if (typeof(xmlObj.ClassResult[i].PersonResult[k])!== 'undefined' && typeof(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime)!== 'undefined' && persStatus == 'OK'){
if (typeof(xmlObj.ClassResult[i].PersonResult[0])!== 'undefined' && typeof(xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime)!== 'undefined' && persStatus == 'OK'){
splitTimes += '<tr><td>' + xmlObj.ClassResult[i].PersonResult[k].Person.Name.Given + " " + xmlObj.ClassResult[i].PersonResult[k].Person.Name.Family + "</td>"; splitTimes += '<tr><td>' + xmlObj.ClassResult[i].PersonResult[k].Person.Name.Given + " " + xmlObj.ClassResult[i].PersonResult[k].Person.Name.Family + "</td>";
let controlTime = 0; let controlTime = 0;
let controlTimeDelta = 0; let controlTimeDelta = 0;
for (let t = 0; t < xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime.length; t++) { for (let t = 0; t < controlArray.length; t++) {
controlTime = parseInt(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time, 10)-controlTimeDelta controlTime = parseInt(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time, 10)-controlTimeDelta
controlTimeDelta += controlTime; controlTimeDelta += controlTime;
splitTimes += '<td>'+ TimeFormater(controlTime) +'<br>'+ TimeFormater(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time)+'</td>' splitTimes += '<td>'+ TimeFormater(controlTime) +'<br>'+ TimeFormater(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time)+'</td>'
} }
} }
else if (typeof(xmlObj.ClassResult[i].PersonResult[k])!== 'undefined' && typeof(xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime)!== 'undefined' && persStatus == 'Disqualified'){
splitTimes += '<tr><td>' + xmlObj.ClassResult[i].PersonResult[k].Person.Name.Given + " " + xmlObj.ClassResult[i].PersonResult[k].Person.Name.Family + "(DSQ)</td>";
let controlTimeDelta = 0;
for (let t = 0; t < controlArray.length; t++) {
if (typeof(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time)!=='undefined'){
controlTime = parseInt(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time, 10)-controlTimeDelta
controlTimeDelta += controlTime;
splitTimes += '<td>'+ TimeFormater(controlTime) +'<br>'+ TimeFormater(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time)+'</td>'
}
else {
splitTimes += '<td></td>'
}
}
}
splitTimes += '</tr>'; splitTimes += '</tr>';
} }
resultTable += "</table></div>" resultTable += "</table></div>"
splitTimes += "</table></div>" splitTimes += "</table></div>"
console.log(splitTimes)
let pClassName = classesArray[i].replace(/ |\//g, "_"); let pClassName = classesArray[i].replace(/ |\//g, "_");
resultTableA = '<div class="result-div"><h4>'+xmlObj.ClassResult[i].Class.Name+'</h4><table class="ResultTable shadow-2" id="'+classesArray[i]+'-table">'+'<tr class="table-labels"><td></td><td>Løper</td><td class="club-collum">Klubb</td><td>Tid</td><td>Diff</td></tr>'+resultTable; resultTableA = '<div class="result-div"><h4>'+xmlObj.ClassResult[i].Class.Name+'</h4><table class="ResultTable shadow-2" id="'+classesArray[i]+'-table">'+'<tr class="table-labels"><td></td><td>Løper</td><td class="club-collum">Klubb</td><td>Tid</td><td>Diff</td></tr>'+resultTable;
let resultTableB = '<div class="result-header"><h4>'+xmlObj.ClassResult[i].Class.Name+'</h4><button class="fancy-button" onclick="showHideSplits(\''+pClassName+'\')">Strekktider</button></div><div class="result-div"><table class="ResultTable shadow-2" id="'+classesArray[i]+'-table">'+'<tr class="table-labels"><td></td><td>Løper</td><td class="club-collum">Klubb</td><td>Tid</td><td>Diff</td></tr>'+resultTable; let resultTableB = '<div class="result-header"><h4>'+xmlObj.ClassResult[i].Class.Name+'</h4><button class="fancy-button" onclick="showHideSplits(\''+pClassName+'\')">Vis/skjul Strekktider</button></div><div class="result-div"><table class="ResultTable shadow-2" id="'+classesArray[i]+'-table">'+'<tr class="table-labels"><td></td><td>Løper</td><td class="club-collum">Klubb</td><td>Tid</td><td>Diff</td></tr>'+resultTable;
splitTimes = '<div class="result-div">'+splitTimes; splitTimes = '<div class="result-div">'+splitTimes;
document.getElementById(pClassName).innerHTML = resultTableB+splitTimes; document.getElementById(pClassName).innerHTML = resultTableB+splitTimes;
@ -185,8 +196,6 @@ function loadresults() {
resultTable = ""; resultTable = "";
splitTimes = ""; splitTimes = "";
} }
//console.log(xmlObj)
} }
}; };
xmlhttp.open("GET", "xmlToJson.php", true); xmlhttp.open("GET", "xmlToJson.php", true);
@ -195,7 +204,7 @@ function loadresults() {
loadresults() loadresults()
function mkTimeStr(timestmp) { function mkDateStr(timestmp) {
var date = new Date(timestmp * 1000); var date = new Date(timestmp * 1000);
// Hours part from the timestamp // Hours part from the timestamp
var hours = date.getHours(); var hours = date.getHours();
@ -215,14 +224,14 @@ var lastUpdate;
if (typeof(EventSource) !== "undefined") { if (typeof(EventSource) !== "undefined") {
var source = new EventSource("updater.php"); var source = new EventSource("updater.php");
source.onmessage = function(event) { source.onmessage = function(event) {
//console.log(event); ////console.log(event);
statusArray = event.data.split(","); statusArray = event.data.split(",");
lastMessage = parseInt(statusArray[3], 10); lastMessage = parseInt(statusArray[3], 10);
console.log(statusArray); //console.log(statusArray);
document.getElementById("lastUpdate").innerHTML = "Siste oppdatering: " + mkTimeStr(statusArray[1]); document.getElementById("lastUpdate").innerHTML = "Siste oppdatering: " + mkDateStr(statusArray[1]);
document.getElementById("lastMessage").innerHTML = "Siste sjekket: " + mkTimeStr(statusArray[2]); document.getElementById("lastMessage").innerHTML = "Siste sjekket: " + mkDateStr(statusArray[2]);
updateInt = parseInt(statusArray[0], 10); updateInt = parseInt(statusArray[0], 10);
console.log(updateInt); //console.log(updateInt);
//check if update has accured //check if update has accured
if (parseInt(statusArray[1], 10) + 6 > parseInt(statusArray[2], 10)) { if (parseInt(statusArray[1], 10) + 6 > parseInt(statusArray[2], 10)) {
updateInt = 1; updateInt = 1;
@ -230,18 +239,16 @@ if (typeof(EventSource) !== "undefined") {
if (lastUpdate == undefined) { if (lastUpdate == undefined) {
window.lastUpdate == parseInt(statusArray[1], 10) window.lastUpdate == parseInt(statusArray[1], 10)
} }
console.log(statusArray); //console.log(statusArray);
//update results //update results
if (updateInt == 1) { if (updateInt == 1) {
loadresults() loadresults()
console.log("Update!!!!! :=)"); //console.log("Update!!!!! :=)");
window.lastUpdate = parseInt(statusArray[1], 10); window.lastUpdate = parseInt(statusArray[1], 10);
var jdata = JSON.parse(statusArray[3]); var jdata = JSON.parse(statusArray[3]);
console.log(jdata);
} else { } else {
console.log("No update"); //console.log("No update");
} }
}; };
@ -251,7 +258,6 @@ if (typeof(EventSource) !== "undefined") {
const checkConnection = async function() { const checkConnection = async function() {
cTime = Math.round(Date.now() / 1000); cTime = Math.round(Date.now() / 1000);
if (cTime > lastMessage + 30) { if (cTime > lastMessage + 30) {
//mistet tilkobling //mistet tilkobling
var element = document.getElementById("ConnectionAlert"); var element = document.getElementById("ConnectionAlert");
@ -275,4 +281,4 @@ function showHideSplits(className) {
} }
} }
var interval = setInterval(checkConnection, 10000); var interval = setInterval(checkConnection, 10000);