Skip to content

Commit e45e06e

Browse files
jakirkhamjakirkham
committed
Create a webpage to fill out the config file and download as JSON.
1 parent 378b401 commit e45e06e

File tree

3 files changed

+204
-0
lines changed

3 files changed

+204
-0
lines changed

‎css/form.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
form {
2+
width: 80%;
3+
margin: 0 auto;
4+
}
5+
label,
6+
input[type="text"] {
7+
display: inline-block;
8+
}
9+
h2 {
10+
width: 30%;
11+
text-align: right;
12+
}
13+
label {
14+
width: 30%;
15+
text-align: right;
16+
}
17+
label + input[type="text"] {
18+
width: 30%;
19+
margin: 0 30% 0 4%;
20+
}
21+
label + .buttons {
22+
width: 30%;
23+
display: inline-block;
24+
text-align: right;
25+
margin: 0 30% 0 4%;
26+
}

‎index.html‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<html>
2+
3+
<head>
4+
<title>Lab Data Config Form</title>
5+
<!-- Include CSS File Here -->
6+
<link rel="stylesheet" type="text/css" href="css/form.css">
7+
<!-- Include JS File Here -->
8+
<script src="js/submit.js"></script>
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<div class="main">
14+
<form action="#" method="post" name="form_name" id="form_id" class="form_class">
15+
<h2>Lab Data Config Form</h2>
16+
<label>Rig Name :
17+
<input type="text" name="Rig_Name" id="Rig_Name" placeholder="Rig Name" />
18+
</label>
19+
<br>
20+
<label>User :
21+
<input type="text" name="User" id="User" placeholder="User" />
22+
</label>
23+
<br>
24+
<label>Proj Code :
25+
<input type="text" name="Proj_Code" id="Proj_Code" placeholder="Proj Code" />
26+
</label>
27+
<br>
28+
<label>Rec Sys :
29+
<input type="text" name="Rec_Sys" id="Rec_Sys" placeholder="Rec Sys" />
30+
</label>
31+
<br>
32+
<label>Behav Code Ver :
33+
<input type="text" name="Behav_Code_Ver" id="Behav_Code_Ver" placeholder="Behav Code Ver" />
34+
</label>
35+
<br>
36+
<label>NS Path :
37+
<input type="text" name="NS_Path" id="NS_Path" placeholder="NS Path" />
38+
</label>
39+
<br>
40+
<label>Behav Path :
41+
<input type="text" name="Behav_Path" id="Behav_Path" placeholder="Behav Path" />
42+
</label>
43+
<br>
44+
<label>Jpos X Ch :
45+
<input type="number" step=1 name="Jpos_X_Ch" id="Jpos_X_Ch" placeholder="Jpos X Ch" />
46+
</label>
47+
<br>
48+
<label>Jpos Y Ch :
49+
<input type="number" step=1 name="Jpos_Y_Ch" id="Jpos_Y_Ch" placeholder="Jpos Y Ch" />
50+
</label>
51+
<br>
52+
<label>Mpos X Ch :
53+
<input type="number" step=1 name="Mpos_X_Ch" id="Mpos_X_Ch" placeholder="Mpos X Ch" />
54+
</label>
55+
<br>
56+
<label>Mpos Y Ch :
57+
<input type="number" step=1 name="Mpos_Y_Ch" id="Mpos_Y_Ch" placeholder="Mpos Y Ch" />
58+
</label>
59+
<br>
60+
<label>Lick Ch :
61+
<input type="number" step=1 name="Lick_Ch" id="Lick_Ch" placeholder="Lick Ch" />
62+
</label>
63+
<br>
64+
<label>Rew Ch :
65+
<input type="number" step=1 name="Rew_Ch" id="Rew_Ch" placeholder="Rew Ch" />
66+
</label>
67+
<br>
68+
<label>Trial Start Ch :
69+
<input type="number" step=1 name="Trial_Start_Ch" id="Trial_Start_Ch" placeholder="Trial Start Ch" />
70+
</label>
71+
<br>
72+
<label>Trial Event Ch :
73+
<input type="number" step=1 name="Trial_Event_Ch" id="Trial_Event_Ch" placeholder="Trial Event Ch" />
74+
</label>
75+
<br>
76+
<label>Stim1 :
77+
<input type="text" name="Stim1" id="Stim1" placeholder="Stim1" />
78+
</label>
79+
<br>
80+
<label>Stim2 :
81+
<input type="text" name="Stim2" id="Stim2" placeholder="Stim2" />
82+
</label>
83+
<br>
84+
<label>Trial Start :
85+
<input type="number" step="any" name="Trial_Start" id="Trial_Start" placeholder="Trial Start" />
86+
</label>
87+
<br>
88+
<label>Operant Event1 :
89+
<input type="number" step="any" name="Operant_Event1" id="Operant_Event1" placeholder="Operant_Event1" />
90+
</label>
91+
<br>
92+
<label>Operant Event2 :
93+
<input type="number" step="any" name="Operant_Event2" id="Operant_Event2" placeholder="Operant_Event2" />
94+
</label>
95+
<br>
96+
<label>Water Port :
97+
<input type="number" step="any" name="Water_Port" id="Water_Port" placeholder="Water_Port" />
98+
</label>
99+
<br>
100+
<label>Laser Power :
101+
<input type="number" step="any" name="LaserPower" id="LaserPower" placeholder="LaserPower" />
102+
</label>
103+
<br>
104+
<br>
105+
<label>Filename to Save As:
106+
<input id="inputFileNameToSaveAs" value="config.json"></input>
107+
</label>
108+
<br>
109+
<label>
110+
<div class="buttons">
111+
<input type="reset" value="Reset">
112+
<input type="submit" value="Save" onclick="submit_form()">
113+
</div>
114+
</label>
115+
</form>
116+
</div>
117+
</div>
118+
</body>
119+
120+
</html>

‎js/submit.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// Submit form.
2+
function submit_form()
3+
{
4+
var data_elements = document.querySelectorAll("#form_id input[type=text], input[type=number]");
5+
var data_obj = {};
6+
for (var i = 0; i < data_elements.length; i++)
7+
{
8+
value = data_elements[i].value;
9+
if (data_elements[i].type == "number")
10+
{
11+
if (data_elements[i].step == "1")
12+
{
13+
value = parseInt(value);
14+
}
15+
else
16+
{
17+
value = parseFloat(value);
18+
}
19+
}
20+
data_obj[data_elements[i].name] = value;
21+
}
22+
if (validate_data(data_obj)) // Calling validation function
23+
{
24+
var textToSave = JSON.stringify(data_obj, null, 4);
25+
var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
26+
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
27+
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
28+
29+
var downloadLink = document.createElement("a");
30+
downloadLink.download = fileNameToSaveAs;
31+
downloadLink.innerHTML = "Download File";
32+
downloadLink.href = textToSaveAsURL;
33+
downloadLink.onclick = destroyClickedElement;
34+
downloadLink.style.display = "none";
35+
document.body.appendChild(downloadLink);
36+
37+
downloadLink.click();
38+
}
39+
}
40+
41+
function destroyClickedElement(event)
42+
{
43+
document.body.removeChild(event.target);
44+
}
45+
46+
// Data validation function.
47+
function validate_data(a_data_obj)
48+
{
49+
for (var key in a_data_obj.length)
50+
{
51+
if (a_data_obj[key] === '')
52+
{
53+
alert("Please fill all fields...!!!!!!");
54+
}
55+
}
56+
57+
return true;
58+
}

0 commit comments

Comments
 (0)