|
@@ -20,11 +20,27 @@
|
|
|
</div>
|
|
|
{% endif %}
|
|
|
<div class="panel panel-default">
|
|
|
- <div class="panel-heading"><strong>Devices</strong></div>
|
|
|
+ <div class="panel-heading"><strong>Device Selection</strong></div>
|
|
|
<div class="panel-body">
|
|
|
- {% render_field form.region %}
|
|
|
- {% render_field form.site %}
|
|
|
- {% render_field form.rack %}
|
|
|
+ <ul class="nav nav-tabs" role="tablist">
|
|
|
+ <li role="presentation" class="active"><a href="#search" aria-controls="search" role="tab" data-toggle="tab">Search</a></li>
|
|
|
+ <li role="presentation"><a href="#select" aria-controls="home" role="tab" data-toggle="tab">Select</a></li>
|
|
|
+ </ul>
|
|
|
+ <div class="tab-content">
|
|
|
+ <div class="tab-pane active" id="search">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="col-md-3 control-label" for="id_search">Search</label>
|
|
|
+ <div class="col-md-9">
|
|
|
+ <input type="text" class="form-control" name="search" id="id_search" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tab-pane" id="select">
|
|
|
+ {% render_field form.region %}
|
|
|
+ {% render_field form.site %}
|
|
|
+ {% render_field form.rack %}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
{% render_field form.devices %}
|
|
|
</div>
|
|
|
</div>
|
|
@@ -40,5 +56,26 @@
|
|
|
{% endblock %}
|
|
|
|
|
|
{% block javascript %}
|
|
|
- <script src="{% static 'js/livesearch.js' %}?v{{ settings.VERSION }}"></script>
|
|
|
+<script type="text/javascript">
|
|
|
+ $(document).ready(function() {
|
|
|
+ var device_list = $('#id_devices');
|
|
|
+ $('#id_search').autocomplete({
|
|
|
+ source: function(request, response) {
|
|
|
+ $.ajax({
|
|
|
+ type: 'GET',
|
|
|
+ url: netbox_api_path + 'dcim/devices/',
|
|
|
+ data: 'q=' + request.term,
|
|
|
+ beforeSend: function() {
|
|
|
+ device_list.empty();
|
|
|
+ },
|
|
|
+ success: function(data) {
|
|
|
+ response($.map(data.results, function(item) {
|
|
|
+ device_list.append('<option value="' + item['id'] + '">' + item['display_name'] + '</option>');
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+</script>
|
|
|
{% endblock %}
|