Skip to content

John's branch #170

Merged
merged 6 commits into from
Apr 25, 2017
Merged

John's branch #170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a6f9217
temporary fix for some issues
jic13003 Apr 17, 2017
1b73688
Merge remote-tracking branch 'refs/remotes/origin/master' into John's…
clj13001 Apr 18, 2017
e7fbd94
fixed statistics page, added a chart and made map work, still a few bugs
jic13003 Apr 21, 2017
f5db535
Quick bug fixes
clj13001 Apr 21, 2017
7299dbf
completed final three charts, added filtering for other category
jic13003 Apr 24, 2017
eb035b1
Merge remote-tracking branch 'refs/remotes/origin/master' into John's…
clj13001 Apr 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions .classpath
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,6 @@
<attribute name="owner.project.facets" value="jst.web"/>
</attributes>
</classpathentry>
<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/jre1.8.0_121">
<attributes>
<attribute name="owner.project.facets" value="java"/>
</attributes>
</classpathentry>
<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER"/>
<classpathentry kind="output" path="target/classes"/>
</classpath>
4 changes: 2 additions & 2 deletions WebContent/html/javascript/listing.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function showAll(){
var part1 = "nhpup.popup('";
var part2 = "');"
for(var i = 0; i < devices.length; i++){
html += '<a class = "divlink" href = "#" onmouseover = "'+ part1 + 'Hardware type: ' + devices[i].hardware + '<br><br>' + 'Manufacturer: ' + devices[i].manufacturer + part2 + '"><div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + devices[i].hardware + '.png" onerror="this.src=\'../imgs/synchrony-financial-logo-dlpx_1.png\';" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><div class = "availableAnchor" id = "' + (i) + '"></div></div></div></a><br><br>';
html += '<a class = "divlink" href = "#" onmouseover = "'+ part1 + 'Hardware type: ' + devices[i].hardware + '<br><br>' + 'Manufacturer: ' + devices[i].manufacturer + '<br><br>' + 'Model: ' + devices[i].model + part2 + '"><div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + devices[i].hardware + '.png" onerror="this.src=\'../imgs/synchrony-financial-logo-dlpx_1.png\';" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><div class = "availableAnchor" id = "' + (i) + '"></div></div></div></a><br><br>';
}
document.getElementById('devContainer').innerHTML = html;
var anchors = document.getElementsByClassName('availableAnchor');
Expand Down Expand Up @@ -67,7 +67,7 @@ function show(deviceArray){
var part2 = "');"
for (var i = 0; i < deviceArray.length; i++)
{
html += '<div class = "deviceContainer"><a class = "divlink" href = "#" onmouseover = "'+ part1 + 'Hardware type: ' + deviceArray[i].hardware + '<br><br>' + 'Manufacturer: ' + deviceArray[i].manufacturer + part2 + '"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + deviceArray[i].hardware + '.png" onerror="this.src=\'../imgs/synchrony-financial-logo-dlpx_1.png\';" class = "device">' + deviceArray[i].name + '</div><div class = "deviceDescp"><p>' + deviceArray[i].description + '</p><div class = "availableAnchor" id = "' + (deviceArray[i].id) + '"></div></div></a></div><br><br>'
html += '<div onmouseover = "'+ part1 + 'Hardware type: ' + deviceArray[i].hardware + '<br><br>' + 'Manufacturer: ' + deviceArray[i].manufacturer + '<br><br>' + 'Model: ' + deviceArray[i].model + part2 + '" class = "deviceContainer"><a class = "divlink" href = "#"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + deviceArray[i].hardware + '.png" onerror="this.src=\'../imgs/synchrony-financial-logo-dlpx_1.png\';" class = "device">' + deviceArray[i].name + '</div><div class = "deviceDescp"><p>' + deviceArray[i].description + '</p><div class = "availableAnchor" id = "' + (deviceArray[i].id) + '"></div></div></a></div><br><br>'
}
document.getElementById('devContainer').innerHTML = html;
var anchors = document.getElementsByClassName('availableAnchor');
Expand Down
22 changes: 21 additions & 1 deletion WebContent/html/javascript/request.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ for(var a = 0; a < hardwareOptions.length; a++){
for(var a = 0; a < softwareOptions.length; a++){
softwareOptions[a].addEventListener('click', refresh);
}
showAll();
// searchbar listener
var searchbar = document.getElementsByName('searchBar');
searchbar[0].onkeyup = refresh;
Expand All @@ -37,14 +38,33 @@ show(devices);
function refresh() {
show(fuzzyFilter(filter(devices)));
}
function showAll(){
var html = '';
var part1 = "nhpup.popup('";
var part2 = "');"
for(var i = 0; i < devices.length; i++){
html += '<a class = "divlink" href = "#" onmouseover = "'+ part1 + 'Hardware type: ' + devices[i].hardware + '<br><br>' + 'Manufacturer: ' + devices[i].manufacturer + '<br><br>' + 'Model: ' + devices[i].model + part2 + '"><div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + devices[i].hardware + '.png" onerror="this.src=\'../imgs/synchrony-financial-logo-dlpx_1.png\';" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><div class = "availableAnchor" id = "' + (i) + '"></div></div></div></a><br><br>';
}
if(html.localeCompare("")==0)
html += "<p>There are no devices with the search criteria: " + this.textContent + "</p>";
document.getElementById('devContainer').innerHTML = html;
var requestbuttons = document.getElementsByClassName('requestbutton');
for(var i = 0; i < requestbuttons.length; i++) {
requestbuttons[i].addEventListener('click',addToCart);
}
}
//when an option is selected, show a new list of devices based on what the user asked for
function show(deviceArray){
// var type = this.getAttribute('data-type');
var html = '';
var part1 = "nhpup.popup('";
var part2 = "');"
for (var i = 0; i < deviceArray.length; i++) {
html += '<a class = "divlink" href = "#" onmouseover = "'+ part1 + 'Hardware type: ' + deviceArray[i].hardware + '<br><br>' + 'Manufacturer: ' + deviceArray[i].manufacturer + part2 + '"><div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + deviceArray[i].hardware + '.png" onerror="this.src=\'../imgs/synchrony logo.png\';" class = "device">' + deviceArray[i].name + '</div><div class = "deviceDescp"><p>' + deviceArray[i].description + '</p><button class = "requestbutton" id = "button' + (deviceArray[i].id) + '" type="button">Order device</button></div></div></a><br><br>'
html += '<a class = "divlink" href = "#" onmouseover = "' + part1 + 'Hardware type: ' + deviceArray[i].hardware + '<br><br>' + 'Manufacturer: ' + deviceArray[i].manufacturer + '<br><br>' + 'Model: ' + deviceArray[i].model + part2 + '"><div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + deviceArray[i].hardware + '.png" onerror="this.src=\'../imgs/synchrony-financial-logo-dlpx_1.png\';" class = "device">' + deviceArray[i].name + '</div><div class = "deviceDescp"><p>' + deviceArray[i].description + '</p><button class = "requestbutton" id = "button' + (deviceArray[i].id) + '" type="button">Order device</button></div></div></a><br><br>'
}
if(html.localeCompare("")==0)
Expand Down
253 changes: 227 additions & 26 deletions WebContent/html/javascript/statistics.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,34 @@
<title>Insert title here</title>
</head>
<body>
<%
<%
//statistics for status
Statistics[] genStatistics = StatisticsQueries.getStatistics();
String statString = Statistics.arrayToString(genStatistics);
//location queries for map
Statistics[] genLocations = StatisticsQueries.getLocations();
String locString = Statistics.arrayToString(genLocations);
//device type queries
Statistics[] genTypes = StatisticsQueries.getDeviceTypes();
String typeString = Statistics.arrayToString(genTypes);
// device manufacturer queries
Statistics[] genManu = StatisticsQueries.getDeviceManu();
String manuString = Statistics.arrayToString(genManu);
%>
<script type=text/javascript
src="https://www.gstatic.com/charts/loader.js"></script>
<script>
var statistics = makeStatistics();
displayData();
var statistics = makeStatistics(); //initialize statistics
var deviceTypes = makeTypes(); //initialize types
var deviceManus = makeManu(); //initialize manufaturers
displayData(); //run the function
function displayData() {
var html = "";
var htmlend = "";
var totalDevices = 0;
/*
var availableDevices=0;
var loanDevices=0;
var lostDevices=0;
Expand All @@ -28,35 +44,28 @@ function displayData() {
var unavailDevices=0;
var returnDevices=0;
var brokenDevices=0;
*/
if (statistics.status != "" && statistics.count != ""){
for (var i = 0; i<statistics.length; i++){
totalDevices = totalDevices + statistics[i].count;
}
//data for info section
availableDevices = statistics[0].count;
loanDevices = statistics[1].count;
//lostDevices = statistics[2].count;
//returnDevices = statistics[6].count;
//umbrella divisions
//pendingDevices = statistics[0].count;
unavailDevices = statistics[2].count;
htmlend += '<br>' + statistics[i].status + ': ' + statistics[i].count;
}
html += '<div class = "info-container">Total Devices: '+ totalDevices +
'<br>Available Devices: ' + availableDevices +
'<br>Loaned Devices: ' + loanDevices +
'<br>Returning Devices: ' + returnDevices +
'<br>Lost Devices: ' + lostDevices +
'</div>'
html += '<div class = "info-container">Total Devices: '+ totalDevices;
html += htmlend + '</div>';
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawPie);
google.charts.setOnLoadCallback(drawCol);
google.charts.setOnLoadCallback(drawTypesBar);
google.charts.setOnLoadCallback(drawManuBar);
google.charts.setOnLoadCallback(drawTypesPie);
google.charts.setOnLoadCallback(drawManuPie);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
Expand All @@ -65,12 +74,12 @@ function displayData() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Status');
data.addColumn('number', 'Count');
data.addRows([['Available Devices', availableDevices],['Unavailable Devices',unavailDevices],
['Loaned Devices',loanDevices]]);
data.addColumn('number', 'Count');
for (var i = 0; i<statistics.length; i++){
data.addRow([statistics[i].status, statistics[i].count]); //fixed this to match the new database
}
// Set chart options
var options = {'title':'Chart of Devices',
var options = {'title':'Percentage Chart of Device Statuses',
'width':600,
'height':400,
'backgroundColor':'#E9EAEB'};
Expand All @@ -80,7 +89,7 @@ function displayData() {
chart.draw(data, options);
}
function drawCol() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Status');
Expand Down Expand Up @@ -108,13 +117,205 @@ function displayData() {
var chart = new google.visualization.ColumnChart(document.getElementById('colchart'));
chart.draw(view, options);
}
function drawTypesBar() {
// Create the data table.
var data = new google.visualization.DataTable();
var otherDevices = 0;
data.addColumn('string', 'Device Type');
data.addColumn('number', 'Count');
var mainTypeArray = ['Computer','Smartphone','Tablet','Camera','Storage Device'];
for (var i = 0; i<deviceTypes.length; i++){
if (mainTypeArray.indexOf(deviceTypes[i].type) < 0) {
otherDevices += deviceTypes[i].count;
}
else {
data.addRow([deviceTypes[i].type, deviceTypes[i].count]); //fixed this to match the new database
}
}
data.addRow(["Other",otherDevices]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }
]);
var options = {'title':'Devices in terms of Type',
'width':600,
'height':400,
'bar': {groupWidth: "75%"},
'legend': { position: "none" },
'backgroundColor':'#E9EAEB'};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.BarChart(document.getElementById('bartypechart'));
chart.draw(view, options);
}
function drawManuBar() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Manufacturer');
data.addColumn('number', 'Count');
var otherDevices = 0;
var mainManuArray = ['Apple','Amazon','Microsoft','Samsung','Intel'];
for (var i = 0; i<deviceManus.length; i++){
if (mainManuArray.indexOf(deviceManus[i].manu) < 0) {
otherDevices += deviceManus[i].count;
}
else {
data.addRow([deviceManus[i].manu, deviceManus[i].count]); //fixed this to match the new database
}
}
data.addRow(["Other",otherDevices]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }
]);
var options = {'title':'Devices in terms of Manufacturer',
'width':600,
'height':400,
'bar': {groupWidth: "75%"},
'legend': { position: "none" },
'backgroundColor':'#E9EAEB'};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.BarChart(document.getElementById('barmanuchart'));
chart.draw(view, options);
}
function drawTypesPie() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Hardware Type');
data.addColumn('number', 'Count');
var otherDevices = 0;
var mainTypeArray = ['Computer','Smartphone','Tablet','Camera','Storage Device'];
for (var i = 0; i<deviceTypes.length; i++){
if (mainTypeArray.indexOf(deviceTypes[i].type) < 0) {
otherDevices += deviceTypes[i].count;
}
else {
data.addRow([deviceTypes[i].type, deviceTypes[i].count]); //fixed this to match the new database
}
}
data.addRow(["Other",otherDevices]);
// Set chart options
var options = {'title':'Percentage Chart of Hardware Types',
'width':600,
'height':400,
'backgroundColor':'#E9EAEB'};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('pietypechart'));
chart.draw(data, options);
}
function drawManuPie() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Manufacturer');
data.addColumn('number', 'Count');
var otherDevices = 0;
var mainManuArray = ['Apple','Amazon','Microsoft','Samsung','Intel'];
for (var i = 0; i<deviceManus.length; i++){
if (mainManuArray.indexOf(deviceManus[i].manu) < 0) {
otherDevices += deviceManus[i].count;
}
else {
data.addRow([deviceManus[i].manu, deviceManus[i].count]); //fixed this to match the new database
}
}
data.addRow(["Other",otherDevices]);
// Set chart options
var options = {'title':'Percentage Chart of Manufacturers',
'width':600,
'height':400,
'backgroundColor':'#E9EAEB'};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('piemanuchart'));
chart.draw(data, options);
}
document.getElementById('stats').innerHTML = html;
}
}
//map
function initMap() {
var locationArray = makeLocations();
var locations=[];
for (var i = 0; i<locationArray.length; i++){
var locObject = {lat: parseFloat(locationArray[i].lat),lng: parseFloat(locationArray[i].lng)};
locations.push(locObject);
}
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 39.023617, lng: -94.69357}
});
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
/* hardcoded
var locations = [
{lat: 37.774929, lng: -122.419416}, //San Francisco, CA
{lat: 14.599512, lng: 120.984219}, //Manilla, Philippines
{lat: 17.385044, lng: 78.486671}, //Hyderabad, India
{lat: 41.878114, lng: -87.629798}, //Chicago, IL
{lat: 41.053430, lng: -73.538734}, //Stamford, CT
{lat: 41.053430, lng: -73.538734} //Stamford, CT
]
*/
function makeStatistics(){
window.json = '<%=statString%>';
return JSON.parse(window.json);
}
function makeLocations(){
window.json = '<%=locString%>';
return JSON.parse(window.json);
}
function makeTypes(){
window.json = '<%=typeString%>';
return JSON.parse(window.json);
}
function makeManu(){
window.json = '<%=manuString%>';
return JSON.parse(window.json);
}
</script>

</body>
</html>
Loading