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.3 KiB

5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
  1. function profileGen(username, container) {
  2. queryAPIByUser("", username, (user) => {
  3. parseOrgs(user.login).then( (orgsReturn) => {
  4. let html =
  5. "<div class=\"card\" style=\"w-100\"> \
  6. <img class=\"card-img-top\" src=\""+user.avatar_url+"\"></img> \
  7. <div class=\"row mx-0\"> \
  8. <div class=\"col-9\"> \
  9. <div class=\"card-body\"> \
  10. <h5 class=\"card-title\">"+user.name+"</h1> \
  11. <h6 class=\"card-subtitle\">"+user.login+"</h2> \
  12. </div> \
  13. </div> \
  14. <div class=\"col-sm\"> \
  15. <button type=\"button\" class=\"btn btn-link pt-3\"> \
  16. <a href=\""+makeUrl(user.login)+"\"> \
  17. <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> \
  18. <path d=\"M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z\"/> \
  19. <path fill=\"none\" d=\"M0 0h24v24H0z\"/> \
  20. </svg> \
  21. </a> \
  22. </button> \
  23. </div> \
  24. </div> \
  25. <div class=\"card border-secondary mb-3 mx-auto text-left\" style=\"width:90%\"> \
  26. <div class=\"card-body\"> \
  27. <p class=\"card-text\"><a href=\""+user.html_url+"\" class=\"card-link\">"+user.html_url+"</a></p> \ " +
  28. (user.blog != null ? "<p class=\"card-text \"><a href="+user.blog+" class=\"card-link\">"+user.blog+"</a></p>" : "")+" \
  29. </div> \
  30. </div> \
  31. <ul class=\"list-group list-group-flush\"> \
  32. <li class=\"list-group-item\">Followers: "+user.followers+"</li> \
  33. <li class=\"list-group-item\">Following: "+user.following+"</li> \
  34. <li class=\"list-group-item\">Repositories: "+user.public_repos+"</li>" +
  35. (user.bio != null ? "<li class=\"list-group-item\">Bio: "+user.bio+"</li>" : "")+
  36. (user.location != null ? "<li class=\"list-group-item\">Location: "+user.location+"</li>" : "")+
  37. (user.email != null ? "<li class=\"list-group-item\">Email: "+user.email+"</li>" : "")+
  38. (user.company != null ? "<li class=\"list-group-item\">Company: "+user.company+"</li>" : "")+
  39. (orgsReturn != [] ? "<li class=\"list-group-item\">"+orgsReturn+"</li>" : "")+ " \
  40. </ul> \
  41. </div>"
  42. $("#"+container).html(html);
  43. })
  44. }, () => {
  45. console.error("error getting user info");
  46. });
  47. }
  48. function parseOrgs(name) {
  49. return new Promise( (resolve, reject) => {
  50. let urlpath = `api/users/${name}/orgs`;
  51. let orgs_final = [];
  52. queryUrl(urlpath, (orgs) => {
  53. var prom= [];
  54. for(var i = 0;i < orgs.length; i++) {
  55. prom.push( new Promise( (res, rej) => {
  56. url = orgs[i].url;
  57. queryUrl(url, (orgData) => {
  58. orgs_final.push("<a href=\""+orgData.html_url+"\"><img src=\""+orgData.avatar_url+"\" class=\"img-fluid\" style=\"max-width:49%\"></img></a>");
  59. res();
  60. }, (error) => {
  61. console.log(error);
  62. rej(error);
  63. console.error("error getting org info");
  64. });
  65. })
  66. )
  67. }
  68. Promise.all(prom).then(function() {
  69. resolve(orgs_final.join(" "));
  70. })
  71. }, (error) => {
  72. console.error("error getting orgs");
  73. reject(error);
  74. });
  75. })
  76. }
  77. function queryUrl(url, successCallBack, errorCallBack) {
  78. url = url.split("https://api.github.com/").join("api/");
  79. $.ajax({
  80. type:'GET',
  81. url: url,
  82. crossDomain: true,
  83. dataType: "json",
  84. success: successCallBack,
  85. error:errorCallBack,
  86. timeout: 3000
  87. });
  88. }
  89. function makeUrl(user) {
  90. return "/FriendsGraph.html?name="+user;
  91. }