mirror of
https://github.com/bcomsugi/VSS_Rally_V3.git
synced 2026-01-09 09:52:38 +07:00
227 lines
9.6 KiB
HTML
227 lines
9.6 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">
|
|
-->
|
|
<link href="bootstrap.css" rel="stylesheet">
|
|
<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;
|
|
}
|
|
function chback(e){ //change background to yellow
|
|
var val = e.value;
|
|
var okColor = "yellow"
|
|
var Warning = "red"
|
|
console.log(val);
|
|
console.log(e);
|
|
console.log(e.classList);
|
|
if(e.classList.contains("speed")) {
|
|
if(val<100) e.style.backgroundColor = okColor;
|
|
else e.style.backgroundColor = Warning;
|
|
} else if(e.classList.contains("time")) {
|
|
if(val<1000) e.style.backgroundColor = okColor;
|
|
else e.style.backgroundColor = Warning;
|
|
} else if(e.classList.contains("dist")) {
|
|
if(val<1000) e.style.backgroundColor = okColor;
|
|
else e.style.backgroundColor = Warning;
|
|
} else e.style.backgroundColor = okColor;
|
|
// if(val<100) e.style.backgroundColor = "yellow";
|
|
// console.log(e);
|
|
// if(e.classList.contains("speed")) e.style.backgroundColor = "red";
|
|
// e.style.backgroundColor = "yellow";
|
|
}
|
|
</script>
|
|
</head><body onload="loaded();">
|
|
<!--
|
|
<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>
|
|
-->
|
|
<script src="bootstrap.bundle.min.js"></script>
|
|
<div class="bg-info 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">Dist(Km)</label></div>
|
|
<div class="col-1 text-end">= </div>
|
|
<div class="col-1 text-center "><label class="col-form-label fs-6 fw-bold">Speed</label></div>
|
|
<div class="col-1 text-center">X</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>
|
|
)rawliteral";
|
|
|
|
const char HTML_CONSTROW[] PROGMEM = R"rawliteral(
|
|
<div class="row g-2 align-items-center" id="trip%A%">
|
|
<div class="col-1 "><label for="%dist%" class="col-form-label fs-4 ms-1 trip">%A%></label></div>
|
|
<div class="col-2">
|
|
<input type="number" step="any" maxlength="6" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
|
|
id="%dist%" name="%dist%" class="form-control dist" onkeypress="return onlyNumberKey(event,this)" onchange="chback(this)"></div>
|
|
<div class="col-2 ">
|
|
<input type="number" step="any" maxlength="6" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
|
|
id="%speed%" name="%speed%" class="form-control speed" onkeypress="return onlyNumberKey(event,this)" onchange="chback(this)"></div>
|
|
<div class="col-2">
|
|
<input type="number" maxlength="5" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
|
|
id="%time%" name="%time%" class="form-control time" onkeypress="return onlyNumberKey(event,this)" onchange="chback(this)"></div>
|
|
<div class="col-2">
|
|
<input type="time" id="%stime%" name="%stime%" class="form-control stime" onchange="chback(this)"></div>
|
|
<div class="col-2">
|
|
<button class="btn btn-primary fw-bold" id="myBtn" onclick="setConstanta(this)">SET %A%</button></div>
|
|
</div>
|
|
)rawliteral";
|
|
|
|
const char HTML_CONSTEND[] PROGMEM = R"rawliteral(
|
|
<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>
|
|
// document.addEventListener("DOMContentLoaded", function() {
|
|
function loaded(){
|
|
var xhr = new XMLHttpRequest();
|
|
var url = "/rest/loadconst";
|
|
console.log("before open");
|
|
// for (var i=65; i<81; i++){
|
|
xhr.open("POST", url, true);
|
|
console.log("before setrequest");
|
|
xhr.setRequestHeader("Content-Type", "application/json");
|
|
xhr.onreadystatechange = function () {
|
|
console.log(xhr.responseText);
|
|
if (xhr.readyState === 4 && xhr.status === 200) {
|
|
var jsonAllTrip = JSON.parse(xhr.responseText);
|
|
const jsonlen = Object.keys(jsonAllTrip.alltrip).length;
|
|
console.log(jsonAllTrip.alltrip[0]);
|
|
console.log("jsondlen="+jsonlen);
|
|
var jsontemp;
|
|
for (var i=0; i<jsonlen; i++){
|
|
jsontemp = jsonAllTrip.alltrip[i];
|
|
console.log(jsontemp);
|
|
var json = JSON.parse(JSON.stringify(jsontemp));
|
|
console.log(json);
|
|
|
|
// if (json.ok) {
|
|
parsingjson(json);
|
|
}
|
|
//console.log(json.trip + ", " + json.speed + ", " + json.dist + ", " + json.time + ", " + json.stime);
|
|
console.log(json);
|
|
}
|
|
};
|
|
let data = '{"req":"B"}'
|
|
console.log(data);
|
|
var datajson = JSON.stringify(data);
|
|
console.log(datajson);
|
|
|
|
// console.log(String.fromCharCode(i));
|
|
// data = '{"req":"'+String.fromCharCode(i)+'"}'
|
|
xhr.send(data);
|
|
// }
|
|
|
|
};
|
|
|
|
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[0];
|
|
const speed = targ.getElementsByClassName("speed")[0].value;
|
|
const dist = targ.getElementsByClassName("dist")[0].value;
|
|
const time = targ.getElementsByClassName("time")[0].value;
|
|
if (!(dist<1000)){
|
|
alert ("Trip "+trip+"-> [Dist] cannot exceed 1000 Km");
|
|
return;
|
|
}
|
|
if (speed===""){
|
|
alert ("Trip "+trip+"-> [Speed] is required");
|
|
return;
|
|
}
|
|
if (!(speed<100)){
|
|
alert ("Trip "+trip+"-> [Speed] cannot exceed 100 Km/h");
|
|
return;
|
|
}
|
|
if (!(time<1000)){
|
|
alert ("Trip "+trip+"-> [Time] cannot exceed 1000 minutes");
|
|
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 full_data='{"trip":"'+trip+'", "speed":"'+speed+'", "dist":"'+dist+'", "time":"'+time+'", "stime":"'+stime+'"}';
|
|
console.log(full_data);
|
|
sendjson(full_data);
|
|
};
|
|
|
|
function parsingjson(json){
|
|
console.log(json);
|
|
var tripID = document.getElementById("trip"+json.trip);
|
|
console.log(tripID);
|
|
const speed = tripID.getElementsByClassName("speed")[0];
|
|
const dist = tripID.getElementsByClassName("dist")[0];
|
|
const time = tripID.getElementsByClassName("time")[0];
|
|
const stime = tripID.getElementsByClassName("stime")[0];
|
|
setValBackColor(speed, json.speed);
|
|
setValBackColor(dist, json.dist);
|
|
setValBackColor(time, json.time);
|
|
setValBackColor(stime, json.stime);
|
|
// speed.value = json.speed;
|
|
// dist.value = json.dist;
|
|
// time.value = json.time;
|
|
// stime.value = json.stime;
|
|
// speed.style.backgroundColor = "#94C4E2"// #6495ED
|
|
// dist.style.backgroundColor = "#94C4E2"
|
|
// time.style.backgroundColor = "#94C4E2"
|
|
// stime.style.backgroundColor = "#94C4E2"
|
|
console.log("result ok:"+json.trip + ", " + speed.value + ", " + dist.value + ", " + time.value + ", " + stime.value);
|
|
};
|
|
|
|
function setValBackColor(elem, jsonval){
|
|
if (jsonval) {
|
|
elem.value = jsonval;
|
|
elem.style.backgroundColor = "#ABEBC6";//"#E5E7E9";//"#C0C0C0";//"#94C4E2";
|
|
} else {
|
|
elem.style.backgroundColor = "white";
|
|
}
|
|
};
|
|
|
|
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) {
|
|
parsingjson(json);
|
|
}
|
|
//console.log(json.trip + ", " + json.speed + ", " + json.dist + ", " + json.time + ", " + json.stime);
|
|
console.log(json);
|
|
}
|
|
};
|
|
console.log(data);
|
|
var datajson = JSON.stringify(data);
|
|
console.log(datajson);
|
|
xhr.send(data);
|
|
}
|
|
</script>
|
|
</body></html> |