From b6541aa1ff1d78996ec0a6c741ac80e3b6e9df50 Mon Sep 17 00:00:00 2001
From: Isaac Connor <isaac@zoneminder.com>
Date: Mon, 21 Sep 2020 13:01:58 -0400
Subject: [PATCH] Move log export to a generic modal

---
 web/ajax/modals/log_export.php    | 46 +++++++++++++++++++++++++++++++
 web/skins/classic/views/js/log.js | 34 +++++++++++++++--------
 web/skins/classic/views/log.php   | 32 ---------------------
 3 files changed, 68 insertions(+), 44 deletions(-)
 create mode 100644 web/ajax/modals/log_export.php

diff --git a/web/ajax/modals/log_export.php b/web/ajax/modals/log_export.php
new file mode 100644
index 000000000..8f359bb86
--- /dev/null
+++ b/web/ajax/modals/log_export.php
@@ -0,0 +1,46 @@
+<div class="modal fade" id="log_exportModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title"><?php echo translate('ExportLog') ?></h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+
+        <form id="exportForm" action="" method="post">
+          <?php
+          // We have to manually insert the csrf key into the form when using a modal generated via ajax call
+          echo getCSRFinputHTML();
+          echo $inputs;
+          ?>
+          <fieldset title="<?php echo translate('ChooseLogSelection') ?>">
+            <legend><?php echo translate('SelectLog') ?></legend>
+            <label for="selectorAll"><?php echo translate('All') ?></label>
+            <input type="radio" id="selectorAll" name="selector" value="all"/>
+            <label for="selectorFilter"><?php echo translate('Filter') ?></label>
+            <input type="radio" id="selectorFilter" name="selector" value="filter"/>
+            <label for="selectorCurrent"><?php echo translate('Current') ?></label>
+            <input type="radio" id="selectorCurrent" name="selector" value="current" data-validators="validate-one-required"/>
+          </fieldset>
+          <fieldset title="<?php echo translate('ChooseLogFormat') ?>">
+            <legend><?php echo translate('SelectFormat') ?></legend>
+            <label for="formatText">TXT</label><input type="radio" id="formatText" name="format" value="text"/>
+            <label for="formatTSV">TSV</label><input type="radio" id="formatTSV" name="format" value="tsv"/>
+            <label for="formatXML">HTML</label><input type="radio" id="formatHTML" name="format" value="html"/>
+            <label for="formatXML">XML</label><input type="radio" id="formatXML" name="format" value="xml" class="validate-one-required"/>
+          </fieldset>
+          <div id="exportError">
+            <?php echo translate('ExportFailed') ?>: <span id="exportErrorText"></span>
+          </div>
+
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" id="exportButton" value="Export" data-on-click="exportRequest"><?php echo translate('Export') ?></button>
+          <button type="button" class="btn btn-secondary" data-dismiss="modal"><?php echo translate('Cancel') ?></button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
diff --git a/web/skins/classic/views/js/log.js b/web/skins/classic/views/js/log.js
index c6d8b0731..53f197eab 100644
--- a/web/skins/classic/views/js/log.js
+++ b/web/skins/classic/views/js/log.js
@@ -210,22 +210,31 @@ function resetLog() {
   refreshLog();
 }
 
-var exportFormValidator;
+var exportFormValidator = null;
 
 function exportLog() {
-  exportFormValidator.reset();
-  $('exportLog').overlayShow();
+  getModal('log_export');
+
+  if ( !exportFormValidator ) {
+    exportFormValidator = new Form.Validator.Inline($('exportForm'), {
+      useTitles: true,
+      warningPrefix: '',
+      errorPrefix: ''
+    });
+  } else {
+    exportFormValidator.reset();
+  }
 }
 
 function exportResponse( response ) {
-  $('exportLog').unspin();
+  $('log_exportModal').unspin();
   if ( response.result == 'Ok' ) {
     window.location.replace( thisUrl+'?view=request&request=log&task=download&key='+response.key+'&format='+response.format );
   }
 }
 
 function exportFail( request ) {
-  $('exportLog').unspin();
+  $('log_exportModal').unspin();
   $('exportErrorText').set('text', request.status+' / '+request.statusText);
   $('exportError').show();
   Error('Export request failed: '+request.status+' / '+request.statusText);
@@ -233,12 +242,18 @@ function exportFail( request ) {
 
 function exportRequest() {
   var form = $('exportForm');
+  console.log(form);
   $('exportErrorText').set('text', '');
   $('exportError').hide();
   if ( form.validate() ) {
     var exportParms = "view=request&request=log&task=export";
     var exportReq = new Request.JSON({url: thisUrl, method: 'post', link: 'cancel', onSuccess: exportResponse, onFailure: exportFail});
-    var selection = form.getElement('input[name=selector]:checked').get('value');
+    var selector = form.querySelectorAll('input[name=selector]:checked');
+    if ( !selector.length ) {
+      alert("Please select how to filter logs");
+      return;
+    }
+    var selection = selector[0].get('value');
     if ( selection == 'filter' || selection == 'current' ) {
       $$('#filters select').each(
           function( select ) {
@@ -257,7 +272,7 @@ function exportRequest() {
       }
     }
     exportReq.send(exportParms+"&"+form.toQueryString());
-    $('exportLog').spin();
+    $('log_exportModal').spin();
   }
 }
 
@@ -333,11 +348,6 @@ function initPage() {
     } // end if loCount > displayLimit
   }
   );
-  exportFormValidator = new Form.Validator.Inline($('exportForm'), {
-    useTitles: true,
-    warningPrefix: '',
-    errorPrefix: ''
-  });
   new Asset.css('css/spinner.css');
   fetchNextLogs();
 }
diff --git a/web/skins/classic/views/log.php b/web/skins/classic/views/log.php
index 329318aca..8d2e9f293 100644
--- a/web/skins/classic/views/log.php
+++ b/web/skins/classic/views/log.php
@@ -96,36 +96,4 @@ xhtmlHeaders(__FILE__, translate('SystemLog'));
       </form>
     </div><!--content-->
   </div><!--page-->
-  <div id="exportLog" class="overlay">
-    <div class="overlayHeader">
-      <div class="overlayTitle"><?php echo translate('ExportLog') ?></div>
-    </div>
-    <div class="overlayBody">
-      <div class="overlayContent">
-        <form id="exportForm" action="" method="post">
-          <fieldset>
-            <legend><?php echo translate('SelectLog') ?></legend>
-            <label for="selectorAll"><?php echo translate('All') ?></label>
-            <input type="radio" id="selectorAll" name="selector" value="all"/>
-            <label for="selectorFilter"><?php echo translate('Filter') ?></label>
-            <input type="radio" id="selectorFilter" name="selector" value="filter"/>
-            <label for="selectorCurrent"><?php echo translate('Current') ?></label>
-            <input type="radio" id="selectorCurrent" name="selector" value="current" title="<?php echo translate('ChooseLogSelection') ?>" data-validators="validate-one-required"/>
-          </fieldset>
-          <fieldset>
-            <legend><?php echo translate('SelectFormat') ?></legend>
-            <label for="formatText">TXT</label><input type="radio" id="formatText" name="format" value="text"/>
-            <label for="formatTSV">TSV</label><input type="radio" id="formatTSV" name="format" value="tsv"/>
-            <label for="formatXML">HTML</label><input type="radio" id="formatHTML" name="format" value="html"/>
-            <label for="formatXML">XML</label><input type="radio" id="formatXML" name="format" value="xml" title="<?php echo translate('ChooseLogFormat') ?>" class="validate-one-required"/>
-          </fieldset>
-          <div id="exportError">
-            <?php echo translate('ExportFailed') ?>: <span id="exportErrorText"></span>
-          </div>
-          <button type="button" id="exportButton" value="Export" data-on-click="exportRequest"><?php echo translate('Export') ?></button>
-          <button type="button" value="Cancel" class="overlayCloser"><?php echo translate('Cancel') ?></button>
-        </form>
-      </div><!--overlayContent-->
-    </div><!--overlaybody-->
-  </div><!-- exportLog-->
 <?php xhtmlFooter() ?>