mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
Map Management: Show Groups (#16005)
* Map Management: Show Groups * reorganize group selector a bit * Use uuid to prevent issues with unicode strings and other oddities * Edit buttons should not be primary * Reactivity for small screens
This commit is contained in:
@@ -7,34 +7,51 @@
|
||||
@include('map.custom-map-modal')
|
||||
@include('map.custom-map-delete-modal')
|
||||
|
||||
<x-panel body-class="!tw-p-0" id="manage-custom-maps">
|
||||
<x-panel id="manage-custom-maps" body-class="!tw-pb-0">
|
||||
<x-slot name="title">
|
||||
<div class="tw-flex tw-justify-between tw-items-center">
|
||||
<div>
|
||||
<i class="fa fa-map-marked fa-fw fa-lg" aria-hidden="true"></i> {{ __('map.custom.title.manage') }}
|
||||
{{ __('map.custom.title.manage') }}
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary" onclick="$('#mapModal').modal({backdrop: 'static', keyboard: false}, 'show');">{{ __('map.custom.create_map') }}</button>
|
||||
<button class="btn btn-primary" onclick="$('#mapModal').modal({backdrop: 'static', keyboard: false}, 'show');">
|
||||
{{ __('map.custom.create_map') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<table class="table table-striped table-condensed" style="margin-bottom: 0; margin-top: -1px">
|
||||
@foreach($maps as $map)
|
||||
<tr id="map{{ $map->custom_map_id }}">
|
||||
<td style="vertical-align: middle">
|
||||
<a href="{{ route('maps.custom.show', $map->custom_map_id) }}">{{ $map->name }}</a>
|
||||
</td>
|
||||
<td>
|
||||
<a class="btn btn-primary" href="{{ route('maps.custom.edit', $map->custom_map_id) }}"><i class="fa fa-pencil"></i> {{ __('Edit') }}</a>
|
||||
<button class="btn btn-danger"
|
||||
onclick="startMapDelete(this)"
|
||||
data-map-id="{{ $map->custom_map_id }}"
|
||||
><i class="fa fa-trash"></i> {{ __('Delete') }}</button>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</table>
|
||||
@foreach($maps as $group_name => $group)
|
||||
<x-panel id="map-group-{{ $group_uuid = uniqid() }}" body-class="!tw-p-0">
|
||||
@if($group_name)
|
||||
<x-slot name="title">{{ $group_name }}</x-slot>
|
||||
@endif
|
||||
@foreach($group as $map)
|
||||
<div id="map-{{ $map->custom_map_id }}" class="even:tw-bg-gray-50 dark:even:tw-bg-zinc-900">
|
||||
<div class="tw-flex tw-p-3 tw-items-center hover:tw-bg-gray-100 dark:hover:tw-bg-gray-600">
|
||||
<div class="tw-flex-1">
|
||||
<i class="fa fa-map-marked fa-fw fa-lg" aria-hidden="true"></i>
|
||||
<a href="{{ route('maps.custom.show', $map->custom_map_id) }}">{{ $map->name }}</a>
|
||||
</div>
|
||||
<div class="tw-flex-none sm:tw-flex-1 tw-flex-shrink tw-whitespace-nowrap">
|
||||
<a class="btn btn-default" href="{{ route('maps.custom.edit', $map->custom_map_id) }}">
|
||||
<i class="fa fa-pencil" aria-hidden="true"></i>
|
||||
<span class="tw-hidden sm:tw-inline" aria-hidden="false">{{ __('Edit') }}</span>
|
||||
</a>
|
||||
<button class="btn btn-danger"
|
||||
onclick="startMapDelete(this)"
|
||||
data-map-name="{{ $map->name }}"
|
||||
data-map-group-id="#map-group-{{ $group_uuid }}"
|
||||
data-map-id="{{ $map->custom_map_id }}"
|
||||
><i class="fa fa-trash" aria-hidden="true"></i>
|
||||
<span class="tw-hidden sm:tw-inline" aria-hidden="false">{{ __('Delete') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</x-panel>
|
||||
@endforeach
|
||||
</x-panel>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -42,7 +59,10 @@
|
||||
@section('scripts')
|
||||
@routes
|
||||
<script type="text/javascript">
|
||||
$("#mapBackgroundClearRow").hide();
|
||||
$('#mapDeleteModal').on('show.bs.modal', () => {
|
||||
let $mapDeleteModalLabel = $('#mapDeleteModalLabel');
|
||||
$mapDeleteModalLabel.text($mapDeleteModalLabel.data('text').replace(':name', pendingMapToDelete.name));
|
||||
});
|
||||
|
||||
function editMapSuccess(data) {
|
||||
$('#mapModal').modal('hide');
|
||||
@@ -53,21 +73,29 @@
|
||||
$('#mapModal').modal('hide');
|
||||
}
|
||||
|
||||
var pendingDeleteId;
|
||||
var pendingMapToDelete;
|
||||
function startMapDelete(target) {
|
||||
pendingDeleteId = $(target).data('map-id');
|
||||
$('#mapDeleteModal').modal({backdrop: 'static', keyboard: false}, 'show');
|
||||
let $target = $(target);
|
||||
pendingMapToDelete = {
|
||||
id: $target.data('map-id'),
|
||||
name: $target.data('map-name'),
|
||||
group_id: $target.data('map-group-id')
|
||||
};
|
||||
$('#mapDeleteModal').modal('show');
|
||||
}
|
||||
|
||||
function deleteMap() {
|
||||
$.ajax({
|
||||
url: "{{ route('maps.custom.destroy', ['map' => '?']) }}".replace('?', pendingDeleteId),
|
||||
url: "{{ route('maps.custom.destroy', ['map' => '?']) }}".replace('?', pendingMapToDelete.id),
|
||||
type: 'DELETE'
|
||||
}).done(() => {
|
||||
$('#map' + pendingDeleteId).remove();
|
||||
pendingDeleteId = null;
|
||||
$('#mapDeleteModal').modal('hide');
|
||||
});
|
||||
$('#map-' + pendingMapToDelete.id).remove();
|
||||
if($(pendingMapToDelete.group_id + ' .panel-body').children().length === 0) {
|
||||
$(pendingMapToDelete.group_id).remove()
|
||||
}
|
||||
pendingMapToDelete = null;
|
||||
$('#mapDeleteModal').modal('hide');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
@@ -2,7 +2,7 @@
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="mapDeleteModalLabel">{{ __('map.custom.edit.map.delete') }}</h5>
|
||||
<h5 class="modal-title" id="mapDeleteModalLabel" data-text="{{ __('map.custom.edit.map.delete') }}"></h5>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<center>
|
||||
|
Reference in New Issue
Block a user