added github ajax call page

my-notes.txt

@@ -0,0 +1,34 @@
+
+
+##  These are the user stories
+
+
+    1. Engineer Alice makes branch "search-experiment"
+    2. Alice sets up a project for "search-experiment" using this tool
+    3. Engineer Bob makes further changes in master
+    4. Testers start working on the "search-experiment" project
+
+        ##  why are the testers looking at the search-experiment project in the first place rather than the master branch
+
+
+## the problem
+
+
+
+
+##  what I need to do:
+
+I need to edit the tool that I have been provided, in order to:
+
+  [front-end]  be able to specify the branch in a particular project
+
+  [back-end] use the github api to compare a project with master
+
+  [front-end] indicate if a project is up to date or not
+
+  [the gist] make sure that the branch is up to date with master before testers work on it.
+
+
+
+Check the API to see if the branch is up to date with master
+If not up to date, then give warning or disallow testers from working on the branch

src/gitaccess.js

@@ -0,0 +1,105 @@
+var request = new XMLHttpRequest();
+request.open('get', 'https://api.github.com/users/andrewdonato')
+request.send()
+
+
+$(document).ready(function() {
+  // This is called after the document has loaded in its entirety
+  // This guarantees that any elements we bind to will exist on the page
+  // when we try to bind to them
+
+  // See: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
+
+  makeGitRequest();
+
+});
+
+
+var makeGitRequest = function(){
+  $('.githubaccess').on('submit', function(event){
+
+    event.preventDefault();
+
+    $('.githubdata').html('<div id="loader"><img src="css/l`xoader.gif" alt="loading..."></div>');
+
+    var username = $('.githubusername').val();
+    var requesturl   = 'https://api.github.com/users/'+username;
+    var repourl  = 'https://api.github.com/users/'+username+'/repos';
+
+    requestJSON(requesturl, function(json) {
+
+       if(json.message == "Not Found" || username == '') {
+        $('#githubdata').html("<h2>No User Info Found</h2>");
+      }
+
+      else {
+        // else we have a user and we display their info
+        var fullname   = json.name;
+        var username   = json.login;
+        var aviurl     = json.avatar_url;
+        var profileurl = json.html_url;
+        var location   = json.location;
+        var followersnum = json.followers;
+        var followingnum = json.following;
+        var reposnum     = json.public_repos;
+
+        if(fullname == undefined) { fullname = username; }
+        var outhtml = '<h2>'+fullname+' <span class="smallname">(@<a href="'+profileurl+'" target="_blank">'+username+'</a>)</span></h2>';
+        outhtml = outhtml + '<div class="ghcontent"><div class="avi"><a href="'+profileurl+'" target="_blank"><img src="'+aviurl+'" width="80" height="80" alt="'+username+'"></a></div>';
+        outhtml = outhtml + '<p>Followers: '+followersnum+' - Following: '+followingnum+'<br>Repos: '+reposnum+'</p></div>';
+        outhtml = outhtml + '<div class="repolist clearfix">';
+
+        var repositories;
+        $.getJSON(repouri, function(json){
+          repositories = json;
+          outputPageContent();
+        });
+
+        function outputPageContent() {
+          if(repositories.length == 0) { outhtml = outhtml + '<p>No repos!</p></div>'; }
+          else {
+            outhtml = outhtml + '<p><strong>Repos List:</strong></p> <ul>';
+            $.each(repositories, function(index) {
+              outhtml = outhtml + '<li><a href="'+repositories[index].html_url+'" target="_blank">'+repositories[index].name + '</a></li>';
+            });
+            outhtml = outhtml + '</ul></div>';
+          }
+          $('#githubdata').html(outhtml);
+        }
+      }
+    });
+  });
+}
+
+//     var form = $(this);
+//     var data = form.serialize();
+//     var path = $('.create_project_form').attr('action')
+//     var method = $('.create_project_form').attr('method')
+
+//     var request = $.ajax({
+//       url: path,
+//       type: method,
+//       data: data,
+//       dataType: "json"
+//     })
+//     request.done(function(serverData){
+//       console.log('success');
+//       console.log(serverData, "hello");
+//       $('div.project_index').children().last().append('<div> <a href="projects/'+serverData.id + '">'+ serverData.name+ '</a> </div>')
+//       $('.hidden_project_form').toggle();
+//       $('.create_project_form')[0].reset();
+//     })
+//     request.fail(function(serverData){
+//       console.log(serverData);
+//       console.log('server request failed');
+//     })
+//   });
+// };
+
+
+
+create a column for branch name and another column for status (is ahead or up to date)
+
+add project field
+add another dropdown for project branch
+make a request from local to github client side

src/index.html

@@ -30,11 +30,24 @@ <h2>All active projects</h2>
           </tr>
         </thead>
         <tbody>
+          <div id="githubdata" class="clearfix"></div>
         </tbody>
       </table>
       <hr>
       <h2>Add new project</h2>
       <form id="add-project-form">
+
+<!--         <div class="form-group">
+          <label for="username">User name</label>
+          <input type="text" class="form-control githubusername">
+        </div>
+
+        <div class="form-group">
+          <label for="branchname">Branch name</label>
+          <input type="text" class="form-control githubbranch">
+        </div>
+ -->
+
         <div class="form-group">
           <label for="project-type">Project type</label>
           <input type="text" class="form-control" id="project-type" list="type-list" autofocus>
@@ -49,12 +62,14 @@ <h2>Add new project</h2>
           <input type="text" class="form-control" id="project-name">
         </div>
         <div class="form-group">
-          <input type="submit" class="btn btn-default" value="Add project">
+          <input type="submit" class="btn btn-default githubaccess" value="Add project">
         </div>
       </form>
     </div>
+    <script data-main="scripts/main" src="scripts/require.js"></script>
     <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
     <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
     <script src="projects.js"></script>
+    <!-- <script src="gitaccess.js"></script> -->
   </body>
 </html>

src/projects.js

@@ -1,3 +1,6 @@
+
+
+
 function Project(id, type, name, lastActivity) {
     this.id = id;
     this.type = type;
@@ -58,3 +61,5 @@ $(function(){
         e.preventDefault();
     });
 });
+
+