-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'refs/remotes/origin/master' into Polishing
- Loading branch information
Showing
9 changed files
with
467 additions
and
184 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,144 @@ | ||
|
||
var dev1 = { | ||
id: 1, | ||
name:"George", | ||
hardware:"iphone", | ||
checkout: new Date("11/11/2016"), | ||
}; | ||
|
||
var dev2 = { | ||
id: 2, | ||
name:"Greyson", | ||
hardware:"iphone", | ||
checkout: new Date("8/10/2016"), | ||
}; | ||
|
||
var dev3 = { | ||
id: 3, | ||
name:"Linkin Park", | ||
hardware:"ipad", | ||
checkout: new Date("8/20/2016"), | ||
}; | ||
|
||
var dev4 = { | ||
id: 4, | ||
name:"Abercrombie", | ||
hardware:"ipad", | ||
checkout: new Date("11/3/2016"), | ||
}; | ||
|
||
var dev5 = { | ||
id: 5, | ||
name:"Hulk", | ||
hardware:"computerStick", | ||
checkout: new Date("4/28/2016"), | ||
}; | ||
|
||
var dev6 = { | ||
id: 6, | ||
name:"Captain America", | ||
hardware:"computerStick", | ||
checkout: new Date("10/22/2016"), | ||
}; | ||
|
||
var devices = [dev1, dev2, dev3, dev4, dev5, dev6]; | ||
//This array corresponds to the hardcoded inventory in request.js. The description has been replaced with a | ||
//checkout date, because I imagine that is more the kind of info to pull from the database for this page. | ||
//IDs, names and hardware are the same. | ||
|
||
populateDeviceList(); | ||
|
||
function populateDeviceList() | ||
//generates html and writes to 'devContainer' div in returnPage.html | ||
{ | ||
var devicesToList = getCheckedOutDevices(null); | ||
var htmlString=""; | ||
for (var i = 0; i < devicesToList.length; i++) { | ||
var id = devicesToList[i].id; | ||
var name = devicesToList[i].name; | ||
var hardware = devicesToList[i].hardware; | ||
var checkout = devicesToList[i].checkout; | ||
htmlString+="<div class=\"deviceContainer\"><div><div class=\"imgContainer\"><img src=\"../imgs/"; | ||
htmlString+=hardware; | ||
htmlString+=".png\" class=\"device\">"; | ||
htmlString+=name; | ||
htmlString+="</div><div class=\"deviceInfo\"><p>Checked out: " | ||
htmlString+=checkout.toISOString().substring(0,10); | ||
htmlString+="</p><p>You've had this device for "; | ||
var milliseconds=new Date().getTime()-checkout.getTime(); | ||
var seconds=Math.floor(milliseconds/1000); | ||
var minutes=Math.floor(seconds/60); | ||
var hours=Math.floor(minutes/60); | ||
var days=Math.floor(hours/24); | ||
var weeks=Math.floor(days/7); | ||
htmlString+= weeks+ " weeks!"; | ||
htmlString+="</div><div class=\"returnButtonContainer\"><button class=\"returnbutton\" id=\"button "; | ||
htmlString+=(id); | ||
htmlString+="\" type=\"button\">Return "; | ||
htmlString+=name; | ||
htmlString+="</button></div></p></div></div><br>"; | ||
} | ||
document.getElementById("devContainer").innerHTML = htmlString; | ||
|
||
var returnbuttons = document.getElementsByClassName('returnbutton'); | ||
for (var i = 0; i < returnbuttons.length; i++) { | ||
returnbuttons[i].addEventListener('click',returnDevice); | ||
} | ||
} | ||
|
||
function returnDevice() | ||
{ | ||
var id = this.getAttribute('id'); | ||
id = parseInt(id.replace(/[^0-9\.]/g,''), 10); | ||
if(isUnavailable(id)) | ||
{ | ||
var unavailable = getUnavailableIDs(); | ||
unavailable.splice(unavailable.indexOf(id),1); | ||
localStorage.setItem('unavailable',JSON.stringify(unavailable)); | ||
} | ||
else | ||
alert("That's already marked available. Something may have gone wrong."); | ||
populateDeviceList(); | ||
} | ||
|
||
function getCheckedOutDevices(user) | ||
//Eventually this will return information about all devices checked out by *user* | ||
//Right now there is only one user, and the function just returns IDs of all checked out devicess. | ||
{ | ||
var unavailable = getUnavailableIDs(); | ||
var checkedDevices = new Array(); | ||
for (var i = 0; i < unavailable.length; i++) { | ||
for (var j = 0; j < devices.length; j++) { | ||
if(unavailable[i] == devices[j].id) | ||
{ | ||
checkedDevices.push(devices[j]); | ||
break; | ||
} | ||
} | ||
} | ||
return checkedDevices; | ||
} | ||
|
||
function isUnavailable(id){ | ||
var unavailable = getUnavailableIDs(); | ||
if(unavailable.length == 0) | ||
return 0; | ||
else{ | ||
for(var i = 0; i < unavailable.length; i++){ | ||
if(unavailable[i] == (id)) | ||
return 1; | ||
} | ||
} | ||
return 0; | ||
} | ||
function getUnavailableIDs() | ||
//Identical to the function in request.js: just reads the 'unavailable' array in local storage. | ||
//Will need to be changed (or may be obsolete) when we get a database | ||
{ | ||
var unavailable = new Array; | ||
var unavailable_str = localStorage.getItem('unavailable'); | ||
if(unavailable_str !== ""){ | ||
unavailable = JSON.parse(unavailable_str); | ||
} | ||
return unavailable; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,96 +1,81 @@ | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | ||
<meta name="description" content=""> | ||
<meta name="author" content=""> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | ||
<meta name="description" content=""> | ||
<meta name="author" content=""> | ||
|
||
<title>Synchrony Financial</title> | ||
<title>Synchrony Financial</title> | ||
|
||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | ||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | ||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | ||
<link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css"> | ||
<style> | ||
div.menuOption{ | ||
display: inline-block; | ||
width: 250px; | ||
height: 150px; | ||
vertical-align: top; | ||
border: solid; | ||
padding: 10px; | ||
margin: 10px; | ||
border-radius: 10px; | ||
background-color: #E9EAEB; | ||
} | ||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | ||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | ||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | ||
<link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css"> | ||
<style> | ||
div.menuOption{ | ||
display: inline-block; | ||
width: 250px; | ||
height: 150px; | ||
vertical-align: top; | ||
border: solid; | ||
padding: 10px; | ||
margin: 10px; | ||
border-radius: 10px; | ||
background-color: #E9EAEB; | ||
} | ||
|
||
div.menuBox{ | ||
text-align: center; | ||
position: absolute; | ||
top: 50%; | ||
left: 50%; | ||
margin-top: -160px; | ||
margin-left: -260px; | ||
} | ||
</style> | ||
</head> | ||
div.menuBox{ | ||
text-align: center; | ||
position: absolute; | ||
top: 50%; | ||
left: 50%; | ||
margin-top: -160px; | ||
margin-left: -260px; | ||
} | ||
</style> | ||
|
||
</head> | ||
|
||
<body> | ||
<body> | ||
|
||
<nav class="navbar navbar-inverse navbar-fixed-top"> | ||
<div class="container-fluid"> | ||
<div class="navbar-header"> | ||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> | ||
<span class="sr-only">Toggle navigation</span> | ||
<span class="icon-bar"></span> | ||
<span class="icon-bar"></span> | ||
<span class="icon-bar"></span> | ||
</button> | ||
<a class="navbar-brand" href="#"><img src="../imgs/synchrony-financial-logo-dlpx.png" style = "height: 100%;"></a> | ||
</div> | ||
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false"> | ||
<ul class="nav navbar-nav navbar-right"> | ||
<li><a href="homePage.html">Home</a></li> | ||
<li><a href="requestPage.html">Request Device</a></li> | ||
<li><a href="#">Return Device</a></li> | ||
<li><a href="listingPage.html">Device Listing</a></li> | ||
<li><a href="shoppingCart.html">Shopping Cart</a></li> | ||
</ul> | ||
</div> | ||
</div> | ||
</nav> | ||
<nav class="navbar navbar-inverse navbar-fixed-top" id = "navbar"> | ||
|
||
</nav> | ||
|
||
<div class = "menuBox"> | ||
<div> | ||
<a class = "divlink" href = "requestPage.html"> | ||
<div class = "menuOption"> | ||
<h2>Request</h2> | ||
<p>Check out our selection of devices that YOU have the chance to check out!</p> | ||
</div> | ||
</a> | ||
<div class = "menuOption"> | ||
<h2>Return</h2> | ||
<p>All set with a device? No problem! You can return it here!</p> | ||
</div> | ||
<div class = "menuBox"> | ||
<div> | ||
<a class = "divlink" href = "requestPage.html"> | ||
<div class = "menuOption"> | ||
<h2>Request</h2> | ||
<p>Check out our selection of devices that YOU have the chance to check out!</p> | ||
</div> | ||
</a> | ||
<a class = "divlink" href="returnPage.html"> | ||
<div class = "menuOption"> | ||
<h2>Return</h2> | ||
<p>All set with a device? No problem! You can return it here!</p> | ||
</div> | ||
</a> | ||
</div> | ||
<div> | ||
<a class = "divlink" href = "listingPage.html"> | ||
<div class = "menuOption"> | ||
<h2>All Items</h2> | ||
<p>Just curious to see what devices we have to offer? You've come to the right place.</p> | ||
</div> | ||
<div> | ||
<a class = "divlink" href = "listingPage.html"> | ||
<div class = "menuOption"> | ||
<h2>All Items</h2> | ||
<p>Just curious to see what devices we have to offer? You've come to the right place.</p> | ||
</div> | ||
</a> | ||
<a class = "divlink" href="map.html"> | ||
<div class = "menuOption"> | ||
<h2>Map</h2> | ||
<p>Wanna see the distribution of devices throughout the world? Check it out! HERE!</p> | ||
</div> | ||
</a> | ||
</a> | ||
<a class = "divlink" href="map.html"> | ||
<div class = "menuOption"> | ||
<h2>Map</h2> | ||
<p>Wanna see the distribution of devices throughout the world? Check it out! HERE!</p> | ||
</div> | ||
</div> | ||
</a> | ||
</div> | ||
</div> | ||
|
||
<script src = "../javascript/navbar.js"></script> | ||
|
||
</body> | ||
</html> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.