Browse Source

Updated friends graph page to accept get parameters to define user name.

pull/11/head
Jeffery Russell 5 years ago
parent
commit
c59b68bd99
4 changed files with 35 additions and 12 deletions
  1. +19
    -8
      public/FriendsGraph.html
  2. +3
    -3
      public/js/friendsGraph.js
  3. +2
    -1
      public/js/githubAPI.js
  4. +11
    -0
      public/js/utilities.js

+ 19
- 8
public/FriendsGraph.html View File

@ -15,7 +15,7 @@
<script src="js/githubAPI.js"></script>
<script src="js/friendsGraph.js"></script>
<script src="js/profileGen.js"></script>
<script src="js/utilities.js"></script>
<script type="text/javascript" src="js/vis/vis.js"></script>
<link href="js/vis/vis-network.min.css" rel="stylesheet" type="text/css" />
@ -30,7 +30,7 @@
</div>
<ul id="navigation" class="nav justify-content-end">
<li class="nav-item">
<a href="./GraphTest.html">
<a href="./FriendsGraph.html">
Generate graphs
</a>
</li>
@ -50,12 +50,12 @@
</div>
<div class="main container">
<div class="row" id="searchBarTop">
<div class="row align-center" id="searchBarTop">
<nav class="navbar navbar-light bg-light justify-content-between">
<a class="navbar-brand">Create Graph</a>
<form class="form-inline">
<input class="form-control mr-sm-2" id='txtUsername' type="search" placeholder="GitHub Username" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" onclick='createGraphs()' type='button'>Look Up</button>
<button class="btn btn-outline-success my-2 my-sm-0" onclick='fetchUserInput()' type='button'>Look Up</button>
</form>
</nav>
</div>
@ -73,15 +73,26 @@
</body>
<script>
function createGraphs()
function fetchUserInput()
{
const inputedName = $("#txtUsername").val();
createGraphs(inputedName);
}
function createGraphs(username)
{
options.width = $("#myGraph").width() + "px";
options.height = "700px";
const inputedName = $("#txtUsername").val();
createFriendsGraph(inputedName, "myGraph", "graphLabel");
profileGen(inputedName, "profileGen");
createFriendsGraph(username, "myGraph", "graphLabel");
profileGen(username, "profileGen");
$("#searchBarTop").html("");
}
if(findGetParameter("name") !== null)
{
createGraphs(findGetParameter("name"))
}
</script>
</html>

+ 3
- 3
public/js/friendsGraph.js View File

@ -260,9 +260,9 @@ function createFriendsGraph(username, containerName, graphsTitle)
};
var network = new vis.Network(container, data, options);
network.on("click", function (params) {
network.on("click", function (params)
{
params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
if(Number(this.getNodeAt(params.pointer.DOM)) !== NaN)
{
bringUpProfileView(Number(this.getNodeAt(params.pointer.DOM)));
@ -273,7 +273,7 @@ function createFriendsGraph(username, containerName, graphsTitle)
})
}).catch(function(error)
{
console.log(error);
$("#" + graphsTitle).html("Error Fetching Data From API");
alert("Invalid User");
});
}

+ 2
- 1
public/js/githubAPI.js View File

@ -38,6 +38,7 @@ function queryAPIByUser(apiPath, user, successCallBack, errorCallBack) {
crossDomain: true,
dataType: "json",
success: successCallBack,
error:errorCallBack
error:errorCallBack,
timeout: 1500
});
}

+ 11
- 0
public/js/utilities.js View File

@ -0,0 +1,11 @@
function findGetParameter(parameterName)
{
var result = null,
tmp = [];
var items = location.search.substr(1).split("&");
for (var index = 0; index < items.length; index++) {
tmp = items[index].split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
}
return result;
}

Loading…
Cancel
Save