JavaScript Parking Lot
March 3, 2007
In this bit of JavaScript I had to make a parking lot tracking program that does the following things:- Has a clockin and clockout button which keeps the user from using the lot unless they have clocked in.
- Keeps track of each time the button is clicked to take the space and records that time.
- Calculates the total time and charges the correct amount for time in the spot.
- Works with a 25 space rectangular grid.
- Give the spaces names instead of numbers. I suggest a series of names like able, baker, charlie, delta; or amber, blue, cyan, dusk, emerald; but you use whatever works for you.
- Use a two-dimensional array to store parking space names, and to read the names into the buttons on a form.
- Place the name of each space in its proper location, above an “open/taken” button.
- When you click to admit a car, prompt for a driver’s last name. Store the name in an array, and list the drivers’ names in alphabetical order on your form. Don’t sort the array permanently.
- Add a search function: when a driver goes to check out, find the name of the space where the car is parked.
Here is an example of this JavaScript in action.
Here is the JavaScript code I used:
<!–
var clockInTime=0, sName, eTime, aOwed, tCol=0, totalCollected=0, endTime1=0, sumCol=0;
function init()
{
document.forms[0].tCol.value=dollars(tCol);
document.forms[0].clockOut.disabled = true;
document.forms[0].clockIn.disabled = false;
document.forms[0].alpha.disabled = true;
document.forms[0].bravo.disabled = true;
document.forms[0].charlie.disabled = true;
document.forms[0].delta.disabled = true;
document.forms[0].echo.disabled = true;
document.forms[0].foxtrot.disabled = true;
document.forms[0].golf.disabled = true;
document.forms[0].hotel.disabled = true;
document.forms[0].india.disabled = true;
document.forms[0].juliet.disabled = true;
document.forms[0].kilo.disabled = true;
document.forms[0].lima.disabled = true;
document.forms[0].mike.disabled = true;
document.forms[0].november.disabled = true;
document.forms[0].oscar.disabled = true;
document.forms[0].papa.disabled = true;
document.forms[0].quebec.disabled = true;
document.forms[0].romeo.disabled = true;
document.forms[0].sierra.disabled = true;
document.forms[0].tango.disabled = true;
document.forms[0].uniform.disabled = true;
document.forms[0].victor.disabled = true;
document.forms[0].whiskey.disabled = true;
document.forms[0].xray.disabled = true;
document.forms[0].yankee.disabled = true;
document.forms[0].lotStatus.value = “Closed”;
document.forms[0].lotStatus.style.color = “red”;
document.forms[0].sName.value=”";
document.forms[0].eTime.value=”";
document.forms[0].aOwed.value=”";
document.forms[0].dName.value=”";
}
function clockingIn()
{
document.forms[0].clockOut.disabled = false;
document.forms[0].clockIn.disabled = true;
document.forms[0].alpha.disabled = false;
document.forms[0].bravo.disabled = false;
document.forms[0].charlie.disabled = false;
document.forms[0].delta.disabled = false;
document.forms[0].echo.disabled = false;
document.forms[0].foxtrot.disabled = false;
document.forms[0].golf.disabled = false;
document.forms[0].hotel.disabled = false;
document.forms[0].india.disabled = false;
document.forms[0].juliet.disabled = false;
document.forms[0].kilo.disabled = false;
document.forms[0].lima.disabled = false;
document.forms[0].mike.disabled = false;
document.forms[0].november.disabled = false;
document.forms[0].oscar.disabled = false;
document.forms[0].papa.disabled = false;
document.forms[0].quebec.disabled = false;
document.forms[0].romeo.disabled = false;
document.forms[0].sierra.disabled = false;
document.forms[0].tango.disabled = false;
document.forms[0].uniform.disabled = false;
document.forms[0].victor.disabled = false;
document.forms[0].whiskey.disabled = false;
document.forms[0].xray.disabled = false;
document.forms[0].yankee.disabled = false;
document.forms[0].lotStatus.value = “Open”;
document.forms[0].lotStatus.style.color = “green”;
clockInTime=new Date();
}
function clockingOut()
{
document.forms[0].clockOut.disabled = true;
document.forms[0].clockIn.disabled = false;
document.forms[0].alpha.disabled = true;
document.forms[0].bravo.disabled = true;
document.forms[0].charlie.disabled = true;
document.forms[0].delta.disabled = true;
document.forms[0].echo.disabled = true;
document.forms[0].foxtrot.disabled = true;
document.forms[0].golf.disabled = true;
document.forms[0].hotel.disabled = true;
document.forms[0].india.disabled = true;
document.forms[0].juliet.disabled = true;
document.forms[0].kilo.disabled = true;
document.forms[0].lima.disabled = true;
document.forms[0].mike.disabled = true;
document.forms[0].november.disabled = true;
document.forms[0].oscar.disabled = true;
document.forms[0].papa.disabled = true;
document.forms[0].quebec.disabled = true;
document.forms[0].romeo.disabled = true;
document.forms[0].sierra.disabled = true;
document.forms[0].tango.disabled = true;
document.forms[0].uniform.disabled = true;
document.forms[0].victor.disabled = true;
document.forms[0].whiskey.disabled = true;
document.forms[0].xray.disabled = true;
document.forms[0].yankee.disabled = true;
document.forms[0].lotStatus.value = “Closed”;
document.forms[0].lotStatus.style.color = “red”;
}
function buttonSearch (x,button)
{
var driversName=occupants[x];
for (i in rows)
{
for (j in rows)
{
if (driversName==tenants[i][j] && driversName!=”)
{
alert(’”‘+tenants[i][j]+’” is parked in space “‘+spaceNames[i][j]+’”.’);
}
}
}
}
function readSpace(i,j,button)
{
if (spaceStatus[i][j]==”open”)
{
document.getElementById(’spaceStatus’+i+”+j).value=”taken”;
document.getElementById(’spaceStatus’+i+”+j).style.color=”red”;
tenants[i][j]=prompt(”What is your Last Name?”, “Last Name”);
timesIn[i][j]=new Date();
spaceStatus[i][j]=”taken”;
arrangeNames(tenants,occupants);
}
else if (spaceStatus[i][j]==”taken”)
{
var totalTime=0;
timesOut[i][j]=new Date();
var totalTime=parseInt(timesOut[i][j] - timesIn[i][j]);
sumCol += owedAmount(totalTime);
document.getElementById(’spaceStatus’+i+”+j).value=”open”;
document.getElementById(’spaceStatus’+i+”+j).style.color=”green”;
document.forms[0].sName.value=spaceNames[i][j];
document.forms[0].dName.value=tenants[i][j];
document.forms[0].eTime.value=changeTime(totalTime);
document.forms[0].aOwed.value=dollars(owedAmount(totalTime));
document.forms[0].tCol.value=dollars(sumCol);
spaceStatus[i][j]=”open”;
for (var x=0; x<25; x++)
{
if (occupants[x]==tenants[i][j])
{
tenants[i][j]=”;
occupants[x]=”;
document.getElementById(’searchButton’+x).value=”;
arrangeNames(tenants,occupants);
}
}
}
}
function arrangeNames(tenants,occupants)
{
var counter=0, z=0;
var sortingNames=new Array();
for (var x=0; x<25; x++)
{
sortingNames[x]=new Array();
sortingNames[x]=”;
}
for (i in rows)
{
for (j in rows)
{
sortingNames[z]=tenants[i][j];
counter++;
z=counter;
}
}
sortingNames.sort();
for (var x=0; x<25; x++)
{
occupants[x]=sortingNames[x];
sortingNames[x]=”;
document.getElementById(’searchButton’+x).value=occupants[x];
}
}
function dollars(n)
{
n=eval(n);
n=Math.round(n*100)/100;
return (n == Math.round(n)) ? n += “.00″ : (n*10 == Math.round(n*10)) ? n +=”0″ : n;
}
function changeTime(totalTime)
{
var secs=0, mins=0, carry=0;
secs=Math.round(totalTime/1000);
if (secs < 10) { secs=”0″+secs; }
else if (secs >= 10 && secs <= 60) { mins=”0″; }
else if (secs > 60 && secs < 120) {
secs=Math.abs(secs - 60);
mins=(Math.round((totalTime/1000)/60));
if (mins < 10) { mins=”0″+mins; }
}
else if (secs >= 120) {
mins=(Math.round((totalTime/1000)/60));
secs=Math.abs(secs - (mins*60));
if (secs < 10) { secs=”0″+secs; }
}
var timeString = mins + “:” + secs ;
return timeString;
}
function owedAmount(totalTime)
{
var cTime=0, owed=0;
cTime=Math.ceil(totalTime/1000);
owed=((Math.floor(cTime/15)+1)*0.25);
return owed;
}
var spaceNames=
[
['alpha', 'bravo', 'charlie', 'delta', 'echo'],
['foxtrot', 'golf', 'hotel', 'india', 'juliet'],
['kilo', 'lima', 'mike', 'november', 'oscar'],
['papa', 'quebec', 'romeo', 'sierra', 'tango'],
['uniform', 'victor', 'whiskey', 'xray', 'yankee']
];
var rows= [0,1,2,3,4];
var spaceStatus=new Array();
var timesIn=new Array();
var timesOut=new Array();
var tenants=new Array();
var occupants=new Array();
for (var x=0; x<25; x++)
{
occupants[x]=”;
}
for (i in rows)
{
spaceStatus[i]=new Array();
timesIn[i]=new Array();
timesOut[i]=new Array();
tenants[i]=new Array();
}
for (i in rows)
{
for (j in rows)
{
spaceStatus[i][j]=’open’;
timesIn[i][j]=0;
timesOut[i][j]=0;
tenants[i][j]=”;
}
}
document.writeln(’<table border=”1″>’);
document.writeln(’<tr>’);
document.writeln(’<td style=”text-align:right;”>’);
//Clock In and Clock Out buttons and the display of lot status
document.writeln(’<input type=”button” id=”clockIn” name=”clockIn” value=”Clock In”‘+
‘ style=”width:21mm;” onclick=”clockingIn()” />’);
document.writeln(’<input type=”button” id=”clockOut” name=”clockOut” value=”Clock Out”‘+
‘ style=”width:21mm;” onclick=”clockingOut()” disabled=”disabled” />’);
document.writeln(’ Parking Lot:’);
document.write(’<input size=”10″ name=”lotStatus” value=”Closed” style=”text-align: ‘+
‘center; color: red;” />’);
//Still need to fix ***********************************************************************
//Present tenants list of buttons
document.writeln(’<td rowspan=”3″ style=”vertical-align:top; ‘+
‘text-align:center; background-color: lightsteelblue;”>’);
document.writeln(’<div style=”text-align:center; margin-top:0; font-weight: bold; “>’+
‘Present Tenants:</div>’);
//Create buttons with names of each driver present
for (var x=0; x<25; x++)
{
document.write(’<input style=”width:45mm; text-align:center;” ‘+
‘type=”button” id=”searchButton’+x+’” name=”searchButton’+x+’”‘+
‘value=”‘+occupants[x]+’” onclick=”buttonSearch(’+x+’,this)” />’);
document.write(’<br />’);
}
document.writeln(’</td>’);
//End of Present tenants buttons
document.writeln(’</tr>’);
//Beginning of creating space name buttons and status areas
document.writeln(’<tr style=”background-color: beige;”>’);
document.writeln(’<td>’);
document.writeln(’<table border=”1″ cellpadding=”4″>’);
//Space buttons and names of each space
for (i in rows)
{
document.writeln(’<tr>’);
for (j in rows)
{
document.write(’<td>’);
document.write(’<input style=”width:25mm; height:10mm; text-align:center;” ‘+
‘type=”button” disabled=”disabled” id=”‘+spaceNames[i][j]+’” ‘+
‘name=”‘+spaceNames[i][j]+’” value=”‘+spaceNames[i][j]+’” ‘+
‘onclick=”readSpace(’+i+’,'+j+’,this)” />’);
//’onclick=”readSpace(spaceNames,spaceStatus,tenants,timesIn,timesOut,’+
//i+’,'+j+’,this)” />’);
document.write(’<br />’);
//Status of each space
document.write(’<input style=”width:24mm; text-align:center; color:green;” ‘+
‘id=”spaceStatus’+i+”+j+’” name=”spaceStatus’+i+”+j+’” ‘+
‘value=”‘+spaceStatus[i][j]+’” ‘+
‘ />’);
document.write(’</td>’);
}
document.writeln(’</tr>’);
}
document.writeln(’</table>’);
document.writeln(’</td>’);
document.writeln(’</tr>’);
//End of creating all the space buttons and status areas
//Feed back output areas
document.writeln(’<tr>’);
document.writeln(’<td style=”text-align:right;”>’);
document.writeln(’Parking Space Name: <input name=”sName” id=”sName” size=”20″ value=”"‘+
’style=”background-color: #ffff88; text-align: right; ” /><br />’+
‘Driver\’s Last Name: <input name=”dName” id=”dName” size=”20″ value=”"‘+
’style=”background-color: #ffff88; text-align: right; ” /><br />’+
‘Elapsed Time (hh:mm): <input name=”eTime” id=”eTime” size=”20″ value=”"‘+
’style=”background-color: #ffff88; text-align: right; ” /><br />’+
‘Amount Owed ($): <input name=”aOwed” id=”aOwed” size=”20″ value=”"‘+
’style=”background-color: #ffff88; text-align: right; ” /><br />’+
‘Total Collected ($): <input name=”tCol” id=”tCol” size=”20″ value=”"‘+
’style=”background-color: #ffff88; text-align: right; ” />’);
document.writeln(’</td>’);
document.writeln(’</tr>’);
document.writeln(’</table>’);
// –>
</script>
Comments
Got something to say?
