From 5344f19c0d092ead34bee6d1f1538af64a6bd792 Mon Sep 17 00:00:00 2001
From: HasGisete <gisete@tune.com>
Date: Sat, 30 Sep 2017 22:09:25 -0700
Subject: [PATCH 1/2] Adding a form that creates a github issue

---
 index.html | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
diff --git a/index.html b/index.html
index a68dbe3..b240b2f 100644
--- a/index.html
+++ b/index.html
@@ -33,6 +33,30 @@
   </table>
 	</div>
 </script>
+
+<style type="text/css">
+  .entry-form{
+    padding:40px;
+    border:1px solid #ddd;
+    border-radius:5px;
+    background-color:#fcfdfd;
+    margin:0 auto;
+  }
+
+  .entry-form .form-success{
+    padding:15px;
+  }
+
+  @media screen and (min-width: 740px){
+    .entry-form{
+      width:65%;
+    }
+  }
+
+  .hidden{
+    display:none;
+  }
+</style>
 </head>
 
 <body>
@@ -68,6 +92,8 @@ <h1 style="display:inline"><img height="80px" ="20px" style="padding-bottom:10pt
 			</div>
   	</div>
 
+
+
   <script>
   Vue.component('demo-grid', {
     template: '#grid-template',
@@ -223,6 +249,49 @@ <h1 style="display:inline"><img height="80px" ="20px" style="padding-bottom:10pt
 
 </script>
 	</div>
+  <div class="row entry-form">
+   <h3>Submit a new entry</h3>
+   <p class="form-success bg-success hidden">Thank you. Your message has been sent successfully.</p>
+   <form id="needs-validation">
+      <div class="form-group">
+         <label for="entry-category">Entry category *</label>
+         <select class="form-control" id="entry-category">
+            <option>Course</option>
+            <option>Initiative</option>
+            <option>Data Repository</option>
+            <option>Organization</option>
+            <option>Tool</option>
+         </select>
+      </div>
+      <div id="tool-options" class="hidden">
+         <div class="form-group">
+            <label for="descriptor">Boutiques descriptor URL</label>
+            <input type="url" class="form-control" id="descriptor">   
+         </div>
+         <div class="form-group">
+            <label for="docker-container">Docker container URL</label>
+            <input type="url" class="form-control" id="docker-container">   
+         </div>
+         <div class="form-group">
+            <label for="sing-container">Singularity container URL</label>
+            <input type="url" class="form-control" id="sing-container">   
+         </div>
+      </div>
+      <div class="form-group">
+         <label for="entry-name">Entry name *</label>
+         <input type="text" class="form-control" id="entry-name" placeholder="Name" required>
+      </div>
+      <div class="form-group">
+         <label for="author">Author *</label>
+         <input type="text" class="form-control" id="author" placeholder="Author" required>
+      </div>
+      <div class="form-group">
+         <label for="mainurl">URL *</label>
+         <input type="url" class="form-control" id="url" placeholder="URL" required>
+      </div>
+      <button type="submit" class="btn btn-info">Create issue</button>
+   </form>
+</div>
 <script src="./lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
 </html>

From 3826e25dc9cca11ad99a129a2ab2c1432cf519c4 Mon Sep 17 00:00:00 2001
From: HasGisete <gisete@tune.com>
Date: Sat, 30 Sep 2017 22:50:16 -0700
Subject: [PATCH 2/2] Open Github issue with contents of web form #13

- Added a new form that connects to the Github API on submit and
creates a Github issue with the contents of the form. Must add a
personal token (line 295) to make it work.

- Form checks for required fields and validates URL which should be an
absolute URL according to these constraint: https://goo.gl/8JTigJ (AKA
it must contain the protocol or it will fail)
---
 index.html | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 92 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index b240b2f..571af82 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,6 @@
   </table>
 	</div>
 </script>
-
 <style type="text/css">
   .entry-form{
     padding:40px;
@@ -41,6 +40,7 @@
     border-radius:5px;
     background-color:#fcfdfd;
     margin:0 auto;
+    margin-top: 40px;
   }
 
   .entry-form .form-success{
@@ -49,7 +49,7 @@
 
   @media screen and (min-width: 740px){
     .entry-form{
-      width:65%;
+      width:50%;
     }
   }
 
@@ -84,7 +84,7 @@ <h1 style="display:inline"><img height="80px" ="20px" style="padding-bottom:10pt
 				</div>
 				<p>Add your resource by opening an issue <a href="https://github.com/brainhack101/neurolinks">here!</a></p>
 				</div>
-    		<div class="col-md-10" style="height:1em">
+    		<div class="col-md-10">
     		<demo-grid
       		:data="gridData"
       		:columns="gridColumns">
@@ -247,6 +247,95 @@ <h1 style="display:inline"><img height="80px" ="20px" style="padding-bottom:10pt
 		return ("<img height='25px' src='" + logo + "' />").link(url)
 	};
 
+  //Create issue form handler
+  window.addEventListener("load", function() {
+    var category = document.getElementById('entry-category');
+    const hiddenForm = document.getElementById('tool-options');
+    const entryForm = document.getElementById('needs-validation');
+
+    category.addEventListener("change", function() {
+      var selectText = this.options[this.selectedIndex].text;
+
+      if (selectText === 'Tool') {
+        hiddenForm.classList.remove("hidden");
+      } else {
+        hiddenForm.classList.add("hidden");
+      }
+    }, false)
+
+    //Form event listener on Submit
+    entryForm.addEventListener("submit", function(event) {
+      const mainUrl = this.querySelector('#url').value;
+
+      if (!entryForm.checkValidity()) {
+        event.preventDefault();
+
+      } else {
+        event.preventDefault();
+
+        //Calls function that will handle GitHub API connection
+        httpConnect(this);
+        entryForm.classList.add("was-validated");
+      }
+
+    }, false)
+  }, false)
+
+  //Connects to GitHub API and posts the object with form values
+  function httpConnect(form) {
+    const entry = createIssueObj(form);
+    const httpRequest = new XMLHttpRequest();
+    const successMessage = document.querySelector('.form-success')
+
+    if (!httpRequest) {
+      return false;
+    }
+
+    httpRequest.onreadystatechange = createGitIssue;
+    httpRequest.open('POST', 'https://api.github.com/repos/brainhack101/neurolinks/issues?###'); //Replace '###' with GitHub Personal Token
+    httpRequest.setRequestHeader('Accept', 'application/vnd.github.v3.raw+json');
+    httpRequest.send(JSON.stringify(entry));
+
+    function createGitIssue() {
+      if (httpRequest.readyState === XMLHttpRequest.DONE) {
+        if (httpRequest.status === 201) {
+          form.reset();
+          successMessage.classList.remove("hidden");
+        } else {
+          alert('There was a problem sending the form.');
+        }
+      }
+    }
+  }
+
+  //Gets values from the form and creates an Object with them
+  function createIssueObj(form) {
+    var issueObj = {},
+      selectedCategory = form.querySelector('#entry-category'),
+      categoryText = selectedCategory.options[selectedCategory.selectedIndex].text,
+      entryName = form.querySelector('#entry-name'),
+      author = form.querySelector('#author'),
+      url = form.querySelector('#url'),
+      descriptor = form.querySelector('#descriptor'),
+      dockerContainer = form.querySelector('#docker-container'),
+      singContainer = form.querySelector('#sing-container');
+
+    issueObj.title = "New Entry" + ' - ' + entryName.value;
+    issueObj.body = "Category: " + categoryText + "\n" +
+      "Entry name: " + entryName.value + "\n" +
+      "Author: " + author.value + "\n" +
+      "URL: " + url.value;
+
+    if (categoryText === 'Tool') {
+      issueObj.body = issueObj.body + "\n" +
+        "Boutiques descriptor URL: " + descriptor.value + "\n" +
+        "Docker container URL: " + dockerContainer.value + "\n" +
+        "Singularity container URL: " + singContainer.value;
+    }
+
+    return issueObj;
+  }
+
 </script>
 	</div>
   <div class="row entry-form">
