app/features/project/views/new_project_form.erb
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout__title"><%= title %></span>
</div>
</header>
<script>
var valid_name = false;
var valid_branch = false;
var valid_lane = false;
var valid_trigger = false;
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll("#submit_form")[0].disabled = true;
document.querySelectorAll("#selected_lane")[0].style.display = "none";
document.querySelectorAll("#lane_to_run")[0].style.display = "none";
document.querySelectorAll("#loading")[0].style.display = "none";
document.querySelectorAll("#trigger")[0].style.display = "none";
document.querySelectorAll("#trigger_selector")[0].style.display = "none";
document.querySelectorAll("#nightly")[0].style.display = "none";
check_existence(document.querySelectorAll("input[name=project_name]")[0].value);
setInterval(function() {
max_dots = 5;
str = document.querySelectorAll("#loading")[0].querySelector("p").innerHTML;
number_of_dots = (str.match(/\./gi) || []).length;
if (number_of_dots < max_dots) {
str += ".";
} else {
str = "Loading - this might take a while depending on the repo size"
}
document.querySelectorAll("#loading")[0].querySelector("p").innerHTML = str;
}, 1000);
});
function string_to_node(string) {
var d = document.createElement('div');
d.innerHTML = string;
return d.firstChild;
}
var request = null;
function check_branch(el) {
if (request != null) {
request.abort();
}
document.querySelectorAll("#submit_form")[0].disabled = true;
document.querySelectorAll("#selected_lane")[0].style.display = "none";
document.querySelectorAll("#selected_lane")[0].innerHTML = "";
document.querySelectorAll("#loading")[0].style.display = "";
document.querySelectorAll("#trigger")[0].style.display = "none";
document.querySelectorAll("#trigger_selector")[0].style.display = "none";
document.querySelectorAll("#nightly")[0].style.display = "none";
request = new XMLHttpRequest();
request.timeout = 1000 * 60 * 10; // 10 minutes
request.responseType = 'json';
request.open('GET', "/projects_erb/<%= repo %>/" + el.value + "/lanes", true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
var lanes = request.response;
document.querySelectorAll("#loading")[0].style.display = "none";
document.querySelectorAll("#selected_lane")[0].appendChild(string_to_node("<option disabled selected value>Select a lane</option>"));
lanes.forEach(function (lane) {
var name = lane["display_name"];
var id = lane["platform"] + " " + lane["name"];
document.querySelectorAll("#selected_lane")[0].append(string_to_node('<option value="'+ id +'">'+ name +'</option>'));
});
document.querySelectorAll("#selected_lane")[0].style.display = "";
document.querySelectorAll("#lane_to_run")[0].style.display = "";
valid_branch = true;
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.onprogress = function () {
document.querySelectorAll("#loading")[0].style.display = "";
};
request.send();
}
function check_lane() {
document.querySelectorAll("#trigger")[0].style.display = "";
document.querySelectorAll("#trigger_selector")[0].style.display = "";
valid_lane = true;
}
function check_trigger(el) {
var trigger_value = el.value;
switch(trigger_value) {
case "commit":
valid_trigger = true;
document.querySelectorAll("#nightly")[0].style.display = "none";
check_nightly(null);
break;
case "manual":
valid_trigger = true;
document.querySelectorAll("#nightly")[0].style.display = "none";
check_nightly(null);
break;
case "nightly":
document.querySelectorAll("#nightly")[0].style.display = "";
check_nightly(document.querySelectorAll("#nightly")[0]);
break;
}
}
function check_nightly(el) {
if (el && el.value) {
if (isFinite(parseInt(document.querySelectorAll("#minute")[0].value)) && isFinite(parseInt(document.querySelectorAll("#hour")[0].value))) {
valid_trigger = true;
}
else {
valid_trigger = false;
}
} else {
if (isFinite(parseInt(document.querySelectorAll("#minute")[0].value)) && isFinite(parseInt(document.querySelectorAll("#hour")[0].value))) {
valid_trigger = true;
}
}
}
var valid_request = null;
function check_existence(value) {
if (value) {
if (valid_request != null) {
valid_request.abort();
}
valid_request = new XMLHttpRequest();
valid_request.timeout = 1000 * 60 * 10; // 10 minutes
valid_request.responseType = 'json';
valid_request.open('GET', "/projects_erb/" + value + "/valid", true);
valid_request.onload = function() {
if (valid_request.status >= 200 && valid_request.status < 400) {
var data = valid_request.response;
if (data["valid"] == false) {
document.querySelectorAll("#project_name")[0].classList.add("is-dirty");
document.querySelectorAll("#project_name")[0].classList.add("is-invalid");
valid_name = false;
} else {
document.querySelectorAll("#project_name")[0].classList.remove("is-dirty");
document.querySelectorAll("#project_name")[0].classList.remove("is-invalid");
valid_name = true;
}
} else {
// We reached our target server, but it returned an error
}
};
valid_request.onerror = function() {
// There was a connection error of some sort
};
valid_request.onprogress = function () {
};
valid_request.send();
}
}
setInterval(function() {
if (valid_branch && valid_name && valid_lane && valid_trigger) {
document.querySelectorAll("#submit_form")[0].disabled = false;
} else {
document.querySelectorAll("#submit_form")[0].disabled = true;
}
}, 100);
</script>
<%= erb :"../../global/navigation" %>
<main class="mdl-layout__content" style="padding: 40px">
<form method="POST" action="/projects_erb/<%= repo %>/add">
<h5>Adding <%= repo %></h5>
<div class="mdl-textfield mdl-js-textfield" id="project_name">
<input class="mdl-textfield__input" type="text" name="project_name" value="<%= repo %>" onchange="check_existence(this.value);">
<label class="mdl-textfield__label" for="project_name">Project Name</label>
<span class="mdl-textfield__error">Project Name must be unique</span>
</div>
<br />
<h5>Select a branch</h5>
<select name="branch" id="branch" onchange="check_branch(this)">
<option disabled selected value>Select a branch</option>
<% branches.each do |branch| %>
<option value="<%= branch %>"><%= branch %></option>
<% end %>
</select>
<br />
<h5 id="lane_to_run">Lane to run</h5>
<div id="loading">
<br />
<p>Loading...</p>
</div>
<select name="selected_lane" id="selected_lane" onchange="check_lane()">
</select>
<br />
<h5 id="trigger">Select trigger</h5>
<div id="trigger_selector">
<select name="selected_trigger", id="selected_trigger", onchange="check_trigger(this)">
<option disabled selected value>Select a trigger</option>
<option value="commit">Commit</option>
<option value="manual">Manual</option>
<option value="nightly">Nightly</option>
</select>
<div id="nightly">
<br />
<br />
<p>Select the nightly schedule</p>
<select name="hour", id="hour", onchange="check_nightly(this)">
<option disabled selected value>Select an hour</option>
<% (0..23).each do |hour| %>
<option value="<%= hour %>"><%= hour %></option>
<% end %>
</select>
<select name="minute", id="minute", onchange="check_nightly(this)">
<option disabled selected value>Select a minute</option>
<% (0..59).each do |minute| %>
<option value="<%= minute %>"><%= minute %></option>
<% end %>
</select>
</div>
<br />
<br />
<input id="submit_form" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" type="submit" title="Save">
</form>
</main>
</div>