From 4e7d7746675fc671f557b0933bcdc74ca9cdffe2 Mon Sep 17 00:00:00 2001
From: IgorA100 <igora100@gmail.com>
Date: Tue, 7 May 2024 19:31:25 +0300
Subject: [PATCH] Added support for GridStack & PanZoom on Montage page
 (Monitor.php)

---
 web/includes/Monitor.php | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/web/includes/Monitor.php b/web/includes/Monitor.php
index 2368e6410..ab224288b 100644
--- a/web/includes/Monitor.php
+++ b/web/includes/Monitor.php
@@ -1022,6 +1022,8 @@ public static function getStatuses() {
       $options['buffer'] = $this->StreamReplayBuffer();
     //Warning("width: " . $options['width'] . ' height: ' . $options['height']. ' scale: ' . $options['scale'] );
     $html = '
+      <div id="m'. $this->Id() . '" class="grid-stack-item" gs-id="'. $this->Id() . '" gs-w="6" gs-auto-position="true">
+        <div class="grid-stack-item-content">
           <div id="monitor'. $this->Id() . '" data-id="'.$this->Id().'" class="monitor" title="'.$this->Id(). ' '.$this->Name().'">
             <div
               id="imageFeed'. $this->Id() .'"
@@ -1032,6 +1034,16 @@ public static function getStatuses() {
 #(($options['width'] and ($options['width'] != '0px')) ? 'width: '.$options['width'].';' : '').
 #(($options['height'] and ($options['height'] != '0px')) ? 'height: '.$options['height'].';' : '').
             '">';
+              $html .= '
+                <div id="button_zoom'.$this->Id().'" class="button_zoom hidden">
+                  <button id="btn-zoom-in'.$this->Id().'" class="btn btn-zoom-in hidden" data-on-click="panZoomIn" title="'.translate('Zoom IN').'"><span class="material-icons md-36">add</span></button>
+                  <button id="btn-zoom-out'.$this->Id().'" class="btn btn-zoom-out hidden" data-on-click="panZoomOut" title="'.translate('Zoom OUT').'"><span class="material-icons md-36">remove</span></button>
+                  <div class="block-button-center">
+                    <button id="btn-view-watch'.$this->Id().'" class="btn btn-view-watch" title="'.translate('Open watch page').'"><span class="material-icons md-36">open_in_new</span></button>
+                    <button id="btn-edit-monitor'.$this->Id().'" class="btn btn-edit-monitor" title="'.translate('Edit monitor').'"><span class="material-icons md-36">edit</span></button>
+                  </div>
+                </div>
+                <div class="zoompan">';
 
     if ($this->Type() == 'WebSite') {
       $html .= getWebSiteUrl(
@@ -1083,12 +1095,12 @@ public static function getStatuses() {
 </svg>
 ';
     } # end if showZones
-    $html .= PHP_EOL.'</div><!--monitorStream-->'.PHP_EOL;
+    $html .= PHP_EOL.'</div><!--.zoompan--></div><!--monitorStream-->'.PHP_EOL;
     if (isset($options['state']) and $options['state']) {
     //if ((!ZM_WEB_COMPACT_MONTAGE) && ($this->Type() != 'WebSite')) {
       $html .= $this->getMonitorStateHTML();
     }
-    $html .= PHP_EOL.'</div>'.PHP_EOL;
+    $html .= PHP_EOL.'</div></div><!--.grid-stack-item-content--></div><!--.grid-stack-item-->'.PHP_EOL;
     return $html;
   } // end getStreamHTML