haproxy-devel, move icon usage to separate file for easy changing 'themes' / prepare for 2.3

5 files changed, 153 insertions, 52 deletions

diff --git a/config/haproxy-devel/haproxy.xml b/config/haproxy-devel/haproxy.xml
index 07dc53d1..68637209 100644
--- a/config/haproxy-devel/haproxy.xml
+++ b/config/haproxy-devel/haproxy.xml
@@ -111,6 +111,10 @@
 	</additional_files_needed>
 	<additional_files_needed>
 		<prefix>/usr/local/pkg/</prefix>
+		<item>https://packages.pfsense.org/packages/config/haproxy-devel/pkg/haproxy_gui.inc</item>
+	</additional_files_needed>
+	<additional_files_needed>
+		<prefix>/usr/local/pkg/</prefix>
 		<item>https://packages.pfsense.org/packages/config/haproxy-devel/pkg/haproxy_socketinfo.inc</item>
 	</additional_files_needed>
 	<additional_files_needed>
diff --git a/config/haproxy-devel/pkg/haproxy_gui.inc b/config/haproxy-devel/pkg/haproxy_gui.inc
new file mode 100644
index 00000000..5392e87a
--- /dev/null
+++ b/config/haproxy-devel/pkg/haproxy_gui.inc
@@ -0,0 +1,75 @@
+<?php
+
+$haproxy_icons = array(
+	'moveup' => array(
+		"faicon" => "fa-arrow-up",
+		"icon" => "icon_up.gif",
+		"iconsize" => 17),
+	'movedown' => array(
+		"faicon" => "fa-arrow-down",
+		"icon" => "icon_down.gif",
+		"iconsize" => 17),
+	'add' => array(
+		"faicon" => "fa-level-down",
+		"icon" => "icon_plus.gif",
+		"iconsize" => 17),
+	'delete' => array(
+		"faicon" => "fa-trash",
+		"icon" => "icon_x.gif",
+		"iconsize" => 17),
+	'edit' => array(
+		"faicon" => "fa-pencil",
+		"icon" => "icon_e.gif",
+		"iconsize" => 17),
+	'clone' => array(
+		"faicon" => "fa-clone",
+		"icon" => "icon_plus.gif"),
+	'acl' => array(
+		"faicon" => "fa-random",
+		"icon" => "icon_ts_rule.gif",
+		"iconsize" => 11),
+	'cert' => array(
+		"faicon" => "fa-lock",
+		"icon" => "icon_frmfld_cert.png",
+		"iconsize" => 11),
+	'advanced' => array(
+		"faicon" => "fa-cog",
+		"icon" => "icon_advanced.gif",
+		"iconsize" => 11),
+	'enabled' => array(
+		"faicon" => "fa-check",
+		"icon" => "icon_pass.gif",
+		"iconsize" => 11),
+	'disabled' => array(
+		"faicon" => "fa-ban",
+		"icon" => "icon_reject.gif",
+		"iconsize" => 11),
+	'stats' => array(
+		"faicon" => "fa-tasks",
+		"icon" => "icon_log_s.gif",
+		"iconsize" => 11)
+);
+
+global $pf_version;
+$pf_version = substr(trim(file_get_contents("/etc/version")), 0, 3);
+
+function pf_version() {
+	global $pf_version;
+	return $pf_version;
+}
+
+function haproxyicon($iconname, $title) {
+	global $g, $haproxy_icons;
+	$title = htmlspecialchars($title);
+	$title = str_replace("'", "&#39;", $title);
+	
+	$faicon = $haproxy_icons[$iconname]["faicon"];
+	if (pf_version() < "2.3") {
+		$icon = $haproxy_icons[$iconname]["icon"];
+		$iconsize = $haproxy_icons[$iconname]["iconsize"];
+		return "<img src='/themes/{$g['theme']}/images/icons/$icon' title='$title' width='$iconsize' height='$iconsize' border='0' />";	
+	} else {
+		return "<i class='fa $faicon' title='$title'></i>";
+	}
+
+}
diff --git a/config/haproxy-devel/pkg/haproxy_htmllist.inc b/config/haproxy-devel/pkg/haproxy_htmllist.inc
index d5386fcd..70a53c86 100644
--- a/config/haproxy-devel/pkg/haproxy_htmllist.inc
+++ b/config/haproxy-devel/pkg/haproxy_htmllist.inc
@@ -33,6 +33,7 @@
 
 require_once("config.inc");
 require_once("haproxy_utils.inc");
+require_once("haproxy_gui.inc");
 
 class HaproxyHtmlList
 {
@@ -193,20 +194,20 @@ class HaproxyHtmlList
 					<td class='list'>
 					<table border='0' cellspacing='0' cellpadding='1'><tr>
 					<td valign='middle'>
-					<img src='/themes/{$g['theme']}/images/icons/icon_e.gif' title='edit entry' width='17' height='17' border='0' onclick='editRow({$counter}); return false;' />
+					<a onclick='editRow({$counter}); return false;'>".haproxyicon('edit','edit entry')."</a>
 					</td>
 					<td valign='middle'>
-					<img src='/themes/{$g['theme']}/images/icons/icon_x.gif' title='delete entry' width='17' height='17' border='0' onclick='deleteRow({$counter}, \"{$tablename}\"); return false;' />
+					<a onclick='deleteRow({$counter}, \"{$tablename}\"); return false;'>".haproxyicon('delete','delete entry')."</a>
 					</td>
 					<td valign='middle'>
-					<img src='/themes/{$g['theme']}/images/icons/icon_plus.gif' title='duplicate entry' width='17' height='17' border='0' onclick='dupRow({$counter}, \"{$tablename}\"); return false;' />
+					<a onclick='dupRow({$counter}, \"{$tablename}\"); return false;'>".haproxyicon('clone','duplicate entry')."</a>
 					</td>";
 					if (empty($this->noindex)) {
 						echo "<td valign='middle'>
-						<img src='/themes/{$g['theme']}/images/icons/icon_up.gif' title='move row up' width='17' height='17' border='0' onclick='moveRowUp({$counter}, \"{$tablename}\"); return false;' />
+						<a onclick='moveRowUp({$counter}, \"{$tablename}\"); return false;'>".haproxyicon('moveup','move row up')."</a>
 						</td>
 						<td valign='middle'>
-						<img src='/themes/{$g['theme']}/images/icons/icon_down.gif' title='move row down' width='17' height='17' border='0' onclick='moveRowDown({$counter}, \"{$tablename}\"); return false;' />
+						<a onclick='moveRowDown({$counter}, \"{$tablename}\"); return false;'>".haproxyicon('movedown','move row down')."</a>
 						</td>";
 					}
 					echo "</tr></table>
@@ -232,17 +233,17 @@ class HaproxyHtmlList
 			<table border='0' cellspacing='0' cellpadding='1'><tr>
 			<td valign='middle'>
 			<input name='{$tablename}_rowindex{$counter}' id='{$tablename}_rowindex{$counter}' type='hidden' value='{$counter}' />
-			<img src='/themes/{$g['theme']}/images/icons/icon_x.gif' title='delete entry' width='17' height='17' border='0' onclick='deleteRow({$counter}, \"{$tablename}\"); return false;' />
+			<a onclick='deleteRow({$counter}, \"{$tablename}\"); return false;' >".haproxyicon('delete','delete entry')."</a>
 			</td>
 			<td valign='middle'>
-			<img src='/themes/{$g['theme']}/images/icons/icon_plus.gif' title='duplicate entry' width='17' height='17' border='0' onclick='dupRow({$counter}, \"{$tablename}\"); return false;' />
+			<a onclick='dupRow({$counter}, \"{$tablename}\"); return false;' />".haproxyicon('clone','duplicate entry')."</a>
 			</td>";
 			if (empty($this->noindex)) {
 				echo "<td valign='middle'>
-				<img src='/themes/{$g['theme']}/images/icons/icon_up.gif' title='move row up' width='17' height='17' border='0' onclick='moveRowUp({$counter}, \"{$tablename}\"); return false;' />
+				<a onclick='moveRowUp({$counter}, \"{$tablename}\"); return false;' />".haproxyicon('moveup','move row up')."</a>
 				</td>
 				<td valign='middle'>
-				<img src='/themes/{$g['theme']}/images/icons/icon_down.gif' title='move row down' width='17' height='17' border='0' onclick='moveRowDown({$counter}, \"{$tablename}\"); return false;' />
+				<a onclick='moveRowDown({$counter}, \"{$tablename}\"); return false;' />".haproxyicon('movedown','move row down')."</a>
 				</td>";
 			}
 			echo "</tr></table>
@@ -328,7 +329,7 @@ class HaproxyHtmlList
 		echo "</tbody>
 		</table>
 			<a onclick='javascript:addRowTo(\"{$tablename}\"); return false;' href='#'>
-			<img border='0' src='/themes/{$g['theme']}/images/icons/icon_plus.gif' alt='' title='add another entry' />
+			".haproxyicon('add','add another entry')."
 			</a>";
 	}
 }
@@ -445,12 +446,12 @@ function haproxy_htmllist_js(){
 		btd.setAttribute("valign", "middle");
 		btd.innerHTML =
 			'<input name="'+tableId+'_rowindex'+totalrows+'" id="'+tableId+'_rowindex'+totalrows+'" type="hidden" value="'+totalrows+'" />' +
-			'<img src="/themes/' + theme + '/images/icons/icon_x.gif" title="delete entry" width="17" height="17" border="0" onclick="deleteRow(' + totalrows + ", '" + tableId + "'); return false;\" />";
+			'<a onclick="deleteRow(' + totalrows + ", '" + tableId + "'); return false;\" ><?=haproxyicon('delete','delete entry')?></a>";
 		btr.appendChild(btd);
 		
 		btd = document.createElement("td");
 		btd.setAttribute("valign", "middle");
-		btd.innerHTML = '<img src="/themes/' + theme + "/images/icons/icon_plus.gif\" title=\"duplicate entry\" width=\"17\" height=\"17\" border=\"0\" onclick=\"dupRow(" + totalrows + ", '" + tableId + "'); return false;\" />";
+		btd.innerHTML = '<a onclick=\"dupRow(' + totalrows + ", '" + tableId + "'); return false;\" ><?=haproxyicon('clone','duplicate entry')?></a>";
 		btr.appendChild(btd);
 
 		
@@ -458,12 +459,12 @@ function haproxy_htmllist_js(){
 		if (tabledefinition && tabledefinition['keyfield'] == "") {
 			btd = document.createElement("td");
 			btd.setAttribute("valign", "middle");
-			btd.innerHTML = '<img src="/themes/' + theme + "/images/icons/icon_up.gif\" title=\"move entry up\" width=\"17\" height=\"17\" border=\"0\" onclick=\"moveRowUp(" + totalrows + ", '" + tableId + "'); return false;\" />";
+			btd.innerHTML = '<a onclick=\"moveRowUp(' + totalrows + ", '" + tableId + "'); return false;\" ><?=haproxyicon('moveup','move row up')?></a>";
 			btr.appendChild(btd);
 			
 			btd = document.createElement("td");
 			btd.setAttribute("valign", "middle");
-			btd.innerHTML = '<img src="/themes/' + theme + "/images/icons/icon_down.gif\" title=\"move entry down\" width=\"17\" height=\"17\" border=\"0\" onclick=\"moveRowDown(" + totalrows + ", '" + tableId + "'); return false;\" />";
+			btd.innerHTML = '<a onclick=\"moveRowDown(' + totalrows + ", '" + tableId + "'); return false;\" ><?=haproxyicon('movedown','move row down')?></a>";
 			btr.appendChild(btd);
 		}
 		
diff --git a/config/haproxy-devel/www/haproxy_listeners.php b/config/haproxy-devel/www/haproxy_listeners.php
index c7288e7d..e3dc7120 100644
--- a/config/haproxy-devel/www/haproxy_listeners.php
+++ b/config/haproxy-devel/www/haproxy_listeners.php
@@ -35,6 +35,7 @@ require_once("haproxy.inc");
 require_once("certs.inc");
 require_once("haproxy_utils.inc");
 require_once("pkg_haproxy_tabs.inc");
+require_once("haproxy_gui.inc");
 
 $changedesc = "Services: HAProxy: Frontends";
 
@@ -132,23 +133,24 @@ echo "<br/></div>";
 ?>
 <script type="text/javascript" language="javascript" src="/javascript/haproxy_geturl.js"></script>
 <script language="javascript">
-function toggle_on(button, image) {
-	var item = document.getElementById(button);
-	item.src = image;
+function set_content(elementid, image) {
+	var item = document.getElementById(elementid);
+	item.innerHTML = image;
 }
 
 function js_callback(req) {
 	showapplysettings.style.display = 'block';
+	
 	if(req.content != '') {
 		var itemsplit = req.content.split("|");
 		buttonid = itemsplit[0];
 		enabled = itemsplit[1];
 		if (enabled == 1){
-			img = 'pass';
+			img = "<?=haproxyicon("enabled", gettext("click to toggle enable/disable this frontend"))?>";
 		} else {
-			img = 'reject';
+			img = "<?=haproxyicon("disabled", gettext("click to toggle enable/disable this frontend"))?>";
 		}
-		toggle_on('btn_'+buttonid, './themes/<?=$g['theme'];?>/images/icons/icon_'+img+'.gif');
+		set_content('btn_'+buttonid, img);
 	}
 }
 </script>
@@ -197,9 +199,6 @@ function js_callback(req) {
 		}
 		ksort($a_frontend_grouped);
 		
-		$img_cert = "/themes/{$g['theme']}/images/icons/icon_frmfld_cert.png";
-		$img_adv = "/themes/{$g['theme']}/images/icons/icon_advanced.gif";
-		$img_acl = "/themes/{$g['theme']}/images/icons/icon_ts_rule.gif";
 		$textgray = "";
 		$first = true;		
 		$last_frontend_shared = false;
@@ -218,13 +217,12 @@ function js_callback(req) {
 				  <td class="listlr" ondblclick="document.location='haproxy_listeners_edit.php?id=<?=$frontendname;?>';">
 					<?
 						if ($frontend['status']=='disabled'){
-							$iconfn = "reject";
+							$iconfn = "disabled";
 						} else {
-							$iconfn = "pass";
+							$iconfn = "enabled";
 						}?>
-					<a href='javascript:getURL("?id=<?=$frontendname;?>&amp;action=toggle&amp;", js_callback);'>
-						<img id="btn_<?=$frontendname;?>" src="./themes/<?= $g['theme']; ?>/images/icons/icon_<?=$iconfn;?>.gif" width="11" height="11" border="0" 
-						title="<?=gettext("click to toggle enable/disable this frontend");?>" alt="icon" />
+					<a id="btn_<?=$frontendname;?>" href='javascript:getURL("?id=<?=$frontendname;?>&amp;action=toggle&amp;", js_callback);'>
+						<?=haproxyicon($iconfn, gettext("click to toggle enable/disable this frontend"))?>
 					</a>
 				  </td>
 				  <td class="listr" style="<?=$frontend['secondary']=='yes'?"visibility:hidden;":""?>" ondblclick="document.location='haproxy_listeners_edit.php?id=<?=$frontendname;?>';">
@@ -235,11 +233,12 @@ function js_callback(req) {
 					$acls = get_frontend_acls($frontend);
 					$isaclset = "";
 					foreach ($acls as $acl) {
-						$isaclset .= "&#10;" . htmlspecialchars($acl['descr']);
+						$isaclset .= "\n" . htmlspecialchars($acl['descr']);
+					}
+					if ($isaclset) {
+						echo haproxyicon("acl", gettext("acl's used") . ": {$isaclset}");
 					}
-					if ($isaclset) 
-						echo "<img src=\"$img_acl\" title=\"" . gettext("acl's used") . ": {$isaclset}\" border=\"0\" />";
-						
+					
 					if (get_frontend_uses_ssl($frontend)) {
 						$cert = lookup_cert($frontend['ssloffloadcert']);
 						$descr = htmlspecialchars($cert['descr']);
@@ -252,14 +251,15 @@ function js_callback(req) {
 								}
 							}
 						}
-						echo '<img src="'.$img_cert.'" title="SSL offloading cert: '.$descr.'" alt="SSL offloading" border="0" height="16" width="16" />';
+						echo haproxyicon("cert", "SSL offloading cert: {$descr}");
 					}
 					
 					$isadvset = "";
 					if ($frontend['advanced_bind']) $isadvset .= "Advanced bind: ".htmlspecialchars($frontend['advanced_bind'])."\r\n";
 					if ($frontend['advanced']) $isadvset .= "Advanced pass thru setting used\r\n";
-					if ($isadvset)
-						echo "<img src=\"$img_adv\" title=\"" . gettext("Advanced settings set") . ": {$isadvset}\" border=\"0\" />";
+					if ($isadvset) {
+						echo haproxyicon("advanced", gettext("Advanced settings set") . ": {$isadvset}");
+					}
 					?>
 				  </td>
 				  <td class="listr" ondblclick="document.location='haproxy_listeners_edit.php?id=<?=$frontendname;?>';">
@@ -277,7 +277,7 @@ function js_callback(req) {
 							print "<div style='white-space:nowrap;'>";
 							print "{$addr['addr']}:{$addr['port']}";
 							if ($addr['ssl'] == 'yes') {
-								echo '<img src="'.$img_cert.'" title="SSL offloading" alt="SSL" border="0" height="11" width="11" />';
+								echo haproxyicon("cert", "SSL offloading");
 							}
 							print "</div";
 							$first = false;
@@ -327,9 +327,15 @@ function js_callback(req) {
 				  <td class="list" nowrap>
 					<table border="0" cellspacing="0" cellpadding="1">
 					  <tr>
-						<td valign="middle"><a href="haproxy_listeners_edit.php?id=<?=$frontendname;?>"><img src="/themes/<?= $g['theme']; ?>/images/icons/icon_e.gif"  title="<?=gettext("edit frontend");?>" width="17" height="17" border="0" /></a></td>
-						<td valign="middle"><a href="haproxy_listeners.php?act=del&amp;id=<?=$frontendname;?>" onclick="return confirm('Do you really want to delete this entry?')"><img src="/themes/<?= $g['theme']; ?>/images/icons/icon_x.gif" title="<?=gettext("delete frontend");?>"  width="17" height="17" border="0" /></a></td>
-						<td valign="middle"><a href="haproxy_listeners_edit.php?dup=<?=$frontendname;?>"><img src="/themes/<?= $g['theme']; ?>/images/icons/icon_plus.gif" title="<?=gettext("clone frontend");?>" width="17" height="17" border="0" /></a></td>
+						<td valign="middle"><a href="haproxy_listeners_edit.php?id=<?=$frontendname;?>">
+						<?=haproxyicon("edit", gettext("edit frontend"))?>
+						</a></td>
+						<td valign="middle"><a href="haproxy_listeners.php?act=del&amp;id=<?=$frontendname;?>" onclick="return confirm('Do you really want to delete this entry?')">
+						<?=haproxyicon("delete", gettext("delete frontend"))?>
+						</a></td>
+						<td valign="middle"><a href="haproxy_listeners_edit.php?dup=<?=$frontendname;?>">
+						<?=haproxyicon("clone", gettext("clone frontend"))?>
+						</a></td>
 					  </tr>
 					</table>
 				  </td>
@@ -342,7 +348,9 @@ function js_callback(req) {
 			  <td class="list">
 				<table border="0" cellspacing="0" cellpadding="1">
 				  <tr>
-					<td valign="middle"><a href="haproxy_listeners_edit.php"><img src="/themes/<?= $g['theme']; ?>/images/icons/icon_plus.gif" title="<?=gettext("add new frontend");?>"  width="17" height="17" border="0" /></a></td>
+					<td valign="middle"><a href="haproxy_listeners_edit.php">
+						<?=haproxyicon("add", gettext("add new frontend"))?>
+					</a></td>
 				  </tr>
 				</table>
 			  </td>
diff --git a/config/haproxy-devel/www/haproxy_pools.php b/config/haproxy-devel/www/haproxy_pools.php
index d98c7f41..ca449246 100644
--- a/config/haproxy-devel/www/haproxy_pools.php
+++ b/config/haproxy-devel/www/haproxy_pools.php
@@ -33,7 +33,7 @@ $shortcut_section = "haproxy";
 require_once("guiconfig.inc");
 require_once("haproxy.inc");
 require_once("pkg_haproxy_tabs.inc");
-
+require_once("haproxy_gui.inc");
 
 if (!is_array($config['installedpackages']['haproxy']['ha_pools']['item'])) {
 	$config['installedpackages']['haproxy']['ha_pools']['item'] = array();
@@ -97,7 +97,6 @@ haproxy_css();
 			<td width="10%" class="list"></td>
 		</tr>
 <?php
-		$img_adv = "/themes/{$g['theme']}/images/icons/icon_advanced.gif";
 		$i = 0;
 		foreach ($a_pools as $pool){
 			$fe_list = "";
@@ -131,14 +130,19 @@ haproxy_css();
 			<tr class="<?=$textgray?>">
 			  <td class="listlr" ondblclick="document.location='haproxy_pool_edit.php?id=<?=$i;?>';">
 			  <?
-				if ($pool['stats_enabled']=='yes'){
-					echo "<img src=\"./themes/{$g['theme']}/images/icons/icon_log_s.gif\"" . ' title="stats enabled" width="11" height="15" border="0" />';
+				if ($pool['stats_enabled']=='yes') {
+					echo haproxyicon("stats", gettext("stats enabled"));
 				}
 				$isadvset = "";
-				if ($pool['advanced']) $isadvset .= "Per server pass thru\r\n";
-				if ($pool['advanced_backend']) $isadvset .= "Backend pass thru\r\n";
-				if ($isadvset)
-					echo "<img src=\"$img_adv\" title=\"" . gettext("advanced settings set") . ": {$isadvset}\" border=\"0\" />";
+				if ($pool['advanced']) {
+					$isadvset .= "Per server pass thru\r\n";
+				}
+				if ($pool['advanced_backend']) {
+					$isadvset .= "Backend pass thru\r\n";
+				}
+				if ($isadvset) {
+					echo haproxyicon("advanced", gettext("advanced settings set") . ": {$isadvset}");
+				}
 			  ?>
 			  </td>
 			  <td class="listlr" ondblclick="document.location='haproxy_pool_edit.php?id=<?=$i;?>';">
@@ -156,9 +160,15 @@ haproxy_css();
 			  <td class="list" nowrap>
 				<table border="0" cellspacing="0" cellpadding="1">
 				  <tr>
-					<td valign="middle"><a href="haproxy_pool_edit.php?id=<?=$i;?>"><img src="/themes/<?= $g['theme']; ?>/images/icons/icon_e.gif" title="<?=gettext("edit backend");?>" width="17" height="17" border="0" /></a></td>
-					<td valign="middle"><a href="haproxy_pools.php?act=del&amp;id=<?=$i;?>" onclick="return confirm('Do you really want to delete this entry?')"><img src="/themes/<?= $g['theme']; ?>/images/icons/icon_x.gif" title="<?=gettext("delete backend");?>" width="17" height="17" border="0" /></a></td>
-					<td valign="middle"><a href="haproxy_pool_edit.php?dup=<?=$i;?>"><img src="/themes/<?= $g['theme']; ?>/images/icons/icon_plus.gif" title="<?=gettext("clone backend");?>" width="17" height="17" border="0" /></a></td>
+					<td valign="middle"><a href="haproxy_pool_edit.php?id=<?=$i;?>">
+						<?=haproxyicon("edit", gettext("edit backend"))?>
+					</a></td>
+					<td valign="middle"><a href="haproxy_pools.php?act=del&amp;id=<?=$i;?>" onclick="return confirm('Do you really want to delete this entry?')">
+						<?=haproxyicon("delete", gettext("delete backend"))?>
+					</a></td>
+					<td valign="middle"><a href="haproxy_pool_edit.php?dup=<?=$i;?>">
+						<?=haproxyicon("clone", gettext("clone backend"))?>
+					</a></td>
 				  </tr>
 				</table>
 			  </td>
@@ -173,7 +183,10 @@ haproxy_css();
 			  <td class="list">
 				<table border="0" cellspacing="0" cellpadding="1">
 				  <tr>
-					<td valign="middle"><a href="haproxy_pool_edit.php"><img src="/themes/<?= $g['theme']; ?>/images/icons/icon_plus.gif" title="<?=gettext("add new backend");?>" width="17" height="17" border="0" /></a></td>
+					<td valign="middle">
+					<a href="haproxy_pool_edit.php">
+						<?=haproxyicon("add", gettext("add new backend"))?>
+					</a></td>
 				  </tr>
 				</table>
 			  </td>