MSV FM

dot.antimicrobial@66.96.161.157: ~ $
Path : /hermes/sb_web/b1536/advancedfunctions.co/seating/
File Upload :
Current < : /hermes/sb_web/b1536/advancedfunctions.co/seating/index.html

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src='https://advancedfunctions.co/genericWebsiteCode/googleSheetsPortal.js'></script>
</head>
<style>
.blockI{background-image:linear-gradient(to bottom,lightgray,white);}
.blockI:hover{background-image:linear-gradient(to bottom,lightgray,cyan);}
.blockII{background-image:linear-gradient(to bottom,lightgray,white);}
.blockII:hover{background-image:linear-gradient(to bottom,lightgray,orange);}
.blockIII{background-image:linear-gradient(to bottom,lightgray,white);}
.blockIII:hover{background-image:linear-gradient(to bottom,lightgray,coral);}
.blockIV{background-image:linear-gradient(to bottom,lightgray,white);}
.blockIV:hover{background-image:linear-gradient(to bottom,lightgray,yellow);}
.blockSeat{background-image:linear-gradient(to bottom,lightgray,white);}
.blockSeat:hover{background-image:linear-gradient(to bottom,white,lime);}
.blockSeatLabel{background-color:lightgray;}
</style>
<body>

<div id='userDialog' style='width:300px;height:300px;position:absolute;left:50%;transform:translateX(-50%);z-index:2;background-color:white;'>
<div style='width:120px;height:120px;position:absolute;left:50%;top:10px;transform:translateX(-50%);'><img src='https://advancedfunctions.co/windsorLogoSvg.svg'/>
</div>
<input id='emailInput' style='padding:5px;margin-top:20px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:25px Calibri;border-top-style:none;border-right-style:none;border-left-style:none;outline:none;width:90%' placeholder='Enter email address'>
</input>
<div style='position:absolute;left:50%;bottom:5%;transform:translateX(-50%);font:50px Calibri;color:LightSkyBlue;cursor:pointer;' onclick='generateSeats()'>&rarr;</div>
</div>

<div id='warning' style='display:none;width:300px;height:100%;position:fixed;left:50%;transform:translateX(-50%);z-index:2;background-image:linear-gradient(to bottom,white,rgb(255,255,255,0.8));'>
<div style='width:100%;position:absolute;left:50%;top:100px;transform:translate(-50%,-50%);font:30px Calibri;margin:10px;text-align:center;color:LightSkyBlue;'>Update this change?
</div>
<div style='position:absolute;width:100%;height:50px;top:200px;font:80px Calibri;color:LightSkyBlue;cursor:pointer;' >
<span style='position:absolute;bottom:0px;left:15%;transform:translateX(-50%);font:80px Calibri;color:LightSkyBlue;cursor:pointer;' onclick='removeWarning()'>&times;</span>
<span style='position:absolute;bottom:0px;right:15%;transform:translate(50%);font:80px Calibri;color:LightSkyBlue;cursor:pointer;'  onclick='updateSeating()'>&rarr;</span>
</div>
</div>


<div id='loading' style='display:none;width:300px;height:100%;position:fixed;left:50%;transform:translateX(-50%);z-index:2;background-image:linear-gradient(to bottom,white,rgb(255,255,255,0.8));'>
<div style='width:100%;position:absolute;left:50%;top:100px;transform:translate(-50%,-50%);font:30px Calibri;margin:10px;text-align:center;color:LightSkyBlue;'>l o a d i n g . . .
</div>
</div>

<div style='width:300px;height:300px;position:absolute;left:50%;transform:translateX(-50%);'>
<div style='font:15px calibri;background-color:LightCyan;position:absolute;top:0%;text-align:center;padding-top:10px;padding-bottom:10px;width:100%;left:50%;transform:translateX(-50%);border-radius:5px;'>School building</div>

<div style='font:15px calibri;background-color:LightSkyBlue;position:absolute;top:50px;right:50%;transform:translateX(50%);text-align:center;padding:20px;padding-left:40px;padding-right:40px;border-radius:5px;'>Stage</div>

<div onclick='setBlock(&#39;I&#39;)' id='blockI' style='background-image:linear-gradient(to bottom,lightgray,white);width:60px;height:30%;margin:10px;position:absolute;top:120px;left:5px;transform:rotate(10deg);border-radius:5px;font:30px calibri;'><div style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);'>I</div></div>

<div onclick='setBlock(&#39;II&#39;)' id='blockII'  style='background-image:linear-gradient(to bottom,lightgray,white);width:60px;height:30%;margin:10px;position:absolute;top:140px;left:75px;border-radius:5px;font:30px calibri;'><div style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);'>II</div></div>
<div onclick='setBlock(&#39;III&#39;)' id='blockIII' style='background-image:linear-gradient(to bottom,lightgray,white);width:60px;height:30%;margin:10px;position:absolute;top:140px;right:75px;border-radius:5px;font:30px calibri;'><div style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);'>III</div></div>

<div onclick='setBlock(&#39;IV&#39;)' id='blockIV' style='background-image:linear-gradient(to bottom,lightgray,white);width:60px;height:30%;margin:10px;position:absolute;top:120px;right:5px;transform:rotate(-10deg);border-radius:5px;font:30px calibri;'><div style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);'>IV</div></div>

<div style='font:15px calibri;background-color:LightCyan;position:absolute;bottom:0%;right:50%;transform:translateX(50%);text-align:center;padding-top:10px;padding-bottom:10px;width:100%;border-radius:5px;'>School Field</div>
</div>
<div id='seat' >
</body>

<script>
var block='I';
var seatLetterAsNumber=0;
var seatNumber=0;
var id='mok@toe.com';
var googleSheets="https://script.google.com/macros/s/AKfycbyCPhSkKUPXK3k-K0ffZPA55yBpQTsajo9yCL16nD9WTv4RH04/exec";

function setSeat(letterAsNumber,number){
seatLetterAsNumber=letterAsNumber;
seatNumber=number;
if(letterAsNumber!=0&&seatNumber!=0){
displayWarning();}
}

function setBlock(blockToSet){
block=blockToSet;
document.getElementById('blockI').style.backgroundImage="linear-gradient(to bottom,lightgray,white)";
document.getElementById('blockII').style.backgroundImage="linear-gradient(to bottom,lightgray,white)";
document.getElementById('blockIII').style.backgroundImage="linear-gradient(to bottom,lightgray,white)";
document.getElementById('blockIV').style.backgroundImage="linear-gradient(to bottom,lightgray,white)";
if(block=='I'){
document.getElementById('seatsToSelect').style.backgroundImage="linear-gradient(to bottom,lightgray,cyan)";
document.getElementById('blockI').style.backgroundImage="linear-gradient(to bottom,lightgray,cyan)";
}
if(block=='II'){
document.getElementById('seatsToSelect').style.backgroundImage="linear-gradient(to bottom,lightgray,orange)";
document.getElementById('blockII').style.backgroundImage="linear-gradient(to bottom,lightgray,orange)";
}
if(block=='III'){
document.getElementById('seatsToSelect').style.backgroundImage="linear-gradient(to bottom,lightgray,coral)";
document.getElementById('blockIII').style.backgroundImage="linear-gradient(to bottom,lightgray,coral)";
}
if(block=='IV'){
document.getElementById('seatsToSelect').style.backgroundImage="linear-gradient(to bottom,lightgray,yellow)";
document.getElementById('blockIV').style.backgroundImage="linear-gradient(to bottom,lightgray,yellow)";
}
document.getElementById('loading').style.display='block';
viewSeating();
}

function generateSeats(){
id=document.getElementById('emailInput').value;
if(id.length<5){
document.getElementById('emailInput').style.backgroundColor='tomato';
}
else{
document.getElementById('userDialog').style.display='none';
var seatString="<div id='seatsToSelect' style='width:300px;position:absolute;top:350px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto'>";

for(var y=1;y<17;y++){
for(var x=0;x<11;x++){

if(x==0&&y>0){seatString=seatString+"<div class='blockSeatLabel' style='padding-top:10px;padding-bottom:10px;margin:2px;border-radius:3px;text-align:center;'>&#"+(64+y)+"</div>";}else{
if(x==0&&y==0){
seatString=seatString+"<div style='padding-top:10px;padding-bottom:10px;margin:2px;border-radius:3px'> </div>";}else{
seatString=seatString+"<div id='"+y+"-"+x+"' onclick=setSeat(&#39;"+y+"&#39,&#39;"+x+"&#39) class='blockSeat' style='padding-top:10px;padding-bottom:10px;margin:2px;border-radius:3px;color:rgb(120,120,120,0.5);text-align:center;'>"+x+"</div>";}
}}


}
seatString=seatString+"</div>";
document.getElementById('seat').innerHTML=seatString;
}
setBlock('I');
}

function updateSeating(){
removeWarning();
document.getElementById('loading').style.display='block';
sendDataToGoogleSheets(['updateSeating',id,block,seatLetterAsNumber,seatNumber],googleSheets);}

function viewSeating(){
sendDataToGoogleSheets(['viewSeating',id,block,seatLetterAsNumber,seatNumber],googleSheets);}

function receiveDataFromGoogleSheets(){
if(getDataFromGoogleSheetsAsArray()[0]=='seatingArrangement'){}
block=getDataFromGoogleSheetsAsArray()[1];
var seat=getDataFromGoogleSheetsAsArray()[2].split('s');

var seatCount=0;
for(var y=1;y<17;y++){
for(var x=1;x<11;x++){

if(seat[seatCount]==0){document.getElementById(y+'-'+x).style.backgroundImage="linear-gradient(to bottom,white,white)";}
if(seat[seatCount]==1){document.getElementById(y+'-'+x).style.backgroundImage="linear-gradient(to bottom,white,tomato)";}
if(seat[seatCount]==2){document.getElementById(y+'-'+x).style.backgroundImage="linear-gradient(to bottom,white,lime)";}
seatCount++;
}
}
removeWarning();
document.getElementById('loading').style.display='none';
}

function displayWarning(){
document.getElementById('warning').style.display='block';
}
function removeWarning(){
document.getElementById('warning').style.display='none';
}

</script>
</html>