Website for visualizing a persons github network.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

95 lines
4.2 KiB

5 years ago
5 years ago
5 years ago
5 years ago
  1. function profileGen(username, container)
  2. {
  3. queryAPIByUser("", username, (user) =>
  4. {
  5. if(!user.hasOwnProperty("id"))
  6. {
  7. alert("User Does Not Exist");
  8. window.location.href = "./GraphGenerator.html";
  9. }
  10. parseOrgs(user.login).then( (orgsReturn) => {
  11. let html = `
  12. <div class="card shadow-sm" style="font-size: 16px;">
  13. <div class="card-img-top" style="position: relative;">
  14. <img src="${user.avatar_url}" alt="${user.avatar_url}" class="img-fluid"/>
  15. <div class="actions">
  16. <a href="${graphUrl(user.login)}" class="btns" title="View Friends Graph">
  17. <svg viewBox="0 0 24 24">
  18. <path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
  19. </svg>
  20. </a>
  21. <a href="${timelineUrl(user.login)}" class="btns" title="View Timeline Graph">
  22. <svg viewBox="0 0 24 24">
  23. <path d="M2,2H4V20H22V22H2V2M7,10H17V13H7V10M11,15H21V18H11V15M6,4H22V8H20V6H8V8H6V4Z" />
  24. </svg>
  25. </a>
  26. </div>
  27. </div>
  28. <div class="card-body">
  29. <h5 class="card-title mb-1">${user.name}</h5>
  30. <a href="${user.html_url}" class="card-subtitle text-muted">${user.login}</a>
  31. ${user.bio != null ? `<p class="my-2">${user.bio}</p>` : ""}
  32. <ul class="list-unstyled">
  33. ${user.blog != null ? `<a href="${user.blog}"><li>${user.blog}</li></a>` : ""}
  34. ${user.email != null ? `<li>Email: ${user.email}</li>` : ""}
  35. ${user.location != null ? `<li>Location: ${user.location}</li>` : ""}
  36. ${user.company != null ? `<li>Company: ${user.company}</li>` : ""}
  37. </ul>
  38. <hr />
  39. <ul class="list-unstyled">
  40. <li>Followers: ${user.followers}</li>
  41. <li>Following: ${user.following}</li>
  42. <li>Repositories: ${user.public_repos}</li>
  43. </ul>
  44. ${orgsReturn != [] ? `<hr /> <p>Organizations</p> ${orgsReturn}` : ""}
  45. </div>
  46. </div>
  47. `;
  48. $("#"+container).html(html);
  49. })
  50. }, () =>
  51. {
  52. alert("User Does Not Exist");
  53. window.location.href = "./GraphGenerator.html";
  54. });
  55. }
  56. function parseOrgs(name) {
  57. return new Promise( (resolve, reject) => {
  58. let urlpath = `api/users/${name}/orgs`;
  59. let orgs_final = [];
  60. queryUrl(urlpath, (orgs) => {
  61. var prom= [];
  62. for(var i = 0;i < orgs.length; i++) {
  63. prom.push( new Promise( (res, rej) => {
  64. url = orgs[i].url;
  65. queryUrl(url, (orgData) => {
  66. console.log(orgData);
  67. orgs_final.push("<a href=\"OrgRepoGraph.html?name="+orgData.login+"\"><img src=\""+orgData.avatar_url+"\" class=\"img-fluid\" style=\"max-width:35px\"></img></a>");
  68. res();
  69. }, (error) => {
  70. console.log(error);
  71. rej(error);
  72. console.error("error getting org info");
  73. });
  74. })
  75. )
  76. }
  77. Promise.all(prom).then(function() {
  78. resolve(orgs_final.join(" "));
  79. })
  80. }, (error) => {
  81. resolve([]);
  82. });
  83. })
  84. }
  85. function graphUrl(user) {
  86. return "/FriendsGraph.html?name="+user;
  87. }
  88. function timelineUrl(user) {
  89. return "/TimeLineGraph.html?name="+user;
  90. }