felt/static/admin.js

let adminToken = null;
const adminWrapper = document.getElementById("adminWrapper");
const adminZone = document.getElementById("adminZone");
const createTableForm = document.getElementById("createTableForm");
const newTableName = document.getElementById("newTableName");
const newTablePass = document.getElementById("newTablePass");

async function getTable(name, pass) {
  try {
    const headers = new Headers();
    headers.set('Authorization', 'Bearer ' + adminToken.access_token);
    const res = await fetch(`/admin/api/table/${name}?passcode=${pass}`, {
      method: 'GET',
      headers: headers,
    });
    
    const mapImgs = await fetch (`/admin/api/upload/${name}/map/?passcode=${pass}`, {
      method: 'GET',
      headers: headers,
    });
  
    if (res.ok) {
      document.getElementById("input_table_name").value = name;
      document.getElementById("input_table_pass").value = pass;
      dial();
      infoHtml = "<a href='#' onclick='getTables()'>&larr; table list</a><br>";
      infoHtml += `<textarea id='auxMsgZone'>${(await res.json()).auxMsg}</textarea><br><button onclick='publishAuxMsg()'>Set Status</button>`
      infoHtml += "<button onclick='destroyTable()'>Destroy Table</button><br/>";
      infoHtml += "<input id='map_img_upload' type='file'/><button onclick='uploadMapImg()'>Upload Map</button><br/>"
      if (mapImgs.ok) {
        infoHtml += "<label>Available Maps</label>";
        const imgs = await mapImgs.json();
        infoHtml += "<ul>";
        for (const i of imgs) {
          const parts = i.split("/");
          infoHtml += `<li>${parts[parts.length - 1]} <a href="${i}">view</a> <button onclick="sendMapImg('${i}');">Set</button> <button onclick="deleteMapImg('${i}')">Delete</button></li>\n`;
        }
        infoHtml += "</ul>";
      } else {
        infoHtml += "<label>Maps couldn't be retrieved</label>";
      }
      adminZone.innerHTML = infoHtml;
    }
    else {
      console.log(res.status);
    }
  } catch (err) {
    setErr(`${err.name}: ${err.message}`);
  }
}

function publishAuxMsg() {
  const txtArea = document.getElementById("auxMsgZone");
  if (txtArea != null) {
    publish({auxMsg: txtArea.value, auth: adminToken.access_token});
  }
}

function sendMapImg(url) {
  console.log("sending " + url);
  publish({mapImg: url, auth: adminToken.access_token});
}

async function uploadMapImg() {
  try {
    var input = document.getElementById("map_img_upload");
    var data = new FormData();
    data.append('file', input.files[0]);
    data.append('name', tableKey.name);
    data.append('passcode', tableKey.passcode);
    const headers = new Headers();
    headers.set('Authorization', 'Bearer ' + adminToken.access_token);
    res = await fetch(`/admin/api/upload/${tableKey.name}/map/`, {
      headers: headers,
      method: "POST",
      body: data,
    });
    if (res.ok) {
      // refresh so we can see the new entry in the list
      getTable(tableKey.name, tableKey.passcode);
    } else {
      throw new Error("Something went wrong uploading the map BG...");
    }
  } catch (err) {
    setErr(`${err.name}: ${err.message}`);
  }
}

async function deleteMapImg() {
  try {
  } catch {
  }
}

async function destroyTable() {
  try {
    if (confirm("You really want to destroy this table?")) {
    const headers = new Headers();
    headers.set('Authorization', 'Bearer ' + adminToken.access_token);
    const res = await fetch(`/admin/api/table/${tableKey.name}`, {
      method: 'DELETE',
      headers: headers,
      body: JSON.stringify(tableKey)
    });
    if (res.ok) {
      conn.close(1000);
      getTables();
    } else {
      setErr(await res.json());
    }
    }
  } catch (err) {
    setErr(`${err.name}: ${err.message}`);
  }
}

async function getTables() {
  try {
    const headers = new Headers();
    headers.set('Authorization', 'Bearer ' + adminToken.access_token);
    const res = await fetch('/admin/api/table/', {
      method: 'GET',
      headers: headers
    });
    if (res.ok) {
      const tableList = await res.json();
      let tableListHTML = "<ul>\n";
      for (const t of tableList) {
        tableListHTML +=  `<li><a href="#" onclick="getTable('${t.name}','${t.passcode}');return false;">${t.name}</a></li>\n`
      }
      tableListHTML += "</ul>"
      adminZone.innerHTML = tableListHTML;
    } else {
      if (res.status == 404) {
        return;
      }
      setErr(await res.headers.get("Quartzgun-Error"));
    }
  } catch {
  }
}

async function doLogin() {
  const adminUsrInput = document.getElementById("name_entry");
  const adminPassInput = document.getElementById("input_admin_pass");
  
  if (adminUsrInput && adminPassInput) {
    adminToken = await getAdminToken(adminUsrInput.value, adminPassInput.value);
    if (adminToken) {
      adminWrapper.style.display="inline";
      getTables();
      adminZone.style.display = "block";
    } else {
      setErr("Incorrect credentials");
    }
  }
}

async function getAdminToken(user, pass) {
  const headers = new Headers();
  headers.set('Authorization', 'Basic ' + btoa(user + ":" + pass));
  try {
    const res = await fetch('/admin/api/auth/', {
      method: 'POST',
      headers: headers
    });
    
    if (res.ok) {
      return await res.json();
    }
    return null;
  } catch (err) {
    return null;
  }
}

function setTableCreateFormVisible(v) {
  if (createTableForm) {
    createTableForm.style.display = v ? "block" : "none";
  }
  if (!v) {
    if (newTableName) {
      newTableName.value = "";
    }
    if (newTablePass) {
      newTablePass.value = "";
    }
  }
}

async function createTable() {
  const headers = new Headers();
  headers.set('Authorization', 'Bearer ' + adminToken.access_token);
    
  const formData = new FormData();
  formData.set("name", newTableName.value);
  formData.set("passcode", newTablePass.value);
  
  let bodyStr = "{";
  for (const pair of formData.entries()) {
    bodyStr += `"${pair[0]}": "${pair[1]}",`;
  }
  bodyStr = bodyStr.slice(0, -1);
  bodyStr += "}";
  const res = await fetch('/admin/api/table/', {
    method: 'POST',
    headers: headers,
    body: bodyStr,
  });
  if (res.ok) {
    getTables();
    setTableCreateFormVisible(false);
  }
}