Commit 7d2840f7 authored by Ryan Herbert's avatar Ryan Herbert
Browse files

replace field labels with placeholders

refactor form_builder a little to use placeholders rather than labels.
Apply the same changes to the web2py form templates.
parent 3a64a574
......@@ -47,7 +47,7 @@ FormBuilder.prototype.build_label = function(txt, object, field) {
return l;
}
FormBuilder.prototype.build_input = function(id, className, name, input_type, set_type, required, placeholder) {
FormBuilder.prototype.build_input = function(id, className, name, input_type, set_type, placeholder, required) {
var i = document.createElement('input');
i.id = set_type + "_" + id + "_" + this.index;
i.className = "form-control " + className;
......@@ -65,7 +65,7 @@ FormBuilder.prototype.build_input = function(id, className, name, input_type, se
return i;
}
FormBuilder.prototype.build_field = function(id, name, label, required, placeholder) {
FormBuilder.prototype.build_field = function(id, name, label, required) {
if (typeof name === "undefined") {
name = id;
}
......@@ -75,17 +75,17 @@ FormBuilder.prototype.build_field = function(id, name, label, required, placehol
}
var d = this.build_wrapper();
d.appendChild(this.build_label(label, this.type, id));
d.appendChild(this.build_input(id, 'string', name, 'text', this.type, required, placeholder));
d.appendChild(this.build_input(id, 'string', name, 'text', this.type, label, required));
return d;
}
FormBuilder.prototype.build_textarea = function(id, className, name, set_type) {
FormBuilder.prototype.build_textarea = function(id, className, name, set_type, placeholder) {
var t = document.createElement('textarea');
t.id = set_type + "_" + id + "_" + this.index;
t.className = "form-control " + className;
t.name = set_type + "[" + this.index + "][" + name + "]";
t.rows = 1;
t.placeholder = placeholder;
return t;
}
......@@ -112,8 +112,7 @@ FormBuilder.prototype.build_date = function(id, object, name, label) {
}
var d = this.build_wrapper();
d.appendChild(this.build_label(label, object, id));
var i = this.build_input(id, 'date', name, 'text', object, false, 'yyyy-mm-dd');
var i = this.build_input(id, 'date', name, 'text', object, label+' (yyyy-mm-dd)', false);
i.pattern = "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))";
i.title = "yyyy-mm-dd"
d.appendChild(i);
......@@ -135,9 +134,9 @@ SetFormBuilder.prototype.set_id = function() {
SetFormBuilder.prototype.build_info = function() {
var d = this.build_wrapper();
var id = 'info';
d.appendChild(this.build_label('Info', this.type, id));
var label = labelise(id);
var txt = this.build_textarea('info', "text", 'info', this.type);
var txt = this.build_textarea('info', "text", 'info', this.type, label);
$(txt).data('needs-atwho', true);
$(txt).on('focus', function() {
$(this).data('keys', [$('#group_select option:selected').val()]);
......
......@@ -6,12 +6,10 @@
<div class="error">error: {{=", ".join(set['error'])}}</div>
{{pass}}
<div class="field_div">
<label for="sample_set_name_{{=i}}" id="sample_set_name__label_{{=i}}">Name:</label>
<input id="sample_set_name_{{=i}}" name="generic[{{=i}}][name]" type="text" class="string form-control"
value="{{if set is not None:}}{{=set['name']}}{{pass}}" required>
value="{{if set is not None:}}{{=set['name']}}{{pass}}" required placeholder="Name">
</div>
<div class="field_div">
<label for="sample_set_info_{{=i}}" id="sample_set_info__label_{{=i}}">Info:</label>
<textarea
onfocus="$(this).data('group-ids', [$('#group_select option:selected').val()]);
new VidjilAutoComplete().setupAtWho(this);"
......@@ -19,6 +17,7 @@
class="text form-control"
id="sample_set_info_{{=i}}"
name="generic[{{=i}}][info]"
rows="1">{{if set is not None and set['info'] is not None:}}{{=set['info']}}{{pass}}</textarea>
rows="1"
placeholder="Info">{{if set is not None and set['info'] is not None:}}{{=set['info']}}{{pass}}</textarea>
</div>
</fieldset>
......@@ -6,28 +6,23 @@
<div class="error">error: {{=", ".join(set['error'])}}</div>
{{ pass }}
<div class="field_div">
<label for="patient_id_label_{{=i}}" id="patient_id_label__label_{{=i}}">Patient ID:</label>
<input class="date form-control" id="patient_id_label_{{=i}}" name="patient[{{=i}}][id_label]" type="text"
value="{{if set is not None and set['id_label'] is not None:}}{{=set['id_label']}}{{pass}}">
value="{{if set is not None and set['id_label'] is not None:}}{{=set['id_label']}}{{pass}}" placeholder="Patient ID">
</div>
<div class="field_div">
<label for="patient_first_name_{{=i}}" id="patient_first_name__label_{{=i}}">First Name:</label>
<input class="string form-control" id="patient_first_name_{{=i}}" name="patient[{{=i}}][first_name]" type="text"
value="{{if set is not None:}}{{=set['first_name']}}{{pass}}" required>
value="{{if set is not None:}}{{=set['first_name']}}{{pass}}" required placeholder="First Name">
</div>
<div class="field_div">
<label for="patient_last_name_{{=i}}" id="patient_last_name__label_{{=i}}">Last Name:</label>
<input class="string form-control" id="patient_last_name_{{=i}}" name="patient[{{=i}}][last_name]" type="text"
value="{{if set is not None:}}{{=set['last_name']}}{{pass}}" required>
value="{{if set is not None:}}{{=set['last_name']}}{{pass}}" required placeholder="Last Name">
</div>
<div class="field_div">
<label for="patient_birth_{{=i}}" id="patient_birth__label_{{=i}}">Birth:</label>
<input class="date form-control" id="patient_birth_{{=i}}" name="patient[{{=i}}][birth]" type="text"
value="{{if set is not None and set['birth'] is not None:}}{{=set['birth']}}{{pass}}"
placeholder="yyyy-mm-dd" title="yyyy-mm-dd" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))">
title="yyyy-mm-dd" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" placeholder="Birth (yyyy-mm-dd)">
</div>
<div class="field_div">
<label for="patient_info_{{=i}}" id="patient_info__label_{{=i}}">Info:</label>
<textarea
onfocus="$(this).data('keys', [$('#group_select option:selected').val()]);
new VidjilAutoComplete().setupTags(this);"
......@@ -35,6 +30,7 @@
class="text form-control"
id="patient_info_{{=i}}"
name="patient[{{=i}}][info]"
rows="1">{{if set is not None and set['info'] is not None:}}{{=set['info']}}{{pass}}</textarea>
rows="1"
placeholder="Info">{{if set is not None and set['info'] is not None:}}{{=set['info']}}{{pass}}</textarea>
</div>
</fieldset>
......@@ -6,23 +6,19 @@
<div class="error">error: {{=", ".join(set['error'])}}</div>
{{ pass }}
<div class="field_div">
<label for="run_id_label_{{=i}}" id="run_id_label__label_{{=i}}">Run ID:</label>
<input class="date" id="run_id_label_{{=i}}" name="run[{{=i}}][id_label]" type="text"
value="{{if set is not None and set['id_label'] is not None:}}{{=set['id_label']}}{{pass}}"><span></span>
value="{{if set is not None and set['id_label'] is not None:}}{{=set['id_label']}}{{pass}}" placeholder="Run ID"><span></span>
</div>
<div class="field_div">
<label for="run_name_{{=i}}" id="run_name__label_{{=i}}">Name:</label>
<input class="string form-control" id="run_name_{{=i}}" name="run[{{=i}}][name]" type="text"
value="{{if set is not None:}}{{=set['name']}}{{pass}}" required>
value="{{if set is not None:}}{{=set['name']}}{{pass}}" required placeholder="Name">
</div>
<div class="field_div">
<label for="run_date_{{=i}}" id="run_date__label_{{=i}}">Date:</label>
<input id="run_date_{{=i}}" name="run[{{=i}}][run_date]" type="text" class="date form-control"
value="{{if set is not None and set['run_date'] is not None:}}{{=set['run_date']}}{{pass}}"
placeholder="yyyy-mm-dd" title="yyyy-mm-dd" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))">
placeholder="Date (yyyy-mm-dd)" title="yyyy-mm-dd" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))">
</div>
<div class="field_div">
<label for="run_info_{{=i}}" id="run_info__label_{{=i}}">Info:</label>
<textarea
onfocus="$(this).data('group-ids', [$('#group_select option:selected').val()]);
new VidjilAutoComplete().setupAtWho(this);"
......@@ -30,16 +26,15 @@
class="text form-control"
id="run_info+{{=i}}"
name="run[{{=i}}][info]"
rows="1">{{if set is not None and set['info'] is not None:}}{{=set['info']}}{{pass}}</textarea>
rows="1"
placeholder="Info">{{if set is not None and set['info'] is not None:}}{{=set['info']}}{{pass}}</textarea>
</div>
<div class="field_div">
<label for="run_sequencer_{{=i}}" id="run_sequencer__label_{{=i}}">Sequencer:</label>
<input id="run_sequencer_{{=i}}" name="run[{{=i}}][sequencer]" type="text" class="form-control"
value="{{if set is not None and set['sequencer'] is not None:}}{{=set['sequencer']}}{{pass}}">
value="{{if set is not None and set['sequencer'] is not None:}}{{=set['sequencer']}}{{pass}}" placeholder="Sequencer">
</div>
<div class="field_div">
<label for="run_pcr_{{=i}}" id="pcr__label_{{=i}}">PCR:</label>
<input id="run_pcr_{{=i}}" name="run[{{=i}}][pcr]" type="text" class="form-control"
value="{{if set is not None and set['pcr'] is not None:}}{{=set['pcr']}}{{pass}}">
value="{{if set is not None and set['pcr'] is not None:}}{{=set['pcr']}}{{pass}}" placeholder="PCR">
</div>
</fieldset>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment