From a5708f168f3ab3c89eb509c7291d0ce69dc7fdc9 Mon Sep 17 00:00:00 2001
From: emak <cmoullas@emak.tech>
Date: Fri, 29 Oct 2021 16:37:11 -0400
Subject: [PATCH] Add device image support from provisioning templates (#5994)

This change adds support for images of the current selected device on the device_edit.php page.

The images need to be stored with the provisioning templates in the following format:

* /yealink/t21p/t21p.jpg

Images loaded into the page without needing link to the direct path. This makes it possible to store images with the template and not need any form of nginx rewrite rule or any other changes.

The images are zoomable with pure CSS, no javascript required.
---
 app/devices/device_edit.php | 52 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/app/devices/device_edit.php b/app/devices/device_edit.php
index 1b198ee4ea..4c8e5b60b9 100644
--- a/app/devices/device_edit.php
+++ b/app/devices/device_edit.php
@@ -895,6 +895,7 @@
 	echo "<br /><br />\n";
 
 	echo "<table width='100%' border='0' cellpadding='0' cellspacing='0'>\n";
+
 	echo "<tr>\n";
 	echo "<td class='vncell' width='30%' valign='top' align='left' nowrap='nowrap'>\n";
 	echo "	".$text['label-device_mac_address']."\n";
@@ -935,9 +936,10 @@
 		echo "	".$text['label-device_template']."\n";
 		echo "</td>\n";
 		echo "<td class='vtable' align='left'>\n";
+		echo "<div class='template_select_container'>";
 		$device = new device;
 		$template_dir = $device->get_template_dir();
-		echo "	<select id='device_template' name='device_template' class='formfld'>\n";
+		echo "	<select id='device_template' name='device_template' class='formfld' style='float: left;'>\n";
 		echo "		<option value=''></option>\n";
 		if (is_dir($template_dir) && @is_array($device_vendors)) {
 			foreach ($device_vendors as $row) {
@@ -950,6 +952,8 @@
 								if (is_dir($template_dir . '/' . $row["name"] .'/'. $dir)) {
 									if ($device_template == $row["name"]."/".$dir) {
 										echo "			<option value='".escape($row["name"])."/".escape($dir)."' selected='selected'>".escape($row["name"])."/".escape($dir)."</option>\n";
+										$current_device = escape($dir);
+										$current_device_path = $template_dir . '/' . $row["name"];
 									}
 									else {
 										echo "			<option value='".escape($row["name"])."/".escape($dir)."'>".$row["name"]."/".escape($dir)."</option>\n";
@@ -963,8 +967,54 @@
 			}
 		}
 		echo "	</select>\n";
+		echo "	<span style='float: left; clear: left;'";
 		echo "	<br />\n";
 		echo "	".$text['description-device_template']."\n";
+		echo "	</span>";
+		echo "</div>";
+		echo "
+		<style>
+			.template_select_container {
+				display: block;
+				width: auto;
+				float: left;
+			}
+		
+			.device_image {
+				max-width: 280px;
+			}
+			
+			.device_image > img {
+				position: relative;
+				max-height: 170px;
+				border-radius: 1px;
+				transition: transform .6s;
+				z-index: 2;
+			}
+			
+			.device_image > img:hover {
+				cursor: zoom-in;
+			}			
+			
+			.device_image >img:active {
+				transform: scale(3);
+				box-shadow: 0 0 10px #ccc;
+			}
+		</style>
+		";
+		
+		$device_image_path = $current_device_path . "/";
+		$device_image_name = $current_device . ".jpg";
+		$device_image_full = $device_image_path . "/" . $current_device . "/" . $device_image_name;
+		
+		if (file_exists($device_image_full))
+			{
+				$device_image = base64_encode(file_get_contents($device_image_full));
+
+		echo "<div class='device_image'>\n";
+		echo "<img src='data:image/jpg;base64," . $device_image . "' title='$current_device'>";
+		echo "</div>";
+		}
 		echo "</td>\n";
 		echo "</tr>\n";
 	}