Skip to content

Commit 3327eea

Browse files
jirivranyjirivrany
committed
ownership type in map popups and as a color scheme in segments_map
1 parent 77603ff commit 3327eea

File tree

2 files changed

+58
-8
lines changed

2 files changed

+58
-8
lines changed

‎cesnet_service_path_plugin/templates/cesnet_service_path_plugin/segment_map.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ <h5 class="card-title mb-0">
3434
<div class="alert alert-info mb-3">
3535
<strong>{{ object.provider }}</strong> |
3636
<span class="badge text-bg-{{ object.get_status_color }}">{{ object.get_status_display }}</span> |
37+
<span class="badge text-bg-{{ object.get_ownership_type_color }}">{{ object.get_ownership_type_display }}</span> |
3738
{% if object.path_length_km %}{{ object.path_length_km }} km{% else %}Length unknown{% endif %} |
3839
{{ object.site_a }} ↔ {{ object.site_b }}
3940
{% if has_fallback_line %}
@@ -71,6 +72,9 @@ <h5 class="card-title mb-0">
7172
"name": "{{ object.name|escapejs }}",
7273
"provider": "{{ object.provider|escapejs }}",
7374
"status": "{{ object.get_status_display|escapejs }}",
75+
"statusColor": "{{ object.get_status_color|escapejs }}",
76+
"ownershipType": "{{ object.get_ownership_type_display|escapejs }}",
77+
"ownershipTypeColor": "{{ object.get_ownership_type_color|escapejs }}",
7478
"length": "{% if object.path_length_km %}{{ object.path_length_km }} km{% else %}Length unknown{% endif %}",
7579
"route": "{{ object.site_a|escapejs }} ↔ {{ object.site_b|escapejs }}"
7680
},
@@ -163,7 +167,8 @@ <h5 class="card-title mb-0">
163167
'<div>' +
164168
'<h6>' + segmentInfo.name + '</h6>' +
165169
'<p><strong>Provider:</strong> ' + segmentInfo.provider + '</p>' +
166-
'<p><strong>Status:</strong> ' + segmentInfo.status + '</p>' +
170+
'<p><strong>Status:</strong> <span class="badge text-bg-' + segmentInfo.statusColor + '">' + segmentInfo.status + '</span></p>' +
171+
'<p><strong>Ownership:</strong> <span class="badge text-bg-' + segmentInfo.ownershipTypeColor + '">' + segmentInfo.ownershipType + '</span></p>' +
167172
'<p><strong>Length:</strong> ' + segmentInfo.length + '</p>' +
168173
'<p><strong>Route:</strong> ' + segmentInfo.route + '</p>' +
169174
'<p><small class="text-muted">Note: Straight line - actual path data not available</small></p>' +
@@ -205,7 +210,8 @@ <h5 class="card-title mb-0">
205210
'<div>' +
206211
'<h6>' + segmentInfo.name + '</h6>' +
207212
'<p><strong>Provider:</strong> ' + segmentInfo.provider + '</p>' +
208-
'<p><strong>Status:</strong> ' + segmentInfo.status + '</p>' +
213+
'<p><strong>Status:</strong> <span class="badge text-bg-' + segmentInfo.statusColor + '">' + segmentInfo.status + '</span></p>' +
214+
'<p><strong>Ownership:</strong> <span class="badge text-bg-' + segmentInfo.ownershipTypeColor + '">' + segmentInfo.ownershipType + '</span></p>' +
209215
'<p><strong>Length:</strong> ' + segmentInfo.length + '</p>' +
210216
'<p><strong>Route:</strong> ' + segmentInfo.route + '</p>' +
211217
'</div>'

‎cesnet_service_path_plugin/templates/cesnet_service_path_plugin/segments_map.html‎

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,9 @@ <h5 class="card-title mb-0">
8888
<li><a class="dropdown-item" href="#" data-scheme="segment_type">
8989
<i class="mdi mdi-circle-medium" style="color: #9c27b0;"></i> By Segment Type
9090
</a></li>
91+
<li><a class="dropdown-item" href="#" data-scheme="ownership_type">
92+
<i class="mdi mdi-circle-medium" style="color: #0d6efd;"></i> By Ownership Type
93+
</a></li>
9194
</ul>
9295
</div>
9396

@@ -196,6 +199,14 @@ <h6 class="card-title mb-0">Selected Segment</h6>
196199
"Surveyed": "info"
197200
};
198201

202+
// Ownership type color mapping (matching OwnershipTypeChoices)
203+
const ownershipTypeBadge = {
204+
"Owned": "success", // green
205+
"Leased": "primary", // blue
206+
"Shared": "warning", // yellow
207+
"Foreign": "danger" // red
208+
};
209+
199210
// Provider color mapping - generate colors dynamically
200211
const providerColors = {};
201212

@@ -206,6 +217,14 @@ <h6 class="card-title mb-0">Selected Segment</h6>
206217
"Ethernet Service": "#4caf50" // Green (matches your SegmentTypeChoices)
207218
};
208219

220+
// NEW: Ownership type color mapping for lines (darker/more saturated than badges)
221+
const ownershipTypeColorsLine = {
222+
"Owned": "#198754", // Dark green (matching status Active)
223+
"Leased": "#0d6efd", // Bright blue
224+
"Shared": "#fd7e14", // Orange (darker than warning yellow)
225+
"Foreign": "#dc3545" // Red (matching danger)
226+
};
227+
209228
// Generate color palette for providers
210229
const colorPalette = [
211230
'#d32f2f', // strong red
@@ -252,6 +271,8 @@ <h6 class="card-title mb-0">Selected Segment</h6>
252271
return providerColors[segment.provider] || '#6c757d';
253272
} else if (currentColorScheme === 'segment_type') {
254273
return segmentTypeColors[segment.segment_type] || '#6c757d';
274+
} else if (currentColorScheme === 'ownership_type') {
275+
return ownershipTypeColorsLine[segment.ownership_type] || '#6c757d';
255276
}
256277
return '#dc3545';
257278
}
@@ -261,6 +282,11 @@ <h6 class="card-title mb-0">Selected Segment</h6>
261282
return statusBadge[segment.status] || 'secondary';
262283
}
263284

285+
// Function to get ownership type badge color
286+
function getOwnershipTypeBadgeColor(segment) {
287+
return ownershipTypeBadge[segment.ownership_type] || 'secondary';
288+
}
289+
264290
// Function to generate path data badge
265291
function getPathDataBadge(segment) {
266292
return segment.has_path_data
@@ -303,6 +329,16 @@ <h6 class="card-title mb-0">Selected Segment</h6>
303329
</span>`;
304330
legendDropdown.appendChild(li);
305331
});
332+
} else if (currentColorScheme === 'ownership_type') {
333+
// NEW: Ownership type legend
334+
Object.entries(ownershipTypeColorsLine).forEach(([ownershipType, color]) => {
335+
const li = document.createElement('li');
336+
li.innerHTML = `<span class="dropdown-item-text small">
337+
<span style="display: inline-block; width: 20px; height: 3px; background-color: ${color}; margin-right: 8px;"></span>
338+
${ownershipType}
339+
</span>`;
340+
legendDropdown.appendChild(li);
341+
});
306342
}
307343

308344
// Add common legend items
@@ -330,6 +366,8 @@ <h6 class="card-title mb-0">Selected Segment</h6>
330366
schemeButton.textContent = 'Provider';
331367
} else if (scheme === 'segment_type') {
332368
schemeButton.textContent = 'Segment Type';
369+
} else if (scheme === 'ownership_type') {
370+
schemeButton.textContent = 'Ownership Type';
333371
}
334372

335373
// Update legend
@@ -347,14 +385,16 @@ <h6 class="card-title mb-0">Selected Segment</h6>
347385

348386
const pathDataBadge = getPathDataBadge(segment);
349387

350-
const badgeColor = getStatusBadgeColor(segment);
388+
const statusBadgeColor = getStatusBadgeColor(segment);
389+
const ownershipBadgeColor = getOwnershipTypeBadgeColor(segment);
351390

352391
infoContent.innerHTML = `
353392
<div class="row">
354393
<div class="col-md-6">
355394
<h4>${segment.name}</h4>
356395
<p><strong>Provider:</strong> ${segment.provider || 'N/A'}</p>
357-
<p><strong>Status:</strong> <span class="badge text-bg-${badgeColor}">${segment.status}</span></p>
396+
<p><strong>Status:</strong> <span class="badge text-bg-${statusBadgeColor}">${segment.status}</span></p>
397+
<p><strong>Ownership:</strong> <span class="badge text-bg-${ownershipBadgeColor}">${segment.ownership_type}</span></p>
358398
<p><strong>Path Data:</strong> ${pathDataBadge}</p>
359399
</div>
360400
<div class="col-md-6">
@@ -565,14 +605,16 @@ <h4>${segment.name}</h4>
565605

566606
// Show popup for single segment
567607
function showSingleSegmentPopup(segment, clickPoint) {
568-
const badgeColor = getStatusBadgeColor(segment);
608+
const statusBadgeColor = getStatusBadgeColor(segment);
609+
const ownershipBadgeColor = getOwnershipTypeBadgeColor(segment);
569610
const pathDataBadge = getPathDataBadge(segment);
570611

571612
const popupContent = `
572613
<div class="single-segment-popup">
573614
<h4 class="mt-4">${segment.name}</h4>
574615
<p class="mb-1"><strong>Provider:</strong> ${segment.provider || 'N/A'}</p>
575-
<p class="mb-1"><strong>Status:</strong> <span class="badge text-bg-${badgeColor}">${segment.status}</span></p>
616+
<p class="mb-1"><strong>Status:</strong> <span class="badge text-bg-${statusBadgeColor}">${segment.status}</span></p>
617+
<p class="mb-1"><strong>Ownership:</strong> <span class="badge text-bg-${ownershipBadgeColor}">${segment.ownership_type}</span></p>
576618
<p class="mb-1"><strong>Path Data:</strong> ${pathDataBadge}</p>
577619
<p class="mb-1"><strong>Route:</strong> ${segment.site_a ? segment.site_a.name : 'N/A'} ↔ ${segment.site_b ? segment.site_b.name : 'N/A'}</p>
578620
<p class="mb-2"><strong>Length:</strong> ${segment.path_length_km ? segment.path_length_km + ' km' : 'Unknown'}</p>
@@ -613,7 +655,8 @@ <h4><i class="mdi mdi-layers"></i> Multiple Segments (${overlappingLayers.length
613655

614656
overlappingLayers.forEach((layerInfo, index) => {
615657
const segment = layerInfo.segment;
616-
const badgeColor = getStatusBadgeColor(segment);
658+
const statusBadgeColor = getStatusBadgeColor(segment);
659+
const ownershipBadgeColor = getOwnershipTypeBadgeColor(segment);
617660
const displayValue = segment.status;
618661
const pathDataBadge = getPathDataBadge(segment);
619662

@@ -626,7 +669,8 @@ <h4><i class="mdi mdi-layers"></i> Multiple Segments (${overlappingLayers.length
626669
</p>
627670
<ul class="list-unstyled mb-0">
628671
<li><strong>Sites:</strong> ${segment.site_a ? segment.site_a.name : 'N/A'} ↔ ${segment.site_b ? segment.site_b.name : 'N/A'}</li>
629-
<li><strong>Status:</strong> <span class="badge text-bg-${badgeColor}">${displayValue}</span></li>
672+
<li><strong>Status:</strong> <span class="badge text-bg-${statusBadgeColor}">${displayValue}</span></li>
673+
<li><strong>Ownership:</strong> <span class="badge text-bg-${ownershipBadgeColor}">${segment.ownership_type}</span></li>
630674
<li><strong>Path Data:</strong> ${pathDataBadge}</li>
631675
<li><strong>Length:</strong> ${segment.path_length_km ? segment.path_length_km + ' km' : 'Unknown'}</li>
632676
</ul>

0 commit comments

Comments
 (0)