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

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) { ele.value = fdata; }
}

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

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

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

}

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_address",
                 "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("manage_user:" + fields[idx], user_data[fields[idx]])
      }
    }
  }

  if ("card" in data) {
    var card_table = document.getElementById("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 api_resp(xhr,extra) {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {

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

      if (extra["ui_function"] === "manage_card.find") {
        if (("cards"in dat) &&
            (dat.cards.length>0)) {
          manage_card_find_fill(dat.cards[0]);
        }
      }

      else if (extra["ui_function"] === "create_user.finish") {
        _redirect( "manage_user?" + "action=get&userid=" + dat["userid"])
      }

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

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

// 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 manage_user_find_userid() {
  var ele = document.getElementById("manage_user:userid");
  var userid = ele.value;
  api_req({"api_function":"UserInfo", "ui_function":"manage_user.find", "data": [ ["userid",userid] ] });
}

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

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

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

  var req_dat = { "api_function":"Card", "ui_function":"create_user.update",
                  "data": [
                    ["action","update"],
                    ["userid", userid],
                    ["logical_card_id",cardid]
                  ] };

  api_req(req_dat);
  
}



function create_user_process_button() {
  var val_names = ["username", "first_name", "last_name",
                   "email", "phone", "address", "city", "state", "zip",
                   "shipping_name", "shipping_city", "shipping_address",
                   "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);

  if (_func === "creat_user") {
    ele = document.getElementById("create_user:button_create");
    if (ele) { ele.onclick = create_user_process_button; }
  }

  else if (_func === "manage_user") {
    _attach_button( "manage_user:button_lookup_userid", manage_user_find_userid);
    _attach_button( "manage_user:button_lookup_username", manage_user_find_username);
    _attach_button( "manage_user:button_associate_card", manage_user_associate_card);

    console.log(window.location.search);
    var _h = _param2hash(window.location.search);
    if ("userid" in _h) {
      api_req({"api_function":"User", "ui_function":"manage_user.find", "data":[["action","get"],["userid",_h["userid"]]]});
    }
  }

}

admin_api_init();