mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
Tony Murray
0d246a6ffc
* Custom Maps: geo map and color background tabs blade component geo-map blade component and related script enhancements * Update css/js * style fixes * update db_schema.yaml * fix db_schema hand edit * ignore phpstan being wrong * Handle null * another possible null spot * Use standard file cache for custom map background images * Create map->image as jpeg so we can compress it * whitespace fix * Fix background cancel button when other type is selected than the saved type * Save and restore layer * Map must exist before creating static image * Don't show set as image button for Google and Bing. Bing gives an odd error, but Google won't work.
42 lines
1.5 KiB
PHP
42 lines
1.5 KiB
PHP
@props(['active' => ''])
|
|
|
|
<div x-data="{
|
|
activeTab: '{{ $active }}',
|
|
tabs: [],
|
|
registerTab(name, value) {
|
|
this.tabs.push({name: name, value: value});
|
|
if (! this.activeTab) {
|
|
this.changeTab(value)
|
|
}
|
|
|
|
return this.tabs.length;
|
|
},
|
|
changeTab(tabValue) {
|
|
this.activeTab = tabValue;
|
|
this.$dispatch('tab-change', tabValue);
|
|
}
|
|
}"
|
|
{{ $attributes }}
|
|
>
|
|
<ul role="tablist" class="tw-flex tw-flex-wrap -tw-mb-px tw-list-none tw-text-center tw-text-gray-500 dark:tw-text-gray-400">
|
|
<template x-for="(tab, index) in tabs" :key="index">
|
|
<li class="tw-me-2"
|
|
@click="changeTab(tab.value)"
|
|
:id="`tab-${index + 1}`"
|
|
role="tab"
|
|
:aria-selected="(tab.value === activeTab).toString()"
|
|
:aria-controls="`tab-panel-${index + 1}`"
|
|
>
|
|
<div
|
|
x-text="tab.name"
|
|
class="tw-inline-block tw-p-3 tw-border-b-2 tw-rounded-t-lg tw-cursor-pointer"
|
|
:class="tab.value === activeTab ? 'tw-text-blue-600 tw-border-blue-600 active dark:tw-text-blue-500 dark:tw-border-blue-500' : 'tw-border-transparent hover:tw-text-gray-600 hover:tw-border-gray-300 dark:hover:tw-text-gray-300'"
|
|
></div>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
<div x-ref="tabs">
|
|
{{ $slot }}
|
|
</div>
|
|
</div>
|