projects / ets2_tele.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: cb0431d)
* Changed game paused indication in dash.html to displaying a dedicated element,...
authorUrban Wallasch <urban.wallasch@freenet.de>
Sat, 27 Jul 2019 12:57:42 +0000 (14:57 +0200)
committerUrban Wallasch <urban.wallasch@freenet.de>
Sat, 27 Jul 2019 12:57:42 +0000 (14:57 +0200)
* Implemented basic HTTP and network error handling and display in dash.html.

dash.html patch | blob | history

diff --git a/dash.html b/dash.html
index d717aa76041d0d08e49be938e99bf02885f2d381..b15abdd035c085ff6a4193c2c0f79a61a971b56e 100644 (file)
--- a/dash.html
+++ b/dash.html
@@ -51,9 +51,28 @@ x-boxright { float:right; }
 .warn1 { color:#fd0; }
 .warn2 { color:#f20; }
 .setval { color:#0af; }
-.grey { color: #444 !important; }
 .hilite { background-color: #ff0; }
 
+
+x-bar {
+  display: block;
+  clear: both;
+  width: 100%;
+  padding: 0.2em;
+  margin: 0.1em;
+  border: none;
+  font-size: 150%;
+  visibility: hidden;
+}
+.pause {
+  background-color:#fd0;
+  color : #000;
+}
+.error {
+  background-color:#a00;
+  color : #fff;
+}
+
 </style>
 </head>
 <body>
@@ -64,7 +83,6 @@ x-boxright { float:right; }
   <x-boxright class="clear"><span class="big" id="speed">--</span><span class="tiny"> km/h</span></x-boxright>
   <x-boxright class="clear"><span class="medium setval" id="cctrl">-</span><span class="tiny"> km/h</span></x-boxright>
   <x-boxleft class="clear"><span class="small setval" id="gear">x</span><span class="tiny">&nbsp;</span></x-boxleft>
-  <!--<x-boxleft><span class="small" id="clutch">x</span><span class="tiny">&nbsp;</span></x-boxleft>-->
   <x-boxright><span class="small" id="rpm">0</span><span class="tiny"> rpm</span></x-boxright>
   <x-boxright class="clear"><span class="small" id="odometer">-</span><span class="tiny"> km</span></x-boxright>
 </x-boxleft>
@@ -78,8 +96,7 @@ x-boxright { float:right; }
 <x-boxleft id="odo" class="cont">
   <x-boxright class="clear"><span class="small" id="nav_dist">-</span><span class="tiny"> km</span></x-boxright>
   <x-boxright class="clear"><span class="small" id="nav_eta">-</span><span class="tiny"> eta</span></x-boxright>
-  <x-boxleft class="clear">
-    <!--<span class="small" id="nav_slimit">-</span><span class="tiny"> km/h</span>-->
+  <x-boxright class="clear">
     <svg width="50" height="50">
       <circle cx="25" cy="25" r="22" stroke="red" stroke-width="6" fill="white" id="nav_slimitsign"/>
       <text fill="#000" font-size="24" font-family="sans-serif" font-weight="normal" x="10" y="34" id="nav_slimit">---</text>
@@ -87,6 +104,9 @@ x-boxright { float:right; }
   </x-boxright>
 </x-boxleft>
 
+<x-bar class="pause" id="pause"> GAME PAUSED </x-bar>
+<x-bar class="error" id="errbar"></x-bar>
+
 </x-page>
 
 <script>
@@ -114,10 +134,13 @@ function s2hm(s) {
 
 function loadDoc() {
   xhttp.onreadystatechange = function() {
+    var errbar = document.getElementById("errbar");
     if (this.readyState == 4 && this.status == 200) {
       var e;
       var tele = JSON.parse(this.responseText);
 
+      errbar.style.visibility = "hidden";
+
       e = document.getElementById("speed");
       e.innerHTML = Math.round(tele.speed * 3.6);
       if ( tele.nav_slimit > 0 && tele.speed > tele.nav_slimit * 1.075 ) {
@@ -162,11 +185,14 @@ function loadDoc() {
       else
         document.getElementById("nav_slimitsign").style.visibility = "hidden";
 
-      e = document.getElementById("page");
-      if ( tele.paused )
-        e.classList.add("grey");
+      document.getElementById("pause").style.visibility = tele.paused ? "visible" : "hidden";
+    }
+    else if (this.readyState == 4) {
+      if ( this.status )
+        errbar.innerHTML = "Status: " + this.status + "<br>" + this.responseText;
       else
-        e.classList.remove("grey");
+        errbar.innerHTML = "No response from server.";
+      errbar.style.visibility = "visible";
     }
   };
   xhttp.open("GET", "/json", true);
ETS2 Telemetry Plugin + Server