mirror of
https://github.com/bcomsugi/VSS_Rally_V3.git
synced 2026-01-09 09:52:38 +07:00
177 lines
8.8 KiB
HTML
177 lines
8.8 KiB
HTML
|
|
<!DOCTYPE HTML><html><head>
|
|
<title>Rally TerraTrip v1 Constanta</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
|
<script type = "text/javascript">
|
|
const ws = new WebSocket("ws://%serveripaddress%/wscal");
|
|
ws.onopen = function() {console.log("WebSocket Connected");};
|
|
ws.onclose = function() {alert("WS Connection Closed");};
|
|
ws.onmessage = function(event) {
|
|
console.log(event.data);
|
|
var data = JSON.parse(event.data);
|
|
const elemen = document.getElementsByClassName(data.trip)[0];
|
|
console.log(elemen);
|
|
element.getElementsByClassName("speed")[0].value = data.speed;
|
|
element.getElementsByClassName("dist")[0].value = data.dist;
|
|
element.getElementsByClassName("time")[0].value = data.time;
|
|
element.getElementsByClassName("stime")[0].value = data.stime;
|
|
document.getElementById("currenttime").innerHTML = data.curTime;
|
|
document.getElementById("currenttrack").innerHTML = data.curTrip;
|
|
document.getElementById("counter").innerHTML = data.counter;
|
|
document.getElementById("speed").innerHTML = data.curTripSpeed;
|
|
};
|
|
</script>
|
|
<script>
|
|
function onlyNumberKey(evt,e) {
|
|
// Only ASCII character in that range allowed
|
|
var ASCIICode = (evt.which) ? evt.which : evt.keyCode
|
|
if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57) && ASCIICode !=46)
|
|
return false;
|
|
return true;
|
|
}
|
|
function chback(e){ //change background to yellow
|
|
e.style.backgroundColor = "yellow";
|
|
}
|
|
</script>
|
|
</head><body>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
|
<div class=" bg-success text-white">
|
|
<div class="row">
|
|
<div class="col-2 mt-1"><h2><span id="counter">12345</span></h2></div>
|
|
<div class="col-3 mt-1"><h2>TRACK <span id="currenttrack">A</span></h2></div>
|
|
<div class="col mt-1"><h2 class="text-center">Time: <span id="currenttime">00:00:00</span></h2></div>
|
|
<div class="col-3 mt-1 text-end"><h2><span id="speed">123.4</span>Km/h</h2></div>
|
|
<hr>
|
|
</div>
|
|
<!--//Constanta Menu-->
|
|
|
|
|
|
<div class="row g-2 align-items-center">
|
|
<div class="col-1"></div>
|
|
<div class="col-1 text-center "><label class="col-form-label fs-6 fw-bold">Speed</label></div>
|
|
<div class="col-1"></div>
|
|
<div class="col-1 text-center "><label class="col-form-label fs-6 fw-bold">Distance(Km)</label></div>
|
|
<div class="col-1"></div>
|
|
<div class="col-1 text-center "><label class="col-form-label fs-6 fw-bold">Time(min)</label></div>
|
|
<div class="col-1"></div>
|
|
<div class="col-2 text-center "><label class="col-form-label fs-6 fw-bold">Start Time</label></div>
|
|
</div>
|
|
|
|
|
|
<div class="row g-2 align-items-center" id="tripA">
|
|
<div class="col-1 "><label for="speedA" class="col-form-label fs-4 ms-2 trip">A-></label></div>
|
|
<div class="col-2 ">
|
|
<input type="text" step="any" maxlength="6" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
|
|
id="speedA" name="speedA" class="form-control speed" onkeypress="return onlyNumberKey(event,this)" onchange="chback(this)"></div>
|
|
<div class="col-2">
|
|
<input type="text" step="any" maxlength="6" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
|
|
id="distA" name="distA" class="form-control dist" onkeypress="return onlyNumberKey(event,this)" onchange="chback(this)"></div>
|
|
<div class="col-2">
|
|
<input type="text" maxlength="5" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
|
|
id="timeA" name="timeA" class="form-control time" onkeypress="return onlyNumberKey(event,this)" onchange="chback(this)"></div>
|
|
<div class="col-2">
|
|
<input type="time" id="stimeA" name="stimeA" class="form-control stime" onchange="chback(this)" required></div>
|
|
<div class="col-auto">
|
|
<button class="btn btn-primary fw-bold" id="myBtn" onclick="setConstanta(this)">SET A</button></div>
|
|
</div>
|
|
<div class="row g-2 align-items-center" id="tripB">
|
|
<div class="col-1 "><label for="speedB" class="col-form-label fs-4 trip">B-></label></div>
|
|
<div class="col-2 ">
|
|
<input type="text" step="any" maxlength="6" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
|
|
id="SpeedB" name="speedB" class="form-control speed" onkeypress="return onlyNumberKey(event,this)" onchange="chback(this)"></div>
|
|
<div class="col-2">
|
|
<input type="text" step="any" maxlength="6" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
|
|
id="distB" name="distB" class="form-control dist" onkeypress="return onlyNumberKey(event,this)" onchange="chback(this)"></div>
|
|
<div class="col-2">
|
|
<input type="text" maxlength="5" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
|
|
id="timeB" name="timeB" class="form-control time" onkeypress="return onlyNumberKey(event,this)" onchange="chback(this)"></div>
|
|
<div class="col-2">
|
|
<input type="time" id="stimeB" name="stimeB" class="form-control stime" onchange="chback(this)"></div>
|
|
<div class="col-auto">
|
|
<button class="btn btn-primary fw-bold" id="myBtn" onclick="setConstanta(this)">SET B</button></div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<button ondblclick="location.href='/menu';" class="btn btn-primary fw-bold btn-sm mt-2 mb-2 ms-3">Back to Menu</button>
|
|
</div>
|
|
|
|
<script>
|
|
function setConstanta(e){
|
|
e = e || window.event;
|
|
var targ1 = e.target || e.srcElement || e;
|
|
if (targ1.nodeType == 3) targ1 = targ1.parentNode; // defeat Safari bug
|
|
const targ = targ1.closest(".row");
|
|
const trip = targ.getElementsByClassName("trip")[0].textContent.split("-")[0];
|
|
const speed = targ.getElementsByClassName("speed")[0].value;
|
|
if (speed===""){
|
|
alert ("Trip "+trip+"-> [Speed] is required");
|
|
return;
|
|
}
|
|
const stime = targ.getElementsByClassName("stime")[0].value;
|
|
if (stime===""){
|
|
alert ("Trip "+trip+"-> [Start Time] is required");
|
|
return;
|
|
}
|
|
// targ.getElementsByClassName("speed")[0].value = "345" //trial change backColor
|
|
// targ.getElementsByClassName("speed")[0].style.backgroundColor = "white"
|
|
var dist = targ.getElementsByClassName("dist")[0].value;
|
|
const time = targ.getElementsByClassName("time")[0].value;
|
|
|
|
var full_data='{"trip":"'+trip+'", "speed":"'+speed+'", "dist":"'+dist+'", "time":"'+time+'", "stime":"'+stime+'"}';
|
|
console.log(full_data);
|
|
sendjson(full_data);
|
|
};
|
|
|
|
function compare(name){
|
|
let name1=name || "";
|
|
console.log(name, name1)
|
|
return name1;
|
|
};
|
|
|
|
function sendjson(data){
|
|
var xhr = new XMLHttpRequest();
|
|
var url = "/rest/endpoint";
|
|
xhr.open("POST", url, true);
|
|
xhr.setRequestHeader("Content-Type", "application/json");
|
|
xhr.onreadystatechange = function () {
|
|
console.log(xhr.responseText);
|
|
if (xhr.readyState === 4 && xhr.status === 200) {
|
|
var json = JSON.parse(xhr.responseText);
|
|
console.log(json.trip + ", " + json.speed + ", " + json.dist + ", " + json.time + ", " + json.stime);
|
|
if (json.ok) {
|
|
var tripID = document.getElementById("trip"+json.trip);
|
|
const speed = tripID.getElementsByClassName("speed"+json.trip);
|
|
const dist = tripID.getElementsByClassName("dist"+json.trip);
|
|
const time = tripID.getElementsByClassName("time"+json.trip);
|
|
const stime = tripID.getElementsByClassName("stime"+json.trip);
|
|
speed.value = json.speed;
|
|
dist.value = json.dist;
|
|
time.value = json.time;
|
|
stime.value = json.stime;
|
|
speed.style.backgroundColor = "green"
|
|
dist.style.backgroundColor = "green"
|
|
time.style.backgroundColor = "green"
|
|
stime.style.backgroundColor = "green"
|
|
console.log("result:"+json.trip + ", " + speed.value + ", " + dist.value + ", " + time.value + ", " + stime.value);
|
|
}
|
|
|
|
console.log(json);
|
|
}
|
|
};
|
|
console.log(data);
|
|
var datajson = JSON.stringify(data);
|
|
console.log(datajson);
|
|
xhr.send(data);
|
|
}
|
|
</script>
|
|
</body></html>
|
|
|
|
|