mirror/zoneminder
1
0
Fork 0
mirror of https://github.com/ZoneMinder/zoneminder.git synced 2026-03-31 04:02:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

rough in Modal Ajax framework

Browse Source
This commit is contained in:
Andrew Bauer
2020-09-10 16:56:58 -05:00
parent e392b417e3
commit cd09ec8fef
4 changed files with 137 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/ajax/modal.php Normal file
View File

@@ -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;
?>

37
web/skins/classic/includes/functions.php
View File

@@ -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;

39
web/skins/classic/includes/getOptionHelpHTML.php Normal file
View File

@@ -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;
}

25
web/skins/classic/js/skin.js
View File

@@ -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)