From cd09ec8fef7c004bcaacfddcc340636294c12322 Mon Sep 17 00:00:00 2001
From: Andrew Bauer <zonexpertconsulting@outlook.com>
Date: Thu, 10 Sep 2020 16:56:58 -0500
Subject: [PATCH] rough in Modal Ajax framework

---
 web/ajax/modal.php                            | 36 +++++++++++++++++
 web/skins/classic/includes/functions.php      | 37 ++++++++++++++++++
 .../classic/includes/getOptionHelpHTML.php    | 39 +++++++++++++++++++
 web/skins/classic/js/skin.js                  | 25 ++++++++++++
 4 files changed, 137 insertions(+)
 create mode 100644 web/ajax/modal.php
 create mode 100644 web/skins/classic/includes/getOptionHelpHTML.php

diff --git a/web/ajax/modal.php b/web/ajax/modal.php
new file mode 100644
index 000000000..6ccefd9bd
--- /dev/null
+++ b/web/ajax/modal.php
@@ -0,0 +1,36 @@
+<?php
+// HOW TO IMPLEMENT A NEW MODAL
+// 1) Create a function in skins/classic/includes/functions that returns the desired modal HTML
+// 2) Add a new entry to the switch case below that calls the new HTML function
+// 3) Create a $j.getJSON Ajax call in js with the right parameters to retrieve the modal
+// 4) Open the modal with $j('#myModal').modal('show')
+// 
+
+if ( empty($_REQUEST['modal']) ) ajaxError('Modal Name Not Provided');
+
+$modal = validJsStr($_REQUEST['modal']);
+$data = array();
+
+// Not sure if this is required
+if ( ZM_OPT_USE_AUTH && (ZM_AUTH_RELAY == 'hashed') ) {
+  $auth_hash = generateAuthHash(ZM_AUTH_HASH_IPS);
+  if ( isset($_REQUEST['auth']) and ($_REQUEST['auth'] != $auth_hash) ) {
+    $data['auth'] = $auth_hash;
+  }
+}
+
+switch ( $modal ) {
+  case 'optionhelp' :
+    if ( empty($_REQUEST['ohndx']) ) ajaxError('Option Help Index Not Provided');
+    $data['html'] = getOptionHelpHTML($_REQUEST['ohndx']);
+    break;
+  default :
+    // Maybe don't need both
+    ZM\Warning('Unknown modal '.$modal);
+    ajaxError("Unknown modal '".$modal."'");
+    return;
+}
+
+ajaxResponse($data);
+return;
+?>
diff --git a/web/skins/classic/includes/functions.php b/web/skins/classic/includes/functions.php
index e19e2af8d..e6491dc90 100644
--- a/web/skins/classic/includes/functions.php
+++ b/web/skins/classic/includes/functions.php
@@ -754,6 +754,43 @@ function runtimeStatus($running=null) {
   return $running ? ($state ? $state : translate('Running')) : translate('Stopped');
 }
 
+// Returns the modal html representing the selected Option Help item
+function getOptionHelpHTML($optionHelpIndex) {
+  global $OLANG;
+  $result = '';
+  $ZMoptionHelpIndex = 'ZM_'.$optionHelpIndex;
+  
+  if ( !empty($OLANG[$optionHelpIndex]) ) {
+    $optionHelpText = $OLANG[$optionHelpIndex]['Help'];
+  } else {
+    $optionHelpText = dbFetchOne('SELECT Help FROM Config WHERE Name=?', 'Help', array($ZMoptionHelpIndex));
+  }
+  $optionHelpText = validHtmlStr($optionHelpText);
+  $optionHelpText = preg_replace('/~~/', '<br/>', $optionHelpText );
+  $optionHelpText = preg_replace('/\[(.+)\]\((.+)\)/', '<a href="$2" target="_blank">$1</a>', $optionHelpText);
+
+  $result .= '<div id="optionhelp" class="modal" tabindex="-1" role="dialog">'.PHP_EOL;
+    $result .= '<div class="modal-dialog" role="document">'.PHP_EOL;
+      $result .= '<div class="modal-content">'.PHP_EOL;
+        $result .= '<div class="modal-header">'.PHP_EOL;
+          $result .= '<h5 class="modal-title">' .translate('OptionHelp'). '</h5>'.PHP_EOL;
+          $result .= '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'.PHP_EOL;
+            $result .= '<span aria-hidden="true">&times;</span>'.PHP_EOL;
+          $result .= '</button>'.PHP_EOL;
+        $result .= '</div>'.PHP_EOL;
+        $result .= '<div class="modal-body">'.PHP_EOL;
+          $result .= '<h3>' .validHtmlStr($optionHelpIndex). '</h3>'.PHP_EOL;
+          $result .= '<p class="textblock">' .$optionHelpText. '</p>'.PHP_EOL;
+        $result .= '</div>'.PHP_EOL;
+        $result .= '<div class="modal-footer">'.PHP_EOL;
+          $result .= '<button type="button" id="ohCloseBtn" class="btn btn-secondary" data-dismiss="modal">Close</button>'.PHP_EOL;
+        $result .= '</div>'.PHP_EOL;
+      $result .= '</div>'.PHP_EOL;
+    $result .= '</div>'.PHP_EOL;
+  $result .= '</div>'.PHP_EOL;
+  return $result;
+}
+
 function xhtmlFooter() {
   global $css;
   global $cspNonce;
diff --git a/web/skins/classic/includes/getOptionHelpHTML.php b/web/skins/classic/includes/getOptionHelpHTML.php
new file mode 100644
index 000000000..51b81f662
--- /dev/null
+++ b/web/skins/classic/includes/getOptionHelpHTML.php
@@ -0,0 +1,39 @@
+<?php
+
+// Returns the html representing the Options menu item
+function getOptionHelpHTML($ZMoptionHelpIndex) {
+  $result = '';
+  $optionHelpIndex = preg_replace('/^ZM_/', '', $ZMoptionHelpIndex);
+  
+  if ( !empty($OLANG[$optionHelpIndex]) ) {
+    $optionHelpText = $OLANG[$optionHelpIndex]['Help'];
+  } else {
+    $optionHelpText = dbFetchOne('SELECT Help FROM Config WHERE Name=?', 'Help', array($ZMoptionHelpIndex));
+  }
+  $optionHelpText = validHtmlStr($optionHelpText);
+  $optionHelpText = preg_replace('/~~/', '<br/>', $optionHelpText );
+  $optionHelpText = preg_replace('/\[(.+)\]\((.+)\)/', '<a href="$2" target="_blank">$1</a>', $optionHelpText);
+
+  $result .= '<div id="optionhelp" class="modal" tabindex="-1" role="dialog">'.PHP_EOL;
+    $result .= '<div class="modal-dialog" role="document">'.PHP_EOL;
+      $result .= '<div class="modal-content">'.PHP_EOL
+        $result .= '<div class="modal-header">'.PHP_EOL
+          $result .= '<h5 class="modal-title">' .translate('OptionHelp'). '</h5>'.PHP_EOL;
+          $result .= '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'.PHP_EOL;
+            $result .= '<span aria-hidden="true">&times;</span>'.PHP_EOL;
+          $result .= '</button>'.PHP_EOL;
+        $result .= '</div>'.PHP_EOL;
+        $result .= '<div class="modal-body">'.PHP_EOL;
+          $result .= '<h3>' .validHtmlStr($ZMoptionHelpIndex). '</h3>'.PHP_EOL;
+          $result .= '<p class="textblock">' .$optionHelpText. '</p>'.PHP_EOL;
+        $result .= '</div>'.PHP_EOL;
+        $result .= '<div class="modal-footer">'.PHP_EOL;
+          $result .= '<button type="button" id="ohCloseBtn" class="btn btn-secondary" data-dismiss="modal">Close</button>'.PHP_EOL;
+        $result .= '</div>'.PHP_EOL;
+      $result .= '</div>'.PHP_EOL;
+    $result .= '</div>'.PHP_EOL;
+  $result .= '</div>'.PHP_EOL;
+  
+  return $result;
+}
+
diff --git a/web/skins/classic/js/skin.js b/web/skins/classic/js/skin.js
index f33007ec2..695e8bac7 100644
--- a/web/skins/classic/js/skin.js
+++ b/web/skins/classic/js/skin.js
@@ -385,8 +385,33 @@ if ( currentView != 'none' && currentView != 'login' ) {
         $j("button.navbar-toggler").click();
       }
     });
+    // Manage the optionhelp links
+    $j(".optionhelp").click(function(evt) {
+      $j.getJSON(thisUrl + '?request=modal&modal=optionhelp&ohndx=' + evt.target.id)
+        .done(optionhelpModal)
+        .fail(function(jqxhr, textStatus, error) {
+          console.log("Request Failed: " + textStatus + ", " + error);
+          console.log("Response Text: " + jqxhr.responseText);
+        });
+    });
   });
 
+  // Manage the modal html we received after user clicks help link
+  function optionhelpModal(data) {
+
+    if ( $j('#optionhelp').length ) {
+      $j('#optionhelp').replaceWith(data.html);
+    } else {
+      $j("body").append(data.html);
+    }
+    $j('#optionhelp').modal('show');
+
+    // Manage the CLOSE optionhelp modal button
+    document.getElementById("ohCloseBtn").addEventListener("click", function onOhCloseClick(evt) {
+      $j('#optionhelp').modal('hide');
+    });
+  }
+
   function getNavBar() {
     $j.getJSON(thisUrl + '?view=request&request=status&entity=navBar')
         .done(setNavBar)