Popufare-Admin-Web-UI/main/app/static/js/popufare_admin.js

// example usage:
//
// api_req({"ui_function":"manage_card.find", "api_function":"CardInfo", "data":[ ["action","search"],["mag_token","370000000007015"]]})
//
function api_req(ctx) {
  var xhr;
  xhr = new XMLHttpRequest();
  if (!xhr) { return false; }

  var param_val = [];
  for (var idx=0; idx<ctx.data.length; idx++) {
    param_val.push(ctx.data[idx][0] + '=' + ctx.data[idx][1]);
  }

  var api_func = "nop";
  if ("api_function" in ctx) { api_func = ctx["api_function"]; }

  var req_str = "api/v1/" + api_func + "?" + param_val.join("&");

  xhr.onreadystatechange = (function(_x,_f) {
    return function(v) { api_resp(_x, {"ui_function":_f}); }
  })(xhr, ctx["ui_function"])
  xhr.open("GET", req_str);
  xhr.send()

}


function update_message(ui_id, msg_type, msg_text) {

  var ele = document.getElementById(ui_id);

  if (msg_type === "error") { ele.style.color = "#f00"; }
  else                      { ele.style.color = "#007"; }
  ele.innerHTML = msg_text;
}

function api_resp(xhr,extra) {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {

      var dat = JSON.parse(xhr.responseText);

      console.log(dat);

      if (extra["ui_function"] === "manage_card.find") {

        console.log("manage_card.find", dat);

        if (("cards"in dat) &&
            (dat.cards.length>0)) {
          manage_card_find_fill(dat.cards[0]);
        }

      }
      else if (extra["ui_function"] === "manage_card.findone") {

        console.log("... manage_card.findone", dat);

        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]]});
      }

      else if (extra["ui_function"] === "create_user.finish") {

        if (dat["result"] === "success") {
          update_message("ui.manage_user.message", "success", "");
          _redirect( "manage_user?" + "action=get&userid=" + dat["userid"]);
        }
        else {
          update_message("ui.create_user.message", "error", dat.api_comment);
          console.log("FAIL:", dat);
        }
      }

      else if (extra["ui_function"] === "manage_user.find") {
        console.log("manage_user.find:", dat);

        if (dat["result"] === "success") {
          update_message("ui.manage_user.message", "success", "");
          manage_user_find_fill(dat);
        }
        else {
          update_message("ui.manage_user.message", "error", dat.api_comment);
        }

      }
      else if (extra["ui_function"] === "manage_user.update") {
        var userid = _get_input_field("ui.manage_user.userid");

        console.log("manage_user.update resp:", dat);

        // After we've associated the card to the user, re-get user information to re-fill
        // page
        //
        api_req({"api_function":"UserInfo", "ui_function":"manage_user.find", "data":[["userid",userid]]});
      }

      else if (extra["ui_function"] === "group") {
      }

      //else if (extra["ui_function"] === "manage_card.find") { manage_card_find_fill(dat); }

    }
    else {
      console.log("xhr error:", xhr);
    }
  }
}


function _param2hash(p) {
  var h = {};
  p = p.substring(1);
  var tokval = p.split("&");
  for (var idx=0; idx<tokval.length; idx++) {
    pv = tokval[idx].split("=");
    h[pv[0]] = pv[1];
  }

  return h;
}

function _attach_button(btn_id, cb) {
  ele = document.getElementById(btn_id);
  if (ele) { ele.onclick = cb; }
}

function _redirect(rel_str) {
  console.log("redirect", rel_str);
  window.location.href = rel_str;
}

function _fill_input_field(fid, fdata) {
  var ele = document.getElementById(fid);
  if (ele) {
    if (ele.nodeName === "DIV") { ele.innerHTML = fdata; }
    else                        { ele.value = fdata; }
  }
}

function _get_input_field(fid) {
  var ele = document.getElementById(fid);
  if (ele) { return ele.value; }
  return null;
}

function _get_select(fid) {
  var ele = document.getElementById(fid);
  if (ele) {
    return ele.options[ele.selectedIndex].value;
  }
  return null;
}

function _date_only(s) {
  if (!s) { return s; }
  if (s.length > 0) {
    return s.split(" ")[0];
  }
  return s;
}

function _create_pass_row(dat) {
  var pass_table = document.getElementById("ui.manage_card.list_passes");

  var _cb = "<input type='checkbox' id='xxx' name='xxx'>";

  while (pass_table.firstChild) {
    pass_table.removeChild(pass_table.lastChild);
  }

  var row = document.createElement("div");
  row.classList.add("row");
  row.classList.add("rowpop");
  row.classList.add("row-shade");

  var fields_width = [1,1,1,1,2,2,2,2];
  //var fields = ["x", "Type", "Original", "Remain", "Exp.", "Issued", "First Used", "Last Used"];
  var fields = ['', "Type", "Original", "Remain", "Exp.", "Issued", "First Used", "Last Used"];
  for (var idx=0; idx<fields.length; idx++) {
    var cell = document.createElement("div");
    cell.innerHTML = fields[idx];
    cell.classList.add("col-" + fields_width[idx]);
    row.appendChild(cell);
  }
  pass_table.appendChild(row);

  for (var idx=0; idx<dat["pass"].length; idx++) {
    var pass_data = dat["pass"][idx];

    var passid = pass_data["user_pass_id"];

    var pass_type = "unk";
    var pass_rule = pass_data["rule"];
    var pass_orig = "";
    var pass_remain = "";
    var pass_exp = "";
    if (pass_rule.search(/NRIDE/) >= 0) {
      pass_type = "NRide";
      pass_orig = pass_data["nrides_orig"];
      pass_remain = pass_data["nrides_remain"];
      pass_exp = "";
    }
    else if (pass_rule.search(/NDAY/) >= 0) {
      pass_type = "NDay";
      pass_orig = pass_data["nday_orig"];
      pass_remain = "";
      pass_exp = pass_data["nday_expiration"];
    }
    else {
      pass_type = "Other";
    }

    var pass_firstused = "";
    var pass_lastused = "";
    if ( (typeof pass_data["firstused"] !== "undefined") &&
         (pass_data["firstused"]) ) {
      pass_firstused = pass_data["firstused"];
    }

    if ( (typeof pass_data["lastused"] !== "undefined") &&
         (pass_data["lastused"]) ) {
      pass_lastused = pass_data["lastused"];
    }

    row = document.createElement("div");
    row.classList.add("row");
    row.classList.add("rowpop");
    if ((idx%2)==1) {
      row.classList.add("row-shade");
    }

    //var cell = document.createElement("div");
    //cell.innerHTML = "x";

    var cell = document.createElement("input");

    cell.setAttribute('type', 'checkbox');
    cell.setAttribute('value', '');
    cell.setAttribute('id', "manage_card:cb_" + idx + "_pass");
    cell.classList.add("col-" + fields_width[0]);
    row.appendChild(cell);


    //cell.classList.add("col-" + fields_width[0]);
    //row.appendChild(cell);

    cell = document.createElement("div");
    cell.innerHTML = pass_type;
    cell.classList.add("col-" + fields_width[1]);
    row.appendChild(cell);

    cell = document.createElement("div");
    cell.innerHTML = pass_orig;
    cell.classList.add("col-" + fields_width[2]);
    row.appendChild(cell);

    cell = document.createElement("div");
    cell.innerHTML = pass_remain;
    cell.classList.add("col-" + fields_width[3]);
    row.appendChild(cell);

    cell = document.createElement("div");
    //cell.innerHTML = pass_exp;
    cell.innerHTML = _date_only(pass_exp);
    cell.classList.add("col-" + fields_width[4]);
    row.appendChild(cell);

    cell = document.createElement("div");
    //cell.innerHTML = pass_data["issued"];
    cell.innerHTML = _date_only(pass_data["issued"]);
    cell.classList.add("col-" + fields_width[5]);
    row.appendChild(cell);

    cell = document.createElement("div");
    //cell.innerHTML = pass_firstused;
    cell.innerHTML = _date_only(pass_firstused);
    cell.classList.add("col-" + fields_width[6]);
    row.appendChild(cell);

    cell = document.createElement("div");
    cell.innerHTML = pass_lastused;
    cell.classList.add("col-" + fields_width[7]);
    row.appendChild(cell);

    cell = document.createElement("div");
    cell.innerHTML = passid;
    cell.setAttribute('id', "manage_card:row_" + idx + "_pass");
    cell.style.display = "none";
    row.appendChild(cell);

    pass_table.appendChild(row);

  }
}

function manage_card_find_fill(data) {
  var fields = [ "logical_card_id", "group", "mag_token", "rfid_token"];

  console.log("manage_card_find_fill:", data);

  for (var idx=0; idx<fields.length; idx++) {
    if (fields[idx] in data) {
      _fill_input_field("manage_card:" + fields[idx], data[fields[idx]])
    }
  }

  if ("user" in data) {
    for (_key in data["user"]) {
      _fill_input_field("manage_card:" + _key, data["user"][_key]);
    }
  }

  console.log("cp0");

  if ("pass" in data) {
    _create_pass_row(data);
  }


  window.history.replaceState({}, document.title, "/manage_card");

}

function manage_card_find_cardid() {
  var cardid = _get_input_field("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");
  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");
  api_req({"api_function":"CardInfo", "ui_function":"manage_card.find", "data": [ ["action","search"],["rfid_token",rfid] ] });
}


function manage_user_find_fill(data) {
  var fields = [ "userid", "username", "first_name", "last_name",
                 "email", "phone", "address", "city", "state", "zip",
                 "shipping_name", "shipping_city", "shipping_state", "shipping_address",
                 "shipping_country_code", "shipping_country_name",
                 "shipping_zip", "password"];

  if ("user" in data) {
    var user_data = data["user"];
    for (var idx=0; idx<fields.length; idx++) {
      if (fields[idx] in user_data) {
        _fill_input_field("ui.manage_user." + fields[idx], user_data[fields[idx]])
      }
    }
  }

  if ("card" in data) {
    var card_table = document.getElementById("ui.manage_user.list_cards");

    while (card_table.firstChild) {
      card_table.removeChild(card_table.lastChild);
    }

    var row   = document.createElement("div");
    row.classList.add("row");
    row.classList.add("rowpop");
    row.classList.add("row-shade");

    var cell  = document.createElement("div");
    cell.innerHTML = "Card Id";
    cell.classList.add("col-4");
    row.appendChild(cell);

    cell  = document.createElement("div");
    cell.innerHTML = "Mag Stripe";
    cell.classList.add("col-4");
    row.appendChild(cell);

    cell  = document.createElement("div");
    cell.innerHTML = "RFID";
    cell.classList.add("col-4");
    row.appendChild(cell);
    card_table.appendChild(row);


    var card_data = data["card"];
    for (var idx=0; idx<card_data.length; idx++) {
      var cardid = card_data[idx]["logical_card_id"];
      var magid = card_data[idx]["mag_token"];
      var rfid  = card_data[idx]["rfid_token"];

      row = document.createElement("div");
      row.classList.add("row");
      row.classList.add("rowpop");
      if ((idx % 2) == 1) {
        row.classList.add("row-shade");
      }

      cell = document.createElement("div");
      cell.innerHTML = "<a href='/manage_card?logical_card_id=" + cardid + "'>" + cardid + "</a>";
      cell.classList.add("col-4");
      row.appendChild(cell);

      cell = document.createElement("div");
      cell.innerHTML = "<a href='/manage_card?logical_card_id=" + cardid + "'>" + magid + "</a>";
      cell.classList.add("col-4");
      row.appendChild(cell);

      cell = document.createElement("div");
      cell.innerHTML = "<a href='/manage_card?logical_card_id=" + cardid + "'>" + rfid + "</a>";
      cell.classList.add("col-4");
      row.appendChild(cell);

      card_table.appendChild(row);

      console.log("card", idx,
          card_data[idx]["logical_card_id"],
          card_data[idx]["mag_token"],
          card_data[idx]["rfid_token"] );
    }
  }

  window.history.replaceState({}, document.title, "/manage_user");
}

// --------------------------------------
// --------------------------------------
// --------------------------------------
// --------------------------------------
// --------------------------------------

function manage_card_redirect_manage_user() {
  var userid = _get_input_field("manage_card:userid");
  _redirect( "manage_user?" + "action=get&userid=" + userid);
}

function manage_card_reissue() {
  var cardid = _get_input_field("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");

  console.log("manage_card_add_pass:", cardid, pass_type);
  var dat = {
    "api_function":"Pass",
    "ui_function":"manage_card.update",
    "data": [
      ["logical_card_id",cardid],
      ["nrides_orig", 3],
      ["nrides_remain", 2],
      ["nday_orig", 5],
      ["rule", "ORIG-NRIDE"]
    ]};
  api_req(dat);
}

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");

  if (nrides_orig.length == 0) {
    nrides_orig = _get_select("manage_card:pass_nride_orig");
  }

  var rule = "ORG";
  rule += "-" + _get_select("manage_card:pass_nride_type");
  rule += "-" + _get_select("manage_card:pass_nride_region");

  var api_data = {
    "api_function":"Pass",
    "ui_function":"manage_card.update",
    "data" : [
      ["action","add"],
      ["logical_card_id" , cardid],
      ["nrides_orig" , nrides_orig],
      ["nrides_remain" , nrides_orig],
      ["rule" , rule]
    ]
  };

  //DEBUG
  console.log(">>nride++", api_data);

  api_req(api_data);
}

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");

  if (nday_orig.length == 0) {
    nday_orig = _get_select("manage_card:pass_nday_orig");
  }

  var rule = "ORG";
  rule += "-" + _get_select("manage_card:pass_nday_type");
  rule += "-" + _get_select("manage_card:pass_nday_region");

  var api_data = {
    "api_function":"Pass",
    "ui_function":"manage_card.update",
    "data" : [
      ["action","add"],
      ["logical_card_id" , cardid],
      ["nday_orig" , nday_orig],
      ["rule" , rule]
    ]
  };

  //DEBUG
  console.log(">>nday++", api_data);

  api_req(api_data);
}

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 rule = ui_ele.options[ui_ele.selectedIndex].id;

  var api_data = {
    "api_function":"Pass",
    "ui_function":"manage_card.update",
    "data" : [
      ["action","add"],
      ["logical_card_id" , cardid],
      ["rule" , rule]
    ]
  };

  //DEBUG
  console.log(">>other++", api_data);

  api_req(api_data);
}

function manage_card_delete_pass() {
  var cardid = _get_input_field("manage_card:logical_card_id");

  var ele = document.getElementById("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");
    if (!cb.checked) { continue; }

    var v = document.getElementById("manage_card:row_"+ ii + "_pass");
    var passid = v.innerHTML;

    console.log("deleting pass", passid, "(card:", cardid,")");

    if (cb.checked) {
      var dat = {
        "api_function":"Pass",
        "ui_function":"manage_card.update",
        "data": [
          ["action", "deactivate"],
          ["logical_card_id",cardid],
          ["user_pass_id", passid]
        ]};
      api_req(dat);

    }

  }

}

function manage_card_toggle_pass_select() {
  var ele = document.getElementById("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");
    if (cb.checked) { cb.checked = false; }
    else { cb.checked = true; }
  }
}


// --------------------------------------
// --------------------------------------


function manage_user_find_userid() {
  var userid = _get_input_field("ui.manage_user.userid");
  api_req({"api_function":"UserInfo", "ui_function":"manage_user.find", "data": [ ["userid",userid] ] });
}

function manage_user_find_username() {
  var ele = document.getElementById("ui.manage_user.username");
  var username = ele.value;
  api_req({"api_function":"UserInfo", "ui_function":"manage_user.find", "data":[["username",username]]});
}

function manage_user_update_user() {
  var ele = document.getElementById("ui.manage_user.userid");
  var userid = ele.value;

  var user_data = [["action","update"],["userid", userid]];
  var fields = ["username", "lookup_userid", "lookup_username", "first_name", "last_name", "email", "phone",
                "address", "city", "state", "zip", "shipping_name", "shipping_address", "shipping_city",
                "shipping_state", "shipping_country_code", "shipping_country_name", "shipping_zip" ];
  for (var idx=0; idx<fields.length; idx++) {
    var _e = document.getElementById("ui.manage_user." + fields[idx]);
    if (!_e) { continue; }
    user_data.push([fields[idx],_e.value]);
  }


  var req_data = {"api_function":"User", "ui_function":"manage_user.update_finish", "data":user_data};

  console.log("???", req_data);

  api_req(req_data);
}

function manage_user_associate_card(data) {
  var ele = document.getElementById("ui.manage_user.userid");
  var userid = ele.value;

  var ele = document.getElementById("ui.manage_user.logical_card_id");
  var cardid = ele.value;

  ele = document.getElementById("ui.manage_user.mag_token");
  var mag = ele.value;

  ele = document.getElementById("ui.manage_user.rfid_token");
  var rfid = ele.value;

  var req_dat = { "api_function":"Card", "ui_function":"manage_user.update",
                  "data": [
                    ["action","update"],
                    ["userid", userid],
                    ["logical_card_id",cardid],
                    ["mag_token",mag],
                    ["rfid_token",rfid]
                  ] };

  api_req(req_dat);
  
}

// --------------------------------------
// --------------------------------------


function create_user_update_message(msg_type, msg_text) {
  var ele = document.getElementById("ui.create_user.message");

  if (msg_type === "error") { ele.style.color = "#f00"; }
  else                      { ele.style.color = "#007"; }
  ele.innerHTML = msg_text;
}

function create_user_process_button() {
  var val_names = ["username", "first_name", "last_name",
                   "email", "phone", "address", "city", "state", "zip",
                   "shipping_name", "shipping_address",
                   "shipping_city", "shipping_state",
                   "shipping_country_code", "shipping_country_name",
                   "shipping_zip",
                   "password"];
  var req_dat = { "api_function":"User", "ui_function":"create_user.finish",
                  "data":[ ["action","add"]] };
  for (var idx=0; idx<val_names.length; idx++) {
    var v = _get_input_field("create_user:" + val_names[idx]);
    if (v) {
      req_dat.data.push([val_names[idx],v]);
    }
  }

  api_req(req_dat);
}

// --------------------------------------
// --------------------------------------
// --------------------------------------
// --------------------------------------
// --------------------------------------


function admin_api_init() {
  var ele;
  var _func = location.pathname.substring(1);

  console.log("...init", _func);
  console.log(window.location.search);
  var _h = _param2hash(window.location.search);

  if (_func === "create_user") {
    _attach_button("create_user:button_create", create_user_process_button);
  }

  else if (_func === "manage_user") {
    _attach_button( "ui.manage_user.lookup_userid", manage_user_find_userid);
    _attach_button( "ui.manage_user.lookup_username", manage_user_find_username);
    _attach_button( "ui.manage_user.update_user", manage_user_update_user);

    _attach_button( "ui.manage_user.associate_card", manage_user_associate_card);

    if ("userid" in _h) {
      console.log("sending manage_user.find request");
      api_req({"api_function":"UserInfo", "ui_function":"manage_user.find", "data":[["userid",_h["userid"]]]});
    }
  }

  else if (_func === "manage_card") {
    _attach_button( "ui.manage_card.lookup_logical_card_id", manage_card_find_cardid);
    _attach_button( "ui.manage_card.lookup_mag_token", manage_card_find_magstripe);
    _attach_button( "ui.manage_card.lookup_rfid_token", manage_card_find_rfid);

    _attach_button( "ui.manage_card.manage_user", manage_card_redirect_manage_user);
    _attach_button( "ui.manage_card.reissue", manage_card_reissue);
    _attach_button( "ui.manage_card.add_pass_nride", manage_card_add_pass_nride);
    _attach_button( "ui.manage_card.add_pass_nday", manage_card_add_pass_nday);
    _attach_button( "ui.manage_card.add_pass_other", manage_card_add_pass_other);
    _attach_button( "ui.manage_card.delete_pass", manage_card_delete_pass);
    _attach_button( "ui.manage_card.toggle_pass_all", manage_card_toggle_pass_select);

    if ("logical_card_id" in _h) {
      console.log("sending manage_card.find request");
      api_req({
        "api_function":"CardInfo",
        "ui_function":"manage_card.find",
        "data": [
          ["action","search"],
          ["logical_card_id",_h["logical_card_id"] ]
        ]
      });
    }
  }

}

admin_api_init();