arona/PyRIGS
1
0
Fork 0
mirror of https://github.com/nottinghamtec/PyRIGS.git synced 2026-01-17 13:32:15 +00:00
Code Issues Projects Releases Wiki Activity

Made a nice new UI for autocompleting

Browse Source
This commit is contained in:
David Taylor
2015-04-22 13:27:56 +01:00
parent 0618684de8
commit 66236df979
9 changed files with 2940 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
RIGS/static/css/ajax-bootstrap-select.css Executable file
View File

@@ -0,0 +1,27 @@
/*!
* Ajax Bootstrap Select
*
* Extends existing [Bootstrap Select] implementations by adding the ability to search via AJAX requests as you type. Originally for CROSCON.
*
* @version 1.3.1
* @author Adam Heim - https://github.com/truckingsim
* @link https://github.com/truckingsim/Ajax-Bootstrap-Select
* @copyright 2015 Adam Heim
* @license Released under the MIT license.
*
* Contributors:
* Mark Carver - https://github.com/markcarver
*
* Last build: 2015-01-06 8:43:11 PM EST
*/
.bootstrap-select .status {
background: #f0f0f0;
clear: both;
color: #999;
font-size: 11px;
font-style: italic;
font-weight: 500;
line-height: 1;
margin-bottom: -5px;
padding: 10px 20px;
}

6
RIGS/static/css/bootstrap-select.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1554
RIGS/static/js/ajax-bootstrap-select.js Executable file
View File

File diff suppressed because it is too large Load Diff

123
RIGS/static/js/autocompleter.js
View File

@@ -1,29 +1,104 @@
$(document).ready(function() {
$(".autocomplete-json").each(function() {
var field = $(this)
$.getJSON($(this).data('valueurl'), function(json) {
field.val(json[0]['fields']['name']);
});
var source = $(this).data('sourceurl');
$(this).autocomplete({
source: source,
minLength: 3,
delay: 500,
focus: function(e, ui) {
e.preventDefault();
$(this).val(ui.item.label);
},
select: function(e, ui) {
e.preventDefault();
$(this).val(ui.item.label);
$("#"+$(this).data('target')).val(ui.item.value)
clearSelectionLabel = '(no selection)';
function changeSelectedValue(obj,pk,text,update_url) { //Pass in JQuery object and new parameters
//console.log('Changing selected value');
obj.find('option').remove(); //Remove all the available options
obj.append( //Add the new option
$("<option></option>")
.attr("value",pk)
.text(text)
.data('update_url',update_url)
);
obj.selectpicker('render'); //Re-render the UI
obj.selectpicker('refresh'); //Re-render the UI
obj.selectpicker('val', pk); //Set the new value to be selected
obj.change(); //Trigger the change function manually
}
function refreshUpdateHref(obj) {
//console.log('Refreshing Update URL');
targetObject = $('#'+obj.attr('id')+'-update');
update_url = $('option:selected', obj).data('update_url');
if (update_url=="") { //Probably "clear selection" has been chosen
// console.log('Trying to disable');
targetObject.attr('disabled', true);
} else {
// targetObject.attr('href', update_url);
targetObject.attr('disabled', false);
}
}
$(".selectpicker").each(function() {
var options = {
ajax: {
url: $(this).data('sourceurl'),
type: 'GET',
dataType: 'json',
// Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will
// automatically replace it with the value of the search query.
data: {
term: '{{{q}}}'
}
});
$(this).on('blur', function () {
if ($(this).val() == "") {
$("#" + $(this).data('target')).val('');
},
locale: {
emptyTitle: ''
},
clearOnEmpty:false,
//log: 3,
preprocessData: function (data) {
var i, l = data.length, array = [];
array.push({
text: clearSelectionLabel,
value: '',
data:{
update_url: '',
subtext:''
}
});
if (l) {
for(i = 0; i < l; i++){
array.push($.extend(true, data[i], {
text: data[i]['label'],
value: data[i]['pk'],
data:{
update_url: data[i]['update'],
subtext:''
}
}));
}
}
})
return array;
}
};
$(this).prepend($("<option></option>")
.attr("value",'')
.text(clearSelectionLabel)
.data('update_url','')); //Add "clear selection" option
$(this).selectpicker().ajaxSelectPicker(options); //Initiaise selectPicker
$(this).change(function(){ //on change, update the edit button href
// console.log('Selectbox Changed');
refreshUpdateHref($(this));
});
refreshUpdateHref($(this)); //Ensure href is correct at the beginning
});
//When update/edit modal box submitted
$('#modal').on('hide.bs.modal', function (e) {
if (modaltarget != undefined && modalobject != "") {
//Update the selector with new values
changeSelectedValue($(modaltarget),modalobject[0]['pk'],modalobject[0]['fields']['name'],modalobject[0]['update_url']);
}
});
});

1209
RIGS/static/js/bootstrap-select.js vendored Executable file
View File

File diff suppressed because it is too large Load Diff

8
RIGS/static/js/interaction.js
View File

@@ -132,12 +132,4 @@ $("#item-table tbody").sortable({
});
}
});
$('.autocomplete-update').on("autocompleteselect", function(event, ui) {
update_url = ui['item']['update'];
target = $('#' + event['target'].dataset.target + "-update");
console.log(update_url);
console.log(target);
target.attr('href', update_url);
});

79
RIGS/templates/RIGS/event_form.html
View File

@@ -6,7 +6,8 @@
{{ object.pk }}{% endif %}{% else %}New Event{% endif %}{% endblock %}
{% block css %}
<link href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" href="{% static "css/bootstrap-select.min.css" %}"/>
<link rel="stylesheet" href="{% static "css/ajax-bootstrap-select.css" %}"/>
{% endblock %}
{% block js %}
@@ -14,6 +15,9 @@
<script src="{% static "js/interaction.js" %}"></script>
<script src="{% static "js/modal.js" %}"></script>
<script src="{% static "js/bootstrap-select.js" %}"></script>
<script src="{% static "js/ajax-bootstrap-select.js" %}"></script>
<script src="{% static "js/autocompleter.js" %}"></script>
<script>
@@ -123,15 +127,12 @@
<div class="col-sm-8">
<div class="row">
<input type="hidden" id="{{ form.person.id_for_label }}" name="{{ form.person.name }}"
value="{{ form.person.value|default_if_none:"" }}"/>
<div class="col-sm-9 col-md-7 col-lg-8">
<input type="text" id="{{ form.person.id_for_label }}-input"
class="form-control autocomplete-json autocomplete-update"
value="{{ person|default_if_none:"" }}"
data-sourceurl="{% url 'api_secure' model='person' %}"
data-target="{{ form.person.id_for_label }}"/>
<select id="{{ form.person.id_for_label }}" name="{{ form.person.name }}" class="form-control selectpicker" data-live-search="true" data-sourceurl="{% url 'api_secure' model='person' %}">
{% if person %}
<option value="{{form.person.value}}" selected="selected" data-update_url="{% url 'person_update' form.person.value %}">{{ person }}</option>
{% endif %}
</select>
</div>
<div class="col-sm-3 col-md-5 col-lg-4 align-right">
<div class="btn-group">
@@ -139,7 +140,7 @@
data-target="#{{ form.person.id_for_label }}">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a href="{% if form.person.value %}{% url 'person_update' form.person.value %}{% endif %}" class="btn btn-default modal-href" id="{{ form.person.id_for_label }}-update">
<a href="{% if form.person.value %}{% url 'person_update' form.person.value %}{% endif %}" class="btn btn-default modal-href" id="{{ form.person.id_for_label }}-update" data-target="#{{ form.person.id_for_label }}">
<span class="glyphicon glyphicon-pencil"></span>
</a>
</div>
@@ -153,16 +154,12 @@
<div class="col-sm-8">
<div class="row">
<input type="hidden" id="{{ form.organisation.id_for_label }}"
name="{{ form.organisation.name }}"
value="{{ form.organisation.value|default_if_none:"" }}"/>
<div class="col-sm-9 col-md-7 col-lg-8">
<input type="text" id="{{ form.organisation.id_for_label }}-input"
class="form-control autocomplete-json autocomplete-update"
value="{{ organisation|default_if_none:"" }}"
data-sourceurl="{% url 'api_secure' model='organisation' %}"
data-target="{{ form.organisation.id_for_label }}"/>
<select id="{{ form.organisation.id_for_label }}" name="{{ form.organisation.name }}" class="form-control selectpicker" data-live-search="true" data-sourceurl="{% url 'api_secure' model='organisation' %}">
{% if organisation %}
<option value="{{form.organisation.value}}" selected="selected" data-update_url="{% url 'organisation_update' form.organisation.value %}">{{ organisation }}</option>
{% endif %}
</select>
</div>
<div class="col-sm-3 col-md-5 col-lg-4 align-right">
<div class="btn-group">
@@ -170,7 +167,7 @@
data-target="#{{ form.organisation.id_for_label }}">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a href="{% if form.organisation.value %}{% url 'organisation_update' form.organisation.value %}{% endif %}" class="btn btn-default modal-href" id="{{ form.organisation.id_for_label }}-update">
<a href="{% if form.organisation.value %}{% url 'organisation_update' form.organisation.value %}{% endif %}" class="btn btn-default modal-href" id="{{ form.organisation.id_for_label }}-update" data-target="#{{ form.organisation.id_for_label }}">
<span class="glyphicon glyphicon-pencil"></span>
</a>
</div>
@@ -216,15 +213,12 @@
<div class="col-sm-8">
<div class="row">
<input type="hidden" id="{{ form.venue.id_for_label }}" name="{{ form.venue.name }}"
value="{{ form.venue.value|default_if_none:"" }}"/>
<div class="col-sm-9 col-md-7 col-lg-8">
<input type="text" id="{{ form.venue.id_for_label }}-input"
class="form-control autocomplete-json autocomplete-update"
value="{{ venue|default_if_none:"" }}"
data-sourceurl="{% url 'api_secure' model='venue' %}"
data-target="{{ form.venue.id_for_label }}"/>
<select id="{{ form.venue.id_for_label }}" name="{{ form.venue.name }}" class="form-control selectpicker" data-live-search="true" data-sourceurl="{% url 'api_secure' model='venue' %}">
{% if venue %}
<option value="{{form.venue.value}}" selected="selected" data-update_url="{% url 'venue_update' form.venue.value %}">{{ venue }}</option>
{% endif %}
</select>
</div>
<div class="col-sm-3 col-md-5 col-lg-4 align-right">
<div class="btn-group">
@@ -232,7 +226,7 @@
data-target="#{{ form.venue.id_for_label }}">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a href="{% if object.venue %}{% url 'venue_update' object.venue.pk %}{% endif %}" class="btn btn-default modal-href" id="{{ form.venue.id_for_label }}-update">
<a href="{% if object.venue %}{% url 'venue_update' object.venue.pk %}{% endif %}" class="btn btn-default modal-href" id="{{ form.venue.id_for_label }}-update" data-target="#{{ form.venue.id_for_label }}">
<span class="glyphicon glyphicon-pencil"></span>
</a>
</div>
@@ -325,14 +319,11 @@
class="col-sm-4 control-label">{{ form.mic.label }}</label>
<div class="col-sm-8">
<input type="hidden" id="{{ form.mic.id_for_label }}" name="{{ form.mic.name }}"
value="{{ form.mic.value|default_if_none:"" }}"/>
<input type="text" id="{{ form.mic.id_for_label }}-input"
class="form-control autocomplete-json"
data-sourceurl="{% url 'api_secure' model='profile' %}?fields=first_name,last_name,initials"
data-target="{{ form.mic.id_for_label }}"
value="{{ mic.name|default_if_none:"" }}"/>
<select id="{{ form.mic.id_for_label }}" name="{{ form.mic.name }}" class="form-control selectpicker" data-live-search="true" data-sourceurl="{% url 'api_secure' model='profile' %}?fields=first_name,last_name,initials">
{% if mic %}
<option value="{{form.mic.value}}" selected="selected" >{{ mic.name }}</option>
{% endif %}
</select>
</div>
</div>
@@ -342,15 +333,11 @@
class="col-sm-4 control-label">{{ form.checked_in_by.label }}</label>
<div class="col-sm-8">
<input type="hidden" id="{{ form.checked_in_by.id_for_label }}"
name="{{ form.checked_in_by.name }}"
value="{{ form.checked_in_by.value|default_if_none:"" }}"/>
<input type="text" id="{{ form.checked_in_by.id_for_label }}-input"
class="form-control autocomplete-json"
data-sourceurl="{% url 'api_secure' model='profile' %}?fields=first_name,last_name,initials"
data-target="{{ form.checked_in_by.id_for_label }}"
value="{{ checked_in_by.name|default_if_none:"" }}"/>
<select id="{{ form.checked_in_by.id_for_label }}" name="{{ form.checked_in_by.name }}" class="form-control selectpicker" data-live-search="true" data-sourceurl="{% url 'api_secure' model='profile' %}?fields=first_name,last_name,initials">
{% if checked_in_by %}
<option value="{{form.checked_in_by.value}}" selected="selected" >{{ checked_in_by.name }}</option>
{% endif %}
</select>
</div>
</div>
{% endif %}

12
RIGS/views.py
View File

@@ -71,7 +71,9 @@ class PersonCreate(generic.CreateView):
def get_success_url(self):
if self.request.is_ajax():
url = reverse_lazy('closemodal')
update_url = str(reverse_lazy('person_update',kwargs={'pk':self.object.pk}))
messages.info(self.request, "modalobject="+serializers.serialize("json", [self.object]))
messages.info(self.request, "modalobject[0]['update_url']='"+update_url+"'")
else:
url = reverse_lazy('person_detail', kwargs={
'pk': self.object.pk,
@@ -85,7 +87,9 @@ class PersonUpdate(generic.UpdateView):
def get_success_url(self):
if self.request.is_ajax():
url = reverse_lazy('closemodal')
update_url = str(reverse_lazy('person_update',kwargs={'pk':self.object.pk}))
messages.info(self.request, "modalobject="+serializers.serialize("json", [self.object]))
messages.info(self.request, "modalobject[0]['update_url']='"+update_url+"'")
else:
url = reverse_lazy('person_detail', kwargs={
'pk': self.object.pk,
@@ -119,7 +123,9 @@ class OrganisationCreate(generic.CreateView):
def get_success_url(self):
if self.request.is_ajax():
url = reverse_lazy('closemodal')
update_url = str(reverse_lazy('organisation_update',kwargs={'pk':self.object.pk}))
messages.info(self.request, "modalobject="+serializers.serialize("json", [self.object]))
messages.info(self.request, "modalobject[0]['update_url']='"+update_url+"'")
else:
url = reverse_lazy('organisation_detail', kwargs={
'pk': self.object.pk,
@@ -133,7 +139,9 @@ class OrganisationUpdate(generic.UpdateView):
def get_success_url(self):
if self.request.is_ajax():
url = reverse_lazy('closemodal')
update_url = str(reverse_lazy('organisation_update',kwargs={'pk':self.object.pk}))
messages.info(self.request, "modalobject="+serializers.serialize("json", [self.object]))
messages.info(self.request, "modalobject[0]['update_url']='"+update_url+"'")
else:
url = reverse_lazy('organisation_detail', kwargs={
'pk': self.object.pk,
@@ -167,7 +175,9 @@ class VenueCreate(generic.CreateView):
def get_success_url(self):
if self.request.is_ajax():
url = reverse_lazy('closemodal')
update_url = str(reverse_lazy('venue_update',kwargs={'pk':self.object.pk}))
messages.info(self.request, "modalobject="+serializers.serialize("json", [self.object]))
messages.info(self.request, "modalobject[0]['update_url']='"+update_url+"'")
else:
url = reverse_lazy('venue_detail', kwargs={
'pk': self.object.pk,
@@ -181,7 +191,9 @@ class VenueUpdate(generic.UpdateView):
def get_success_url(self):
if self.request.is_ajax():
url = reverse_lazy('closemodal')
update_url = str(reverse_lazy('venue_update',kwargs={'pk':self.object.pk}))
messages.info(self.request, "modalobject="+serializers.serialize("json", [self.object]))
messages.info(self.request, "modalobject[0]['update_url']='"+update_url+"'")
else:
url = reverse_lazy('venue_detail', kwargs={
'pk': self.object.pk,

6
templates/base.html
View File

@@ -162,12 +162,6 @@
jQuery('#modal').load(jQuery(this).attr('href'), function (e) {
jQuery('#modal').modal();
});
jQuery('#modal').on('hide.bs.modal', function (e) {
if (modaltarget != "" && modalobject != "") {
jQuery(modaltarget).val(modalobject[0]['pk']);
jQuery(modaltarget + '-input').val(modalobject[0]['fields']['name']);
}
})
});
});
</script>