ntopng/httpdocs/templates/pages/hosts_map.template
2021-05-19 12:12:55 +02:00

47 lines
No EOL
1.9 KiB
Text

{#
(C) 2021 - ntop.org
#}
<script type='text/javascript' src='/js/widgets/widgets.js?{{ ntop.getStaticFileEpoch() }}'></script>
<link rel="stylesheet" href='{{ ntop.getHttpPrefix() }}/css/apexcharts.css'/>
<script type='text/javascript' src='{{ ntop.getHttpPrefix() }}/js/apexchart/apexcharts.min.js?{{ ntop.getStaticFileEpoch() }}'></script>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class='d-flex align-items-center justify-content-end mb-3'>
<label class="my-auto me-1">
{{ i18n("filter_by") }}:
</label>
<div class="btn-group">
<button type="button" class="btn btn-link dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ hosts_map.label_bubble_mode }}
</button>
<div class="dropdown-menu dropdown-menu-end">
{* hosts_map.select_options *}
</div>
<button class="btn btn-link btn-reload-graph" id="btn-reload-map">
<i class='fas fa-sync'></i>
</button>
</div>
</div>
{* widget_gui_utils.render_chart(hosts_map.widget_name, { css_styles = { height = "60vh"}, displaying_label = ''}) *}
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
const WIDGET_NAME = "{{ hosts_map.widget_name }}";
const BUBBLE_MODE = "{{ hosts_map.bubble_mode }}";
const widget = WidgetUtils.getWidgetByName(WIDGET_NAME);
$(`#btn-reload-map`).on('click', async function() {
await widget.update({bubble_mode: BUBBLE_MODE});
});
});
</script>