Переработана логика работы фильтра проектов. Доработан дизайн фильтра.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