1<?php
2/*
3** Zabbix
4** Copyright (C) 2001-2021 Zabbix SIA
5**
6** This program is free software; you can redistribute it and/or modify
7** it under the terms of the GNU General Public License as published by
8** the Free Software Foundation; either version 2 of the License, or
9** (at your option) any later version.
10**
11** This program is distributed in the hope that it will be useful,
12** but WITHOUT ANY WARRANTY; without even the implied warranty of
13** MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14** GNU General Public License for more details.
15**
16** You should have received a copy of the GNU General Public License
17** along with this program; if not, write to the Free Software
18** Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
19**/
20
21
22/**
23 * @var CView $this
24 */
25?>
26
27<script>
28	function initializeView(dashboard, widget_defaults, time_period, page) {
29
30		const init = () => {
31			ZABBIX.Dashboard = new CDashboard(document.querySelector('.<?= ZBX_STYLE_DASHBOARD ?>'), {
32				containers: {
33					grid: document.querySelector('.<?= ZBX_STYLE_DASHBOARD_GRID ?>'),
34					navigation: document.querySelector('.<?= ZBX_STYLE_DASHBOARD_NAVIGATION ?>'),
35					navigation_tabs: document.querySelector('.<?= ZBX_STYLE_DASHBOARD_NAVIGATION_TABS ?>')
36				},
37				buttons: {
38					previous_page: document.querySelector('.<?= ZBX_STYLE_DASHBOARD_PREVIOUS_PAGE ?>'),
39					next_page: document.querySelector('.<?= ZBX_STYLE_DASHBOARD_NEXT_PAGE ?>')
40				},
41				data: {
42					dashboardid: dashboard.dashboardid,
43					name: dashboard.name,
44					userid: null,
45					templateid: dashboard.templateid,
46					display_period: dashboard.display_period,
47					auto_start: dashboard.auto_start
48				},
49				max_dashboard_pages: <?= DASHBOARD_MAX_PAGES ?>,
50				cell_width: 100 / <?= DASHBOARD_MAX_COLUMNS ?>,
51				cell_height: 70,
52				max_columns: <?= DASHBOARD_MAX_COLUMNS ?>,
53				max_rows: <?= DASHBOARD_MAX_ROWS ?>,
54				widget_min_rows: <?= DASHBOARD_WIDGET_MIN_ROWS ?>,
55				widget_max_rows: <?= DASHBOARD_WIDGET_MAX_ROWS ?>,
56				widget_defaults: widget_defaults,
57				is_editable: true,
58				is_edit_mode: true,
59				can_edit_dashboards: true,
60				is_kiosk_mode: false,
61				time_period: time_period,
62				dynamic_hostid: null
63			});
64
65			for (const page of dashboard.pages) {
66				for (const widget of page.widgets) {
67					widget.fields = (typeof widget.fields === 'object') ? widget.fields : {};
68					widget.configuration = (typeof widget.configuration === 'object') ? widget.configuration : {};
69				}
70
71				ZABBIX.Dashboard.addDashboardPage(page);
72			}
73
74			ZABBIX.Dashboard.activate();
75
76			document
77				.getElementById('dashboard-config')
78				.addEventListener('click', () => ZABBIX.Dashboard.editProperties());
79
80			document
81				.getElementById('dashboard-add-widget')
82				.addEventListener('click', () => ZABBIX.Dashboard.addNewWidget());
83
84			document
85				.getElementById('dashboard-add')
86				.addEventListener('click', events.addClick);
87
88			document
89				.getElementById('dashboard-save')
90				.addEventListener('click', () => save());
91
92			document
93				.getElementById('dashboard-cancel')
94				.addEventListener('click', (e) => {
95					cancelEditing();
96					e.preventDefault();
97				}
98			);
99
100			ZABBIX.Dashboard.on(DASHBOARD_EVENT_BUSY, events.busy);
101			ZABBIX.Dashboard.on(DASHBOARD_EVENT_IDLE, events.idle);
102
103			enableNavigationWarning();
104
105			if (dashboard.dashboardid === null) {
106				ZABBIX.Dashboard.editProperties();
107			}
108		};
109
110		const save = () => {
111			clearMessages();
112
113			is_busy_saving = true;
114			updateBusy();
115
116			const request_data = ZABBIX.Dashboard.save();
117
118			request_data.sharing = dashboard.sharing;
119
120			const curl = new Curl('zabbix.php');
121
122			curl.setArgument('action', 'template.dashboard.update');
123
124			fetch(curl.getUrl(), {
125				method: 'POST',
126				headers: {
127					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
128				},
129				body: urlEncodeData(request_data)
130			})
131				.then((response) => response.json())
132				.then((response) => {
133					if ('errors' in response) {
134						throw {html_string: response.errors};
135					}
136
137					if ('system-message-ok' in response) {
138						postMessageOk(response['system-message-ok']);
139					}
140
141					disableNavigationWarning();
142					cancelEditing();
143				})
144				.catch((error) => {
145					if (typeof error === 'object' && 'html_string' in error) {
146						addMessage(error.html_string);
147					}
148					else {
149						const message = dashboard.dashboardid === null
150							? <?= json_encode(_('Failed to create dashboard')) ?>
151							: <?= json_encode(_('Failed to update dashboard')) ?>;
152
153						addMessage(makeMessageBox('bad', [], message, true, false));
154					}
155				})
156				.finally(() => {
157					is_busy_saving = false;
158					updateBusy();
159				});
160		};
161
162		const updateBusy = () => {
163			document.getElementById('dashboard-save').disabled = is_busy || is_busy_saving;
164		};
165
166		const cancelEditing = () => {
167			const curl = new Curl('zabbix.php', false);
168
169			curl.setArgument('action', 'template.dashboard.list');
170			curl.setArgument('templateid', dashboard.templateid);
171
172			if (page !== null) {
173				curl.setArgument('page', page);
174			}
175
176			location.replace(curl.getUrl());
177		};
178
179		const enableNavigationWarning = () => {
180			window.addEventListener('beforeunload', events.beforeUnload, {passive: false});
181		};
182
183		const disableNavigationWarning = () => {
184			window.removeEventListener('beforeunload', events.beforeUnload);
185		};
186
187		const events = {
188			addClick: (e) => {
189				const menu = [
190					{
191						items: [
192							{
193								label: <?= json_encode(_('Add widget')) ?>,
194								clickCallback: () => ZABBIX.Dashboard.addNewWidget()
195							},
196							{
197								label: <?= json_encode(_('Add page')) ?>,
198								clickCallback: () => ZABBIX.Dashboard.addNewDashboardPage()
199							}
200						]
201					},
202					{
203						items: [
204							{
205								label: <?= json_encode(_('Paste widget')) ?>,
206								clickCallback: () => ZABBIX.Dashboard.pasteWidget(
207									ZABBIX.Dashboard.getStoredWidgetDataCopy()
208								),
209								disabled: (ZABBIX.Dashboard.getStoredWidgetDataCopy() === null)
210							},
211							{
212								label: <?= json_encode(_('Paste page')) ?>,
213								clickCallback: () => ZABBIX.Dashboard.pasteDashboardPage(
214									ZABBIX.Dashboard.getStoredDashboardPageDataCopy()
215								),
216								disabled: (ZABBIX.Dashboard.getStoredDashboardPageDataCopy() === null)
217							}
218						]
219					}
220				];
221
222				$(e.target).menuPopup(menu, new jQuery.Event(e), {
223					position: {
224						of: e.target,
225						my: 'left top',
226						at: 'left bottom',
227						within: '.wrapper'
228					}
229				});
230			},
231
232			beforeUnload: (e) => {
233				if (ZABBIX.Dashboard.isUnsaved()) {
234					// Display confirmation message.
235					e.preventDefault();
236					e.returnValue = '';
237				}
238			},
239
240			busy: () => {
241				is_busy = true;
242				updateBusy();
243			},
244
245			idle: () => {
246				is_busy = false;
247				updateBusy();
248			}
249		};
250
251		let is_busy = false;
252		let is_busy_saving = false;
253
254		init();
255	}
256</script>
257