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.

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