364 lines
11 KiB
Plaintext
364 lines
11 KiB
Plaintext
@MEOS PAGE
|
|
entryform@Pages with columns
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>MeOS $!Direktanmälan$</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
font: 12px Arial;
|
|
}
|
|
|
|
.autocomplete {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
input {
|
|
border: 1px solid transparent;
|
|
background-color: #f1f1f1;
|
|
padding: 8px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
input[type=text] {
|
|
background-color: #f1f1f1;
|
|
width: 100%;
|
|
}
|
|
|
|
select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: none;
|
|
border-radius: 2px;
|
|
background-color: #f1f1f1;
|
|
font-size: 12px;
|
|
}
|
|
|
|
input[type=button] {
|
|
background-color: DodgerBlue;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
width: 50%;
|
|
}
|
|
|
|
button {
|
|
background-color: DodgerBlue;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
width: 50%;
|
|
}
|
|
|
|
|
|
.autocomplete-items {
|
|
position: absolute;
|
|
border: 1px solid #d4d4d4;
|
|
border-bottom: none;
|
|
border-top: none;
|
|
z-index: 99;
|
|
/*position the autocomplete items to be the same width as the container:*/
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.autocomplete-items div {
|
|
padding: 5px;
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #d4d4d4;
|
|
}
|
|
.autocomplete-items div:hover {
|
|
/*when hovering an item:*/
|
|
background-color: #e9e9e9;
|
|
}
|
|
.autocomplete-active {
|
|
/*when navigating through the items using the arrow keys:*/
|
|
background-color: DodgerBlue !important;
|
|
color: #ffffff;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<img src="/meos?image=meos">
|
|
<h1>$!Direktanmälan$</h1>
|
|
|
|
|
|
<div id="info" style="display: block;padding:5px"> </div>
|
|
|
|
|
|
<div id="form">
|
|
<form autocomplete="off">
|
|
<div class="autocomplete" style="width:300px;">
|
|
$Klubb$: <input type="text" name="club" size="20" id="club" placeholder="$Klubb$"><br>
|
|
</div>
|
|
|
|
<div class="autocomplete" style="width:300px;">
|
|
$Namn$: <input type="text" name="name" size="20" id="name" placeholder="$Namn$"><br>
|
|
</div>
|
|
|
|
<div class="autocomplete" style="width:300px;">
|
|
$Bricknummer$: <input type="text" name="card" size="10" id="card" placeholder="$Bricknummer$">
|
|
</div>
|
|
|
|
<div class="autocomplete" style="width:300px;">
|
|
$Klass$: <select id="class"></select>
|
|
</div>
|
|
|
|
<div class="autocomplete" style="width:300px;margin:10px;">
|
|
<input type="button" value="$Anmäl$" onclick="enter()" style="float:right;">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
var xhttp, xmlDoc, i;
|
|
xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
xmlDoc = this.responseXML;
|
|
var x = xmlDoc.getElementsByTagName("Class");
|
|
var newSelect = document.getElementById("class");
|
|
for (i = 0; i < x.length; i++) {
|
|
var opt = document.createElement("option");
|
|
opt.value = x[i].getAttribute("id");
|
|
opt.innerHTML = x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue;
|
|
|
|
// then append it to the select element
|
|
newSelect.appendChild(opt);
|
|
}
|
|
}
|
|
};
|
|
xhttp.open("GET", "/meos?get=entryclass", true);
|
|
xhttp.send();
|
|
</script>
|
|
|
|
<script>
|
|
|
|
function enter() {
|
|
var url = "/meos?entry&class=";
|
|
|
|
var e = document.getElementById("class");
|
|
var classId = e.options[e.selectedIndex].value;
|
|
url += classId;
|
|
url += "&name=" + encodeURI(document.getElementById("name").value);
|
|
url += "&club=" + encodeURI(document.getElementById("club").value);
|
|
url += "&card=" + encodeURI(document.getElementById("card").value);
|
|
|
|
var xhttp = new XMLHttpRequest();
|
|
|
|
xhttp.onreadystatechange = function() {
|
|
var info = document.getElementById("info");
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
var xmlDoc = this.responseXML;
|
|
var x = xmlDoc.getElementsByTagName("Status");
|
|
if (x.length == 0) {
|
|
alert("Server error");
|
|
}
|
|
else if (x[0].childNodes[0].nodeValue == "OK") {
|
|
document.getElementById("form").style.display = 'none';
|
|
x = xmlDoc.getElementsByTagName("Info");
|
|
info.style.color = "black";
|
|
info.style.backgroundColor = "palegreen";
|
|
info.innerHTML = "<strong>$Anmälan mottagen$</strong> " + x[0].childNodes[0].nodeValue +
|
|
"<br><br><div class=\"autocomplete\" style=\"width:300px;margin:10px;\">" +
|
|
"<button onclick=\"newEntry()\" style=\"float:right;\">$Anmäl andra$</button></div><br><br>";
|
|
}
|
|
else {
|
|
x = xmlDoc.getElementsByTagName("Info");
|
|
info.style.color = "darkred";
|
|
info.style.backgroundColor = "mistyrose";
|
|
info.innerHTML = "<p style=\"font-size: 140%\">" + x[0].childNodes[0].nodeValue + "</p>";
|
|
}
|
|
//document.getElementById("info").innerHTML = this.responseText;
|
|
//document.getElementById("form").style.display = 'none'
|
|
}
|
|
};
|
|
xhttp.open("GET", url, true);
|
|
xhttp.send();
|
|
}
|
|
|
|
|
|
function newEntry() {
|
|
var info = document.getElementById("info");
|
|
info.style.color = "black";
|
|
info.style.backgroundColor = "transparent";
|
|
info.innerHTML = "";
|
|
|
|
document.getElementById("name").value = '';
|
|
document.getElementById("card").value = '';
|
|
document.getElementById("form").style.display = 'block';
|
|
}
|
|
|
|
</script>
|
|
|
|
<script>
|
|
function autocomplete(inp, requestFunc, responseFunc) {
|
|
/*the autocomplete function takes two arguments,
|
|
the text field element and an array of possible autocompleted values:*/
|
|
var currentFocus;
|
|
/*execute a function when someone writes in the text field:*/
|
|
inp.addEventListener("input", function(e) {
|
|
var a, i, val = this.value;
|
|
var field = this;
|
|
/*close any already open lists of autocompleted values*/
|
|
closeAllLists();
|
|
if (!val) { return false;}
|
|
currentFocus = -1;
|
|
|
|
var xhttp, xmlDoc, x;
|
|
xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
xmlDoc = this.responseXML;
|
|
|
|
/*create a DIV element that will contain the items (values):*/
|
|
a = document.createElement("div");
|
|
a.setAttribute("id", inp.id + "autocomplete-list");
|
|
a.setAttribute("class", "autocomplete-items");
|
|
/*append the DIV element as a child of the autocomplete container:*/
|
|
field.parentNode.appendChild(a);
|
|
|
|
responseFunc(xmlDoc, a, closeAllLists);
|
|
}
|
|
};
|
|
xhttp.open("GET", encodeURI(requestFunc(val)), true);
|
|
xhttp.send();
|
|
});
|
|
|
|
/*execute a function presses a key on the keyboard:*/
|
|
inp.addEventListener("keydown", function(e) {
|
|
var x = document.getElementById(this.id + "autocomplete-list");
|
|
if (x) x = x.getElementsByTagName("div");
|
|
if (e.keyCode == 40) {
|
|
/*If the arrow DOWN key is pressed,
|
|
increase the currentFocus variable:*/
|
|
currentFocus++;
|
|
/*and and make the current item more visible:*/
|
|
addActive(x);
|
|
} else if (e.keyCode == 38) { //up
|
|
/*If the arrow UP key is pressed,
|
|
decrease the currentFocus variable:*/
|
|
currentFocus--;
|
|
/*and and make the current item more visible:*/
|
|
addActive(x);
|
|
} else if (e.keyCode == 13) {
|
|
/*If the ENTER key is pressed, prevent the form from being submitted,*/
|
|
e.preventDefault();
|
|
if (currentFocus > -1) {
|
|
/*and simulate a click on the "active" item:*/
|
|
if (x) x[currentFocus].click();
|
|
}
|
|
}
|
|
});
|
|
function addActive(x) {
|
|
/*a function to classify an item as "active":*/
|
|
if (!x) return false;
|
|
/*start by removing the "active" class on all items:*/
|
|
removeActive(x);
|
|
if (currentFocus >= x.length) currentFocus = 0;
|
|
if (currentFocus < 0) currentFocus = (x.length - 1);
|
|
/*add class "autocomplete-active":*/
|
|
x[currentFocus].classList.add("autocomplete-active");
|
|
}
|
|
function removeActive(x) {
|
|
/*a function to remove the "active" class from all autocomplete items:*/
|
|
for (var i = 0; i < x.length; i++) {
|
|
x[i].classList.remove("autocomplete-active");
|
|
}
|
|
}
|
|
function closeAllLists(elmnt) {
|
|
/*close all autocomplete lists in the document,
|
|
except the one passed as an argument:*/
|
|
var x = document.getElementsByClassName("autocomplete-items");
|
|
for (var i = 0; i < x.length; i++) {
|
|
if (elmnt != x[i] && elmnt != inp) {
|
|
x[i].parentNode.removeChild(x[i]);
|
|
}
|
|
}
|
|
}
|
|
/*execute a function when someone clicks in the document:*/
|
|
document.addEventListener("click", function (e) {
|
|
closeAllLists(e.target);
|
|
});
|
|
}
|
|
|
|
var clubField = document.getElementById("club");
|
|
var nameField = document.getElementById("name");
|
|
var cardField = document.getElementById("card");
|
|
|
|
autocomplete(clubField, function(val) {
|
|
return "/meos?lookup=dbclub&name=" + val;
|
|
},
|
|
function(xmlDoc, a, closeAllLists) {
|
|
var b, i;
|
|
xres = xmlDoc.getElementsByTagName("Club");
|
|
for (i = 0; i < xres.length; i++) {
|
|
var Name = xres[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue;
|
|
// create a DIV element for each matching element:
|
|
b = document.createElement("div");
|
|
// make the matching letters bold:
|
|
b.innerHTML = Name;
|
|
// insert a input field that will hold the current array item's value:
|
|
b.innerHTML += "<input type='hidden' value='" + Name + "'>";
|
|
// execute a function when someone clicks on the item value (DIV element):
|
|
b.addEventListener("click", function(e) {
|
|
// insert the value for the autocomplete text field:
|
|
clubField.value = this.getElementsByTagName("input")[0].value;
|
|
// close the list of autocompleted values, (or any other open lists of autocompleted values:
|
|
closeAllLists();
|
|
});
|
|
a.appendChild(b);
|
|
}
|
|
});
|
|
|
|
autocomplete(nameField, function(val) {
|
|
return "/meos?lookup=dbcompetitor&name=" + val + "&club=" + clubField.value;
|
|
},
|
|
function(xmlDoc, a, closeAllLists) {
|
|
var b, i;
|
|
xres = xmlDoc.getElementsByTagName("Competitor");
|
|
|
|
for (i = 0; i < xres.length; i++) {
|
|
var Id = xres[i].getAttribute("id");
|
|
var Name = xres[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue;
|
|
var Club = xres[i].getElementsByTagName("Club")[0].childNodes[0].nodeValue;
|
|
var Card = xres[i].getElementsByTagName("Card")[0].childNodes[0].nodeValue;
|
|
|
|
// create a DIV element for each matching element:
|
|
b = document.createElement("div");
|
|
// make the matching letters bold:
|
|
b.innerHTML = Name + ", " + Club;
|
|
// insert a input field that will hold the current array item's value:
|
|
b.innerHTML += "<input type='hidden' value='" + Name + "'><input type='hidden' value='" + Club + "'><input type='hidden' value='" + Card + "'>";
|
|
// execute a function when someone clicks on the item value (DIV element):
|
|
b.addEventListener("click", function(e) {
|
|
var hiddenInput = this.getElementsByTagName("input");
|
|
// insert the value for the autocomplete text field:
|
|
nameField.value = hiddenInput[0].value;
|
|
clubField.value = hiddenInput[1].value;
|
|
|
|
if (cardField.value.length === 0)
|
|
cardField.value = hiddenInput[2].value;
|
|
// close the list of autocompleted values, (or any other open lists of autocompleted values:
|
|
closeAllLists();
|
|
});
|
|
a.appendChild(b);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|