manage card mostly working

TODO:

* error checking
* disassociate card from user
* other id?
* comment
* active pass
* re-issue card

main/app/static/js/popufare_admin.js

@@ -48,24 +48,50 @@ function api_resp(xhr,extra) {
 
         console.log("manage_card.find", dat);
 
+        if (dat["result"] == "fail") {
+          manage_card_find_fill({});
+          update_message("ui.manage_card.message", "error", dat["api_comment"]);
+          return;
+        }
+
         if (("cards"in dat) &&
             (dat.cards.length>0)) {
+          update_message("ui.manage_card.message", "success", "");
           manage_card_find_fill(dat.cards[0]);
         }
+        else {
+          manage_card_find_fill({});
+          update_message("ui.manage_card.message", "error", "no cards");
+        }
 
       }
       else if (extra["ui_function"] === "manage_card.findone") {
 
         console.log("... manage_card.findone", dat);
 
-        manage_card_find_fill(dat);
+        if (dat["result"] == "fail") {
+          update_message("ui.manage_card.message", "error", dat["api_comment"]);
+          manage_card_find_fill({});
+        }
+        else {
+          update_message("ui.manage_card.message", "success", "");
+          manage_card_find_fill(dat);
+        }
+
       }
       else if (extra["ui_function"] === "manage_card.update") {
 
         console.log("issuing 'manage_card.update'");
 
-        var cardid = _get_input_field("manage_card:logical_card_id");
-        api_req({"api_function":"CardInfo", "ui_function":"manage_card.findone", "data":[["logical_card_id",cardid]]});
+        if (dat["result"] == "fail") {
+          update_message("ui.manage_card.message", "error", dat["api_comment"]);
+        }
+        else {
+          update_message("ui.manage_card.message", "success", "");
+          var cardid = _get_input_field("ui.manage_card.logical_card_id");
+          api_req({"api_function":"CardInfo", "ui_function":"manage_card.findone", "data":[["logical_card_id",cardid]]});
+        }
+
       }
 
       else if (extra["ui_function"] === "create_user.finish") {
@@ -274,7 +300,7 @@ function _create_pass_row(dat) {
 
     cell.setAttribute('type', 'checkbox');
     cell.setAttribute('value', '');
-    cell.setAttribute('id', "manage_card:cb_" + idx + "_pass");
+    cell.setAttribute('id', "ui.manage_card.cb_" + idx + "_pass");
     cell.classList.add("col-" + fields_width[0]);
     row.appendChild(cell);
 
@@ -322,7 +348,7 @@ function _create_pass_row(dat) {
 
     cell = document.createElement("div");
     cell.innerHTML = passid;
-    cell.setAttribute('id', "manage_card:row_" + idx + "_pass");
+    cell.setAttribute('id', "ui.manage_card.row_" + idx + "_pass");
     cell.style.display = "none";
     row.appendChild(cell);
 
@@ -333,21 +359,37 @@ function _create_pass_row(dat) {
 
 function manage_card_find_fill(data) {
   var fields = [ "logical_card_id", "group", "mag_token", "rfid_token"];
+  var user_fields = [ "userid", "username", "first_name", "last_name",
+                      "email", "phone", "address", "city", "state", "zip", "group" ];
 
   console.log("manage_card_find_fill:", data);
 
+  for (var idx=0; idx<fields.length; idx++) {
+    _fill_input_field("ui.manage_card." + fields[idx], "");
+  }
+
+
+
+  _fill_input_field("ui.manage_card.disp_userid", "");
   for (var idx=0; idx<fields.length; idx++) {
     if (fields[idx] in data) {
-      _fill_input_field("manage_card:" + fields[idx], data[fields[idx]])
+      _fill_input_field("ui.manage_card." + fields[idx], data[fields[idx]])
     }
   }
 
+  for (_user_key in user_fields) {
+    _fill_input_field("ui.manage_card." + user_fields[_user_key], "");
+  }
+
   if ("user" in data) {
     for (_key in data["user"]) {
-      _fill_input_field("manage_card:" + _key, data["user"][_key]);
+      _fill_input_field("ui.manage_card." + _key, data["user"][_key]);
     }
-  }
 
+    if ("userid" in data["user"]) {
+      _fill_input_field("ui.manage_card.disp_userid", data["user"]["userid"]);
+    }
+  }
   console.log("cp0");
 
   if ("pass" in data) {
@@ -360,18 +402,18 @@ function manage_card_find_fill(data) {
 }
 
 function manage_card_find_cardid() {
-  var cardid = _get_input_field("manage_card:logical_card_id");
+  var cardid = _get_input_field("ui.manage_card.logical_card_id");
   console.log("??", cardid);
   api_req({"api_function":"CardInfo", "ui_function":"manage_card.find", "data": [ ["action","search"], ["logical_card_id",cardid] ] });
 }
 
 function manage_card_find_magstripe() {
-  var mag = _get_input_field("manage_card:mag_token");
+  var mag = _get_input_field("ui.manage_card.mag_token");
   api_req({"api_function":"CardInfo", "ui_function":"manage_card.find", "data": [ ["action","search"],["mag_token",mag] ] });
 }
 
 function manage_card_find_rfid() {
-  var rfid = _get_input_field("manage_card:rfid_token");
+  var rfid = _get_input_field("ui.manage_card.rfid_token");
   api_req({"api_function":"CardInfo", "ui_function":"manage_card.find", "data": [ ["action","search"],["rfid_token",rfid] ] });
 }
 
@@ -383,6 +425,11 @@ function manage_user_find_fill(data) {
                  "shipping_country_code", "shipping_country_name",
                  "shipping_zip", "password"];
 
+  for (_user_key in fields) {
+    _fill_input_field("ui.manage_card." + _user_key, "");
+  }
+
+
   if ("user" in data) {
     var user_data = data["user"];
     for (var idx=0; idx<fields.length; idx++) {
@@ -468,17 +515,17 @@ function manage_user_find_fill(data) {
 // --------------------------------------
 
 function manage_card_redirect_manage_user() {
-  var userid = _get_input_field("manage_card:userid");
+  var userid = _get_input_field("ui.manage_card.userid");
   _redirect( "manage_user?" + "action=get&userid=" + userid);
 }
 
 function manage_card_reissue() {
-  var cardid = _get_input_field("manage_card:logical_card_id");
+  var cardid = _get_input_field("ui.manage_card.logical_card_id");
   _redirect( "reissue_card?" + "action=get&logical_card_id=" + cardid);
 }
 
 function manage_card_add_pass(pass_type) {
-  //var cardid = _get_input_field("manage_card:logical_card_id");
+  //var cardid = _get_input_field("ui.manage_card.logical_card_id");
 
   console.log("manage_card_add_pass:", cardid, pass_type);
   var dat = {
@@ -495,16 +542,16 @@ function manage_card_add_pass(pass_type) {
 }
 
 function manage_card_add_pass_nride() {
-  var cardid = _get_input_field("manage_card:logical_card_id");
-  var nrides_orig = _get_input_field("manage_card:pass_nride_other");
+  var cardid = _get_input_field("ui.manage_card.logical_card_id");
+  var nrides_orig = _get_input_field("ui.manage_card.pass_nride_other");
 
   if (nrides_orig.length == 0) {
-    nrides_orig = _get_select("manage_card:pass_nride_orig");
+    nrides_orig = _get_select("ui.manage_card.pass_nride_orig");
   }
 
   var rule = "ORG";
-  rule += "-" + _get_select("manage_card:pass_nride_type");
-  rule += "-" + _get_select("manage_card:pass_nride_region");
+  rule += "-" + _get_select("ui.manage_card.pass_nride_type");
+  rule += "-" + _get_select("ui.manage_card.pass_nride_region");
 
   var api_data = {
     "api_function":"Pass",
@@ -525,16 +572,16 @@ function manage_card_add_pass_nride() {
 }
 
 function manage_card_add_pass_nday() {
-  var cardid = _get_input_field("manage_card:logical_card_id");
-  var nday_orig = _get_input_field("manage_card:pass_nday_other");
+  var cardid = _get_input_field("ui.manage_card.logical_card_id");
+  var nday_orig = _get_input_field("ui.manage_card.pass_nday_other");
 
   if (nday_orig.length == 0) {
-    nday_orig = _get_select("manage_card:pass_nday_orig");
+    nday_orig = _get_select("ui.manage_card.pass_nday_orig");
   }
 
   var rule = "ORG";
-  rule += "-" + _get_select("manage_card:pass_nday_type");
-  rule += "-" + _get_select("manage_card:pass_nday_region");
+  rule += "-" + _get_select("ui.manage_card.pass_nday_type");
+  rule += "-" + _get_select("ui.manage_card.pass_nday_region");
 
   var api_data = {
     "api_function":"Pass",
@@ -554,8 +601,8 @@ function manage_card_add_pass_nday() {
 }
 
 function manage_card_add_pass_other() {
-  var cardid = _get_input_field("manage_card:logical_card_id");
-  var ui_ele = document.getElementById("manage_card:pass_other");
+  var cardid = _get_input_field("ui.manage_card.logical_card_id");
+  var ui_ele = document.getElementById("ui.manage_card.pass_other");
 
   var rule = ui_ele.options[ui_ele.selectedIndex].id;
 
@@ -576,17 +623,17 @@ function manage_card_add_pass_other() {
 }
 
 function manage_card_delete_pass() {
-  var cardid = _get_input_field("manage_card:logical_card_id");
+  var cardid = _get_input_field("ui.manage_card.logical_card_id");
 
-  var ele = document.getElementById("manage_card:list_passes");
+  var ele = document.getElementById("ui.manage_card.list_passes");
   var n = ele.children.length;
   n-=1;
 
   for (var ii=0; ii<n; ii++)  {
-    var cb = document.getElementById("manage_card:cb_" + ii + "_pass");
+    var cb = document.getElementById("ui.manage_card.cb_" + ii + "_pass");
     if (!cb.checked) { continue; }
 
-    var v = document.getElementById("manage_card:row_"+ ii + "_pass");
+    var v = document.getElementById("ui.manage_card.row_"+ ii + "_pass");
     var passid = v.innerHTML;
 
     console.log("deleting pass", passid, "(card:", cardid,")");
@@ -609,11 +656,11 @@ function manage_card_delete_pass() {
 }
 
 function manage_card_toggle_pass_select() {
-  var ele = document.getElementById("manage_card:list_passes");
+  var ele = document.getElementById("ui.manage_card.list_passes");
   var n = ele.children.length;
   n-=1;
   for (var ii=0; ii<n; ii++)  {
-    var cb = document.getElementById("manage_card:cb_" + ii + "_pass");
+    var cb = document.getElementById("ui.manage_card.cb_" + ii + "_pass");
     if (cb.checked) { cb.checked = false; }
     else { cb.checked = true; }
   }

main/app/templates/manage_card.html

@@ -2,7 +2,15 @@
 
 {% block content %}
 
-  <h1 class="mt-4">Manage Card</h1>
+  <div class='row'>
+    <div class='col-6'>
+      <h1 class="mt-4">Manage Card</h1>
+    </div>
+
+    <div class='col-6'>
+      <h2 class='mt-4' id='ui.manage_card.message'>...</h2>
+    </div>
+  </div>
 
   <div class='container'>
 
@@ -21,10 +29,10 @@
             <div class='row row-shade rowpop'>
               <div class='col-4'> CardId </div>
               <div class='col-6'>
-                <input id='manage_card:logical_card_id' type='text' class='form-control form-control-sm' placeholder=''>
+                <input id='ui.manage_card.logical_card_id' type='text' class='form-control form-control-sm' placeholder=''>
               </div>
               <div class='col-2'> 
-                <button id='manage_card:button_lookup_logical_card_id' type='button' class='btn btn-secondary btn-sm'>Find</button>
+                <button id='ui.manage_card.lookup_logical_card_id' type='button' class='btn btn-secondary btn-sm'>Find</button>
               </div>
             </div>
 
@@ -45,20 +53,20 @@
             <div class='row row-shade rowpop'>
               <div class='col-4'> MagStripe </div>
               <div class='col-6'>
-                <input id='manage_card:mag_token' type='text' class='form-control form-control-sm' placeholder=''>
+                <input id='ui.manage_card.mag_token' type='text' class='form-control form-control-sm' placeholder=''>
               </div>
               <div class='col-2' >
-                <button id='manage_card:button_lookup_mag_token' type='button' class='btn btn-secondary btn-sm '>Find</button>
+                <button id='ui.manage_card.lookup_mag_token' type='button' class='btn btn-secondary btn-sm '>Find</button>
               </div>
             </div>
 
             <div class='row rowpop'>
               <div class='col-4'> RFID </div>
               <div class='col-6'>
-                <input id='manage_card:rfid_token' type='text' class='form-control form-control-sm' placeholder=''>
+                <input id='ui.manage_card.rfid_token' type='text' class='form-control form-control-sm' placeholder=''>
               </div>
               <div class='col-2 '>
-                <button id='manage_card:button_lookup_rfid_token' type='button' class='btn btn-secondary btn-sm'>Find</button>
+                <button id='ui.manage_card.lookup_rfid_token' type='button' class='btn btn-secondary btn-sm'>Find</button>
               </div>
             </div>
 
@@ -66,7 +74,7 @@
               <div class='col-4'> Active Pass </div>
               <div class='col-6'> ...  </div>
               <div class='col-2'>
-                <button id='manage_card:button_lookup_pass' type='button' class='btn btn-secondary btn-sm'>Find</button>
+                <button id='ui.manage_card.lookup_pass' type='button' class='btn btn-secondary btn-sm'>Find</button>
               </div>
             </div>
 
@@ -79,10 +87,10 @@
             <div class='row row-shade rowpop'>
               <div class='col-4'> Other ID </div>
               <div class='col-6'>
-                <input id='manage_card:other_id' type='text' class='form-control form-control-sm' placeholder=''>
+                <input id='ui.manage_card.other_id' type='text' class='form-control form-control-sm' placeholder=''>
               </div>
               <div class='col-2'>
-                <button id='manage_card:button_other_find' type='button' class='btn btn-secondary btn-sm'>Find</button>
+                <button id='ui.manage_card.other_find' type='button' class='btn btn-secondary btn-sm'>Find</button>
               </div>
             </div>
 
@@ -99,62 +107,68 @@
           <!-- and the other half is devoted to user specific information (associated with the card) -->
           <div class='col-5'>
 
-            <input id='manage_card:userid' type='hidden' >
+            <input id='ui.manage_card.userid' type='hidden' >
 
             <div class='row row-shade rowpop'>
-              <div class='col-5'> Username </div>
-              <div id='manage_card:username' class='col-7'> </div>
+              <div class='col-5'> UserId</div>
+              <div id='ui.manage_card.disp_userid' class='col-7'> </div>
             </div>
 
             <div class='row rowpop'>
+              <div class='col-5'> Username </div>
+              <div id='ui.manage_card.username' class='col-7'> </div>
+            </div>
+
+            <div class='row row-shade rowpop'>
               <div class='col-5'> First Name </div>
-              <div id='manage_card:first_name' class='col-7'> </div>
+              <div id='ui.manage_card.first_name' class='col-7'> </div>
             </div>
 
 
-            <div class='row row-shade rowpop'>
+            <div class='row rowpop'>
               <div class='col-5'> Last Name </div>
-              <div id='manage_card:last_name' class='col-7'> </div>
+              <div id='ui.manage_card.last_name' class='col-7'> </div>
             </div>
 
-            <div class='row rowpop'>
+            <div class='row row-shade rowpop'>
               <div class='col-5'> E-Mail </div>
-              <div id='manage_card:email' class='col-7'> </div>
+              <div id='ui.manage_card.email' class='col-7'> </div>
             </div>
 
-            <div class='row row-shade rowpop'>
+            <div class='row rowpop'>
               <div class='col-5'> Phone </div>
-              <div id='manage_card:phone' class='col-7'> </div>
+              <div id='ui.manage_card.phone' class='col-7'> </div>
             </div>
 
-            <div class='row rowpop'>
+            <div class='row row-shade rowpop'>
               <div class='col-5'> Address </div>
-              <div id='manage_card:address' class='col-7'> </div>
+              <div id='ui.manage_card.address' class='col-7'> </div>
             </div>
 
-            <div class='row row-shade rowpop'>
+            <div class='row rowpop'>
               <div class='col-5'> City </div>
-              <div id='manage_card:city' class='col-7'> </div>
+              <div id='ui.manage_card.city' class='col-7'> </div>
             </div>
 
-            <div class='row rowpop'>
+            <div class='row row-shade rowpop'>
               <div class='col-5'> State </div>
-              <div id='manage_card:state' class='col-7'> </div>
+              <div id='ui.manage_card.state' class='col-7'> </div>
             </div>
 
-            <div class='row row-shade rowpop'>
+            <div class='row rowpop'>
               <div class='col-5'> ZIP </div>
-              <div id='manage_card:zip' class='col-7'> </div>
+              <div id='ui.manage_card.zip' class='col-7'> </div>
             </div>
 
-            <div class='row rowpop'>
+            <div class='row row-shade rowpop'>
               <div class='col-5'> Group </div>
-              <div id='manage_card:group' class='col-7'> </div>
+              <div id='ui.manage_card.group' class='col-7'> </div>
             </div>
+            <br>
 
             <div class='row'>
               <div class='col-5'>
-                <button id='manage_card:button_manage_user' type='button' class='btn btn-secondary btn-sm'>Manage User</button>
+                <button id='ui.manage_card.manage_user' type='button' class='btn btn-secondary btn-sm'>Manage User</button>
               </div>
             </div>
 
@@ -177,7 +191,7 @@
           <div class='col-6'></div>
 
           <div class='col-3'>
-            <button id='manage_card:button_reissue' type='button' class='btn btn-secondary btn-sm'>Re-Issue Card</button>
+            <button id='ui.manage_card.reissue' type='button' class='btn btn-secondary btn-sm'>Re-Issue Card</button>
           </div>
 
         </div>
@@ -187,7 +201,7 @@
           <div class='col-2'>
 
             <div class='input-group input-group-sm mb-3'>
-              <select id='manage_card:pass_nride_type' class='custom-select'>
+              <select id='ui.manage_card.pass_nride_type' class='custom-select'>
                 <option value='NRIDE'>Adult</option>
                 <option value='NRIDEH'>Half</option>
               </select>
@@ -198,7 +212,7 @@
           <div class='col-2'>
 
             <div class='input-group input-group-sm mb-3'>
-              <select id='manage_card:pass_nride_region' class='custom-select'>
+              <select id='ui.manage_card.pass_nride_region' class='custom-select'>
                 <option value='ZON0'>Region 0</option>
                 <option value='ZON1'>Region 1</option>
               </select>
@@ -209,7 +223,7 @@
           <div class='col-2'>
 
             <div class='input-group input-group-sm mb-3'>
-              <select id='manage_card:pass_nride_orig' class='custom-select'>
+              <select id='ui.manage_card.pass_nride_orig' class='custom-select'>
                 <option value='1'>1</option>
                 <option value='2'>2</option>
                 <option value='5'>5</option>
@@ -226,12 +240,12 @@
               <div class='input-group-prepend'>
                 <span class='input-group-text'>Other</span>
               </div>
-              <input id='manage_card:pass_nride_other' type='text' class='form-control form-control-sm' placeholder=''>
+              <input id='ui.manage_card.pass_nride_other' type='text' class='form-control form-control-sm' placeholder=''>
             </div>
           </div>
 
           <div class='col-1'>
-            <button id='manage_card:button_add_pass_nride' type='button' class='btn btn-secondary btn-sm'>Add</button>
+            <button id='ui.manage_card.add_pass_nride' type='button' class='btn btn-secondary btn-sm'>Add</button>
           </div>
 
         </div>
@@ -241,7 +255,7 @@
           <div class='col-2'>
 
             <div class='input-group input-group-sm mb-3'>
-              <select id='manage_card:pass_nday_type' class='custom-select'>
+              <select id='ui.manage_card.pass_nday_type' class='custom-select'>
                 <option value='NDAY'>Adult</option>
                 <option value='NDAYH'>Half</option>
               </select>
@@ -252,7 +266,7 @@
           <div class='col-2'>
 
             <div class='input-group input-group-sm mb-3'>
-              <select id='manage_card:pass_nday_region' class='custom-select'>
+              <select id='ui.manage_card.pass_nday_region' class='custom-select'>
                 <option value='ZON0'>Region 0</option>
                 <option value='ZON1'>Region 1</option>
               </select>
@@ -263,7 +277,7 @@
           <div class='col-2'>
 
             <div class='input-group input-group-sm mb-3'>
-              <select id='manage_card:pass_nday_orig' class='custom-select'>
+              <select id='ui.manage_card.pass_nday_orig' class='custom-select'>
                 <option value='1'>1</option>
                 <option value='2'>2</option>
                 <option value='5'>5</option>
@@ -279,13 +293,13 @@
               <div class='input-group-prepend'>
                 <span class='input-group-text'>Other</span>
               </div>
-              <input id='manage_card:pass_nday_other' type='text' class='form-control form-control-sm' placeholder=''>
+              <input id='ui.manage_card.pass_nday_other' type='text' class='form-control form-control-sm' placeholder=''>
             </div>
 
           </div>
 
           <div class='col-1'>
-            <button id='manage_card:button_add_pass_nday' type='button' class='btn btn-secondary btn-sm'>Add</button>
+            <button id='ui.manage_card.add_pass_nday' type='button' class='btn btn-secondary btn-sm'>Add</button>
           </div>
 
         </div>
@@ -295,7 +309,7 @@
           <div class='col-9'> 
 
             <div class='input-group input-group-sm mb-3'>
-              <select id='manage_card:pass_other' class='custom-select'>
+              <select id='ui.manage_card.pass_other' class='custom-select'>
                 {% for rc in cache["other_pass"] %}
                   <option id='{{ rc.rulename }}'>{{ rc.rulename }}</option>
                 {% endfor %}
@@ -305,7 +319,7 @@
           </div>
 
           <div class='col-1'>
-            <button id='manage_card:button_add_pass_other' type='button' class='btn btn-secondary btn-sm'>Add</button>
+            <button id='ui.manage_card.add_pass_other' type='button' class='btn btn-secondary btn-sm'>Add</button>
           </div>
 
         </div>
@@ -320,17 +334,17 @@
         <!-- pre-existing pass management where they can be re-ordered and deleted -->
         <div class='row'>
 
-          <div id='manage_card:list_passes_buttons' class='col-12'>
+          <div id='ui.manage_card.list_passes_buttons' class='col-12'>
             <div class='row row-shade rowpop'>
               <div class='col-3'>
-                <button type='button' class='btn btn-secondary btn-sm' id='manage_card:button_toggle_pass_all'>check / uncheck all</button>
+                <button type='button' class='btn btn-secondary btn-sm' id='ui.manage_card.toggle_pass_all'>check / uncheck all</button>
               </div>
               <div class='col-7'> </div>
-              <div class='col-2'> <button type='button' class='btn btn-secondary btn-sm' id='manage_card:button_delete_pass'>delete</button> </div>
+              <div class='col-2'> <button type='button' class='btn btn-secondary btn-sm' id='ui.manage_card.delete_pass'>delete</button> </div>
             </div>
           </div>
 
-          <div id='manage_card:list_passes' class='col-12'>
+          <div id='ui.manage_card.list_passes' class='col-12'>
 
             <div class='row row-shade rowpop' >
               <div class='col-1'> Type </div>