Для приготовления виджета Государственного Адресного Реестра, кроме базы, нам также понадобится nginx и его плагины postgres и json. Можно воспользоваться готовым образом.
В базе была определена большая функция gar_select от json и возвращающая json. Вот как раз она и нужна для использования через nginx.
Итак, сначала добавляем (в http-секцию вне server-секций) апстрим для подключения к базе:
upstream gar {
# подключаемся к хосту postgres
# на порт 5432
# к базе gar
# под пользователем gar
postgres_server host=postgres port=5432 dbname=gar user=gar;
# задаём лог для апстрима
postgres_log /var/log/nginx/gar.err;
# будем держать по одному постоянному соединению с базой
# (на каждый рабочий процеесс)
postgres_keepalive 1;
# будем держать по одному подготовленному оператору
# (на каждое постоянное соединение с базой)
postgres_prepare 1 overflow=deallocate;
}а в server-секцию добавляем использование
location =/gar_select.json {
# задаём логи
access_log /var/log/nginx/gar_select.json.log main;
error_log /var/log/nginx/gar_select.json.err;
# направляем запрос на определённый выше апстрим
postgres_pass gar;
# разрешаем использование подготовленных операторов
postgres_prepare true;
# задаём собственно запрос
# (просто вызывая ту самую функцию gar_select,
# передавая ей в качестве аргумента GET-параметры
# в виде json)
# ** сразу хочу предупредить: здесь НЕТ sql-инъекций! **
postgres_query "select gar_select($json_get_vars::json)";
# в результате выдаём json
postgres_output json;
}Т.о. получаем что-то типа REST интерфейса к таблице gar, который будем использовать из JavaScript.
Сначала загрузим стили и скрипты в index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГАР</title>
<link rel="stylesheet" href="/static/bootstrap-5.1.1/css/bootstrap.css" />
<link rel="stylesheet" href="/static/select2-4.1.0-rc.0/css/select2.css" />
<script src="/static/jquery-3.4.1/jquery-3.4.1.js"></script>
<script src="/static/bootstrap-5.1.1/js/bootstrap.js"></script>
<script src="/static/select2-4.1.0-rc.0/js/select2.js"></script>
<script src="/static/select2-4.1.0-rc.0/js/i18n/ru.js"></script>
<script src="index.js"></script>
</head>
<body>
<form action="gar_select.html" method="get"><table class="table"><tr>
<td>gar-select:</td>
<td><select id="id_label_single" class="gar-select" name="id" data-width="100%" data-placeholder="Адрес" data-initial="9ae64229-9f7b-4149-b27a-d1f6ec74b5ce" data-id="[b5701907-1537-4e52-b93a-d566a47086f7,daa79543-d4e1-4cf7-bd3a-5936e670aea8]"/></td>
<td><input class="btn btn-primary" type="submit" value="OK"/></td>
</tr></table></form>
</body>
</html>а вот сам скрипт index.js
// после загрузки страницы
$(document).ready(function() {
// для каждого селекта с соответствующим классом
$('select.gar-select').each(function(number, select) {
// определяем функцию от элемента
function data(item) {return {
// возвращающую строку для select2
id: $.isArray(item) ? item[item.length - 1].id : item.id,
item: item,
text: $.isArray(item) ? item.map(function(item) {return item.text}).join(', ') : item.text,
}}
// а также функцию от элемента для его применения в select2
function select2(item) {$(select).data('select2').trigger('select', {data: data(item)})}
// инициализируем select2
$(select).select2({
// будем делать запросы
ajax: {
// формируем GET-параметры для функции gar_select
data: function(params) {return {
full: !$.isEmptyObject(select.value) || ($.isEmptyObject(params.term) && $.isEmptyObject(select.value) && !$.isEmptyObject(select.dataset.id)),
id: $.isEmptyObject(params.term) && $.isEmptyObject(select.value) && !$.isEmptyObject(select.dataset.id) ? select.dataset.id : undefined,
limit: select.dataset.limit || 10,
offset: ((params.page || 1) - 1) * (select.dataset.limit || 10),
parent: !$.isEmptyObject(select.value) ? select.value : undefined,
text: params.term,
}},
dataType: 'json', // задаём тип результата
delay: 300, // и задержку
// задаём функцию обработки результата
processResults: function(response, params) {return {
results: response.data.map(data),
pagination: {more: response.offset < response.count}
}},
// адрес можно задать прямо в теге
url: select.dataset.url || 'gar_select.json',
},
allowClear: true, // показываем кнопку очистки
closeOnSelect: false, // не закрываем при выборе
dropdownParent: $(select).parent(), // располагаем в родителе
language: 'ru', // использеум русский язык
})
// при нажатии на кнопку очистки
$(select).on('select2:clear', function(event) {
// получаем элемент
var item = event.params.data[0].item
if ($.isArray(item)) {
// и если ещё не дошли до верха
item = item.slice(0, -1)
// то показываем родителя
if (item.length) {select2(item)}
}
// открываем выбор
setTimeout(function() {$(select).select2('open')})
})
// при выборе
$(select).on('select2:select', function(event) {
// запускаем поиск
$(select).data('select2').trigger('query', {})
// очищаем строку поиска
$(select).parent().find('.select2-search__field').val('').trigger('focus')
})
// если задан первоначальный уид
if (select.dataset.initial) {$.ajax({
// выполняем запрос
url: $(select).data('select2').options.options.ajax.url,
dataType: $(select).data('select2').options.options.ajax.dataType,
data: {id: select.dataset.initial}
}).done(function(response) {
// и выбираем результат
select2(response.data)
// закрываем выбор
$(select).select2('close')
})}
})
})Ещё, с помощью плагинов evaluate и mustach можно организовать html-интерфейс:
location =/gar_select.html {
# задаём логи
access_log /var/log/nginx/gar_select.html.log main;
error_log /var/log/nginx/gar_select.html.err;
# вычисляем соответсвующие под-запросы
# в соотвествующие переменные
evaluate $json /gar_select.json;
evaluate $template /gar_select.template;
# задаём данные для шаблонизатора
mustach_json $json;
# задаём шаблон
mustach_template $template;
# задаём тип результата
mustach_content text/html;
}
location =/gar_select.template {
access_log /var/log/nginx/gar_select.template.log main;
error_log /var/log/nginx/gar_select.template.err;
internal;
}Собственно сам шаблон gar_select.template
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГАР</title>
<link rel="stylesheet" href="/static/bootstrap-5.1.1/css/bootstrap.min.css" />
<script src="/static/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="/static/bootstrap-5.1.1/js/bootstrap.min.js"></script>
<script>
var limit = {{limit}};
var offset = {{offset}};
var count = {{count}};
</script>
<script src="gar_select.js"></script>
</head>
<body>
<form action="" method="get">
<input type="hidden" name="child" value="true"/>
<table class="table table-bordered table-striped table-hover table-condensed text-nowrap">
<thead>
<th class="id" title="id"><input style="width:100%" class="offset" placeholder="id" name="id" value='{{query.id}}'/></th>
<th class="parent" title="parent"><input style="width:100%" class="offset" placeholder="parent" name="parent" value="{{query.parent}}"/></th>
<th class="name" title="name"><input style="width:100%" class="offset" placeholder="name" name="name" value="{{query.name}}"/></th>
<th class="short" title="short"><input style="width:100%" class="offset" placeholder="short" name="short" value="{{query.short}}"/></th>
<th class="type" title="type"><input style="width:100%" class="offset" placeholder="type" name="type" value="{{query.type}}"/></th>
<th class="post" title="post"><input style="width:100%" class="offset" placeholder="post" name="post" value="{{query.post}}"/></th>
<th class="object" title="object"><input style="width:100%" class="offset" placeholder="object" name="object" value="{{query.object}}"/></th>
<th class="region" title="region"><input style="width:100%" class="offset" placeholder="region" name="region" value="{{query.region}}"/></th>
<th class="text" title="text"><input style="width:100%" class="offset" placeholder="text" name="text" value="{{query.text}}"/></th>
<th class="child" title="child"><input style="width:100%" class="" type="submit" value="child"/></th>
</thead>
{{#data}}
<tr>
<td class="id" title="id">{{id}}</td>
<td class="parent" title="parent"><a href="gar_select.html?child=true&id={{parent}}">{{parent}}</a></td>
<td class="name" title="name">{{name}}</td>
<td class="short" title="short">{{short}}</td>
<td class="type" title="type">{{type}}</td>
<td class="post" title="post">{{post}}</td>
<td class="object" title="text">{{object}}</td>
<td class="region" title="text">{{region}}</td>
<td class="text" title="text">{{text}}</td>
<td class="child" title="child"><input name="child" type="button" value="{{child}}" parent="{{id}}"/></td>
</tr>
{{/data}}
</table>
<table class="table"><tr>
<td id="pagination"/>
<td>limit: <input title="limit" class="offset" placeholder="limit" name="limit" value="{{limit}}"/></td>
<td>offset: <input title="offset" class="" placeholder="offset" name="offset" value="{{offset}}"/></td>
<td id="record"/><td>Всего {{count}}</td>
</tr></table>
</form>
</body>
</html>и скрипт для пагинации gar_select.js
// после загрузки страницы
document.addEventListener('DOMContentLoaded', function() {
// вычисляем количество страниц
var pages = Math.ceil(count / limit)
// вычисляем текущую страницу
var page = Math.ceil(offset / limit) + 1
// если все резульаты помещяются на одну страницу
if (count <= limit) {
// то скрываем пагинацию
$('#pagination').parent().parent().hide()
}
// если есть результаты
if (count > 0) {
// то добавляем информацию об этом
$('#record').append('Записи с ' + (offset + 1) + ' по ' + Math.min(offset + limit, count))
} else {
// иначе - скрываем
$('#record').hide()
}
// рассчитываем кнопки пагинации
for (var pag = 1, more = false; pag <= pages; pag++) {
if (pages <= 15 || pag <= 3 || pag >= pages - 2 || (page - 1 <= pag && pag <= page + 1)) {
$('#pagination').append(
$('<input>', {
type: 'button',
value: pag,
disabled: pag == page,
}).click(function(event) {
$('input[name=offset]').val((this.value - 1) * limit)
$('form').submit()
})
)
more = false
} else if (!more && (pag == 4 || pag == pages - 3)) {
$('#pagination').append($('<span>').text('...'))
more = true
}
}
// при изменении в верхних фильтрах
$('input.offset').change(function(event) {
// сбрасываем офсет
$('input[name=offset]').val(0)
})
// по клике на дочерних
$('input[name=child]').click(function(event) {
// сбрасываем офсет
$('input[name=offset]').val(0)
// и всё, кроме количества
$('input.offset').not('[name=limit]').val('')
// задаём родителя
$('input[name=parent]').val($(this).attr('parent'))
// и отправляем форму
$('form').submit()
})
})Как пример того, что плагин evaluate может обрабатывать вложенные под-запросы, и в качестве примера работы плагина htmldoc можно html преобразовать в pdf:
location =/gar_select.pdf {
# задаём логи
access_log /var/log/nginx/gar_select.pdf.log main;
error_log /var/log/nginx/gar_select.pdf.err;
# вычисляем под-запрос в переменную
evaluate $html /gar_select.html;
# преобразуем html в pdf
html2pdf $html;
}Т.о., можно в любом месте, где нужен выбор адреса использовать виджет. Его же можно ипользовать и для поиска. Например, если нужно "найти все услуги на такой-то улице", то пользователь выбирает улицу в виджете, бакенд получает уид этой улицы, а по нему с помощью готовой функции gar_select_child получет уиды всех дочерних элементов (домов, квартир, комнат, ...) с помощью которых уже может фильтровать в своей базе.
-- создаём или меняем функцию от ...
CREATE OR REPLACE FUNCTION gar_select_child(parent uuid, name text, short text, type text, post text, region text) RETURNS SETOF gar_view LANGUAGE sql STABLE AS $body$
with _ as (
with recursive _ as ( -- рекурсивно
-- начиная сверху или с заданного элемента
select gar.*, 0 as i from gar where (gar_select_child.parent is null and parent is null) or id = gar_select_child.parent
union
-- и продолжая вниз
select gar.*, _.i + 1 as i from gar inner join _ on _.id = gar.parent
) select * from _ where i > 0
-- добавляя если нужно различные фильтры
and (gar_select_child.name is null or name ilike gar_select_child.name||'%' or name ilike '% '||gar_select_child.name||'%' or name ilike '%-'||gar_select_child.name||'%' or name ilike '%.'||gar_select_child.name||'%')
and (gar_select_child.short is null or short ilike gar_select_child.short)
and (gar_select_child.type is null or case when gar_select_child.type ilike '{%}' then type = any(gar_select_child.type::text[]) else type ilike gar_select_child.type||'%' end)
and (gar_select_child.post is null or post ilike gar_select_child.post||'%')
and (gar_select_child.region is null or case when gar_select_child.region ilike '{%}' then region = any(gar_select_child.region::smallint[]) else region = gar_select_child.region::smallint end)
order by i
) select id, parent, name, short, type, post, region, gar_text(name, short, type) AS text from _ order by to_number('0'||name, '999999999'), name;
$body$;
alexesDev
Еще можно было использовать https://postgrest.org/en/v8.0/ или https://www.graphile.org/postgraphile/ (с последним будет доступен https://www.graphql-code-generator.com/ с типами для фронта).
RekGRpth Автор
можно много чего использовать, но основная цель была использовать только Nginx и PostgreSQL без наркотиков