<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<script src='guiForm.js'></script>
<script type="text/javascript" src="https://unpkg.com/@zxing/library@0.18.5"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='gui.js'></script>
<script src='searchBar.js?version=10'></script>
<script src='googleSheetsPortal.js'></script>
<script src='barcodeReader.js?version=2'></script>
</head>
<body onload='searchForUser()'>
<div id= 'footer'></div>
<div id='updatingPanel'></div>
</body>
<script>
var googleSheetsPortalScript='https://script.google.com/macros/s/AKfycbyQ0kUd2awAYoAWT24UZUj7SO0jVgZ2t72mOiXumtGOE93ms2Fyg_NJWsyvEuY1FeplNw/exec';
var orderList='';
var part='';
var partLocation='';
var userId=0;
var quantity=0;
var maxSupply=0;
var email='';
var logoDynamicScript="<div><div class='form-group' style='display: grid;grid-template-columns: auto 80%;padding: 10px;grid-gap: 10px;'><img width='50px' src='https://www.ub.edu.bs/wp-content/uploads/2016/10/UB-Horizontal-Shield-Logos-2-2.png'><div style='padding: 10px;'>School of Mathematics, Science and Technology</div></div><div style='color:gray;font: 30px Arial;text-align:center;'>Parts Library<hr></div></div>";
makeField('Quantity');
makeField('Email Address for Notifications');
//removePart('','','');
function searchForUser(){
let newUserIdDynamicCode="<div class='container' style='width:300px;color:#088F8F'><hr><i>No User ID? No Problem! <br>Enter an email address below and we'll send you one immediately.</i></div><div class='container' style='width:300px;'><div class='form-group' style='display: grid;grid-template-columns: auto 30%;padding: 10px;grid-gap: 10px;'><input class='form-control' id='emailAddress' placeholder='Email'><button type='submit' class='btn btn-default' id='submitButton' onclick='getUserId()'>Get ID</button></div></div><div id='status'></div></div>";
displayUi('footer',placeElementsInContainer(displayUiBarcodeReader('User ID')+newUserIdDynamicCode));
getHeader(logoDynamicScript+'<h4 ><u>User Login</u></h4>');
//startScanning();
}
function populateDropdownMenu(){
sendDataToGoogleSheets(['getListOfParts'],googleSheetsPortalScript);
setUpdating();
displayUi('footer',"<div class='container' style='width:300px;'>"+logoDynamicScript+"</div>"+placeElementsInContainer(getSearchBarUi(true,'Part Search')+orderList));
}
function receiveDataFromGoogleSheets(){
if(getDataFromGoogleSheetsAsArray()[0]=='listOfPartsFound'){
setRecordToSearch(getDataFromGoogleSheetsAsArray());
removeUpdating();
}
if(getDataFromGoogleSheetsAsArray()[0]=='partAdded'){
removeUpdating();
var addedParts = getDataFromGoogleSheetsAsArray();
orderList='';
for(var i=2;i<addedParts.length&&addedParts.length>3;i=i+4){
orderList=orderList+"<div class='form-group' style='display: grid;grid-template-columns: auto 30%;padding: 10px;grid-gap: 10px;'><span>"+addedParts [i+3]+" | "+addedParts [i]+" ("+addedParts [i+2]+")</span><span><a href='javascript:removePart(""+addedParts [i]+"",""+addedParts [i+1]+"",""+addedParts [i+2]+"",""+addedParts [i+3]+"")'>delete</a></span></div>";
}
email=addedParts [1];
displayUi('footer',"<div class='container' style='width:300px;'>"+logoDynamicScript+"</div>"+placeElementsInContainer(getSearchBarUi(true,'Part Search')+orderList));
}
if(getDataFromGoogleSheetsAsArray()[0]=='userNotFound'){
removeUpdating();
warning('Invalid User');
startScanning();
}
if(getDataFromGoogleSheetsAsArray()[0]=='orderToFill'){
removeUpdating();
var orderToFill= getDataFromGoogleSheetsAsArray();
orderList='';
for(var i=3;i<orderToFill.length&&orderToFill.length>3;i=i+4){
orderList=orderList+"<div class='form-group' style='display: grid;grid-template-columns: auto 30%;padding: 10px;grid-gap: 10px;'><span><b>"+orderToFill[i+3]+": "+orderToFill[i+2]+" </b>"+orderToFill[i]+"</span></div>";
}
email=orderToFill[1];
displayUi('footer',placeElementsInContainer('<h4 ><u>ORDER ID: '+orderToFill[2]+'</u></h4>'+orderList+"<hr>"+makeStandAloneField('Email Address For Admin')+"<hr><span><a href='javascript:closeOrder(""+orderToFill[2]+"")'>✖ CLOSE ORDER & NOTIFY</a></span>"));
setFieldText('Email Address For Admin',email);
}
if(getDataFromGoogleSheetsAsArray()[0]=='noOrderToFill'){
displayUi('footer',placeElementsInContainer('<h4 ><u>NO ORDERS TO FILL</u></h4>'));
removeUpdating();
}
if(getDataFromGoogleSheetsAsArray()[0]=='userIdSent'){
document.getElementById('status').innerHTML="<span style='color:tomato'>Your User ID was sent to your email. Check your spam folder.</span>";
removeUpdating();
}
if(getDataFromGoogleSheetsAsArray()[0]=='pictureAvailable'){
document.getElementById('pictureImageSrc').src=getDataFromGoogleSheetsAsArray()[1];
removeUpdating();
}
}
function searchBarItemSelected (name,id,inStock,datasheet,picture,bin){
populateDropdownMenu();
partName=name;
part=id;
partLocation=bin;
maxSupply=inStock;
let datasheetDynamicCode='';
let pictureDynamicCode='';
if(datasheet!="NA"){
datasheetDynamicCode='<li><a href=\"'+datasheet+'\" target=\"_blank\">Datasheet:<br> <img src=\"pdfIcon.png\"></a></li>';
}
if(picture!="NA"){
pictureDynamicCode='<li><b>Picture:</b><br><img id=\"pictureImageSrc\" src=\"'+picture+'\" style=\"width:auto;\"></li>';
}
if(userId==3345){displayUi('footer',"<div class='container' style='width:300px;'>"+logoDynamicScript+"</div>"+placeElementsInContainer(getSearchBarUi(true,'Part Search')+'<i>'+name+' <br><br><ul><li><b>In stock: '+maxSupply+'</b></li>'+datasheetDynamicCode+pictureDynamicCode+'<li>Bin: '+bin+'</li><li><div><input type=\"file\" id=\"pictureUploader\" style=\"margin-bottom:20px;margin-top:20px;\"></input><br><button type=\"button\" onclick=\"savePicture()\">Save Picture</button></div></li></ul><hr>'));
}else{
displayUi('footer',"<div class='container' style='width:300px;'>"+logoDynamicScript+"</div>"+placeElementsInContainer(getSearchBarUi(true,'Part Search')+'<i>'+name+' <br><br><ul><li><b>In stock: '+maxSupply+'</b></li>'+datasheetDynamicCode+pictureDynamicCode+'<li>Bin: '+bin+'</li></ul><hr>'+getFormUiAsString()));}
setFieldText('Email Address for Notifications',email);
}
function getUser(){
userId=parseInt(getScannedText());
if(userId<5000){
removePart('','','','');}else{
getOrder();
}
stopScanning();
}
function send(){
isCharactersValid('Email Address for Notifications','');
if(isCharactersValid('Quantity','numeric')&&isCharactersValid('Email Address for Notifications','')){
if(parseInt(getFieldText('Quantity'))<=maxSupply&&parseInt(getFieldText('Quantity'))>0){
email=getFieldText('Email Address for Notifications');
sendDataToGoogleSheets(['addPart',userId,partName,part,getFieldText('Quantity'),email,partLocation],googleSheetsPortalScript);
}else{
document.getElementById('Quantity').style='background-color:lightyellow';
}
}
}
function getUserId(){
let emailAddressForId=document.getElementById("emailAddress").value;
console.log(emailAddressForId);
sendDataToGoogleSheets(['getUserId',emailAddressForId],googleSheetsPortalScript);
setUpdating();
}
function removePart(name,id,quantity,binLocation){
sendDataToGoogleSheets(['removePart',userId,name,id,quantity,binLocation],googleSheetsPortalScript);
setUpdating();
}
function getOrder(){
sendDataToGoogleSheets(['getOrder',userId],googleSheetsPortalScript);
setUpdating();
}
function closeOrder(orderToClose){
if(isCharactersValid('Email Address For Admin','')){
sendDataToGoogleSheets(['closeOrder',orderToClose,userId,getFieldText('Email Address For Admin')],googleSheetsPortalScript);
setUpdating();
}else{
document.getElementById('Email Address for Notifications').style='background-color:lightyellow';
}
}
function savePicture(){
var pictureToSave=document.getElementById("pictureUploader").files[0];
var fileReader=new FileReader();
var rawFile='';
fileReader.onload=function(){
rawFile=fileReader.result;
var pictureData=rawFile.substring(rawFile.indexOf('base64,')+7,rawFile.length);
sendDataToGoogleSheets(['savePicture',part,pictureData,pictureToSave.type],googleSheetsPortalScript);
setUpdating();
}
if(pictureToSave==undefined){
}else{
fileReader.readAsDataURL(pictureToSave);}
console.log("Saving");
}
function setUpdating(){
document.getElementById('updatingPanel').innerHTML="<div style='position:absolute;top:0px;left:0px;z-index:2;width:100vw;height:100vh;'><div style='width:100%;height:100%;background-color:rgba(0,0,0,.4);'><div style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:44px Calibri;color:rgba(0,0,0,.4);'>Loading...</div></div></div>";
}
function removeUpdating(){
document.getElementById('updatingPanel').innerHTML='';
}
</script>
</html>