Redesign organization chart page

public/OrgRepoGraph.html

@@ -8,11 +8,17 @@
     <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="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.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>
+
     <script src="js/githubAPI.js"></script>
     <script src="js/friendsGraph.js"></script>
     <script src="js/createOrgRepoGraph.js"></script>
@@ -21,11 +27,7 @@
     <script src="js/createOrgTable.js"></script>
     <script src="js/createOrgInfo.js"></script>
 
-    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css"/>
     <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
-
-
-
     <script type="text/javascript" src="js/vis/vis.js"></script>
     <link href="js/vis/vis-network.min.css" rel="stylesheet" type="text/css" />
 
@@ -51,56 +53,71 @@
         </div>
     </nav>
 
-    <div class="main containerCustom">
-
-        <div class="row containerCustom">
-            <div class="col-md-2 col-12">
-                <div id="profileGen"></div>
+    <div class="main">
+        <div class="container-fluid container-xl">
+            <div class="row">
+                <div class="col">
+                    <div class="d-flex align-items-baseline justify-content-between my-4">
+                         <div class="d-flex align-items-center">
+                            <svg class="mr-3" width="37" height="31" viewBox="0 0 37 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M0 31V11C0 10.5093 0.19491 10.0388 0.541852 9.69185C0.888795 9.34491 1.35935 9.15 1.85 9.15H9.25V2C9.25 0.895432 10.1454 0 11.25 0H25.75C26.8546 0 27.75 0.89543 27.75 2V9.15H35.15C35.6407 9.15 36.1112 9.34491 36.4581 9.69185C36.8051 10.0388 37 10.5093 37 11V31H22.2V21.75H14.8V31H0ZM14.8 3.5V8.8H22.2V3.5H14.8ZM3.7 27.3H11.1V21.75H3.7V27.3ZM3.7 18.05H11.1V12.5H3.7V18.05ZM25.9 27.3H33.3V21.75H25.9V27.3ZM25.9 18.05H33.3V12.5H25.9V18.05ZM14.8 18.05H22.2V12.5H14.8V18.05Z" fill="white"/>
+                            </svg>
+                            <h1 class="text-white font-weight-bold">Organization chart</h1>
+                         </div>
+                    </div>
+                </div>
             </div>
-            <div class="col-md-6 col-12">
-                <div id="graphLoading"></div>
-                <div id="organizationInfo"></div>
-                <div id="myGraph" class="w-100"></div>
-                <pre id="eventSpan"></pre>
-            </div>
-            <div class="col-md-4 col-12 bg-light">
-                <div class="w-100"></div>
-                <center><h1>Repositories</h1></center>
-                <table class="table table-striped" id="dataTable">
-                    <thead class="thead-dark">
-                    <tr>
-                        <td>Name</td>
-                        <td>Forks</td>
-                        <td>Language</td>
-                    </tr>
-                    </thead>
-                    <tbody id="repositoryTable">
-
-                    </tbody>
-                </table>
-
+            <div class="row">
+                <div class="col-lg-9">
+                    <div class="row pb-4">
+                        <div class="col-12">
+                            <div id="organizationInfo"></div>
+                        </div>
+                    </div>
+                    <div class="row mb-4">
+                        <div class="col-lg-4">
+                            <div class="card">
+                                <div class="card-body" style="font-size: 14px;">
+                                    <h3 class="card-title">Repositories</h3>
+                                    <table class="table table-sm" id="dataTable">
+                                        <thead>
+                                        <tr>
+                                            <th class="border-top-0">Name</th>
+                                            <th class="border-top-0">Forks</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody id="repositoryTable"></tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-8">
+                            <div class="card shadow text-white bg-dark border-white">
+                                <div id="graphLoading"></div>
+                                <div id="myGraph" class="w-100"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-3">
+                    <div id="profileGen"></div>
+                </div>
             </div>
         </div>
-
-        <script>
-
-            function createGraphs(orgname) {
-                options.width = $("#myGraph").width() + "px";
-                options.height = "700px";
-
-                createOrgRepoGraph(orgname, "myGraph", "graphLoading");
-                createOrgTable(orgname, 'repositoryTable');
-                createOrgInfo(orgname, 'organizationInfo')
-            }
-
-            if(findGetParameter("name") !== null)
-            {
-                createGraphs(findGetParameter("name"))
-            }
-
-        </script>
     </div>
-
 </body>
-
+<script>
+    function createGraphs(orgname) {
+        options.width = $("#myGraph").width() + "px";
+        options.height = "600px";
+
+        createOrgRepoGraph(orgname, "myGraph", "graphLoading");
+        createOrgTable(orgname, 'repositoryTable');
+        createOrgInfo(orgname, 'organizationInfo')
+    }
+
+    if (findGetParameter("name") !== null) {
+        createGraphs(findGetParameter("name"))
+    }
+</script>
 </html>

public/js/createOrgInfo.js

@@ -1,17 +1,23 @@
-function createOrgInfo(orgName, container) {    
+function createOrgInfo(orgName, container) {
     queryAPIByOrg("", orgName, (orgData) => {
-        console.log("called");
-        var html = "<div class=\"card\" style=\"w-100;\"><div class='row m-0'><div class='col-2 col-centered p-auto'>"+
-            "<img src='" + orgData.avatar_url + "' width='100%'/>" +
-        "</div><div class='col-10'>\
-            <div class=\"card-body\"> \
-                <center><b><h3 class=\"card-title\">"+orgData.name+"</h3><b><center> " +
-                (orgData.description != null ? "<div class=\"card-text\"><p>"+orgData.description+"</p></div>" : "") + " \
-            </div> \
-            <ul class=\"list-group list-group-flush\">"+
-                (orgData.location !=null ? "<li class=\"list-group-item\">Location: "+orgData.location+"</li>" : "") + " \
-            </ul> \
-        </div></div></div>";
+        var html = `
+            <div class="card shadow py-4 px-3">
+                <div class="row align-items-center">
+                    <div class="col-md-2 text-center">
+                        <img src="${orgData.avatar_url}" alt="${orgData.name}" class="img-fluid" style="max-width: 100px"/>
+                    </div>
+                    <div class="col-md-10">
+                        <div class="media-body">
+                            <h1 class="h4">${orgData.name}</h1>
+                            <p class="text-muted">${orgData.description}</p>
+                            <ul class="d-flex list-unstyled mb-0">
+                                <li>${orgData.location}</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
 
         $("#" + container).html(html);
 
@@ -19,4 +25,4 @@ function createOrgInfo(orgName, container) {
         alert("Organization Does Not Exist");
         window.location.href = "./GraphGenerator.html";
     });
-}
+}

public/js/createOrgTable.js

@@ -1,10 +1,15 @@
-function generateHtmlRow(repoData)
-{
-    var html = "<tr class=\"table_row\">";
-    html+="<td><a href='" + repoData.url + "'>" + repoData.name +  "</a></td>";
-    html+="<td>" + repoData.forks +  "</td>";
-    html+="<td>" + repoData.language +  "</td>";
-    html +="</tr>";
+function generateHtmlRow(repoData) {
+    var html = `
+        <tr>
+            <td>
+                ${repoData.language === 'null'
+                    ? '<div class="bg-light d-inline-block" style="height: 14px; width: 14px; border-radius: 7px"></div>'
+                    : `<i class="devicon-${repoData.language}-plain colored"></i>`}
+                <a class="text-reset ml-1" href="${repoData.url}">${repoData.name}</a>
+            </td>
+            <td class="text-right">${repoData.forks}</td>
+        </tr>
+    `;
     return html;
 }
 
@@ -43,21 +48,39 @@ function createOrgTable(orgName, tableContainer)
 {
     var html = "";
 
+    fetchAllRepositories(orgName, 1).then(function() {
+        for (var i=0; i < repos.length; i++) {
+            let icon = repos[i].language;
+            icon === null
+                ? icon = 'null'
+                : icon = icon.toLowerCase();
+
+            icon === 'c++'
+                ? icon = 'cplusplus'
+                : null;
+
+            icon === 'c#'
+                ? icon = 'csharp'
+                : null;
+
+
+            repos[i].language = icon;
 
-    fetchAllRepositories(orgName, 1).then(function()
-    {
-        for(var i=0; i < repos.length; i++)
-        {
             html += generateHtmlRow(repos[i]);
         }
 
         $("#" + tableContainer).html(html);
 
         setTimeout(function() {
-            $('#dataTable').DataTable();
+            $('#dataTable').DataTable({
+                pageLength: 15,
+                pagingType: 'simple',
+                bLengthChange : false,
+                "bFilter" : false
+            });
         }, 1500);
     }).catch(function(error)
     {
         //console.log("Unable to create table");
     });
-}
+}