add edit odo

This commit is contained in:
Bluedragon 2022-04-27 05:45:38 +07:00
parent c769bd3184
commit fffd7482d8
5 changed files with 261 additions and 73 deletions

191
backup/constanta.html Normal file
View File

@ -0,0 +1,191 @@
<!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>
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 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>
<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;
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"
const 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 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 = "#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>

View File

@ -23,7 +23,7 @@
ping = -1;
};
ws.onmessage = function(event) {
// console.log(event.data);
console.log(event.data);
let data = JSON.parse(event.data);
// if (data.hasOwnProperty("ping")) {
// console.log("with ping key");
@ -128,8 +128,7 @@
</div>
<!--//ODO1-->
<div class="row">
<div class="col-2"><h4>OD 1-></h4></div>
<div class="col-3 text-end"><h3><span id="odo1">123.4567</span> km</h3></div>
<div class="col-5 "><h3>OD 1>> <span id="odo1">123.456</span> km</h3></div>
<div class="col-3"><h3><span id="dir1">DIRECT</span></h3></div>
<div class="col-1"><h3><span id="tdiff1">TDiff</span>:</h3></div>
<div class="col-3 text-end"><h3><span id="time1">00:00:00</span></h3></div>
@ -156,7 +155,7 @@
-->
<!--//ODO2-->
<div class="row">
<div class="col-5 "><h3>OD 2-><span id="odo2">123.456</span> km</h3></div>
<div class="col-5 "><h3>OD 2>> <span id="odo2">123.456</span> km</h3></div>
<div class="col-3 "><h3><span id="dir2">DIRECT</span></h3></div>
<div class="col-1"><h3><span id="tdiff2">TDiff</span>:</h3></div>
<div class="col-3 text-end"><h3><span id="time2">00:00:00</span></h3></div>
@ -189,7 +188,7 @@
<div class="modal-title" id="editodo">
<h5 class="modal-title" id="exampleModalLabel">Edit Odo:</h5>
<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)">
id="inputeditodo" name="%dist%" class="form-control dist" onkeypress="return onlyNumberKey(event,this)">
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
@ -207,6 +206,7 @@
<script>
function editOdo(odoNo){
document.getElementById("editodo").hidden=false;
document.getElementById("inputeditodo").value="";
document.getElementById("btnyesreset").setAttribute("onClick", "editODO("+odoNo+")");
document.getElementById("p1").innerHTML = "1";
elements = document.getElementsByClassName("odonum");
@ -220,7 +220,13 @@ function editOdo(odoNo){
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();
}
function editODO(odoNo){console.log(odoNo);}
function editODO(odoNo){
console.log(odoNo);
console.log(document.getElementById("inputeditodo").value);
var newOdo = document.getElementById("inputeditodo").value;
ws.send('{"editodo'+odoNo+'":'+newOdo+'}');
console.log('{"editodo'+odoNo+'":'+newOdo+'}');
}
function resetOdo(odoNo){
document.getElementById("editodo").hidden=true;
@ -237,21 +243,7 @@ function resetOdo(odoNo){
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();
}
// function resetOdo2(){
// document.getElementById("editodo").hidden=true;
// document.getElementById("btnyesreset").setAttribute( "onClick", "resetODO2()" );
// document.getElementById("p1").innerHTML = "2";
// elements = document.getElementsByClassName("odonum");
// for (var i = 0; i < elements.length; i++) {
// elements[i].innerHTML = "2";
// }
// elements = document.getElementsByClassName("func");
// for (var i = 0; i < elements.length; i++) {
// elements[i].innerHTML = "RESET";
// }
// var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
// myModal.show();
// }
function copyToOdo(odoNo,fromOdo){
document.getElementById("editodo").hidden=true;
document.getElementById("btnyesreset").setAttribute( "onClick", "copytoODO("+odoNo+")" );
@ -267,21 +259,7 @@ function copyToOdo(odoNo,fromOdo){
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();
}
// function copyToOdo1(){
// document.getElementById("editodo").hidden=true;
// document.getElementById("btnyesreset").setAttribute( "onClick", "copytoODO1()" );
// document.getElementById("p1").innerHTML = "1";
// elements = document.getElementsByClassName("odonum");
// for (var i = 0; i < elements.length; i++) {
// elements[i].innerHTML = "1";
// }
// elements = document.getElementsByClassName("func");
// for (var i = 0; i < elements.length; i++) {
// elements[i].innerHTML = "Copy ODO 2 to";
// }
// var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
// myModal.show();
// }
</script>
<script>
function resetODO(odoNo){
@ -289,25 +267,10 @@ function resetODO(odoNo){
console.log("resetodo->"+odoNo);
}
function copytoODO(odoNo){
// ws.send('{"copytoodo":'+odoNo+'}');
ws.send('{"copytoodo":'+odoNo+'}');
console.log("copytoodo->"+odoNo);
}
// function resetODO1(){
// ws.send('{"resetodo":1}');
// console.log("resetodo->1");
// }
// function resetODO2(){
// ws.send('{"resetodo":2}');
// console.log("resetodo->2");
// }
// function copytoODO2(){
// ws.send('{"copytoodo":2}');
// console.log("copytoodo->2");
// }
// function copytoODO1(){
// ws.send('{"copytoodo":1}');
// console.log("copytoodo->1");
// }
function dirFW1(){
ws.send('{"dir1":0}');
console.log("dir1->0");

View File

@ -1,5 +1,5 @@
const char HTML_CONSTHEADER[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html><head>
<DOCTYPE HTML><html><head>
<title>Rally TerraTrip v1 Constanta</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -32,10 +32,10 @@ const char HTML_CONSTHEADER[] PROGMEM = R"rawliteral(
<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"></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">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>
@ -44,13 +44,13 @@ const char HTML_CONSTHEADER[] PROGMEM = R"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="%speed%" 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="%speed%" name="%speed%" class="form-control speed" onkeypress="return onlyNumberKey(event,this)" onchange="chback(this)"></div>
<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>

View File

@ -129,8 +129,7 @@ const char HTML_startrally1[] PROGMEM = R"rawliteral(
</div>
<!--//ODO1-->
<div class="row">
<div class="col-2"><h4>OD 1-></h4></div>
<div class="col-3 text-end"><h3><span id="odo1">123.4567</span> km</h3></div>
<div class="col-5 "><h3>OD 1>> <span id="odo1">123.456</span> km</h3></div>
<div class="col-3"><h3><span id="dir1">DIRECT</span></h3></div>
<div class="col-1"><h3><span id="tdiff1">TDiff</span>:</h3></div>
<div class="col-3 text-end"><h3><span id="time1">00:00:00</span></h3></div>
@ -157,7 +156,7 @@ const char HTML_startrally1[] PROGMEM = R"rawliteral(
-->
<!--//ODO2-->
<div class="row">
<div class="col-5 "><h3>OD 2-><span id="odo2">123.456</span> km</h3></div>
<div class="col-5 "><h3>OD 2>> <span id="odo2">123.456</span> km</h3></div>
<div class="col-3 "><h3><span id="dir2">DIRECT</span></h3></div>
<div class="col-1"><h3><span id="tdiff2">TDiff</span>:</h3></div>
<div class="col-3 text-end"><h3><span id="time2">00:00:00</span></h3></div>
@ -190,7 +189,7 @@ const char HTML_startrally1[] PROGMEM = R"rawliteral(
<div class="modal-title" id="editodo">
<h5 class="modal-title" id="exampleModalLabel">Edit Odo:</h5>
<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)">
id="inputeditodo" name="%dist%" class="form-control dist" onkeypress="return onlyNumberKey(event,this)">
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
@ -208,6 +207,7 @@ const char HTML_startrally1[] PROGMEM = R"rawliteral(
<script>
function editOdo(odoNo){
document.getElementById("editodo").hidden=false;
document.getElementById("inputeditodo").value="";
document.getElementById("btnyesreset").setAttribute("onClick", "editODO("+odoNo+")");
document.getElementById("p1").innerHTML = "1";
elements = document.getElementsByClassName("odonum");
@ -221,7 +221,13 @@ function editOdo(odoNo){
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();
}
function editODO(odoNo){console.log(odoNo);}
function editODO(odoNo){
console.log(odoNo);
console.log(document.getElementById("inputeditodo").value);
var newOdo = document.getElementById("inputeditodo").value;
ws.send('{"editodo'+odoNo+'":'+newOdo+'}');
console.log('{"editodo'+odoNo+'":'+newOdo+'}');
}
function resetOdo(odoNo){
document.getElementById("editodo").hidden=true;

View File

@ -73,6 +73,7 @@ AsyncWebServerRequest *gRequest[REQUESTCOUNT];
JsonVariant gJson[REQUESTCOUNT];
uint8_t gReqCount=0;
bool gGotRequest[REQUESTCOUNT];
boolean grequestIsFull=false;
@ -718,6 +719,10 @@ void onWsEvent(AsyncWebSocket * server, AsyncWebSocketClient * client, AwsEventT
String direction2=doc["dir2"];
String toggle=doc["toggle"];
String ctotrip=doc["ctotrip"];
float editodo1=doc["editodo1"].as<float>();
float editodo2=doc["editodo2"].as<float>();
Serial.println(editodo1);
Serial.println(editodo2);
if (resetodo!="null"){
if (isDecimal(resetodo)){
if(resetodo=="1"){
@ -786,6 +791,20 @@ void onWsEvent(AsyncWebSocket * server, AsyncWebSocketClient * client, AwsEventT
Serial.print(curTrip);Serial.print(";");Serial.print(constanta);Serial.print(";");
Serial.print(starttracthour);Serial.print(";");Serial.print(temptrip);Serial.println(";");
}
if (editodo1!=0){
// if (isFloat(editodo1)){
distance1 = editodo1;
count1 = (unsigned long)(distance1 * Calibration) + 5;
Serial.print("editodo1=");Serial.println(editodo1);
// }
}
if (editodo2!=0){
// if (isFloat(editodo2)){
distance2 = editodo2;
count2 = (unsigned long)(distance2 * Calibration) + 5;
Serial.print("editodo2=");Serial.println(editodo2);
// }
}
}
}
@ -2882,13 +2901,20 @@ Serial.print("try to connect to ssid:");Serial.print(ssid);Serial.print("; with
AsyncCallbackJsonWebHandler* loadconst = new AsyncCallbackJsonWebHandler("/rest/loadconst", [](AsyncWebServerRequest *request, JsonVariant &json) {
Serial.println("loadconst");
// if (gGotRequest[0])
for (uint8_t i=0; i<REQUESTCOUNT;i++){
if(!gGotRequest[i]){
gRequest[i]=request;
gJson[i]=json;
gGotRequest[i]=true;
Serial.print("FILL:");Serial.println(i);
break;
if (grequestIsFull) {
Serial.println("XXXXXXXXXXXXXXXXXXXX FULLLL");
request->send(200, "text/plain", "{\"response\":\"request is full\"}");
Serial.println("XXXXXXXXXXXXXXXXXXXX SENT");
} else {
for (uint8_t i=0; i<REQUESTCOUNT;i++){
if(!gGotRequest[i]){
grequestIsFull=true;
gRequest[i]=request;
gJson[i]=json;
gGotRequest[i]=true;
Serial.print("FILL:");Serial.println(i);
break;
}
}
}
@ -3973,6 +3999,7 @@ void loop() //loop from VSS RALLY V2
wscal.textAll(getCalibJson);
}
if(!isloadingConst){
for (int i=(REQUESTCOUNT-1); i>=0; i--){
// for (int i=0; i<REQUESTCOUNT; i++){
@ -3988,6 +4015,7 @@ void loop() //loop from VSS RALLY V2
Serial.print("REMOVE:");Serial.println(i);
}
}
grequestIsFull=false;
}
VSSCount=millis(); //VSSCount Simulator
#ifdef DEBUG