Skip to content

Open Github issue with contents of web form #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Open Github issue with contents of web form #18

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5344f19
Adding a form that creates a github issue
Oct 1, 2017
3826e25
Open Github issue with contents of web form #13
Oct 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 159 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
margin-top: 40px;
}

.entry-form .form-success{
padding:15px;
}

@media screen and (min-width: 740px){
.entry-form{
width:50%;
}
}

.hidden{
display:none;
}
</style>
</head>

<body>
Expand Down Expand Up @@ -60,14 +84,16 @@ <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">
</demo-grid>
</div>
</div>



<script>
Vue.component('demo-grid', {
template: '#grid-template',
Expand Down Expand Up @@ -221,8 +247,140 @@ <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">
<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>