geralt/dbstorage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Слои на карте. v0.1/

Browse Source
This commit is contained in:
Кошкин Сергей
2025-12-03 17:32:13 +03:00
parent 4164ea2109
commit 24314b84ac
7 changed files with 2331 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

642
dbapp/static/css/multi_sources_playback_map.css Normal file
View File

@@ -0,0 +1,642 @@
/* Multi Sources Playback Map Styles */
body {
overflow: hidden;
}
#map {
position: fixed;
top: 56px;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.legend {
background: white;
padding: 10px;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
font-size: 11px;
max-height: 350px;
overflow-y: auto;
}
.legend h6 {
font-size: 12px;
margin: 0 0 8px 0;
}
.legend-item {
margin: 4px 0;
display: flex;
align-items: center;
}
.legend-section {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #ddd;
}
.legend-section:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.playback-control {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
background: white;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
max-width: 90%;
}
.playback-control button {
padding: 8px 14px;
border: none;
border-radius: 4px;
background: #007bff;
color: white;
cursor: pointer;
font-size: 14px;
}
.playback-control button:hover {
background: #0056b3;
}
.playback-control button:disabled {
background: #ccc;
cursor: not-allowed;
}
.playback-control .time-display {
font-size: 14px;
font-weight: bold;
min-width: 180px;
text-align: center;
}
.playback-control input[type="range"] {
width: 300px;
}
.playback-control .speed-control {
display: flex;
align-items: center;
gap: 8px;
}
.playback-control .speed-control label {
font-size: 12px;
margin: 0;
}
.playback-control .speed-control select {
padding: 4px 8px;
border-radius: 4px;
border: 1px solid #ccc;
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.9);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.loading-overlay .spinner-border {
width: 3rem;
height: 3rem;
}
.moving-marker {
transition: transform 0.1s linear;
}
.marker-size-control {
position: fixed;
bottom: 90px;
right: 10px;
z-index: 999;
background: white;
padding: 10px 12px;
border-radius: 4px;
box-shadow: 0 1px 5px rgba(0,0,0,0.3);
font-size: 11px;
}
.marker-size-control label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.marker-size-control input[type="range"] {
width: 120px;
cursor: pointer;
}
.marker-size-control .size-value {
display: inline-block;
margin-left: 5px;
font-weight: bold;
color: #007bff;
}
/* Layer Manager Panel */
.layer-manager-panel {
position: fixed;
top: 66px;
right: 10px;
z-index: 1001;
background: white;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
width: 320px;
max-height: calc(100vh - 180px);
display: flex;
flex-direction: column;
}
.layer-manager-header {
padding: 12px 15px;
background: #007bff;
color: white;
border-radius: 6px 6px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.layer-manager-header h6 {
margin: 0;
font-size: 14px;
}
.layer-manager-header .btn-close {
filter: brightness(0) invert(1);
opacity: 0.8;
}
.layer-manager-body {
padding: 10px;
overflow-y: auto;
flex: 1;
}
.layer-section {
margin-bottom: 15px;
}
.layer-section-title {
font-size: 12px;
font-weight: bold;
color: #666;
margin-bottom: 8px;
padding-bottom: 5px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.layer-item {
display: flex;
align-items: center;
padding: 6px 8px;
margin: 3px 0;
background: #f8f9fa;
border-radius: 4px;
font-size: 12px;
}
.layer-item.active {
background: #e3f2fd;
border: 1px solid #2196f3;
}
.layer-item input[type="checkbox"] {
margin-right: 8px;
}
.layer-item .layer-name {
flex: 1;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.layer-item .layer-actions {
display: flex;
gap: 4px;
}
.layer-item .layer-actions button {
padding: 2px 6px;
font-size: 10px;
border: none;
border-radius: 3px;
cursor: pointer;
}
.layer-item .layer-actions .btn-edit {
background: #ffc107;
color: #000;
}
.layer-item .layer-actions .btn-delete {
background: #dc3545;
color: white;
}
.layer-item .layer-actions .btn-expand {
background: #6c757d;
color: white;
}
.layer-children {
margin-left: 20px;
display: none;
}
.layer-children.expanded {
display: block;
}
.layer-child-item {
display: flex;
align-items: center;
padding: 4px 6px;
margin: 2px 0;
background: #fff;
border-radius: 3px;
font-size: 11px;
border: 1px solid #e0e0e0;
}
.add-layer-btn {
width: 100%;
padding: 6px;
font-size: 12px;
margin-top: 5px;
}
/* Import/Export buttons */
.io-buttons {
display: flex;
gap: 5px;
padding: 10px;
border-top: 1px solid #eee;
}
.io-buttons button {
flex: 1;
padding: 6px 10px;
font-size: 11px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.io-buttons .btn-import {
background: #28a745;
color: white;
}
.io-buttons .btn-export {
background: #17a2b8;
color: white;
}
/* Toggle button for layer panel */
.layer-toggle-btn {
position: fixed;
top: 66px;
right: 10px;
z-index: 1000;
background: white;
border: none;
padding: 8px 12px;
border-radius: 4px;
box-shadow: 0 1px 5px rgba(0,0,0,0.3);
cursor: pointer;
font-size: 14px;
}
.layer-toggle-btn:hover {
background: #f0f0f0;
}
/* Drawing style modal */
.style-modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2001;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
min-width: 300px;
}
.style-modal.show {
display: block;
}
.style-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 2000;
}
.style-modal-overlay.show {
display: block;
}
.style-modal h5 {
margin: 0 0 15px 0;
font-size: 16px;
}
.style-modal .form-group {
margin-bottom: 12px;
}
.style-modal label {
display: block;
font-size: 12px;
margin-bottom: 4px;
font-weight: 500;
}
.style-modal input, .style-modal select, .style-modal textarea {
width: 100%;
padding: 6px 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 13px;
}
.style-modal input[type="color"] {
height: 36px;
padding: 2px;
}
.style-modal .btn-row {
display: flex;
gap: 10px;
margin-top: 15px;
}
.style-modal .btn-row button {
flex: 1;
padding: 8px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.style-modal .btn-save {
background: #007bff;
color: white;
}
.style-modal .btn-cancel {
background: #6c757d;
color: white;
}
/* Custom Marker Tool Modal */
.custom-marker-modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2001;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
min-width: 350px;
max-width: 400px;
}
.custom-marker-modal.show {
display: block;
}
.custom-marker-modal h5 {
margin: 0 0 15px 0;
font-size: 16px;
color: #333;
}
.custom-marker-modal .form-group {
margin-bottom: 12px;
}
.custom-marker-modal label {
display: block;
font-size: 12px;
margin-bottom: 4px;
font-weight: 500;
color: #555;
}
.custom-marker-modal input,
.custom-marker-modal select {
width: 100%;
padding: 8px 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 13px;
}
.custom-marker-modal input[type="color"] {
height: 40px;
padding: 2px;
cursor: pointer;
}
.custom-marker-modal input[type="range"] {
cursor: pointer;
}
.custom-marker-modal .range-value {
display: inline-block;
margin-left: 8px;
font-weight: bold;
color: #007bff;
min-width: 40px;
}
.custom-marker-modal .shape-preview {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 8px;
}
.custom-marker-modal .shape-option {
width: 40px;
height: 40px;
border: 2px solid #ddd;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.custom-marker-modal .shape-option:hover {
border-color: #007bff;
background: #f0f8ff;
}
.custom-marker-modal .shape-option.selected {
border-color: #007bff;
background: #e3f2fd;
box-shadow: 0 0 5px rgba(0,123,255,0.3);
}
.custom-marker-modal .marker-preview {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: #f8f9fa;
border-radius: 4px;
margin: 15px 0;
min-height: 80px;
}
.custom-marker-modal .btn-row {
display: flex;
gap: 10px;
margin-top: 15px;
}
.custom-marker-modal .btn-row button {
flex: 1;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
}
.custom-marker-modal .btn-place {
background: #28a745;
color: white;
}
.custom-marker-modal .btn-place:hover {
background: #218838;
}
.custom-marker-modal .btn-cancel {
background: #6c757d;
color: white;
}
.custom-marker-modal .btn-cancel:hover {
background: #5a6268;
}
/* Geoman toolbar adjustments */
.leaflet-pm-toolbar {
margin-top: 10px !important;
}
/* Geoman custom marker button active state */
.leaflet-pm-icon-custom-marker.active,
.leaflet-buttons-container .leaflet-pm-action.active {
background-color: #007bff !important;
}
/* Geoman button container active state */
.leaflet-pm-actions-container .active {
background-color: #007bff !important;
}
/* Crosshair cursor when placing marker */
.marker-placement-mode {
cursor: crosshair !important;
}
.marker-placement-mode * {
cursor: crosshair !important;
}
/* Custom edit mode cursor */
.custom-edit-mode {
cursor: pointer !important;
}
.custom-edit-mode .leaflet-interactive {
cursor: pointer !important;
}
/* Custom edit mode indicator */
.custom-edit-indicator {
position: fixed;
top: 70px;
left: 50%;
transform: translateX(-50%);
z-index: 1500;
background: #28a745;
color: white;
padding: 8px 16px;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
font-size: 13px;
font-weight: 500;
display: none;
}
.custom-edit-indicator.active {
display: block;
}
/* Imported text marker styles */
.imported-text-marker {
background: transparent !important;
border: none !important;
}
.imported-text-marker > div {
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}