|
|
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <title>Generate - GitHub Graphs</title>
- <link rel="icon" href="./favicon.ico" type="image/x-icon" />
- <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
- <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">
- <link rel="stylesheet" href="./style.css" />
- <link rel="stylesheet" href="./search.css" />
- <script src="https://code.jquery.com/jquery-3.3.1.min.js"
- integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
- crossorigin="anonymous">
- </script>
- </head>
- <body>
- <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
- <div id="header-title">
- <a href="./index.html">
- <img id="logo" src="./logo.svg" />
- </a>
- </div>
- <div id="navigation">
- <ul class="nav">
- <li class="nav-item">
- <a href="./GraphGenerator.html">
- Generate graphs
- </a>
- </li>
- <div class="nav-sep"></div>
- <li class="nav-item">
- <a href="https://github.com/jrtechs/github-graphs">
- View on GitHub
- </a>
- </li>
- <div class="nav-sep"></div>
- <li class="nav-item">
- <a href="./about.html">
- About
- </a>
- </li>
- </ul>
- </div>
- </div>
- <div class="main container">
- <div id="user-graphs">
- <div id="search-bar">
- <div class="row align-items-center text-center">
- <div class="search-title">
- <h1 id="search" class="m-title">Search GitHub:</h1>
- </div>
- <div class="col search-col">
- <form class="search-form">
- <input class="rounder form-control mr-sm-1" id='txtUsername' type="search" placeholder="GitHub Username" aria-label="Search">
- </form>
- </div>
- </div>
- </div>
- <div class="card-deck text-center">
- <div class="card rounder">
- <div class="card-header rounder">
- <h1 class="m-title">Interactive Friends Chart</h1>
- </div>
- <div class="card-body">
- <p>
- Creates an web chart of the selected user and
- both their followers and anyone they are following
- themselves.
- </p>
- <button class="btn btn-outline-success rounder" onclick='toFriends()' type='button'>Generate</button>
- </div>
- <p></p>
- </div>
- <div class="card rounder">
- <div class="card-header rounder">
- <h1 class="m-title">Repo Timeline</h1>
- </div>
- <div class="card-body">
- <p>
- Displays a timeline of every repo belonging
- to the selected user in chronological order,
- along with information pertaining to each repo.
- </p>
- <button class="btn btn-outline-success rounder" onclick='toTimeline()' type='button'>Generate</button>
- </div>
- <p></p>
- </div>
- </div>
- </div>
- <div id="org-graph" class="mt-3">
- <div id="search-bar">
- <div class="row align-items-center text-center">
- <div class="search-title">
- <h1 id="search" class="m-title">Search GitHub:</h1>
- </div>
- <div class="col search-col">
- <form class="search-form">
- <input class="rounder form-control mr-sm-1" id='txtOrgname' type="search" placeholder="Organization Name" aria-label="Search">
- </form>
- </div>
- </div>
- </div>
- <div class="card-deck text-center">
- <div class="card rounder">
- <div class="card-header rounder">
- <h1 class="m-title">Interactive Organization Chart</h1>
- </div>
- <div class="card-body">
- <p>
- Creates a web chart of the specified organization
- and all associated repos.
- </p>
- <button class="btn btn-outline-success rounder" onclick='toOrgRepos()' type='button'>Generate</button>
- </div>
- <p></p>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
- <script>
- $('#txtOrgname').keydown(function(event)
- {
- if(event.keyCode == 13)
- {
- event.preventDefault();
- toOrgRepos();
- }
- });
-
- $('#txtUsername').keydown(function(event)
- {
- if(event.keyCode == 13)
- {
- event.preventDefault();
- toFriends();
- }
- });
-
- function fetchUserInput()
- {
- const inputedName = $("#txtUsername").val();
-
- if(inputedName === "")
- {
- alert("Please enter a Github name in the text field.")
- }
-
- return inputedName;
- }
-
- function fetchOrgInput()
- {
- const inputedOrg = $("#txtOrgname").val();
- if(inputedOrg === "")
- {
- alert("Please enter a Github organization name in the text field.")
- }
- return inputedOrg;
- }
-
- function toFriends()
- {
- var uname = fetchUserInput();
- if(uname !== "")
- window.location.href = "./FriendsGraph.html?name=" + uname;
- }
-
- function toTimeline()
- {
- var uname = fetchUserInput();
- if(uname !== "")
- window.location.href = "./TimeLineGraph.html?name=" + uname;
- }
-
- function toOrgRepos() {
- var uname = fetchOrgInput();
- if(uname !== "")
- window.location.href = "./OrgRepoGraph.html?name=" + uname;
- }
-
- </script>
|
