Виджет для формы выбора зеркал
This commit is contained in:
@@ -2,57 +2,54 @@
|
||||
from django import forms
|
||||
|
||||
# Local imports
|
||||
from .models import Geo, Modulation, ObjItem, Parameter, Polarization, Satellite, Standard
|
||||
from .widgets import TagSelectWidget
|
||||
from .models import (
|
||||
Geo,
|
||||
Modulation,
|
||||
ObjItem,
|
||||
Parameter,
|
||||
Polarization,
|
||||
Satellite,
|
||||
Standard,
|
||||
)
|
||||
from .widgets import CheckboxSelectMultipleWidget
|
||||
|
||||
|
||||
class UploadFileForm(forms.Form):
|
||||
file = forms.FileField(
|
||||
label="Выберите файл",
|
||||
widget=forms.FileInput(attrs={
|
||||
'class': 'form-file-input'
|
||||
})
|
||||
label="Выберите файл",
|
||||
widget=forms.FileInput(attrs={"class": "form-file-input"}),
|
||||
)
|
||||
|
||||
|
||||
class LoadExcelData(forms.Form):
|
||||
file = forms.FileField(
|
||||
label="Выберите Excel файл",
|
||||
widget=forms.FileInput(attrs={
|
||||
'class': 'form-control',
|
||||
'accept': '.xlsx,.xls'
|
||||
})
|
||||
widget=forms.FileInput(attrs={"class": "form-control", "accept": ".xlsx,.xls"}),
|
||||
)
|
||||
sat_choice = forms.ModelChoiceField(
|
||||
queryset=Satellite.objects.all(),
|
||||
label="Выберите спутник",
|
||||
widget=forms.Select(attrs={
|
||||
'class': 'form-select'
|
||||
})
|
||||
widget=forms.Select(attrs={"class": "form-select"}),
|
||||
)
|
||||
number_input = forms.IntegerField(
|
||||
label="Введите число объектов",
|
||||
min_value=0,
|
||||
widget=forms.NumberInput(attrs={
|
||||
'class': 'form-control'
|
||||
})
|
||||
widget=forms.NumberInput(attrs={"class": "form-control"}),
|
||||
)
|
||||
|
||||
|
||||
class LoadCsvData(forms.Form):
|
||||
file = forms.FileField(
|
||||
label="Выберите CSV файл",
|
||||
widget=forms.FileInput(attrs={
|
||||
'class': 'form-control',
|
||||
'accept': '.csv'
|
||||
})
|
||||
widget=forms.FileInput(attrs={"class": "form-control", "accept": ".csv"}),
|
||||
)
|
||||
|
||||
|
||||
class UploadVchLoad(UploadFileForm):
|
||||
sat_choice = forms.ModelChoiceField(
|
||||
queryset=Satellite.objects.all(),
|
||||
label="Выберите спутник",
|
||||
widget=forms.Select(attrs={
|
||||
'class': 'form-select'
|
||||
})
|
||||
widget=forms.Select(attrs={"class": "form-select"}),
|
||||
)
|
||||
|
||||
|
||||
@@ -60,9 +57,7 @@ class VchLinkForm(forms.Form):
|
||||
sat_choice = forms.ModelChoiceField(
|
||||
queryset=Satellite.objects.all(),
|
||||
label="Выберите спутник",
|
||||
widget=forms.Select(attrs={
|
||||
'class': 'form-select'
|
||||
})
|
||||
widget=forms.Select(attrs={"class": "form-select"}),
|
||||
)
|
||||
# ku_range = forms.ChoiceField(
|
||||
# choices=[(9750.0, '9750'), (10750.0, '10750')],
|
||||
@@ -74,18 +69,22 @@ class VchLinkForm(forms.Form):
|
||||
label="Разброс по частоте (не используется)",
|
||||
required=False,
|
||||
initial=0.0,
|
||||
widget=forms.NumberInput(attrs={
|
||||
'class': 'form-control',
|
||||
'placeholder': 'Не используется - погрешность определяется автоматически'
|
||||
})
|
||||
widget=forms.NumberInput(
|
||||
attrs={
|
||||
"class": "form-control",
|
||||
"placeholder": "Не используется - погрешность определяется автоматически",
|
||||
}
|
||||
),
|
||||
)
|
||||
value2 = forms.FloatField(
|
||||
label="Разброс по полосе (в %)",
|
||||
widget=forms.NumberInput(attrs={
|
||||
'class': 'form-control',
|
||||
'placeholder': 'Введите погрешность полосы в процентах',
|
||||
'step': '0.1'
|
||||
})
|
||||
label="Разброс по полосе (в %)",
|
||||
widget=forms.NumberInput(
|
||||
attrs={
|
||||
"class": "form-control",
|
||||
"placeholder": "Введите погрешность полосы в процентах",
|
||||
"step": "0.1",
|
||||
}
|
||||
),
|
||||
)
|
||||
|
||||
|
||||
@@ -106,256 +105,270 @@ class NewEventForm(forms.Form):
|
||||
# )
|
||||
file = forms.FileField(
|
||||
label="Выберите файл",
|
||||
widget=forms.FileInput(attrs={
|
||||
'class': 'form-control',
|
||||
'accept': '.xlsx,.xls'
|
||||
})
|
||||
widget=forms.FileInput(attrs={"class": "form-control", "accept": ".xlsx,.xls"}),
|
||||
)
|
||||
|
||||
|
||||
class FillLyngsatDataForm(forms.Form):
|
||||
"""Форма для заполнения данных из Lyngsat с поддержкой кеширования"""
|
||||
|
||||
|
||||
REGION_CHOICES = [
|
||||
('europe', 'Европа'),
|
||||
('asia', 'Азия'),
|
||||
('america', 'Америка'),
|
||||
('atlantic', 'Атлантика'),
|
||||
("europe", "Европа"),
|
||||
("asia", "Азия"),
|
||||
("america", "Америка"),
|
||||
("atlantic", "Атлантика"),
|
||||
]
|
||||
|
||||
|
||||
satellites = forms.ModelMultipleChoiceField(
|
||||
queryset=Satellite.objects.all().order_by('name'),
|
||||
queryset=Satellite.objects.all().order_by("name"),
|
||||
label="Выберите спутники",
|
||||
widget=forms.SelectMultiple(attrs={
|
||||
'class': 'form-select',
|
||||
'size': '10'
|
||||
}),
|
||||
widget=forms.SelectMultiple(attrs={"class": "form-select", "size": "10"}),
|
||||
required=True,
|
||||
help_text="Удерживайте Ctrl (Cmd на Mac) для выбора нескольких спутников"
|
||||
help_text="Удерживайте Ctrl (Cmd на Mac) для выбора нескольких спутников",
|
||||
)
|
||||
|
||||
|
||||
regions = forms.MultipleChoiceField(
|
||||
choices=REGION_CHOICES,
|
||||
label="Выберите регионы",
|
||||
widget=forms.SelectMultiple(attrs={
|
||||
'class': 'form-select',
|
||||
'size': '4'
|
||||
}),
|
||||
widget=forms.SelectMultiple(attrs={"class": "form-select", "size": "4"}),
|
||||
required=True,
|
||||
initial=['europe', 'asia', 'america', 'atlantic'],
|
||||
help_text="Удерживайте Ctrl (Cmd на Mac) для выбора нескольких регионов"
|
||||
initial=["europe", "asia", "america", "atlantic"],
|
||||
help_text="Удерживайте Ctrl (Cmd на Mac) для выбора нескольких регионов",
|
||||
)
|
||||
|
||||
|
||||
use_cache = forms.BooleanField(
|
||||
label="Использовать кеширование",
|
||||
required=False,
|
||||
initial=True,
|
||||
widget=forms.CheckboxInput(attrs={
|
||||
'class': 'form-check-input'
|
||||
}),
|
||||
help_text="Использовать кешированные данные (ускоряет повторные запросы)"
|
||||
widget=forms.CheckboxInput(attrs={"class": "form-check-input"}),
|
||||
help_text="Использовать кешированные данные (ускоряет повторные запросы)",
|
||||
)
|
||||
|
||||
|
||||
force_refresh = forms.BooleanField(
|
||||
label="Принудительно обновить данные",
|
||||
required=False,
|
||||
initial=False,
|
||||
widget=forms.CheckboxInput(attrs={
|
||||
'class': 'form-check-input'
|
||||
}),
|
||||
help_text="Игнорировать кеш и получить свежие данные с сайта"
|
||||
widget=forms.CheckboxInput(attrs={"class": "form-check-input"}),
|
||||
help_text="Игнорировать кеш и получить свежие данные с сайта",
|
||||
)
|
||||
|
||||
|
||||
class LinkLyngsatForm(forms.Form):
|
||||
"""Форма для привязки источников LyngSat к объектам"""
|
||||
|
||||
|
||||
satellites = forms.ModelMultipleChoiceField(
|
||||
queryset=Satellite.objects.all().order_by('name'),
|
||||
queryset=Satellite.objects.all().order_by("name"),
|
||||
label="Выберите спутники",
|
||||
widget=forms.SelectMultiple(attrs={
|
||||
'class': 'form-select',
|
||||
'size': '10'
|
||||
}),
|
||||
widget=forms.SelectMultiple(attrs={"class": "form-select", "size": "10"}),
|
||||
required=False,
|
||||
help_text="Оставьте пустым для обработки всех спутников"
|
||||
help_text="Оставьте пустым для обработки всех спутников",
|
||||
)
|
||||
|
||||
|
||||
frequency_tolerance = forms.FloatField(
|
||||
label="Допуск по частоте (МГц)",
|
||||
initial=0.5,
|
||||
min_value=0,
|
||||
widget=forms.NumberInput(attrs={
|
||||
'class': 'form-control',
|
||||
'step': '0.1'
|
||||
}),
|
||||
help_text="Допустимое отклонение частоты при сравнении"
|
||||
widget=forms.NumberInput(attrs={"class": "form-control", "step": "0.1"}),
|
||||
help_text="Допустимое отклонение частоты при сравнении",
|
||||
)
|
||||
|
||||
|
||||
class ParameterForm(forms.ModelForm):
|
||||
"""
|
||||
Форма для создания и редактирования параметров ВЧ загрузки.
|
||||
|
||||
|
||||
Работает с одним экземпляром Parameter, связанным с ObjItem через OneToOne связь.
|
||||
"""
|
||||
|
||||
|
||||
class Meta:
|
||||
model = Parameter
|
||||
fields = [
|
||||
'id_satellite', 'frequency', 'freq_range', 'polarization',
|
||||
'bod_velocity', 'modulation', 'snr', 'standard'
|
||||
"id_satellite",
|
||||
"frequency",
|
||||
"freq_range",
|
||||
"polarization",
|
||||
"bod_velocity",
|
||||
"modulation",
|
||||
"snr",
|
||||
"standard",
|
||||
]
|
||||
widgets = {
|
||||
'id_satellite': forms.Select(attrs={
|
||||
'class': 'form-select',
|
||||
'required': True
|
||||
}),
|
||||
'frequency': forms.NumberInput(attrs={
|
||||
'class': 'form-control',
|
||||
'step': '0.000001',
|
||||
'min': '0',
|
||||
'max': '50000',
|
||||
'placeholder': 'Введите частоту в МГц'
|
||||
}),
|
||||
'freq_range': forms.NumberInput(attrs={
|
||||
'class': 'form-control',
|
||||
'step': '0.000001',
|
||||
'min': '0',
|
||||
'max': '1000',
|
||||
'placeholder': 'Введите полосу частот в МГц'
|
||||
}),
|
||||
'bod_velocity': forms.NumberInput(attrs={
|
||||
'class': 'form-control',
|
||||
'step': '0.001',
|
||||
'min': '0',
|
||||
'placeholder': 'Введите символьную скорость в БОД'
|
||||
}),
|
||||
'snr': forms.NumberInput(attrs={
|
||||
'class': 'form-control',
|
||||
'step': '0.001',
|
||||
'min': '-50',
|
||||
'max': '100',
|
||||
'placeholder': 'Введите ОСШ в дБ'
|
||||
}),
|
||||
'polarization': forms.Select(attrs={'class': 'form-select'}),
|
||||
'modulation': forms.Select(attrs={'class': 'form-select'}),
|
||||
'standard': forms.Select(attrs={'class': 'form-select'}),
|
||||
"id_satellite": forms.Select(
|
||||
attrs={"class": "form-select", "required": True}
|
||||
),
|
||||
"frequency": forms.NumberInput(
|
||||
attrs={
|
||||
"class": "form-control",
|
||||
"step": "0.000001",
|
||||
"min": "0",
|
||||
"max": "50000",
|
||||
"placeholder": "Введите частоту в МГц",
|
||||
}
|
||||
),
|
||||
"freq_range": forms.NumberInput(
|
||||
attrs={
|
||||
"class": "form-control",
|
||||
"step": "0.000001",
|
||||
"min": "0",
|
||||
"max": "1000",
|
||||
"placeholder": "Введите полосу частот в МГц",
|
||||
}
|
||||
),
|
||||
"bod_velocity": forms.NumberInput(
|
||||
attrs={
|
||||
"class": "form-control",
|
||||
"step": "0.001",
|
||||
"min": "0",
|
||||
"placeholder": "Введите символьную скорость в БОД",
|
||||
}
|
||||
),
|
||||
"snr": forms.NumberInput(
|
||||
attrs={
|
||||
"class": "form-control",
|
||||
"step": "0.001",
|
||||
"min": "-50",
|
||||
"max": "100",
|
||||
"placeholder": "Введите ОСШ в дБ",
|
||||
}
|
||||
),
|
||||
"polarization": forms.Select(attrs={"class": "form-select"}),
|
||||
"modulation": forms.Select(attrs={"class": "form-select"}),
|
||||
"standard": forms.Select(attrs={"class": "form-select"}),
|
||||
}
|
||||
labels = {
|
||||
'id_satellite': 'Спутник',
|
||||
'frequency': 'Частота (МГц)',
|
||||
'freq_range': 'Полоса частот (МГц)',
|
||||
'polarization': 'Поляризация',
|
||||
'bod_velocity': 'Символьная скорость (БОД)',
|
||||
'modulation': 'Модуляция',
|
||||
'snr': 'ОСШ (дБ)',
|
||||
'standard': 'Стандарт',
|
||||
"id_satellite": "Спутник",
|
||||
"frequency": "Частота (МГц)",
|
||||
"freq_range": "Полоса частот (МГц)",
|
||||
"polarization": "Поляризация",
|
||||
"bod_velocity": "Символьная скорость (БОД)",
|
||||
"modulation": "Модуляция",
|
||||
"snr": "ОСШ (дБ)",
|
||||
"standard": "Стандарт",
|
||||
}
|
||||
help_texts = {
|
||||
'frequency': 'Частота в диапазоне от 0 до 50000 МГц',
|
||||
'freq_range': 'Полоса частот в диапазоне от 0 до 1000 МГц',
|
||||
'bod_velocity': 'Символьная скорость должна быть положительной',
|
||||
'snr': 'Отношение сигнал/шум в диапазоне от -50 до 100 дБ',
|
||||
"frequency": "Частота в диапазоне от 0 до 50000 МГц",
|
||||
"freq_range": "Полоса частот в диапазоне от 0 до 1000 МГц",
|
||||
"bod_velocity": "Символьная скорость должна быть положительной",
|
||||
"snr": "Отношение сигнал/шум в диапазоне от -50 до 100 дБ",
|
||||
}
|
||||
|
||||
def __init__(self, *args, **kwargs):
|
||||
super().__init__(*args, **kwargs)
|
||||
|
||||
|
||||
# Динамически загружаем choices для select полей
|
||||
self.fields['id_satellite'].queryset = Satellite.objects.all().order_by('name')
|
||||
self.fields['polarization'].queryset = Polarization.objects.all().order_by('name')
|
||||
self.fields['modulation'].queryset = Modulation.objects.all().order_by('name')
|
||||
self.fields['standard'].queryset = Standard.objects.all().order_by('name')
|
||||
|
||||
self.fields["id_satellite"].queryset = Satellite.objects.all().order_by("name")
|
||||
self.fields["polarization"].queryset = Polarization.objects.all().order_by(
|
||||
"name"
|
||||
)
|
||||
self.fields["modulation"].queryset = Modulation.objects.all().order_by("name")
|
||||
self.fields["standard"].queryset = Standard.objects.all().order_by("name")
|
||||
|
||||
# Делаем спутник обязательным полем
|
||||
self.fields['id_satellite'].required = True
|
||||
|
||||
self.fields["id_satellite"].required = True
|
||||
|
||||
def clean(self):
|
||||
"""
|
||||
Дополнительная валидация формы.
|
||||
|
||||
|
||||
Проверяет соотношение между частотой, полосой частот и символьной скоростью.
|
||||
"""
|
||||
cleaned_data = super().clean()
|
||||
frequency = cleaned_data.get('frequency')
|
||||
freq_range = cleaned_data.get('freq_range')
|
||||
bod_velocity = cleaned_data.get('bod_velocity')
|
||||
|
||||
frequency = cleaned_data.get("frequency")
|
||||
freq_range = cleaned_data.get("freq_range")
|
||||
bod_velocity = cleaned_data.get("bod_velocity")
|
||||
|
||||
# Проверка что частота больше полосы частот
|
||||
if frequency and freq_range:
|
||||
if freq_range > frequency:
|
||||
self.add_error('freq_range', 'Полоса частот не может быть больше частоты')
|
||||
|
||||
self.add_error(
|
||||
"freq_range", "Полоса частот не может быть больше частоты"
|
||||
)
|
||||
|
||||
# Проверка что символьная скорость соответствует полосе частот
|
||||
if bod_velocity and freq_range:
|
||||
if bod_velocity > freq_range * 1000000: # Конвертация МГц в Гц
|
||||
self.add_error('bod_velocity', 'Символьная скорость не может превышать полосу частот')
|
||||
|
||||
self.add_error(
|
||||
"bod_velocity",
|
||||
"Символьная скорость не может превышать полосу частот",
|
||||
)
|
||||
|
||||
return cleaned_data
|
||||
|
||||
|
||||
class GeoForm(forms.ModelForm):
|
||||
class Meta:
|
||||
model = Geo
|
||||
fields = ['location', 'comment', 'is_average', 'mirrors']
|
||||
fields = ["location", "comment", "is_average", "mirrors"]
|
||||
widgets = {
|
||||
'location': forms.TextInput(attrs={'class': 'form-control'}),
|
||||
'comment': forms.TextInput(attrs={'class': 'form-control'}),
|
||||
'is_average': forms.CheckboxInput(attrs={'class': 'form-check-input'}),
|
||||
'mirrors': TagSelectWidget(attrs={'id': 'id_geo-mirrors'}),
|
||||
"location": forms.TextInput(attrs={"class": "form-control"}),
|
||||
"comment": forms.TextInput(attrs={"class": "form-control"}),
|
||||
"is_average": forms.CheckboxInput(attrs={"class": "form-check-input"}),
|
||||
"mirrors": CheckboxSelectMultipleWidget(
|
||||
attrs={
|
||||
'id': 'id_geo-mirrors',
|
||||
'placeholder': 'Выберите спутники...',
|
||||
}
|
||||
),
|
||||
}
|
||||
labels = {
|
||||
'location': 'Местоположение',
|
||||
'comment': 'Комментарий',
|
||||
'is_average': 'Усреднённое',
|
||||
'mirrors': 'Спутники-зеркала, использованные для приёма',
|
||||
"location": "Местоположение",
|
||||
"comment": "Комментарий",
|
||||
"is_average": "Усреднённое",
|
||||
"mirrors": "Спутники-зеркала, использованные для приёма",
|
||||
}
|
||||
help_texts = {
|
||||
'mirrors': 'Начните вводить название спутника для поиска',
|
||||
"mirrors": "Выберите спутники из списка",
|
||||
}
|
||||
|
||||
|
||||
class ObjItemForm(forms.ModelForm):
|
||||
"""
|
||||
Форма для создания и редактирования объектов (источников сигнала).
|
||||
|
||||
|
||||
Работает с моделью ObjItem. Параметры ВЧ загрузки обрабатываются отдельно
|
||||
через ParameterForm с использованием OneToOne связи.
|
||||
"""
|
||||
|
||||
|
||||
class Meta:
|
||||
model = ObjItem
|
||||
fields = ['name']
|
||||
fields = ["name"]
|
||||
widgets = {
|
||||
'name': forms.TextInput(attrs={
|
||||
'class': 'form-control',
|
||||
'placeholder': 'Введите название объекта',
|
||||
'maxlength': '100'
|
||||
}),
|
||||
"name": forms.TextInput(
|
||||
attrs={
|
||||
"class": "form-control",
|
||||
"placeholder": "Введите название объекта",
|
||||
"maxlength": "100",
|
||||
}
|
||||
),
|
||||
}
|
||||
labels = {
|
||||
'name': 'Название объекта',
|
||||
"name": "Название объекта",
|
||||
}
|
||||
help_texts = {
|
||||
'name': 'Уникальное название объекта/источника сигнала',
|
||||
"name": "Уникальное название объекта/источника сигнала",
|
||||
}
|
||||
|
||||
|
||||
def __init__(self, *args, **kwargs):
|
||||
super().__init__(*args, **kwargs)
|
||||
# Делаем поле name необязательным, так как оно может быть пустым
|
||||
self.fields['name'].required = False
|
||||
|
||||
self.fields["name"].required = False
|
||||
|
||||
def clean_name(self):
|
||||
"""
|
||||
Валидация поля name.
|
||||
|
||||
|
||||
Проверяет что название не состоит только из пробелов.
|
||||
"""
|
||||
name = self.cleaned_data.get('name')
|
||||
|
||||
name = self.cleaned_data.get("name")
|
||||
|
||||
if name:
|
||||
# Удаляем лишние пробелы
|
||||
name = name.strip()
|
||||
|
||||
|
||||
# Проверяем что после удаления пробелов что-то осталось
|
||||
if not name:
|
||||
raise forms.ValidationError('Название не может состоять только из пробелов')
|
||||
|
||||
return name
|
||||
raise forms.ValidationError(
|
||||
"Название не может состоять только из пробелов"
|
||||
)
|
||||
|
||||
return name
|
||||
|
||||
160
dbapp/mainapp/static/css/checkbox-select-multiple.css
Normal file
160
dbapp/mainapp/static/css/checkbox-select-multiple.css
Normal file
@@ -0,0 +1,160 @@
|
||||
.checkbox-multiselect-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.multiselect-input-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 38px;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.25rem;
|
||||
background-color: #fff;
|
||||
cursor: text;
|
||||
padding: 4px 30px 4px 4px;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.multiselect-input-container:focus-within {
|
||||
border-color: #86b7fe;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
|
||||
.multiselect-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.multiselect-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background-color: #e9ecef;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.25rem;
|
||||
padding: 2px 8px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.multiselect-tag-remove {
|
||||
margin-left: 6px;
|
||||
cursor: pointer;
|
||||
color: #6c757d;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.multiselect-tag-remove:hover {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.multiselect-search {
|
||||
flex: 1 1 auto;
|
||||
min-width: 120px;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 4px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.multiselect-search:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.multiselect-clear {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
color: #6c757d;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.multiselect-clear:hover {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.multiselect-input-container.has-selections .multiselect-clear {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.multiselect-dropdown {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Открытие вверх (по умолчанию) */
|
||||
.multiselect-dropdown {
|
||||
bottom: 100%;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
/* Открытие вниз (если места сверху недостаточно) */
|
||||
.multiselect-dropdown.dropdown-below {
|
||||
bottom: auto;
|
||||
top: 100%;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.multiselect-dropdown.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.multiselect-options {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.multiselect-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.multiselect-option:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.multiselect-option input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.multiselect-option .option-label {
|
||||
flex: 1;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.multiselect-option.hidden {
|
||||
display: none;
|
||||
}
|
||||
120
dbapp/mainapp/static/js/checkbox-select-multiple.js
Normal file
120
dbapp/mainapp/static/js/checkbox-select-multiple.js
Normal file
@@ -0,0 +1,120 @@
|
||||
/**
|
||||
* Checkbox Select Multiple Widget
|
||||
* Provides a multi-select dropdown with checkboxes and tag display
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize all checkbox multiselect widgets
|
||||
document.querySelectorAll('.checkbox-multiselect-wrapper').forEach(function(wrapper) {
|
||||
initCheckboxMultiselect(wrapper);
|
||||
});
|
||||
});
|
||||
|
||||
function initCheckboxMultiselect(wrapper) {
|
||||
const widgetId = wrapper.dataset.widgetId;
|
||||
const inputContainer = wrapper.querySelector('.multiselect-input-container');
|
||||
const searchInput = wrapper.querySelector('.multiselect-search');
|
||||
const dropdown = wrapper.querySelector('.multiselect-dropdown');
|
||||
const tagsContainer = wrapper.querySelector('.multiselect-tags');
|
||||
const clearButton = wrapper.querySelector('.multiselect-clear');
|
||||
const checkboxes = wrapper.querySelectorAll('input[type="checkbox"]');
|
||||
|
||||
// Show dropdown when clicking on input container
|
||||
inputContainer.addEventListener('click', function(e) {
|
||||
if (e.target !== clearButton) {
|
||||
positionDropdown();
|
||||
dropdown.classList.add('show');
|
||||
searchInput.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// Position dropdown (up or down based on available space)
|
||||
function positionDropdown() {
|
||||
const rect = inputContainer.getBoundingClientRect();
|
||||
const spaceAbove = rect.top;
|
||||
const spaceBelow = window.innerHeight - rect.bottom;
|
||||
const dropdownHeight = 300; // max-height from CSS
|
||||
|
||||
// If more space below and enough space, open downward
|
||||
if (spaceBelow > spaceAbove && spaceBelow >= dropdownHeight) {
|
||||
dropdown.classList.add('dropdown-below');
|
||||
} else {
|
||||
dropdown.classList.remove('dropdown-below');
|
||||
}
|
||||
}
|
||||
|
||||
// Hide dropdown when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!wrapper.contains(e.target)) {
|
||||
dropdown.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
// Search functionality
|
||||
searchInput.addEventListener('input', function() {
|
||||
const searchTerm = this.value.toLowerCase();
|
||||
const options = wrapper.querySelectorAll('.multiselect-option');
|
||||
|
||||
options.forEach(function(option) {
|
||||
const label = option.querySelector('.option-label').textContent.toLowerCase();
|
||||
if (label.includes(searchTerm)) {
|
||||
option.classList.remove('hidden');
|
||||
} else {
|
||||
option.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Handle checkbox changes
|
||||
checkboxes.forEach(function(checkbox) {
|
||||
checkbox.addEventListener('change', function() {
|
||||
updateTags();
|
||||
});
|
||||
});
|
||||
|
||||
// Clear all button
|
||||
clearButton.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
checkboxes.forEach(function(checkbox) {
|
||||
checkbox.checked = false;
|
||||
});
|
||||
updateTags();
|
||||
});
|
||||
|
||||
// Update tags display
|
||||
function updateTags() {
|
||||
tagsContainer.innerHTML = '';
|
||||
let hasSelections = false;
|
||||
|
||||
checkboxes.forEach(function(checkbox) {
|
||||
if (checkbox.checked) {
|
||||
hasSelections = true;
|
||||
const tag = document.createElement('div');
|
||||
tag.className = 'multiselect-tag';
|
||||
tag.innerHTML = `
|
||||
<span>${checkbox.dataset.label}</span>
|
||||
<button type="button" class="multiselect-tag-remove" data-value="${checkbox.value}">×</button>
|
||||
`;
|
||||
|
||||
// Remove tag on click
|
||||
tag.querySelector('.multiselect-tag-remove').addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
checkbox.checked = false;
|
||||
updateTags();
|
||||
});
|
||||
|
||||
tagsContainer.appendChild(tag);
|
||||
}
|
||||
});
|
||||
|
||||
// Show/hide clear button
|
||||
if (hasSelections) {
|
||||
inputContainer.classList.add('has-selections');
|
||||
} else {
|
||||
inputContainer.classList.remove('has-selections');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize tags on load
|
||||
updateTags();
|
||||
}
|
||||
@@ -6,27 +6,93 @@
|
||||
{% block title %}{% if object %}Редактировать объект: {{ object.name }}{% else %}Создать объект{% endif %}{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" href="{% static 'css/checkbox-select-multiple.css' %}">
|
||||
<style>
|
||||
.form-section { margin-bottom: 2rem; border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 1rem; }
|
||||
.form-section-header { border-bottom: 1px solid #dee2e6; padding-bottom: 0.5rem; margin-bottom: 1rem; }
|
||||
.btn-action { margin-right: 0.5rem; }
|
||||
.dynamic-form { border: 1px dashed #ced4da; padding: 1rem; margin-top: 1rem; border-radius: 0.25rem; }
|
||||
.dynamic-form-header { display: flex; justify-content: space-between; align-items: center; }
|
||||
.readonly-field { background-color: #f8f9fa; padding: 0.375rem 0.75rem; border: 1px solid #ced4da; border-radius: 0.25rem; }
|
||||
.coord-group { border: 1px solid #dee2e6; padding: 0.75rem; border-radius: 0.25rem; margin-bottom: 1rem; }
|
||||
.coord-group-header { font-weight: bold; margin-bottom: 0.5rem; }
|
||||
.form-check-input { margin-top: 0.25rem; }
|
||||
.datetime-group { display: flex; gap: 1rem; }
|
||||
.datetime-group > div { flex: 1; }
|
||||
#map { height: 500px; width: 100%; margin-bottom: 1rem; }
|
||||
.map-container { margin-bottom: 1rem; }
|
||||
.coord-sync-group { border: 1px solid #dee2e6; padding: 0.75rem; border-radius: 0.25rem; }
|
||||
.form-section {
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.25rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.form-section-header {
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.dynamic-form {
|
||||
border: 1px dashed #ced4da;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.dynamic-form-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.readonly-field {
|
||||
background-color: #f8f9fa;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.coord-group {
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.coord-group-header {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.datetime-group {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.datetime-group>div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.coord-sync-group {
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.map-controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.map-control-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
border: 1px solid #ced4da;
|
||||
@@ -34,25 +100,43 @@
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.map-control-btn.active {
|
||||
background-color: #e9ecef;
|
||||
border-color: #dee2e6;
|
||||
}
|
||||
|
||||
.map-control-btn.edit {
|
||||
background-color: #fff3cd;
|
||||
border-color: #ffeeba;
|
||||
}
|
||||
|
||||
.map-control-btn.save {
|
||||
background-color: #d1ecf1;
|
||||
border-color: #bee5eb;
|
||||
}
|
||||
|
||||
.map-control-btn.cancel {
|
||||
background-color: #f8d7da;
|
||||
border-color: #f5c6cb;
|
||||
}
|
||||
|
||||
.leaflet-marker-icon {
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
/* Select2 custom styling */
|
||||
.select2-container--default .select2-selection--multiple {
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.25rem;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--focus .select2-selection--multiple {
|
||||
border-color: #86b7fe;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@@ -65,10 +149,12 @@
|
||||
{% if user.customuser.role == 'admin' or user.customuser.role == 'moderator' %}
|
||||
<button type="submit" form="objitem-form" class="btn btn-primary btn-action">Сохранить</button>
|
||||
{% if object %}
|
||||
<a href="{% url 'mainapp:objitem_delete' object.id %}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}" class="btn btn-danger btn-action">Удалить</a>
|
||||
<a href="{% url 'mainapp:objitem_delete' object.id %}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}"
|
||||
class="btn btn-danger btn-action">Удалить</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<a href="{% url 'mainapp:objitem_list' %}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}" class="btn btn-secondary btn-action">Назад</a>
|
||||
<a href="{% url 'mainapp:objitem_list' %}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}"
|
||||
class="btn btn-secondary btn-action">Назад</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -186,16 +272,16 @@
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="id_geo_latitude" class="form-label">Широта:</label>
|
||||
<input type="number" step="0.000001" class="form-control"
|
||||
id="id_geo_latitude" name="geo_latitude"
|
||||
<input type="number" step="0.000001" class="form-control" id="id_geo_latitude"
|
||||
name="geo_latitude"
|
||||
value="{% if object.geo_obj and object.geo_obj.coords %}{{ object.geo_obj.coords.y|unlocalize }}{% endif %}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="id_geo_longitude" class="form-label">Долгота:</label>
|
||||
<input type="number" step="0.000001" class="form-control"
|
||||
id="id_geo_longitude" name="geo_longitude"
|
||||
<input type="number" step="0.000001" class="form-control" id="id_geo_longitude"
|
||||
name="geo_longitude"
|
||||
value="{% if object.geo_obj and object.geo_obj.coords %}{{ object.geo_obj.coords.x|unlocalize }}{% endif %}">
|
||||
</div>
|
||||
</div>
|
||||
@@ -218,15 +304,13 @@
|
||||
<div class="datetime-group">
|
||||
<div>
|
||||
<label for="id_timestamp_date" class="form-label">Дата:</label>
|
||||
<input type="date" class="form-control"
|
||||
id="id_timestamp_date" name="timestamp_date"
|
||||
value="{% if object.geo_obj and object.geo_obj.timestamp %}{{ object.geo_obj.timestamp|date:'Y-m-d' }}{% endif %}">
|
||||
<input type="date" class="form-control" id="id_timestamp_date" name="timestamp_date"
|
||||
value="{% if object.geo_obj and object.geo_obj.timestamp %}{{ object.geo_obj.timestamp|date:'Y-m-d' }}{% endif %}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="id_timestamp_time" class="form-label">Время:</label>
|
||||
<input type="time" class="form-control"
|
||||
id="id_timestamp_time" name="timestamp_time"
|
||||
value="{% if object.geo_obj and object.geo_obj.timestamp %}{{ object.geo_obj.timestamp|time:'H:i' }}{% endif %}">
|
||||
<input type="time" class="form-control" id="id_timestamp_time" name="timestamp_time"
|
||||
value="{% if object.geo_obj and object.geo_obj.timestamp %}{{ object.geo_obj.timestamp|time:'H:i' }}{% endif %}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -253,201 +337,204 @@
|
||||
{% leaflet_css %}
|
||||
<script src="{% static 'leaflet-markers/js/leaflet-color-markers.js' %}"></script>
|
||||
|
||||
<!-- Подключаем кастомный виджет для мультивыбора -->
|
||||
<script src="{% static 'js/checkbox-select-multiple.js' %}"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Инициализация карты
|
||||
const map = L.map('map').setView([55.75, 37.62], 5);
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Инициализация карты
|
||||
const map = L.map('map').setView([55.75, 37.62], 5);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
// Функция для создания иконки маркера
|
||||
function createMarkerIcon() {
|
||||
return L.icon({
|
||||
iconUrl: '{% static "leaflet-markers/img/marker-icon-blue.png" %}',
|
||||
shadowUrl: `{% static 'leaflet-markers/img/marker-shadow.png' %}`,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41]
|
||||
});
|
||||
}
|
||||
const editableLayerGroup = new L.FeatureGroup();
|
||||
map.addLayer(editableLayerGroup);
|
||||
|
||||
// Маркер геолокации
|
||||
const marker = L.marker([55.75, 37.62], {
|
||||
draggable: false,
|
||||
icon: createMarkerIcon(),
|
||||
title: 'Геолокация'
|
||||
}).addTo(editableLayerGroup);
|
||||
marker.bindPopup('Геолокация');
|
||||
|
||||
// Синхронизация при изменении формы
|
||||
function syncFromForm() {
|
||||
const lat = parseFloat(document.getElementById('id_geo_latitude').value);
|
||||
const lng = parseFloat(document.getElementById('id_geo_longitude').value);
|
||||
if (!isNaN(lat) && !isNaN(lng)) {
|
||||
marker.setLatLng([lat, lng]);
|
||||
}
|
||||
}
|
||||
|
||||
// Синхронизация при перетаскивании (только если активировано)
|
||||
marker.on('dragend', function(event) {
|
||||
const latLng = event.target.getLatLng();
|
||||
document.getElementById('id_geo_latitude').value = latLng.lat.toFixed(6);
|
||||
document.getElementById('id_geo_longitude').value = latLng.lng.toFixed(6);
|
||||
});
|
||||
|
||||
// Добавляем методы для управления
|
||||
marker.enableEditing = function() {
|
||||
this.dragging.enable();
|
||||
this.openPopup();
|
||||
};
|
||||
|
||||
marker.disableEditing = function() {
|
||||
this.dragging.disable();
|
||||
this.closePopup();
|
||||
};
|
||||
|
||||
marker.syncFromForm = syncFromForm;
|
||||
|
||||
// Устанавливаем начальные координаты из полей формы
|
||||
function initMarkersFromForm() {
|
||||
const geoLat = parseFloat(document.getElementById('id_geo_latitude').value) || 55.75;
|
||||
const geoLng = parseFloat(document.getElementById('id_geo_longitude').value) || 37.62;
|
||||
marker.setLatLng([geoLat, geoLng]);
|
||||
|
||||
// Центрируем карту на маркере
|
||||
map.setView(marker.getLatLng(), 10);
|
||||
}
|
||||
|
||||
// Настройка формы для синхронизации с маркером
|
||||
function setupFormChange(latFieldId, lngFieldId, marker) {
|
||||
const latField = document.getElementById(latFieldId);
|
||||
const lngField = document.getElementById(lngFieldId);
|
||||
|
||||
[latField, lngField].forEach(field => {
|
||||
field.addEventListener('change', function() {
|
||||
const lat = parseFloat(latField.value);
|
||||
const lng = parseFloat(lngField.value);
|
||||
|
||||
if (!isNaN(lat) && !isNaN(lng)) {
|
||||
marker.setLatLng([lat, lng]);
|
||||
map.setView(marker.getLatLng(), 10);
|
||||
}
|
||||
// Функция для создания иконки маркера
|
||||
function createMarkerIcon() {
|
||||
return L.icon({
|
||||
iconUrl: '{% static "leaflet-markers/img/marker-icon-blue.png" %}',
|
||||
shadowUrl: `{% static 'leaflet-markers/img/marker-shadow.png' %}`,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41]
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
const editableLayerGroup = new L.FeatureGroup();
|
||||
map.addLayer(editableLayerGroup);
|
||||
|
||||
// Инициализация
|
||||
initMarkersFromForm();
|
||||
// Настройка формы для синхронизации с маркером
|
||||
setupFormChange('id_geo_latitude', 'id_geo_longitude', marker);
|
||||
// --- УПРАВЛЕНИЕ РЕДАКТИРОВАНИЕМ ---
|
||||
// Кнопки редактирования
|
||||
const editControlsDiv = L.DomUtil.create('div', 'map-controls');
|
||||
editControlsDiv.style.position = 'absolute';
|
||||
editControlsDiv.style.top = '10px';
|
||||
editControlsDiv.style.right = '10px';
|
||||
editControlsDiv.style.zIndex = '1000';
|
||||
editControlsDiv.style.background = 'white';
|
||||
editControlsDiv.style.padding = '10px';
|
||||
editControlsDiv.style.borderRadius = '4px';
|
||||
editControlsDiv.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';
|
||||
editControlsDiv.innerHTML = `
|
||||
// Маркер геолокации
|
||||
const marker = L.marker([55.75, 37.62], {
|
||||
draggable: false,
|
||||
icon: createMarkerIcon(),
|
||||
title: 'Геолокация'
|
||||
}).addTo(editableLayerGroup);
|
||||
marker.bindPopup('Геолокация');
|
||||
|
||||
// Синхронизация при изменении формы
|
||||
function syncFromForm() {
|
||||
const lat = parseFloat(document.getElementById('id_geo_latitude').value);
|
||||
const lng = parseFloat(document.getElementById('id_geo_longitude').value);
|
||||
if (!isNaN(lat) && !isNaN(lng)) {
|
||||
marker.setLatLng([lat, lng]);
|
||||
}
|
||||
}
|
||||
|
||||
// Синхронизация при перетаскивании (только если активировано)
|
||||
marker.on('dragend', function (event) {
|
||||
const latLng = event.target.getLatLng();
|
||||
document.getElementById('id_geo_latitude').value = latLng.lat.toFixed(6);
|
||||
document.getElementById('id_geo_longitude').value = latLng.lng.toFixed(6);
|
||||
});
|
||||
|
||||
// Добавляем методы для управления
|
||||
marker.enableEditing = function () {
|
||||
this.dragging.enable();
|
||||
this.openPopup();
|
||||
};
|
||||
|
||||
marker.disableEditing = function () {
|
||||
this.dragging.disable();
|
||||
this.closePopup();
|
||||
};
|
||||
|
||||
marker.syncFromForm = syncFromForm;
|
||||
|
||||
// Устанавливаем начальные координаты из полей формы
|
||||
function initMarkersFromForm() {
|
||||
const geoLat = parseFloat(document.getElementById('id_geo_latitude').value) || 55.75;
|
||||
const geoLng = parseFloat(document.getElementById('id_geo_longitude').value) || 37.62;
|
||||
marker.setLatLng([geoLat, geoLng]);
|
||||
|
||||
// Центрируем карту на маркере
|
||||
map.setView(marker.getLatLng(), 10);
|
||||
}
|
||||
|
||||
// Настройка формы для синхронизации с маркером
|
||||
function setupFormChange(latFieldId, lngFieldId, marker) {
|
||||
const latField = document.getElementById(latFieldId);
|
||||
const lngField = document.getElementById(lngFieldId);
|
||||
|
||||
[latField, lngField].forEach(field => {
|
||||
field.addEventListener('change', function () {
|
||||
const lat = parseFloat(latField.value);
|
||||
const lng = parseFloat(lngField.value);
|
||||
|
||||
if (!isNaN(lat) && !isNaN(lng)) {
|
||||
marker.setLatLng([lat, lng]);
|
||||
map.setView(marker.getLatLng(), 10);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Инициализация
|
||||
initMarkersFromForm();
|
||||
// Настройка формы для синхронизации с маркером
|
||||
setupFormChange('id_geo_latitude', 'id_geo_longitude', marker);
|
||||
// --- УПРАВЛЕНИЕ РЕДАКТИРОВАНИЕМ ---
|
||||
// Кнопки редактирования
|
||||
const editControlsDiv = L.DomUtil.create('div', 'map-controls');
|
||||
editControlsDiv.style.position = 'absolute';
|
||||
editControlsDiv.style.top = '10px';
|
||||
editControlsDiv.style.right = '10px';
|
||||
editControlsDiv.style.zIndex = '1000';
|
||||
editControlsDiv.style.background = 'white';
|
||||
editControlsDiv.style.padding = '10px';
|
||||
editControlsDiv.style.borderRadius = '4px';
|
||||
editControlsDiv.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';
|
||||
editControlsDiv.innerHTML = `
|
||||
<div class="map-controls">
|
||||
<button type="button" id="edit-btn" class="map-control-btn edit">Редактировать</button>
|
||||
<button type="button" id="save-btn" class="map-control-btn save" disabled>Сохранить</button>
|
||||
<button type="button" id="cancel-btn" class="map-control-btn cancel" disabled>Отмена</button>
|
||||
</div>
|
||||
`;
|
||||
map.getContainer().appendChild(editControlsDiv);
|
||||
map.getContainer().appendChild(editControlsDiv);
|
||||
|
||||
let isEditing = false;
|
||||
let isEditing = false;
|
||||
|
||||
// Сохраняем начальные координаты для отмены
|
||||
const initialPosition = marker.getLatLng();
|
||||
// Сохраняем начальные координаты для отмены
|
||||
const initialPosition = marker.getLatLng();
|
||||
|
||||
// Включение редактирования
|
||||
document.getElementById('edit-btn').addEventListener('click', function() {
|
||||
if (isEditing) return;
|
||||
// Включение редактирования
|
||||
document.getElementById('edit-btn').addEventListener('click', function () {
|
||||
if (isEditing) return;
|
||||
|
||||
isEditing = true;
|
||||
document.getElementById('edit-btn').classList.add('active');
|
||||
document.getElementById('save-btn').disabled = false;
|
||||
document.getElementById('cancel-btn').disabled = false;
|
||||
isEditing = true;
|
||||
document.getElementById('edit-btn').classList.add('active');
|
||||
document.getElementById('save-btn').disabled = false;
|
||||
document.getElementById('cancel-btn').disabled = false;
|
||||
|
||||
// Включаем drag для маркера
|
||||
marker.enableEditing();
|
||||
// Включаем drag для маркера
|
||||
marker.enableEditing();
|
||||
|
||||
// Показываем подсказку
|
||||
L.popup()
|
||||
.setLatLng(map.getCenter())
|
||||
.setContent('Перетаскивайте маркер. Нажмите "Сохранить" или "Отмена".')
|
||||
.openOn(map);
|
||||
});
|
||||
// Показываем подсказку
|
||||
L.popup()
|
||||
.setLatLng(map.getCenter())
|
||||
.setContent('Перетаскивайте маркер. Нажмите "Сохранить" или "Отмена".')
|
||||
.openOn(map);
|
||||
});
|
||||
|
||||
// Сохранение изменений
|
||||
document.getElementById('save-btn').addEventListener('click', function() {
|
||||
if (!isEditing) return;
|
||||
// Сохранение изменений
|
||||
document.getElementById('save-btn').addEventListener('click', function () {
|
||||
if (!isEditing) return;
|
||||
|
||||
isEditing = false;
|
||||
document.getElementById('edit-btn').classList.remove('active');
|
||||
document.getElementById('save-btn').disabled = true;
|
||||
document.getElementById('cancel-btn').disabled = true;
|
||||
isEditing = false;
|
||||
document.getElementById('edit-btn').classList.remove('active');
|
||||
document.getElementById('save-btn').disabled = true;
|
||||
document.getElementById('cancel-btn').disabled = true;
|
||||
|
||||
// Отключаем редактирование
|
||||
marker.disableEditing();
|
||||
// Отключаем редактирование
|
||||
marker.disableEditing();
|
||||
|
||||
// Обновляем начальную позицию
|
||||
initialPosition.lat = marker.getLatLng().lat;
|
||||
initialPosition.lng = marker.getLatLng().lng;
|
||||
// Обновляем начальную позицию
|
||||
initialPosition.lat = marker.getLatLng().lat;
|
||||
initialPosition.lng = marker.getLatLng().lng;
|
||||
|
||||
// Убираем попап подсказки
|
||||
map.closePopup();
|
||||
});
|
||||
// Убираем попап подсказки
|
||||
map.closePopup();
|
||||
});
|
||||
|
||||
// Отмена изменений
|
||||
document.getElementById('cancel-btn').addEventListener('click', function() {
|
||||
if (!isEditing) return;
|
||||
// Отмена изменений
|
||||
document.getElementById('cancel-btn').addEventListener('click', function () {
|
||||
if (!isEditing) return;
|
||||
|
||||
isEditing = false;
|
||||
document.getElementById('edit-btn').classList.remove('active');
|
||||
document.getElementById('save-btn').disabled = true;
|
||||
document.getElementById('cancel-btn').disabled = true;
|
||||
isEditing = false;
|
||||
document.getElementById('edit-btn').classList.remove('active');
|
||||
document.getElementById('save-btn').disabled = true;
|
||||
document.getElementById('cancel-btn').disabled = true;
|
||||
|
||||
// Возвращаем маркер на исходную позицию
|
||||
marker.setLatLng(initialPosition);
|
||||
// Возвращаем маркер на исходную позицию
|
||||
marker.setLatLng(initialPosition);
|
||||
|
||||
// Отключаем редактирование
|
||||
marker.disableEditing();
|
||||
// Отключаем редактирование
|
||||
marker.disableEditing();
|
||||
|
||||
// Синхронизируем форму с исходным значением
|
||||
document.getElementById('id_geo_latitude').value = initialPosition.lat.toFixed(6);
|
||||
document.getElementById('id_geo_longitude').value = initialPosition.lng.toFixed(6);
|
||||
map.closePopup();
|
||||
});
|
||||
// Синхронизируем форму с исходным значением
|
||||
document.getElementById('id_geo_latitude').value = initialPosition.lat.toFixed(6);
|
||||
document.getElementById('id_geo_longitude').value = initialPosition.lng.toFixed(6);
|
||||
map.closePopup();
|
||||
});
|
||||
|
||||
// Легенда
|
||||
const legend = L.control({ position: 'bottomright' });
|
||||
// Легенда
|
||||
const legend = L.control({ position: 'bottomright' });
|
||||
|
||||
legend.onAdd = function() {
|
||||
const div = L.DomUtil.create('div', 'info legend');
|
||||
div.style.fontSize = '14px';
|
||||
div.style.backgroundColor = 'white';
|
||||
div.style.padding = '10px';
|
||||
div.style.borderRadius = '4px';
|
||||
div.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';
|
||||
div.innerHTML = `
|
||||
legend.onAdd = function () {
|
||||
const div = L.DomUtil.create('div', 'info legend');
|
||||
div.style.fontSize = '14px';
|
||||
div.style.backgroundColor = 'white';
|
||||
div.style.padding = '10px';
|
||||
div.style.borderRadius = '4px';
|
||||
div.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';
|
||||
div.innerHTML = `
|
||||
<h5>Легенда</h5>
|
||||
<div><span style="color: blue; font-weight: bold;">•</span> Геолокация</div>
|
||||
`;
|
||||
return div;
|
||||
};
|
||||
return div;
|
||||
};
|
||||
|
||||
legend.addTo(map);
|
||||
});
|
||||
legend.addTo(map);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,28 @@
|
||||
{% load static %}
|
||||
<div class="checkbox-multiselect-wrapper" data-widget-id="{{ widget.attrs.id }}">
|
||||
<div class="multiselect-input-container">
|
||||
<div class="multiselect-tags" id="{{ widget.attrs.id }}_tags"></div>
|
||||
<input type="text"
|
||||
class="multiselect-search form-control"
|
||||
placeholder="{{ widget.attrs.placeholder|default:'Выберите элементы...' }}"
|
||||
id="{{ widget.attrs.id }}_search"
|
||||
autocomplete="off">
|
||||
<button type="button" class="multiselect-clear" id="{{ widget.attrs.id }}_clear" title="Очистить все">×</button>
|
||||
</div>
|
||||
<div class="multiselect-dropdown" id="{{ widget.attrs.id }}_dropdown">
|
||||
<div class="multiselect-options">
|
||||
{% for group_name, group_choices, group_index in widget.optgroups %}
|
||||
{% for option in group_choices %}
|
||||
<label class="multiselect-option">
|
||||
<input type="checkbox"
|
||||
name="{{ widget.name }}"
|
||||
value="{{ option.value }}"
|
||||
{% if option.selected %}checked{% endif %}
|
||||
data-label="{{ option.label }}">
|
||||
<span class="option-label">{{ option.label }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,10 +37,9 @@ class SourceListView(LoginRequiredMixin, View):
|
||||
date_to = request.GET.get("date_to", "").strip()
|
||||
|
||||
# Get all Source objects with query optimization
|
||||
sources = Source.objects.select_related(
|
||||
'created_by__user',
|
||||
'updated_by__user'
|
||||
).prefetch_related(
|
||||
# Using annotate to count ObjItems efficiently (single query with GROUP BY)
|
||||
# Using prefetch_related for reverse ForeignKey relationships to avoid N+1 queries
|
||||
sources = Source.objects.prefetch_related(
|
||||
'source_objitems',
|
||||
'source_objitems__parameter_obj',
|
||||
'source_objitems__geo_obj'
|
||||
@@ -164,8 +163,6 @@ class SourceListView(LoginRequiredMixin, View):
|
||||
'objitem_count': objitem_count,
|
||||
'created_at': source.created_at,
|
||||
'updated_at': source.updated_at,
|
||||
'created_by': source.created_by,
|
||||
'updated_by': source.updated_by,
|
||||
})
|
||||
|
||||
# Prepare context for template
|
||||
|
||||
20
dbapp/mainapp/widgets.py
Normal file
20
dbapp/mainapp/widgets.py
Normal file
@@ -0,0 +1,20 @@
|
||||
"""
|
||||
Custom widgets for forms.
|
||||
"""
|
||||
from django import forms
|
||||
from django.utils.safestring import mark_safe
|
||||
|
||||
|
||||
class CheckboxSelectMultipleWidget(forms.CheckboxSelectMultiple):
|
||||
"""
|
||||
Custom widget that displays selected items as tags in an input field
|
||||
with a dropdown containing checkboxes for selection.
|
||||
"""
|
||||
|
||||
template_name = 'mainapp/widgets/checkbox_select_multiple.html'
|
||||
|
||||
class Media:
|
||||
css = {
|
||||
'all': ('css/checkbox-select-multiple.css',)
|
||||
}
|
||||
js = ('js/checkbox-select-multiple.js',)
|
||||
Reference in New Issue
Block a user