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.

183 lines
6.6 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
5 years ago
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <title>Generate - GitHub Graphs</title>
  7. <link rel="icon" href="./favicon.ico" type="image/x-icon" />
  8. <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  9. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  10. <link rel="stylesheet" href="./style.css" />
  11. <link rel="stylesheet" href="./search.css" />
  12. <script src="https://code.jquery.com/jquery-3.3.1.min.js"
  13. integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  14. crossorigin="anonymous">
  15. </script>
  16. </head>
  17. <body>
  18. <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
  19. <div id="header-title">
  20. <a href="./index.html">
  21. <img id="logo" src="./logo.svg" />
  22. </a>
  23. </div>
  24. <div id="navigation">
  25. <ul class="nav">
  26. <li class="nav-item">
  27. <a href="./GraphGenerator.html">
  28. Generate graphs
  29. </a>
  30. </li>
  31. <div class="nav-sep"></div>
  32. <li class="nav-item">
  33. <a href="https://github.com/jrtechs/github-graphs">
  34. View on GitHub
  35. </a>
  36. </li>
  37. <div class="nav-sep"></div>
  38. <li class="nav-item">
  39. <a href="./about.html">
  40. About
  41. </a>
  42. </li>
  43. </ul>
  44. </div>
  45. </div>
  46. <div class="main container">
  47. <div id="user-graphs">
  48. <div id="search-bar">
  49. <div class="row align-items-center text-center">
  50. <div class="search-title">
  51. <h1 id="search" class="m-title">Search GitHub:</h1>
  52. </div>
  53. <div class="col search-col">
  54. <form class="search-form">
  55. <input class="rounder form-control mr-sm-1" id='txtUsername' type="search" placeholder="GitHub Username" aria-label="Search">
  56. </form>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="card-deck text-center">
  61. <div class="card rounder">
  62. <div class="card-header rounder">
  63. <h1 class="m-title">Interactive Friends Chart</h1>
  64. </div>
  65. <div class="card-body">
  66. <p>
  67. Creates an web chart of the selected user and
  68. both their followers and anyone they are following
  69. themselves.
  70. </p>
  71. <button class="btn btn-outline-success rounder" onclick='toFriends()' type='button'>Generate</button>
  72. </div>
  73. <p></p>
  74. </div>
  75. <div class="card rounder">
  76. <div class="card-header rounder">
  77. <h1 class="m-title">Repo Timeline</h1>
  78. </div>
  79. <div class="card-body">
  80. <p>
  81. Displays a timeline of every repo belonging
  82. to the selected user in chronological order,
  83. along with information pertaining to each repo.
  84. </p>
  85. <button class="btn btn-outline-success rounder" onclick='toTimeline()' type='button'>Generate</button>
  86. </div>
  87. <p></p>
  88. </div>
  89. </div>
  90. </div>
  91. <div id="org-graph" class="mt-3">
  92. <div id="search-bar">
  93. <div class="row align-items-center text-center">
  94. <div class="search-title">
  95. <h1 id="search" class="m-title">Search GitHub:</h1>
  96. </div>
  97. <div class="col search-col">
  98. <form class="search-form">
  99. <input class="rounder form-control mr-sm-1" id='txtOrgname' type="search" placeholder="Organization Name" aria-label="Search">
  100. </form>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="card-deck text-center">
  105. <div class="card rounder">
  106. <div class="card-header rounder">
  107. <h1 class="m-title">Interactive Organization Chart</h1>
  108. </div>
  109. <div class="card-body">
  110. <p>
  111. Creates a web chart of the specified organization
  112. and all associated repos.
  113. </p>
  114. <button class="btn btn-outline-success rounder" onclick='toOrgRepos()' type='button'>Generate</button>
  115. </div>
  116. <p></p>
  117. </div>
  118. </div>
  119. </div>
  120. </div>
  121. </body>
  122. </html>
  123. <script>
  124. $('#txtOrgname').keydown(function(event)
  125. {
  126. if(event.keyCode == 13)
  127. {
  128. event.preventDefault();
  129. toOrgRepos();
  130. }
  131. });
  132. $('#txtUsername').keydown(function(event)
  133. {
  134. if(event.keyCode == 13)
  135. {
  136. event.preventDefault();
  137. toFriends();
  138. }
  139. });
  140. function fetchUserInput()
  141. {
  142. const inputedName = $("#txtUsername").val();
  143. if(inputedName === "")
  144. {
  145. alert("Please enter a Github name in the text field.")
  146. }
  147. return inputedName;
  148. }
  149. function fetchOrgInput()
  150. {
  151. const inputedOrg = $("#txtOrgname").val();
  152. if(inputedOrg === "")
  153. {
  154. alert("Please enter a Github organization name in the text field.")
  155. }
  156. return inputedOrg;
  157. }
  158. function toFriends()
  159. {
  160. var uname = fetchUserInput();
  161. if(uname !== "")
  162. window.location.href = "./FriendsGraph.html?name=" + uname;
  163. }
  164. function toTimeline()
  165. {
  166. var uname = fetchUserInput();
  167. if(uname !== "")
  168. window.location.href = "./TimeLineGraph.html?name=" + uname;
  169. }
  170. function toOrgRepos() {
  171. var uname = fetchOrgInput();
  172. if(uname !== "")
  173. window.location.href = "./OrgRepoGraph.html?name=" + uname;
  174. }
  175. </script>