Added splittimes and made general improvements.
This commit is contained in:
Trygve
parent
d010983218
commit
238fb7123e
151
common/main.css
151
common/main.css
@ -21,14 +21,15 @@ body{
|
||||
--table-border: #e0e0e0;
|
||||
--table-highlight: #c5cae9;;
|
||||
--tr-nth-color: #f2f2f2;
|
||||
--tr-color: none;
|
||||
--tr-color: #ffffff;
|
||||
|
||||
--background-color: #ffffff;
|
||||
--text-color: #000000;
|
||||
font-family: "Noto Sans", "Liberation Sans","Trebuchet MS", Arial, Helvetica, sans-serif;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.1rem;
|
||||
min-height: 100vw;
|
||||
}
|
||||
|
||||
header {
|
||||
@ -40,12 +41,12 @@ header {
|
||||
color: white;
|
||||
grid-gap: 10px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.15) !important;
|
||||
}
|
||||
|
||||
|
||||
.header-brand{
|
||||
font-weight: 700;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
header div{
|
||||
display: inline-block;
|
||||
@ -63,8 +64,6 @@ table {
|
||||
font-weight: 410;
|
||||
margin: 0.8rem;
|
||||
border-radius: 0.4rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.15) !important;
|
||||
}
|
||||
|
||||
td, th {
|
||||
@ -80,11 +79,16 @@ tr:nth-child(even){background-color: var(--tr-nth-color);}
|
||||
|
||||
tr:hover {
|
||||
background-color: var(--table-highlight);
|
||||
box-shadow: 0 .8rem 1.8rem rgba(0,0,0,.15) !important;
|
||||
}
|
||||
tr:visited {
|
||||
background-color:var(--table-highlight);
|
||||
}
|
||||
td:first-child{
|
||||
padding-left: 2rem;
|
||||
}
|
||||
td:last-child{
|
||||
padding-right: 2rem;
|
||||
}
|
||||
th {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
@ -96,45 +100,70 @@ h4 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 6px;
|
||||
margin-top: 20px;
|
||||
margin-left: 0.9rem;
|
||||
margin-left: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.shadow-strong {
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
|
||||
0 2px 2px rgba(0,0,0,0.11),
|
||||
0 4px 4px rgba(0,0,0,0.11),
|
||||
0 8px 8px rgba(0,0,0,0.11),
|
||||
0 16px 16px rgba(0,0,0,0.11),
|
||||
0 32px 32px rgba(0,0,0,0.11);
|
||||
}
|
||||
|
||||
.shadow-0{box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.2),0px 0px 0px 0px rgba(0, 0, 0, 0.14),0px 0px 0px 0px rgba(0,0,0,.12)}.shadow-1{box-shadow:0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0,0,0,.12)}.shadow-2{box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 1px 5px 0px rgba(0,0,0,.12)}.shadow-3{box-shadow:0px 3px 3px -2px rgba(0, 0, 0, 0.2),0px 3px 4px 0px rgba(0, 0, 0, 0.14),0px 1px 8px 0px rgba(0,0,0,.12)}.shadow-4{box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0,0,0,.12)}.shadow-5{box-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0,0,0,.12)}.shadow-6{box-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0,0,0,.12)}.shadow-7{box-shadow:0px 4px 5px -2px rgba(0, 0, 0, 0.2),0px 7px 10px 1px rgba(0, 0, 0, 0.14),0px 2px 16px 1px rgba(0,0,0,.12)}.shadow-8{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0,0,0,.12)}.shadow-9{box-shadow:0px 5px 6px -3px rgba(0, 0, 0, 0.2),0px 9px 12px 1px rgba(0, 0, 0, 0.14),0px 3px 16px 2px rgba(0,0,0,.12)}.shadow-10{box-shadow:0px 6px 6px -3px rgba(0, 0, 0, 0.2),0px 10px 14px 1px rgba(0, 0, 0, 0.14),0px 4px 18px 3px rgba(0,0,0,.12)}.shadow-11{box-shadow:0px 6px 7px -4px rgba(0, 0, 0, 0.2),0px 11px 15px 1px rgba(0, 0, 0, 0.14),0px 4px 20px 3px rgba(0,0,0,.12)}.shadow-12{box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),0px 12px 17px 2px rgba(0, 0, 0, 0.14),0px 5px 22px 4px rgba(0,0,0,.12)}.shadow-13{box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),0px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px 4px rgba(0,0,0,.12)}.shadow-14{box-shadow:0px 7px 9px -4px rgba(0, 0, 0, 0.2),0px 14px 21px 2px rgba(0, 0, 0, 0.14),0px 5px 26px 4px rgba(0,0,0,.12)}.shadow-15{box-shadow:0px 8px 9px -5px rgba(0, 0, 0, 0.2),0px 15px 22px 2px rgba(0, 0, 0, 0.14),0px 6px 28px 5px rgba(0,0,0,.12)}.shadow-16{box-shadow:0px 8px 10px -5px rgba(0, 0, 0, 0.2),0px 16px 24px 2px rgba(0, 0, 0, 0.14),0px 6px 30px 5px rgba(0,0,0,.12)}.shadow-17{box-shadow:0px 8px 11px -5px rgba(0, 0, 0, 0.2),0px 17px 26px 2px rgba(0, 0, 0, 0.14),0px 6px 32px 5px rgba(0,0,0,.12)}.shadow-18{box-shadow:0px 9px 11px -5px rgba(0, 0, 0, 0.2),0px 18px 28px 2px rgba(0, 0, 0, 0.14),0px 7px 34px 6px rgba(0,0,0,.12)}.shadow-19{box-shadow:0px 9px 12px -6px rgba(0, 0, 0, 0.2),0px 19px 29px 2px rgba(0, 0, 0, 0.14),0px 7px 36px 6px rgba(0,0,0,.12)}.shadow-20{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)}.shadow-21{box-shadow:0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 21px 33px 3px rgba(0, 0, 0, 0.14),0px 8px 40px 7px rgba(0,0,0,.12)}.shadow-22{box-shadow:0px 10px 14px -6px rgba(0, 0, 0, 0.2),0px 22px 35px 3px rgba(0, 0, 0, 0.14),0px 8px 42px 7px rgba(0,0,0,.12)}.shadow-23{box-shadow:0px 11px 14px -7px rgba(0, 0, 0, 0.2),0px 23px 36px 3px rgba(0, 0, 0, 0.14),0px 9px 44px 8px rgba(0,0,0,.12)}.shadow-24{box-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2),0px 24px 38px 3px rgba(0, 0, 0, 0.14),0px 9px 46px 8px rgba(0,0,0,.12)}
|
||||
|
||||
|
||||
.all-result{
|
||||
display: -ms-flexbox;
|
||||
-ms-flex-direction: column;
|
||||
-ms-flex-wrap: wrap;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
height: 50vw;
|
||||
gap: 1rem;
|
||||
font-size: 1rem;
|
||||
flex-flow: column wrap;
|
||||
align-content: space-between;
|
||||
/* Your container needs a fixed height, and it
|
||||
* needs to be taller than your tallest column. */
|
||||
height: 700rem;
|
||||
}
|
||||
.all-result::before,
|
||||
.all-result::after {
|
||||
content: "";
|
||||
flex-basis: 100%;
|
||||
width: 0;
|
||||
order: 2;
|
||||
}
|
||||
.all-result-div{
|
||||
max-width: 25%;
|
||||
padding: 0 4px;
|
||||
width: 32%;
|
||||
margin-bottom: 2%; /* Optional */
|
||||
}
|
||||
.all-result-div:nth-child(3n+1) { order: 1; }
|
||||
.all-result-div:nth-child(3n+2) { order: 2; }
|
||||
.all-result-div:nth-child(3n) { order: 3; }
|
||||
|
||||
.all-result-div h4{
|
||||
margin-left: auto;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
@media only screen and (max-width: 1200px){
|
||||
@media only screen and (max-width: 1500px){
|
||||
.all-result{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
gap: 1rem;
|
||||
align-content: center;
|
||||
}
|
||||
.all-result-div{
|
||||
max-width: 100%;
|
||||
width: max-content;
|
||||
max-width: max-content;
|
||||
padding: 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
}
|
||||
body{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.all-result-div:nth-child(2n+1) { order: 1; }
|
||||
.all-result-div:nth-child(2n) { order: 2; }
|
||||
}
|
||||
.hiddendiv {
|
||||
display:none;
|
||||
@ -151,7 +180,7 @@ h4 {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
.StatusDiv{
|
||||
.status-div{
|
||||
color: #ffffffa2;
|
||||
}
|
||||
.nav-pills .nav-link{
|
||||
@ -165,18 +194,72 @@ h4 {
|
||||
.result-div{
|
||||
width: max-content;
|
||||
margin: auto;
|
||||
overflow-x:auto;
|
||||
max-width: 100vw;
|
||||
}
|
||||
.table-labels{
|
||||
font-weight: 900;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.splits-labels{
|
||||
font-weight: bolder;
|
||||
}
|
||||
.splits-table{
|
||||
display: none;
|
||||
}
|
||||
.splits-table td:first-child{
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background-color: var(--tr-color);
|
||||
}
|
||||
.splits-table tr:nth-child(even) td:first-child{
|
||||
background-color: var(--tr-nth-color);
|
||||
}
|
||||
.result-header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 25vw;
|
||||
min-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
.fancy-button {
|
||||
background-color: transparent;
|
||||
color: var(--text-accent-color);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border: 4px solid var(--button-color);
|
||||
font-weight: 700;
|
||||
border-radius: 0.25rem;
|
||||
transition: 0.05s;
|
||||
margin: 0.4rem;
|
||||
}
|
||||
.fancy-button:link,
|
||||
.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 {
|
||||
color: white;
|
||||
background-color: var(--button-color);
|
||||
border: 4px solid var(--button-color);
|
||||
font-weight: 700;
|
||||
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
|
||||
}
|
||||
@media only screen and (max-width: 600px) {
|
||||
header {
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0.2rem;
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
.StatusDiv{
|
||||
.status-div{
|
||||
margin-left: auto;
|
||||
}
|
||||
.header-brand {
|
||||
@ -186,20 +269,42 @@ h4 {
|
||||
.ResultTable{
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
border-radius: .4rem;
|
||||
}
|
||||
.result-div{
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.result-div h4{
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
.all-result{
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
align-content: unset;
|
||||
}
|
||||
.all-result-div{
|
||||
width: 100%;
|
||||
width: 100vh;
|
||||
max-width: 100%;
|
||||
padding: 0px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.club-collum{
|
||||
display: none;
|
||||
}
|
||||
td:first-child{
|
||||
padding-left: 0.6rem;
|
||||
}
|
||||
td:last-child{
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
.result-header{
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body.theme-auto {
|
||||
|
||||
244
index.php
244
index.php
@ -12,36 +12,16 @@
|
||||
</head>
|
||||
|
||||
<body class="theme-auto">
|
||||
<header>
|
||||
<header class="shadow-8">
|
||||
<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>
|
||||
<div class="status-div" id="lastUpdate">status</div>
|
||||
<div class="status-div" 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>
|
||||
@ -61,224 +41,8 @@
|
||||
|
||||
<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="liveresults.js"></script>
|
||||
<script src="common/bootstrap/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
278
liveresults.js
Normal file
278
liveresults.js
Normal file
@ -0,0 +1,278 @@
|
||||
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="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 hours = Math.floor(stamp / 3600);
|
||||
let minutes = Math.floor((stamp - hours * 3600) / 60);
|
||||
let seconds = stamp - minutes * 60;
|
||||
let hourString;
|
||||
if(hours!==0){
|
||||
hourString = ("0" + hours).slice(-2) + ':';
|
||||
}
|
||||
else{
|
||||
hourString = '';
|
||||
}
|
||||
|
||||
return hourString +("0" + minutes).slice(-2) + ":" + ("0" + seconds).slice(-2);
|
||||
}
|
||||
|
||||
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 = "";
|
||||
|
||||
console.log(xmlObj);
|
||||
|
||||
//create tables
|
||||
for (let i = 0; i < xmlObj.ClassResult.length; i++) {
|
||||
let resultTable = "";
|
||||
let splitTimes = '<table class="ResultTable splits-table shadow-2" id="'+classesArray[i]+'-splits">' + '<tr class="splits-labels">';
|
||||
let winnerTime;
|
||||
|
||||
|
||||
if(typeof(xmlObj.ClassResult[i].PersonResult[0])!== 'undefined' && typeof(xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime)!== 'undefined'){
|
||||
splitTimes += '<td></td>'
|
||||
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 += '</tr>'
|
||||
|
||||
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 time
|
||||
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 if (persStatus == 'DidNotStart'){
|
||||
resultTable += '<td persTime="'+timeUsedStamp+'" persStatus="'+xmlObj.ClassResult[i].PersonResult[k].Result.Status+'">' + 'Ikke startet' +'</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.Time==0){
|
||||
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>";
|
||||
|
||||
|
||||
|
||||
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>";
|
||||
let controlTime = 0;
|
||||
let controlTimeDelta = 0;
|
||||
for (let t = 0; t < xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime.length; t++) {
|
||||
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>'
|
||||
}
|
||||
}
|
||||
splitTimes += '</tr>';
|
||||
|
||||
}
|
||||
resultTable += "</table></div>"
|
||||
splitTimes += "</table></div>"
|
||||
console.log(splitTimes)
|
||||
|
||||
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;
|
||||
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;
|
||||
splitTimes = '<div class="result-div">'+splitTimes;
|
||||
|
||||
document.getElementById(pClassName).innerHTML = resultTableB+splitTimes;
|
||||
sortTable(pClassName+'-table');
|
||||
|
||||
document.getElementById("alle-cont").innerHTML += '<div class="all-result-div">'+resultTableA.replace(/-table/g, "-all-table")+'</div>';
|
||||
resultTable = "";
|
||||
splitTimes = "";
|
||||
}
|
||||
|
||||
//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");
|
||||
}
|
||||
}
|
||||
function showHideSplits(className) {
|
||||
let x = document.getElementById(className+'-table');
|
||||
let y = document.getElementById(className+'-splits');
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "block";
|
||||
y.style.display = "none";
|
||||
} else {
|
||||
x.style.display = "none";
|
||||
y.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
var interval = setInterval(checkConnection, 10000);
|
||||
Loading…
Reference in New Issue
Block a user