jrtechs
/
jrtechs-github-graphs
mirror of https://github.com/jrtechs/github-graphs.git
1
0
Fork 0
Code Issues 0 Releases 1 Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/master' 

# Conflicts:
#	public/FriendsGraph.html
pull/11/head
Jeffery Russell 5 years ago
parent
accde29675 6a0158efdb
commit
d07aac92ed
4 changed files with 130 additions and 59 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +74
    -45
      public/GraphGenerator.html
  2. +40
    -7
      public/index.html
  3. +4
    -4
      public/js/profileGen.js
  4. +12
    -3
      public/style.css

+ 74
- 45
public/GraphGenerator.html View File

@ -43,61 +43,80 @@
</div> </div>
</div> </div>
<div class="main container"> <div class="main container">
<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 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> </div>
</div>
<div class="card-deck text-center">
<div class="card rounder">
<div class="card-header">
<h1 class="m-title">Interactive Friends Chart</h1>
<div class="card-deck text-center">
<div class="card rounder">
<div class="card-header">
<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>
<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 class="card rounder">
<div class="card-header">
<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>
<p></p>
</div> </div>
<div class="card rounder">
<div class="card-header">
<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>
<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>
<p></p>
</div> </div>
<div class="card rounder">
<div class="card-header">
<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='toOrganization()' type='button'>Generate</button>
<div class="card-deck text-center">
<div class="card rounder">
<div class="card-header">
<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='toOrganization()' type='button'>Generate</button>
</div>
<p></p>
</div> </div>
<p></p>
</div> </div>
</div> </div>
</div>
</div> </div>
</body> </body>
</html> </html>
@ -107,6 +126,11 @@
return inputedName; return inputedName;
} }
function fetchOrgInput() {
const inputedOrg = $("#txtOrgname").val();
return inputedOrg;
}
function toFriends() { function toFriends() {
var uname = fetchUserInput(); var uname = fetchUserInput();
window.location.href = "./FriendsGraph.html?name=" + uname; window.location.href = "./FriendsGraph.html?name=" + uname;
@ -117,6 +141,11 @@
window.location.href = "./TimeLineGraph.html?name=" + uname; window.location.href = "./TimeLineGraph.html?name=" + uname;
} }
function toOrgRepos() {
var oname = fetchOrgInput();
window.location.href = "./OrgRepoGraph.html?name=" + oname;
}
if (findGetParameter("name") !== null) { if (findGetParameter("name") !== null) {
createGraphs(findGetParameter("name")) createGraphs(findGetParameter("name"))
} }

+ 40
- 7
public/index.html View File

@ -7,6 +7,14 @@
<link rel="shortcut 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="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="./style.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous">
</script>
</head> </head>
<body> <body>
<div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center"> <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
@ -37,23 +45,48 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="main container-fluid">
<div id="mainCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="text-center">
<img src="./img/DolphinCroissant.png" />
</div>
</div>
<div class="carousel-item">
<div class="text-center">
<img src="./img/DolphinCroissant.png" />
</div>
</div>
<div class="carousel-item">
<div class="text-center">
<img src="./img/DolphinCroissant.png" />
</div>
</div>
</div>
<a class="carousel-control-prev" href="#mainCarousel" role="button" data-slide="prev" m="1">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#mainCarousel" role="button" data-slide="next" m="1">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="main container-fluid" style="top: -100px;">
<div class="home-content row align-items-center"> <div class="home-content row align-items-center">
<div class="side-txt col"> <div class="side-txt col">
<div class="text-title text-center" style="padding: 10px;"> <div class="text-title text-center" style="padding: 10px;">
<h1 class="m-title" style="padding-top: 5px;">How to get started:</h1>
<h1 class="m-title" style="padding-top: 5px;">What can I do here?</h1>
</div> </div>
<div class="text-content"> <div class="text-content">
<p style="position: relative; padding: 10px;"> <p style="position: relative; padding: 10px;">
Head over to the 'Generate graphs' page and enter Head over to the 'Generate graphs' page and enter
the username of a GitHub user. The space on that
page will then populate with the requested GitHub
user and all the related user, visualizing the
connections between them.
the username of a GitHub user. You can then select
what kind of graph to generate based on that user.
</p> </p>
<p style="position: relative; padding: 10px;"> <p style="position: relative; padding: 10px;">
If you'd like to see how everything works, follow If you'd like to see how everything works, follow
the link to GitHub, where you can view all the work
the link to GitHub, where you can view everything
that went into making this functional. that went into making this functional.
</p> </p>
<p style="position: relative; padding: 10px;"> <p style="position: relative; padding: 10px;">

+ 4
- 4
public/js/profileGen.js View File

@ -11,11 +11,11 @@ function profileGen(username, container)
let html = let html =
"<div class=\"card\" style=\"w-100\"> \ "<div class=\"card\" style=\"w-100\"> \
<img class=\"card-img-top\" src=\""+user.avatar_url+"\"></img> \ <img class=\"card-img-top\" src=\""+user.avatar_url+"\"></img> \
<div class=\"row\"> \
<div class=\"row mx-0\"> \
<div class=\"col-8\"> \ <div class=\"col-8\"> \
<div class=\"card-body\"> \
<h5 class=\"card-title\">"+user.name+"</h1> \
<h6 class=\"card-subtitle\">"+user.login+"</h2> \
<div class=\"card-body\">"+
(user.name != null ? "<h5 class=\"card-title\">"+user.name+"</h5>" : "") +" \
<h6 class=\"card-subtitle\">"+user.login+"</h5> \
</div> \ </div> \
</div> \ </div> \
<div class=\"col-4\"> \ <div class=\"col-4\"> \

+ 12
- 3
public/style.css View File

@ -45,6 +45,15 @@
width: 300px; width: 300px;
} }
#mainCarousel {
height: 500px;
background-color: black;
}
.carousel-item {
height: 500px;
}
.error { .error {
color: rgb(208, 208, 208); color: rgb(208, 208, 208);
} }
@ -102,8 +111,8 @@
position: relative; position: relative;
width: 50%; width: 50%;
height: 100%; height: 100%;
max-height: 500px;
max-width: 500px;
max-height: 400px;
max-width: 400px;
} }
.side-txt { .side-txt {
@ -141,7 +150,7 @@
.main { .main {
position: relative; position: relative;
top: 20px;
top: 10px;
} }
body { body {

Write Preview
Loading…
Cancel
Save