initial passenger interface (TESTING ONLY)

* still has IP address hard coded for testing
* not for use at all, still needs much more development,
  checked in as a checkpoint to save progress

busunit-PIU/html/css/piustyles.css

@@ -328,7 +328,7 @@ body { letter-spacing: 0.25em; }
 
 }
 
-#mainstatus {
+.datetimebar {
   font-family: "Courier New";
   font-weight:bold;
   font-family: monospace;

busunit-PIU/html/index.html

@@ -1,6 +1,6 @@
 <!--
 
-  Copyright (c) 2019 Clementine Computing LLC.
+  Copyright (c) 2021 Clementine Computing LLC.
 
   This file is part of PopuFare.
 
@@ -87,16 +87,16 @@
         </div>
 
         <div class='pure-u-5-6 col'>
-          <div class='bdisp' style='color:#999a99;' >READY</div> <br>
+          <div class='bdisp' style='color:#999a99;' id='ui_message_status' >SEE DRIVER</div> <br>
           <img id='ui_main_vidfeed' style='height:50vh;' src='' ></img> <br>
-          <div class='bdisp'>5 RIDES LEFT</div>
+          <div class='bdisp' id='ui_message_cardinfo'>...</div>
         </div>
 
         <div class='pure-u-1-12 col'></div>
 
       </div>
 
-      <div id="mainstatus">
+      <div id="ui_message_datetime" class='datetimebar'>
         2020-04-11 09:50 AM
       </div>
 

busunit-PIU/html/js/piu_ui.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2019 Clementine Computing LLC.
+ * Copyright (c) 2021 Clementine Computing LLC.
  *
  * This file is part of PopuFare.
  *
@@ -18,12 +18,24 @@
  *
  */
 
-var _ADDRESS = "localhost";
+//var _ADDRESS = "localhost";
+var _ADDRESS = "192.168.0.26";
 var _URL = "http://" + _ADDRESS;
 var _PORT = 60535;
+var _WS_PORT = 8001;
 var _VID_FEED_PORT = 8080;
 
 var _fqADDRESS = _ADDRESS + ":" + _PORT;
+//var _wsADDRESS = _ADDRESS + ":" + _WS_PORT;
+
+// localhost causes ipv6 attempt first which ten falls
+// back to ipv4 and takes upwards of 1s+ to connect.
+// https://stackoverflow.com/a/15144195
+//
+// Use 127.0.0.1 instead
+//
+//var _wsADDRESS = "localhost" + ":" + _WS_PORT;
+var _wsADDRESS = "127.0.0.1" + ":" + _WS_PORT;
 
 var BG_COLOR = "#f7f7f7";
 var TEXT_COLOR = "#444444";
@@ -38,6 +50,7 @@ var g_snd = {
   "button_press" : ""
 };
 
+var g_sock = null;
 
 function _beep_error() {
   g_snd.rule_error.currentTime=0;
@@ -177,10 +190,12 @@ function _show_ui_element(to) {
   ele.style.display = "block";
 }
 
-function _get_now_HH_MM() {
+function _get_now_HH_MM(is12hour_format) {
+  is12hour_format = ((typeof is12hour_format === "undefined") ? false : is12hour_format);
   var _dt = new Date();
 
   var _sep = ":";
+  var ampm = "";
 
   if ( (_dt.getSeconds() % 2) == 0) {
     _sep = " ";
@@ -189,13 +204,28 @@ function _get_now_HH_MM() {
   var _hr = _dt.getHours();
   var _min = _dt.getMinutes();
 
+  if (is12hour_format) {
+    if (_hr == 0) {
+      _hr = 12;
+      ampm = "AM";
+    }
+    else if (_hr >= 12) {
+      if (_hr > 12) {
+        _hr -= 12;
+      }
+      ampm = "PM";
+    }
+  }
+
+
   var _hr_str = _hr.toString();
   var _min_str = _min.toString();
 
+
   if (_hr < 10) { _hr_str = "0" + _hr_str; }
   if (_min < 10) { _min_str = "0" + _min_str; }
 
-  var _time_str = _hr_str + _sep + _min_str;
+  var _time_str = _hr_str + _sep + _min_str + " " + ampm;
 
   return _time_str;
 }
@@ -289,6 +319,56 @@ function _init_dim_overlay() {
   var ele = document.getElementById("ui_dim_overlay");
 }
 
+function _update_display_time() {
+  var ele = document.getElementById("ui_message_datetime");
+  if (typeof ele === "undefined") { return; }
+  var _time_str = _get_now_YYYY_MM_DD() + " " + _get_now_HH_MM(true);
+  ele.innerHTML =  _time_str ;
+}
+
+//-------------
+
+function _ws_process(dat) {
+  console.log("_ws_process:", dat);
+
+  var tok = dat.split(" ");
+  if (tok.length < 1) { return; }
+
+  var argv1 = ( (tok.length > 1) ? tok[1] : "");
+  var argv2 = ( (tok.length > 2) ? tok[2] : "");
+
+  if (tok[0] == "passenger_notify") {
+    ui_setmessage("ui_message_cardinfo", argv1);
+  }
+  else if (tok[0] == "passenger_message") {
+    ui_setmessage("ui_message_status", argv1);
+  }
+
+
+}
+
+
+function _init_websocket() {
+  var sock = new WebSocket("ws://" + _wsADDRESS);
+
+  g_sock = sock;
+
+  sock.onopen = function(e) { console.log("open", e); }
+  sock.onmessage = function(e) { _ws_process(e.data); }
+
+  sock.onclose = function(e) {
+    console.log("close", e);
+    setTimeout( function() { _init_websocket(); }, 1000);
+  }
+
+  sock.onerror = function(e) {
+    console.log("error", e);
+  }
+}
+
+
+//-------------
+
 function init() {
   _init_dim_overlay();
 
@@ -300,6 +380,18 @@ function init() {
   var ele = document.getElementById('ui_main_vidfeed');
   ele.src = _URL + ":" + _VID_FEED_PORT;
 
+  window.setInterval(_update_display_time, 200);
+
+  _init_websocket();
+}
+
+// ui_message_status
+// ui_message_cardinfo
+// ui_message_datetime
+//
+function ui_setmessage(ui_id, msg) {
+  var x = document.getElementById(ui_id);
+  x.innerHTML = msg;
 }
 
 (function($) {