From 94bc40a6cf49718568d43d6a273b0f84a95968ec Mon Sep 17 00:00:00 2001
From: Isaac Connor <isaac@zoneminder.com>
Date: Sun, 5 Jan 2020 17:33:36 -0500
Subject: [PATCH] Split the data by monitor and display a monitor image/info
 for each monitor.

---
 web/skins/classic/views/timeline.php | 38 +++++++++++++++++-----------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/web/skins/classic/views/timeline.php b/web/skins/classic/views/timeline.php
index 587517fe0..42417503b 100644
--- a/web/skins/classic/views/timeline.php
+++ b/web/skins/classic/views/timeline.php
@@ -682,23 +682,32 @@ xhtmlHeaders(__FILE__, translate('Timeline'));
     </div>
     
     <div id="content" class="chartSize">
+      <div id="instruction">
+        <p><?php echo translate('TimelineTip1') ?></p>
+        <p><?php echo translate('TimelineTip2') ?></p>
+        <p><?php echo translate('TimelineTip3') ?></p>
+        <p><?php echo translate('TimelineTip4') ?></p>
+      </div>
       <div id="topPanel" class="graphWidth">
-        <div id="imagePanel">
-          <div id="image" class="imageHeight">
-		        <img id="imageSrc" class="imageWidth" src="graphics/transparent.png" alt="<?php echo translate('ViewEvent') ?>" title="<?php echo translate('ViewEvent') ?>"/>
-          </div>
-        </div>
-        <div id="dataPanel">
-          <div id="textPanel">
-            <div id="instruction">
-              <p><?php echo translate('TimelineTip1') ?></p>
-              <p><?php echo translate('TimelineTip2') ?></p>
-              <p><?php echo translate('TimelineTip3') ?></p>
-              <p><?php echo translate('TimelineTip4') ?></p>
-              </div>
-            <div id="eventData">
+<?php 
+foreach ( $monitors as $monitor ) {
+?>
+        <div class="monitorPanel" style="width:<?php echo 100/count($monitors); ?>%;float:left;">
+          <div class="imagePanel">
+            <div class="imageHeight image">
+              <img id="imageSrc<?php echo $monitor->Id() ?>" class="imageWidth" src="graphics/transparent.png" alt="<?php echo translate('ViewEvent') ?>" title="<?php echo translate('ViewEvent') ?>"/>
             </div>
           </div>
+          <div id="dataPanel<?php echo $monitor->Id() ?>">
+            <div id="textPanel<?php echo $monitor->Id() ?>">
+              <div id="eventData<?php echo $monitor->Id() ?>">
+              </div>
+            </div>
+          </div>
+        </div>
+<?php 
+} # end foreach monitor
+?>
           <div id="navPanel">
             <button type="button" title="<?php echo translate('PanLeft') ?>" data-on-click="tlPanLeft">
             <i class="material-icons md-18">fast_rewind</i>
@@ -710,7 +719,6 @@ xhtmlHeaders(__FILE__, translate('Timeline'));
             <i class="material-icons md-18">fast_forward</i>
             </button>
           </div>
-        </div>
       </div>
       <div id="chartPanel">
         <div id="chart" class="graphSize">