Переработана логика работы фильтра проектов. Доработан дизайн фильтра.remotes/origin/PR-39
booblegum
9 years ago
parent
7639bf1490
commit
08e108152c
15 changed files with 481 additions and 293 deletions
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,45 @@ |
||||
function getFormData($form, pageNum) { |
||||
var unindexed_array = $form.serializeArray(); |
||||
var indexed_array = {}; |
||||
|
||||
$.map(unindexed_array, function (n, i) { |
||||
indexed_array[n['name']] = n['value']; |
||||
}); |
||||
indexed_array["page"] = pageNum || ""; |
||||
return indexed_array; |
||||
} |
||||
|
||||
function modUrl($form, postfix) { |
||||
let curLoc = '?' + $form.serialize() + (postfix || ""); |
||||
try { |
||||
history.replaceState($form.serialize(), null, curLoc); |
||||
} catch (e) { |
||||
console.log("Error!"); |
||||
} |
||||
} |
||||
|
||||
function sendData(url, $form, pageNum) { |
||||
function updateResults(html) { |
||||
$container.html(html); |
||||
} |
||||
|
||||
const $container = $('#projectsBlock'); |
||||
$.ajax({ |
||||
url: url, |
||||
type: "POST", |
||||
dataType: 'html', |
||||
data: getFormData($form, pageNum), |
||||
beforeSend: function (xhr) { |
||||
xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken')); |
||||
}, |
||||
success: updateResults, |
||||
error: (data) => console.log("Error", data) |
||||
}); |
||||
} |
||||
|
||||
function sendFilterData(url) { |
||||
const $form = $('#filter-form'); |
||||
sendData('/projects/', $form); |
||||
modUrl($form); |
||||
return false; |
||||
} |
||||
@ -0,0 +1,119 @@ |
||||
<form id="filter-form" action="/projects" method="GET" novalidate> |
||||
|
||||
<div class="filter form-container"> |
||||
<div id="page-preloader"><span class="spinner"></span></div> |
||||
<div class="triangle1"></div> |
||||
<div class="row"> |
||||
<div class="col-lg-12"> |
||||
<div id="select-box-1"></div> |
||||
</div> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-lg-3"> |
||||
<div id="select-box-2"></div> |
||||
</div> |
||||
<div class="col-lg-3"> |
||||
<div id="select-box-3"></div> |
||||
</div> |
||||
<div class="col-lg-3"> |
||||
<div id="select-box-4"></div> |
||||
</div> |
||||
<div class="col-lg-3"> |
||||
<div id="select-box-5"></div> |
||||
</div> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-lg-12"> |
||||
<div class="selected-container horizontal" id="selected-spec"> |
||||
<input type="hidden" name="specialization" |
||||
value="{{ specialization }}"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="row separator"> |
||||
<div class="col-lg-5"> |
||||
<p class="titleResF1">Поиск по ключевым словам и фразам</p> |
||||
</div> |
||||
<div class="col-lg-7"> |
||||
<div class="borderS1"></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="row"> |
||||
<div class="col-lg-6"> |
||||
<input |
||||
type="text" |
||||
name="keywords" |
||||
onkeydown="event.keyCode === 13 && $(this).closest('form').submit()" |
||||
value="{{ form.keywords.value }}" |
||||
class="searchInp box-sizing" |
||||
placeholder="Ключевые слова, фразы"> |
||||
</div> |
||||
<div class="col-lg-3"> |
||||
{# $(this).closest('form').submit(); return false#} |
||||
<a href="" class="findReal" onclick="sendFilterData('/projects/'); return false"> |
||||
найти проект |
||||
</a> |
||||
</div> |
||||
<div class="col-lg-3"> |
||||
<a href="{% url 'projects:project-filter' %}" class="clearSearch"> |
||||
{# TODO: Сделать очистку, без перезагрузки#} |
||||
Очистить фильтр |
||||
</a> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<div class="row separator"> |
||||
<div class="col-lg-4"> |
||||
<p class="titleResF1">Расширенные поля</p> |
||||
<button class="resButtonF1"> |
||||
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span> |
||||
</button> |
||||
</div> |
||||
<div class="col-lg-8"> |
||||
<div class="borderS1"></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="slideRes disTab activeSlide"> |
||||
<div class="row"> |
||||
<div class="col-lg-3"> |
||||
<div id="sb-building-classification"></div> |
||||
<div id="sb-building-sub-classification"></div> |
||||
<div class="selected-container" id="selected-building-classification"> |
||||
<input type="hidden" name="building_classification" |
||||
value="{{ building_classification }}"> |
||||
</div> |
||||
</div> |
||||
<div class="col-lg-3"> |
||||
<div id="sb-construction-type"></div> |
||||
<div class="selected-container" id="selected-construction-type"> |
||||
<input type="hidden" name="construction_type" |
||||
value="{{ construction_type }}"> |
||||
</div> |
||||
</div> |
||||
<div class="col-lg-3"> |
||||
<div id="sb-location-1"></div> |
||||
<div id="sb-location-2"></div> |
||||
<div id="sb-location-3"></div> |
||||
<div class="selected-container" id="selected-location"> |
||||
<input type="hidden" name="location" |
||||
value="{{ location }}"> |
||||
</div> |
||||
</div> |
||||
<div class="col-lg-3"> |
||||
<div class="select-box-header"> |
||||
<span style="width: 230px" class="header">Требуется допуск (СРО)</span> |
||||
<i class="fa fa-question-circle-o" aria-hidden="true" |
||||
title="bla-bla-bla..."></i> |
||||
</div> |
||||
<div class="custom-check" data-state="disabled"> |
||||
<input name="cro" type="checkbox" hidden {% if cro %} checked{% endif %}> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
@ -0,0 +1,72 @@ |
||||
<p class="titleScore"> |
||||
{% if num_results > 0 %} |
||||
Найдено {{ num_results }} проектов |
||||
{% else %} |
||||
Ничего не найдено |
||||
{% endif %} |
||||
</p> |
||||
{# SORT_BY #} |
||||
{% include 'partials/inc-projects-sort_by.html' %} |
||||
<div class="projectsBlock disTab"> |
||||
{% for project in projects %} |
||||
<div class="projectPro clearfix"> |
||||
<div class="col-lg-9 leftPro"> |
||||
<p class="titlePro"> |
||||
<a href="{% url 'projects:detail' pk=project.pk %}">{{ project.name }}</a> |
||||
</p> |
||||
|
||||
{% if project.realty and project.realty.name %} |
||||
<ul class="desPro"> |
||||
<ul class="desPro"> |
||||
<li> |
||||
<a href="?realty={{ project.realty.pk }}">Объект |
||||
"{{ project.realty.name }}"</a> |
||||
</li> |
||||
</ul> |
||||
{% endif %} |
||||
|
||||
<p class="textPro">{{ project.text|linebreaksbr|truncatechars:300 }}</p> |
||||
|
||||
{% if TEMPLATE_DEBUG %} |
||||
<pre><!-- |
||||
--><b>Specialization:</b> {{ project.specialization }}<br><!-- |
||||
--><br><!-- |
||||
--><b>Realty location:</b> {{ project.realty.location }}<br><!-- |
||||
--><br><!-- |
||||
--><b>Constr. type:</b> {{ project.realty.construction_type }}<br><!-- |
||||
--><br><!-- |
||||
--><b>Build. classif.:</b> {{ project.realty.building_classification }}<br><!-- |
||||
--></pre> |
||||
{% endif %} |
||||
|
||||
<ul class="listPro"> |
||||
<li>{{ project.created }}</li> |
||||
<li>{{ project.hit_count.hits }}</li> |
||||
<li>{{ project.answers.count }}</li> |
||||
|
||||
{% if request.user.is_authenticated %} |
||||
<li>{{ project.customer.username }}</li> |
||||
{% endif %} |
||||
</ul> |
||||
</div> |
||||
<div class="col-lg-3 rightPro"> |
||||
<p class="cenaPro"> |
||||
{{ project.budget }} <i class="{% fa_currency_classes project.currency %}"></i> |
||||
</p> |
||||
|
||||
<ul> |
||||
{% if project.secure_deal %} |
||||
<li>Безопасная сделка</li> |
||||
{% endif %} |
||||
|
||||
<li> |
||||
{{ project.specialization.name }} |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
{% endfor %} |
||||
</div> |
||||
<div class="col-lg-12 pagin"> |
||||
{% include 'partials/ajax_pagination.html' %} |
||||
</div> |
||||
@ -0,0 +1,13 @@ |
||||
<div class="linkSort"> |
||||
<p>Сортировать по:</p> |
||||
|
||||
{% for val, text in choices %} |
||||
<button type="submit" name="{{ text }}" |
||||
value="{{ val }}">{{ text }}</button> |
||||
{% endfor %} |
||||
|
||||
{# <input type="hidden" name="{{ form.last_order_by.html_name }}" value="{{ last_order_by }}">#} |
||||
{# <input type="checkbox" name="{{ form.reverse_order.html_name }}"#} |
||||
{# {% if reverse_order %}checked{% endif %}#} |
||||
{# style="display: none">#} |
||||
</div> |
||||
@ -0,0 +1,65 @@ |
||||
{% if is_paginated %} |
||||
<nav> |
||||
<ul class="pagination"> |
||||
<li> |
||||
<a |
||||
href="#" |
||||
aria-label="Previous" |
||||
|
||||
{% if page_obj.has_previous %} |
||||
onclick="paginateTo({{ page_obj.previous_page_number }}); return false" |
||||
{% else %} |
||||
onclick="return false" |
||||
style="cursor: not-allowed" |
||||
{% endif %}> |
||||
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> |
||||
</a> |
||||
</li> |
||||
|
||||
{% if page_obj.number|sub:4 > 1 %} |
||||
<li><a href="#" onclick="paginateTo(1); return false">1</a></li> |
||||
<li>...</li> |
||||
{% endif %} |
||||
|
||||
{% for n in page_obj.paginator.page_range %} |
||||
{% if n == page_obj.number %} |
||||
<li class="active"><a href="#" onclick="return false">{{ n }}</a></li> |
||||
{% elif n > page_obj.number|sub:4 and n < page_obj.number or n < page_obj.number|add:4 and n > page_obj.number %} |
||||
<li><a href="#" onclick="paginateTo({{ n }}); return false">{{ n }}</a></li> |
||||
{% endif %} |
||||
{% endfor %} |
||||
|
||||
{% if page_obj.number|add:4 < page_obj.paginator.num_pages %} |
||||
<li>...</li> |
||||
<li><a href="#" |
||||
onclick="paginateTo({{ page_obj.paginator.num_pages }}); return false">{{ page_obj.paginator.num_pages }}</a> |
||||
</li> |
||||
{% endif %} |
||||
|
||||
<li> |
||||
<a |
||||
href="#" |
||||
aria-label="Next" |
||||
|
||||
{% if page_obj.has_next %} |
||||
onclick="paginateTo({{ page_obj.next_page_number }}); return false" |
||||
{% else %} |
||||
onclick="return false" |
||||
style="cursor: not-allowed" |
||||
{% endif %}> |
||||
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
|
||||
<script> |
||||
function paginateTo(pageNum) { |
||||
const $form = $('#filter-form'); |
||||
const postfix = "&page=" + pageNum; |
||||
sendData('/projects/', $form, pageNum); |
||||
modUrl($form, postfix); |
||||
return false; |
||||
} |
||||
</script> |
||||
{% endif %} |
||||
Loading…
Reference in new issue