From: Marcin Haba <marcin.haba@bacula.pl>
Date: Wed, 7 Aug 2019 04:48:53 +0000 (+0200)
Subject: baculum: Enable adding multiple file set file browser controls on the same page
X-Git-Tag: Release-9.6.0~155
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=8de31a70a00f42c89dd2e99747de95f6b7611ea9;p=thirdparty%2Fbacula.git

baculum: Enable adding multiple file set file browser controls on the same page
---

diff --git a/gui/baculum/protected/Web/Portlets/DirectiveFileSet.tpl b/gui/baculum/protected/Web/Portlets/DirectiveFileSet.tpl
index da25a10b5..a5ff61010 100644
--- a/gui/baculum/protected/Web/Portlets/DirectiveFileSet.tpl
+++ b/gui/baculum/protected/Web/Portlets/DirectiveFileSet.tpl
@@ -5,7 +5,7 @@
 		<div class="w3-card-4 w3-padding w3-margin-bottom directive incexc">
 			<h2><%#$this->SourceTemplateControl->getDirectiveName()%> #<%#$this->ItemIndex + 1%></h2>
 			<button type="button" onmousedown="openElementOnCursor(event, '<%=$this->FileSetFileOptMenu->ClientID%>_new_fileset', 0, 20);" class="w3-button w3-green w3-margin-bottom"><i class="fa fa-plus"></i> &nbsp;<%[ Add ]%></button>
-			<com:Application.Web.Portlets.NewFileSetFileOptMenu ID="FileSetFileOptMenu" />
+			<com:Application.Web.Portlets.NewFileSetFileOptMenu ID="FileSetFileOptMenu" FileSetBrowserId="<%=$this->SourceTemplateControl->FSBrowser->ClientID%>" />
 		<com:TActiveRepeater
 			ID="RepeaterFileSetOptions"
 			ItemRenderer="Application.Web.Portlets.FileSetOptionRenderer"
@@ -56,26 +56,26 @@
 		</div>
 	</prop:FooterTemplate>
 </com:TActiveRepeater>
-<div class="w3-modal" id="fileset_browser" style="display: none;">
+<div class="w3-modal" id="<%=$this->FSBrowser->ClientID%>fileset_browser" style="display: none;">
 	<div class="w3-modal-content w3-card-4 w3-padding-large w3-animate-zoom" style="width: 85%">
-		<span onclick="document.getElementById('fileset_browser').style.display = 'none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright">×</span>
+		<span onclick="document.getElementById('<%=$this->FSBrowser->ClientID%>fileset_browser').style.display = 'none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright">×</span>
 		<h2><%[ Include files to FileSet]%></h2>
 		<com:Application.Web.Portlets.FileSetBrowser ID="FSBrowser" />
 		<com:TCallback ID="NewIncExcFile" OnCallback="newIncludeExcludeFile" />
 		<div class="w3-center">
-			<button type="button" class="w3-button w3-red" onclick="document.getElementById('fileset_browser').style.display = 'none'"><i class="fa fa-times"></i> &nbsp; <%[ Cancel ]%></button>
-			<a class="w3-button w3-green button_fixed" onclick="set_include_exclude(); document.getElementById('fileset_browser').style.display = 'none'">
+			<button type="button" class="w3-button w3-red" onclick="document.getElementById('<%=$this->FSBrowser->ClientID%>fileset_browser').style.display = 'none'"><i class="fa fa-times"></i> &nbsp; <%[ Cancel ]%></button>
+			<a class="w3-button w3-green button_fixed" onclick="set_include_exclude<%=$this->FSBrowser->ClientID%>(); document.getElementById('<%=$this->FSBrowser->ClientID%>fileset_browser').style.display = 'none'">
 				<i class="fa fa-check"></i> &nbsp;<%[ Apply file selection ]%></a>
 			</a>
 		</div>
 	</div>
 </div>
 <script type="text/javascript">
-function set_include_exclude() {
+function set_include_exclude<%=$this->FSBrowser->ClientID%>() {
 	var request = <%=$this->NewIncExcFile->ActiveControl->Javascript%>;
 	var param = {
-		'Include': oFileSetBrowser.get_includes(),
-		'Exclude': oFileSetBrowser.get_excludes()
+		'Include': oFileSetBrowser<%=$this->FSBrowser->ClientID%>.get_includes(),
+		'Exclude': oFileSetBrowser<%=$this->FSBrowser->ClientID%>.get_excludes()
 	};
 	request.setCallbackParameter(param);
 	request.dispatch();
diff --git a/gui/baculum/protected/Web/Portlets/FileSetBrowser.php b/gui/baculum/protected/Web/Portlets/FileSetBrowser.php
index 57a22d7be..d4704f636 100644
--- a/gui/baculum/protected/Web/Portlets/FileSetBrowser.php
+++ b/gui/baculum/protected/Web/Portlets/FileSetBrowser.php
@@ -25,7 +25,7 @@ Prado::using('Application.Web.Portlets.Portlets');
 
 class FileSetBrowser extends Portlets {
 
-	const CLIENT_ID = 'ClientId';
+	const BCLIENT_ID = 'BClientId';
 	const PATH = 'Path';
 
 	/**
@@ -54,7 +54,7 @@ class FileSetBrowser extends Portlets {
 	public function selectClient($sender, $param) {
 		$client_id = $this->Client->getSelectedValue();
 		if ($client_id !== 'none') {
-			$this->setClientId($client_id);
+			$this->setBClientId($client_id);
 			$this->goToPath();
 		}
 	}
@@ -68,7 +68,7 @@ class FileSetBrowser extends Portlets {
 	}
 
 	public function goToPath() {
-		$client_id = $this->getClientId();
+		$client_id = $this->getBClientId();
 		$query = '?path=' . rawurlencode($this->getPath());
 		$params = array(
 			'clients',
@@ -78,17 +78,17 @@ class FileSetBrowser extends Portlets {
 		);
 		$result = $this->getModule('api')->get($params);
 		$this->getPage()->getCallbackClient()->callClientFunction(
-			'FileSetBrowser_set_content',
+			'FileSetBrowser_set_content' . $this->ClientID,
 			json_encode($result->output)
 		);
 	}
 
-	public function setClientId($client_id) {
-		$this->setViewState(self::CLIENT_ID, $client_id);
+	public function setBClientId($bclient_id) {
+		$this->setViewState(self::BCLIENT_ID, $bclient_id);
 	}
 
-	public function getClientId() {
-		return $this->getViewState(self::CLIENT_ID);
+	public function getBClientId() {
+		return $this->getViewState(self::BCLIENT_ID);
 	}
 
 	public function setPath($path) {
diff --git a/gui/baculum/protected/Web/Portlets/FileSetBrowser.tpl b/gui/baculum/protected/Web/Portlets/FileSetBrowser.tpl
index 61fe5a424..c7ee08a51 100644
--- a/gui/baculum/protected/Web/Portlets/FileSetBrowser.tpl
+++ b/gui/baculum/protected/Web/Portlets/FileSetBrowser.tpl
@@ -8,58 +8,58 @@
 				Width="350px"
 				CausesValidation="false"
 				OnSelectedIndexChanged="selectClient"
-				ClientSide.OnLoading="oFileSetBrowser.show_file_loader(true)"
-				ClientSide.OnComplete="oFileSetBrowser.show_file_loader(false)"
+				ClientSide.OnLoading="oFileSetBrowser<%=$this->ClientID%>.show_file_loader(true)"
+				ClientSide.OnComplete="oFileSetBrowser<%=$this->ClientID%>.show_file_loader(false)"
 				>
 			</com:TActiveDropDownList>
 		</div>
 	</div>
 	<p><%[ To browse Windows host please type in text field below drive letter as path, for example: C:/ ]%></p>
 	<div class="w3-section w3-half">
-		<input type="text" id="fileset_browser_path" class="w3-input w3-twothird w3-border" placeholder="<%[ Go to path ]%>" onkeypress="var k = event.which || event.keyCode; if (k == 13) { oFileSetBrowser.ls_items(document.getElementById('fileset_browser_path').value); }" />
-		<button type="button" class="w3-button w3-green" onclick="oFileSetBrowser.ls_items(document.getElementById('fileset_browser_path').value);"><i class="fa fa-check"></i> &nbsp;<%[ OK ]%></button>
-		<span id="fileset_browser_file_loader" style="display: none"><i class="fa fa-sync-alt w3-spin"></i></span>
+		<input type="text" id="<%=$this->ClientID%>fileset_browser_path" class="w3-input w3-twothird w3-border" placeholder="<%[ Go to path ]%>" onkeypress="var k = event.which || event.keyCode; if (k == 13) { oFileSetBrowser<%=$this->ClientID%>.ls_items(document.getElementById('<%=$this->ClientID%>fileset_browser_path').value); }" />
+		<button type="button" class="w3-button w3-green" onclick="oFileSetBrowser<%=$this->ClientID%>.ls_items(document.getElementById('<%=$this->ClientID%>fileset_browser_path').value);"><i class="fa fa-check"></i> &nbsp;<%[ OK ]%></button>
+		<span id="<%=$this->ClientID%>fileset_browser_file_loader" style="display: none"><i class="fa fa-sync-alt w3-spin"></i></span>
 	</div>
 	<div class="w3-section w3-half">
-		<input type="text" id="fileset_browser_add_include_path" class="w3-input w3-twothird w3-border w3-margin-left" placeholder="<%[ Add new include path ]%>" onkeypress="oFileSetBrowser.add_include_path_by_input(event);" autocomplete="off" />
-		<button type="button" class="w3-button w3-green" onclick="oFileSetBrowser.add_include_path();"><i class="fa fa-plus"></i> &nbsp;<%[ Add ]%></button>
+		<input type="text" id="<%=$this->ClientID%>fileset_browser_add_include_path" class="w3-input w3-twothird w3-border w3-margin-left" placeholder="<%[ Add new include path ]%>" onkeypress="oFileSetBrowser<%=$this->ClientID%>.add_include_path_by_input(event);" autocomplete="off" />
+		<button type="button" class="w3-button w3-green" onclick="oFileSetBrowser<%=$this->ClientID%>.add_include_path();"><i class="fa fa-plus"></i> &nbsp;<%[ Add ]%></button>
 	</div>
-	<div id="fileset_browser_file_container" class="w3-container w3-half w3-border"></div>
-	<div id="fileset_browser_include_container" class="w3-container w3-half w3-border"></div>
+	<div id="<%=$this->ClientID%>fileset_browser_file_container" class="w3-container w3-half w3-border fileset_browser_file_container"></div>
+	<div id="<%=$this->ClientID%>fileset_browser_include_container" class="w3-container w3-half w3-border fileset_browser_include_container"></div>
 	<div class="w3-section w3-half">
-		<input type="text" id="fileset_browser_add_exclude_path" class="w3-input w3-twothird w3-border w3-margin-left" placeholder="<%[ Add new global exclude path ]%>" onkeypress="oFileSetBrowser.add_exclude_path_by_input(event);" autocomplete="off" />
-		<button type="button" class="w3-button w3-green" onclick="oFileSetBrowser.add_exclude_path();"><i class="fa fa-plus"></i> &nbsp;<%[ Add ]%></button>
+		<input type="text" id="<%=$this->ClientID%>fileset_browser_add_exclude_path" class="w3-input w3-twothird w3-border w3-margin-left" placeholder="<%[ Add new global exclude path ]%>" onkeypress="oFileSetBrowser<%=$this->ClientID%>.add_exclude_path_by_input(event);" autocomplete="off" />
+		<button type="button" class="w3-button w3-green" onclick="oFileSetBrowser<%=$this->ClientID%>.add_exclude_path();"><i class="fa fa-plus"></i> &nbsp;<%[ Add ]%></button>
 	</div>
-	<div id="fileset_browser_exclude_container" class="w3-container w3-half w3-border"></div>
+	<div id="<%=$this->ClientID%>fileset_browser_exclude_container" class="w3-container w3-half w3-border fileset_browser_exclude_container"></div>
 	<com:TCallback
 		ID="FileSetBrowserFiles"
 		OnCallback="TemplateControl.getItems"
-		ClientSide.OnLoading="oFileSetBrowser.show_file_loader(true)"
-		ClientSide.OnComplete="oFileSetBrowser.show_file_loader(false)"
+		ClientSide.OnLoading="oFileSetBrowser<%=$this->ClientID%>.show_file_loader(true)"
+		ClientSide.OnComplete="oFileSetBrowser<%=$this->ClientID%>.show_file_loader(false)"
 	/>
 </div>
 <script type="text/javascript">
-var oFileSetBrowser = {
+var oFileSetBrowser<%=$this->ClientID%> = {
 	file_content: null,
 	include_content: null,
 	path_field: null,
 	path: [],
 	ids: {
-		file_container: 'fileset_browser_file_container',
-		include_container: 'fileset_browser_include_container',
-		exclude_container: 'fileset_browser_exclude_container',
-		path_field: 'fileset_browser_path',
-		add_include_path_field: 'fileset_browser_add_include_path',
-		add_exclude_path_field: 'fileset_browser_add_exclude_path',
-		file_loader: 'fileset_browser_file_loader'
+		file_container: '<%=$this->ClientID%>fileset_browser_file_container',
+		include_container: '<%=$this->ClientID%>fileset_browser_include_container',
+		exclude_container: '<%=$this->ClientID%>fileset_browser_exclude_container',
+		path_field: '<%=$this->ClientID%>fileset_browser_path',
+		add_include_path_field: '<%=$this->ClientID%>fileset_browser_add_include_path',
+		add_exclude_path_field: '<%=$this->ClientID%>fileset_browser_add_exclude_path',
+		file_loader: '<%=$this->ClientID%>fileset_browser_file_loader'
 	},
 	css: {
 		item: 'item',
-		item_included: 'item_included',
-		item_excluded: 'item_excluded',
-		item_inc_exc_btn: 'item_inc_exc_btn',
+		item_included: 'item_included w3-medium',
+		item_excluded: 'item_excluded w3-medium',
+		item_inc_exc_btn: 'item_inc_exc_btn w3-medium',
 		item_selected_del_btn: 'item_selected_del_btn',
-		item_name: 'item_name',
+		item_name: 'item_name w3-medium',
 		dir_img: 'dir_item_img',
 		file_img: 'file_item_img',
 		link_img: 'link_item_img'
@@ -228,7 +228,7 @@ var oFileSetBrowser = {
 	},
 	get_includes: function() {
 		var container = document.getElementById(this.ids.include_container);
-		var inc_elements = container.querySelectorAll('div.' + this.css.item_included);
+		var inc_elements = container.querySelectorAll('div.' + this.css.item_included.replace(/ /g, '.'));
 		var includes = [];
 		for (var i = 0; i < inc_elements.length; i++) {
 			includes.push(inc_elements[i].getAttribute('rel'));
@@ -237,7 +237,7 @@ var oFileSetBrowser = {
 	},
 	get_excludes: function() {
 		var container = document.getElementById(this.ids.exclude_container);
-		var exc_elements = container.querySelectorAll('div.' + this.css.item_excluded);
+		var exc_elements = container.querySelectorAll('div.' + this.css.item_excluded.replace(/ /g, '.'));
 		var excludes = [];
 		for (var i = 0; i < exc_elements.length; i++) {
 			excludes.push(exc_elements[i].getAttribute('rel'));
@@ -360,10 +360,10 @@ var oFileSetBrowser = {
 	}
 };
 
-function FileSetBrowser_set_content(content) {
-	oFileSetBrowser.set_content(content);
+function FileSetBrowser_set_content<%=$this->ClientID%>(content) {
+	oFileSetBrowser<%=$this->ClientID%>.set_content(content);
 }
 $(function() {
-	oFileSetBrowser.init();
+	oFileSetBrowser<%=$this->ClientID%>.init();
 });
 </script>
diff --git a/gui/baculum/protected/Web/Portlets/NewFileSetFileOptMenu.php b/gui/baculum/protected/Web/Portlets/NewFileSetFileOptMenu.php
index cde0dc4a4..afc1681cd 100644
--- a/gui/baculum/protected/Web/Portlets/NewFileSetFileOptMenu.php
+++ b/gui/baculum/protected/Web/Portlets/NewFileSetFileOptMenu.php
@@ -25,6 +25,7 @@ Prado::using('Application.Web.Portlets.DirectiveListTemplate');
 class NewFileSetFileOptMenu extends DirectiveListTemplate {
 
 	const ITEM_INDEX = 'ItemIndex';
+	const FS_BROWSER_ID = 'FsBrowserId';
 
 	public function setItemIndex($index) {
 		$this->setViewState(self::ITEM_INDEX, $index);
@@ -33,5 +34,13 @@ class NewFileSetFileOptMenu extends DirectiveListTemplate {
 	public function getItemIndex() {
 		return $this->getViewState(self::ITEM_INDEX);
 	}
+
+	public function setFileSetBrowserId($id) {
+		$this->setViewState(self::FS_BROWSER_ID, $id);
+	}
+
+	public function getFileSetBrowserId() {
+		return $this->getViewState(self::FS_BROWSER_ID);
+	}
 }
 ?>
diff --git a/gui/baculum/protected/Web/Portlets/NewFileSetFileOptMenu.tpl b/gui/baculum/protected/Web/Portlets/NewFileSetFileOptMenu.tpl
index 038cb4567..6a04f1842 100644
--- a/gui/baculum/protected/Web/Portlets/NewFileSetFileOptMenu.tpl
+++ b/gui/baculum/protected/Web/Portlets/NewFileSetFileOptMenu.tpl
@@ -13,7 +13,7 @@
 		</li>
 		<li><com:TLinkButton
 			ID="IncludeFileItemByBrowser"
-			Attributes.onclick="$(this).closest('div.config_new_fileset').hide(); oFileSetBrowser.reset(); $('#fileset_browser').show(); return false;"
+			Attributes.onclick="$(this).closest('div.config_new_fileset').hide(); oFileSetBrowser<%=$this->FileSetBrowserId%>.reset(); $('#<%=$this->FileSetBrowserId%>fileset_browser').show(); return false;"
 			>
 			<i class='fa fa-plus'></i> &nbsp;<%[ Add files by file browser ]%>
 		</com:TLinkButton>
@@ -32,7 +32,7 @@
 			ID="PluginsItem"
 			OnCommand="Parent.SourceTemplateControl.newIncludePlugin"
 			CommandParameter="save"
-			ClientSide.OnComplete="var el1 = $('#<%=$this->PluginsItem->ClientID%>').parents('div').find('div.include_plugin')[<%=$this->Parent->ItemIndex%>]; var el2 = $(el1).find('div'); BaculaConfig.scroll_to_element(el2[el2.length-1], -80); $(el2[el2.length-1]).find('input')[0].focus();"
+			ClientSide.OnComplete="var el1 = $('#<%=$this->PluginsItem->ClientID%>').parents('div').find('div.incexc')[<%=$this->Parent->ItemIndex%>]; var el2 = $(el1).find('div.directive_field'); BaculaConfig.scroll_to_element(el2[el2.length-1], -80); $(el2[el2.length-1]).find('input')[0].focus();"
 			Attributes.onclick="$(this).closest('div.config_new_fileset').hide();"
 			>
 			<i class='fa fa-plus'></i> &nbsp;<%[ Add plugin ]%>
diff --git a/gui/baculum/themes/Baculum-v2/css/baculum.css b/gui/baculum/themes/Baculum-v2/css/baculum.css
index 7843fcbc7..c58f9efd6 100644
--- a/gui/baculum/themes/Baculum-v2/css/baculum.css
+++ b/gui/baculum/themes/Baculum-v2/css/baculum.css
@@ -135,7 +135,7 @@ div.config_directives {
 	text-align: justify;
 }
 
-#fileset_browser_file_container, #fileset_browser_include_container, #fileset_browser_exclude_container {
+.fileset_browser_file_container, .fileset_browser_include_container, .fileset_browser_exclude_container {
 	width: 50%;
 	overflow-y: auto;
 	overflow-x: none;
@@ -144,11 +144,11 @@ div.config_directives {
 	height: 384px;
 }
 
-#fileset_browser_include_container {
+.fileset_browser_include_container {
 	height: 150px;
 }
 
-#fileset_browser_exclude_container {
+.fileset_browser_exclude_container {
 	height: 162px;
 }