diff --git a/README.md b/README.md index 9ebda49b..ddafbf24 100644 --- a/README.md +++ b/README.md @@ -3,15 +3,19 @@ A web responsive interface to manage motion (an open-source motion detection software) and visualize cameras live stream.
- - - + +   + +   +

- - - + +   + +   +

diff --git a/android/motionUI/.idea/other.xml b/android/motionUI/.idea/other.xml new file mode 100644 index 00000000..f3d4a2e5 --- /dev/null +++ b/android/motionUI/.idea/other.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/www/public/resources/js/functions.js b/www/public/resources/js/functions.js index 5575bb7c..693dbb26 100644 --- a/www/public/resources/js/functions.js +++ b/www/public/resources/js/functions.js @@ -32,102 +32,150 @@ function closePanel(name = null) } /** - * Print alert or error message - * @param {string} message - * @param {string} type - * @param {int} timeout + * Print an alert + * @param {*} message + * @param {*} type + * @param {*} timeout */ -function printAlert(message, type = null, timeout = 2500) +function printAlert(message, type = null, timeout = 3000) { - $('#newalert').remove(); + if (type == null) { + var alertType = 'alert'; + var icon = 'info'; + } - if (type == "error") { - $('footer').append('
' + message + '
'); + if (type == 'success') { + var alertType = 'alert-success'; + var icon = 'check'; } - if (type == "success") { - $('footer').append('
' + message + '
'); + + if (type == 'error') { + var alertType = 'alert-error'; + var icon = 'error'; + timeout = 4000; } + // Remove any existing alert + $('#alert').remove(); + + $('footer').append(' \ +
\ +
\ + \ +
\ +

' + message + '

\ +
\ +
\ +
'); + + $('#alert').css({ + visibility: 'visible' + }).promise().done(function () { + $('#alert').animate({ + right: '0' + }, 150) + }) + if (timeout != 'none') { window.setTimeout(function () { - $('#newalert').fadeTo(1000, 0).slideUp(1000, function () { - $('#newalert').remove(); - }); + closeAlert(); }, timeout); } } /** - * Print a confirm alert box before executing specified function + * Print a confirm box * @param {*} message - * @param {*} myfunction1 - * @param {*} confirmBox1 + * @param {*} confirmBoxFunction1 + * @param {*} confirmBtn1 + * @param {*} confirmBoxFunction2 + * @param {*} confirmBtn2 */ -function confirmBox(message, myfunction1, confirmBox1 = 'Delete', myfunction2 = null, confirmBox2 = null) +function confirmBox(message = '', confirmBoxFunction1, confirmBtn1 = 'Delete', confirmBoxFunction2 = null, confirmBtn2 = null) { - /** - * First, delete all active confirm box if any - */ - $("#newConfirmAlert").remove(); + // Remove any existing confirm box + $("#confirm-box").remove(); - /** - * Case there is three choices - */ - if (myfunction2 != null && confirmBox2 != null) { - var $content = '
' + message + '
' + confirmBox1 + '' + confirmBox2 + 'Cancel
'; - /** - * Case there is two choices - */ - } else { - var $content = '
' + message + '
' + confirmBox1 + 'Cancel
'; + // Base html + var html = '
' + + // If there is a message + if (message != "") { + html += '

' + message + '

'; } - $('footer').append($content); + // Container for buttons + html += '
'; - /** - * If choice one is clicked - */ - $('.btn-doConfirm1').click(function () { - /** - * Execute function 1 - */ - myfunction1(); + // First function and button + html += '
' + confirmBtn1 + '
'; - /** - * Then remove alert - */ - $("#newConfirmAlert").slideToggle(0, function () { - $("#newConfirmAlert").remove(); - }); + // Second function and button + if (confirmBoxFunction2 != null && confirmBtn2 != null) { + html += '
' + confirmBtn2 + '
'; + } + + // Cancel button + html += '
Cancel
'; + + html += '
' + + // Close base html + html += '
' + + // Append html to footer + $('footer').append(html); + + // Show confirm box + $('#confirm-box').css({ + visibility: 'visible' + }).promise().done(function () { + $('#confirm-box').animate({ + right: '0' + }, 150) + }) + + // If choice one is clicked + $('.confirm-box-btn1').click(function () { + // Execute function 1 + confirmBoxFunction1(); + closeConfirmBox(); }); - /** - * If choice two is clicked - */ - $('.btn-doConfirm2').click(function () { - /** - * Execute function 2 - */ - myfunction2(); + // If choice two is clicked + $('.confirm-box-btn2').click(function () { + // Execute function 2 + confirmBoxFunction2(); + closeConfirmBox(); + }); - /** - * Then remove alert - */ - $("#newConfirmAlert").slideToggle(0, function () { - $("#newConfirmAlert").remove(); - }); + // If 'cancel' choice is clicked + $('.confirm-box-cancel-btn').click(function () { + closeConfirmBox(); }); +} - /** - * If 'cancel' choice is clicked - */ - $('.btn-doCancel').click(function () { - /** - * Remove alert - */ - $("#newConfirmAlert").slideToggle(0, function () { - $("#newConfirmAlert").remove(); - }); +/** + * Close alert and confirm box modal + */ +function closeAlert() +{ + $('#alert').animate({ + right: '-1000px' + }, 150).promise().done(function () { + $('#alert').remove(); + }); +} + +/** + * Close confirm box + */ +function closeConfirmBox() +{ + $('#confirm-box').animate({ + right: '-1000px' + }, 150).promise().done(function () { + $('#confirm-box').remove(); }); } diff --git a/www/public/resources/js/general.js b/www/public/resources/js/general.js index 08c68524..db123e1b 100644 --- a/www/public/resources/js/general.js +++ b/www/public/resources/js/general.js @@ -6,9 +6,9 @@ $(document).ready(function () { /** * Reload top and bottoms buttons to reload CPU load and unseen events total count */ - setInterval(function () { - reloadContainer('buttons/top'); - }, 5000); + // setInterval(function () { + // reloadContainer('buttons/top'); + // }, 5000); }); /** @@ -17,6 +17,8 @@ $(document).ready(function () { $(document).keyup(function (e) { if (e.key === "Escape") { closePanel(); + closeAlert(); + closeConfirmBox(); } }); @@ -42,7 +44,24 @@ $(document).on('click','.slide-panel-close-btn',function () { $(document).on('click','.acquit-log-btn',function () { var id = $(this).attr('log-id'); - acquitLog(id); + $.ajax({ + type: "POST", + url: "ajax/controller.php", + data: { + controller: "general", + action: "acquitLog", + id: id + }, + dataType: "json", + success: function (data, textStatus, jqXHR) { + jsonValue = jQuery.parseJSON(jqXHR.responseText); + reloadContainer('header/general-log-messages'); + }, + error : function (jqXHR, textStatus, thrownError) { + jsonValue = jQuery.parseJSON(jqXHR.responseText); + printAlert(jsonValue.message, 'error'); + }, + }); }); /** @@ -103,33 +122,6 @@ function reloadOpenedClosedElements() }); } -/** - * Ajax: Mark log as read - * @param {string} id - */ -function acquitLog(id) -{ - $.ajax({ - type: "POST", - url: "ajax/controller.php", - data: { - controller: "general", - action: "acquitLog", - id: id - }, - dataType: "json", - success: function (data, textStatus, jqXHR) { - jsonValue = jQuery.parseJSON(jqXHR.responseText); - reloadContainer('header/general-log-messages'); - }, - error : function (jqXHR, textStatus, thrownError) { - jsonValue = jQuery.parseJSON(jqXHR.responseText); - printAlert(jsonValue.message, 'error'); - }, - }); -} - - /** * Ajax: Get all containers state and reload them if needed */ diff --git a/www/public/resources/styles/common.css b/www/public/resources/styles/common.css index 9686c6d0..289e794b 100644 --- a/www/public/resources/styles/common.css +++ b/www/public/resources/styles/common.css @@ -109,6 +109,7 @@ pre.codeblock { font-size: 12px; line-height: 1.5; text-align: left; + text-wrap: auto; padding: 20px; } @@ -190,6 +191,7 @@ pre.codeblock { .row-gap-1 {row-gap: 1px}.row-gap-2 {row-gap: 2px}.row-gap-4 {row-gap: 4px}.row-gap-5 {row-gap: 5px}.row-gap-6 {row-gap: 6px}.row-gap-7 {row-gap: 7px}.row-gap-8 {row-gap: 8px}.row-gap-9{row-gap: 9px}.row-gap-10{row-gap: 10px}.row-gap-15{row-gap: 15px}.row-gap-20{row-gap: 20px} .padding-left-15{padding-left:15px !important}.padding-left-20{padding-left:20px !important}.padding-left-30{padding-left:30px !important}.padding-left-40{padding-left:40px !important} .padding-right-15{padding-right:15px !important}.padding-right-20{padding-right:20px !important}.padding-right-30{padding-right:30px !important}.padding-right-40{padding-right:40px !important} +.margin-10{margin:10px !important}.margin-15{margin:15px !important} .margin-left-0 {margin-left: 0px !important}.margin-left-5 {margin-left: 5px !important}.margin-left-10 {margin-left: 10px !important}.margin-left-15 {margin-left: 15px !important}.margin-left-20 {margin-left: 20px !important}.margin-left-30 {margin-left: 30px !important}.margin-left-40 {margin-left: 40px !important} .margin-right-0 {margin-right: 0px !important}.margin-right-5 {margin-right: 5px !important}.margin-right-10 {margin-right: 10px !important}.margin-right-15 {margin-right: 15px !important}.margin-right-20 {margin-right: 20px !important}.margin-right-30 {margin-right: 30px !important}.margin-right-40 {margin-right: 40px !important} .margin-top-0 {margin-top: 0px !important}.margin-top-5 {margin-top: 5px !important}.margin-top-10 {margin-top: 10px !important}.margin-top-15 {margin-top: 15px !important}.margin-top-20 {margin-top: 20px !important}.margin-top-30 {margin-top: 30px !important}.margin-top-40 {margin-top: 40px !important} @@ -292,14 +294,12 @@ td { * Icons */ .icon, .icon-small, .icon-medium, .icon-lowopacity, .icon-mediumopacity, .icon-nf, .icon-np { - /* height: 16px; */ - /* height: 17px; */ height: 19px; vertical-align: middle; cursor: pointer; } .icon-small { - height: 8px !important; + height: 12px !important; } .icon-medium { height: 18px !important; @@ -358,8 +358,10 @@ input::placeholder, select::placeholder, textarea::placeholder { /* All checkboxes unless onoff-switch-input */ input[type=checkbox]:not(.onoff-switch-input) { - width: 16px; - height: 16px; + /* width: 16px; + height: 16px; */ + width: 20px; + height: 20px; background-color: white; border-radius: 50%; vertical-align: middle; @@ -388,7 +390,7 @@ input[type=checkbox]:not(.onoff-switch-input):checked { /* All buttons */ [class^="btn-"], [class*=" btn-"], input::file-selector-button { - padding: 7px 5px 7px 5px; + padding: 10px 5px 10px 5px; border: none; border-radius: 60px; color: white; @@ -810,57 +812,55 @@ textarea { /** * Alert div */ -.action, .alert, .alert-success, .alert-error, .confirmAlert { - width: 100%; +.alert, .alert-success, .alert-error, .confirm-box { + width: 95%; + max-width: 100%; display: grid; - grid-template-columns: repeat(1, auto); - justify-content: space-around; - align-items: center; - align-content: center; - min-height: 60px; - padding-top: 15px; - padding-bottom: 15px; + grid-template-columns: 1fr; + column-gap: 10px; + align-items: flex-start; + visibility: hidden; + min-height: 20px; + padding: 20px 0px 20px 0px; font-size: 16px; position: fixed; bottom: 0; - left: 0; + right: -1000px; + bottom: 50px; z-index: 1000; - background-color: #182b3e; - border-top: 1px solid rgb(60, 70, 75); + background-color: #1d3349; box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px; color: white; - text-align: center; + border-radius: 8px 0 0 8px; + border-left: 5px solid #15bf7f; } -.confirmAlert { - grid-template-columns: repeat(3, 33%); +.alert-success { + background-color: #47ebac; + border-left: 5px solid #0f8a5b; } -.alert-success { background-color: #14be7e; } -.alert-error { background-color: #F32F63; } -.alert span, .alert-success span, .alert-error span, .confirmAlert span, -.alert a, .alert-success a, .alert-error a, .confirmAlert a { - font-size: 16px; +.alert-error { + background-color: #F32F63; + border-left: 5px solid #780725; } -.confirmAlert-buttons-container { - display: flex; - justify-content: flex-end; - width: 100%; +.alert-success p { + color: #0f8a5b; } - -[class*="btn-doConfirm"], .btn-doGeneric, .btn-doCancel { - margin-left: 15px; - margin-right: 15px; - padding: 20px; - border-radius: 30px; - box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px; +.alert-error p { + color: #780725; } -[class*="btn-doConfirm"] { - background-color: #F32F63; +.alert-close-btn { + position: absolute; + right: 15px; + top: 10px; + filter: brightness(0) saturate(100%) invert(9%) sepia(54%) saturate(6819%) hue-rotate(335deg) brightness(98%) contrast(100%); } -[class*="btn-doConfirm"]:hover { - background-color: #f10e4b; +.alert-error pre.codeblock { + max-height: 100px; + overflow: auto; } -.btn-doGeneric:hover { - background-color: #1d3349; +.confirm-box { + border-top: 1px solid #d1d1d11f; + border-bottom: 1px solid #d1d1d11f; } /** @@ -963,6 +963,11 @@ textarea { /* Desktop configuration */ @media (min-width:1025px) { + /* All buttons */ + [class^="btn-"], [class*=" btn-"], input::file-selector-button { + padding: 7px 5px 7px 5px; + } + /** * Slide btns */ @@ -973,4 +978,8 @@ textarea { .slide-panel { width: 30%; } + + .alert, .alert-success, .alert-error, .confirm-box { + width: 25%; + } } \ No newline at end of file diff --git a/www/public/resources/styles/motionui.css b/www/public/resources/styles/motionui.css index 624a86e5..cdc8022c 100644 --- a/www/public/resources/styles/motionui.css +++ b/www/public/resources/styles/motionui.css @@ -56,15 +56,6 @@ h3 { width: 90%; } -.action, .alert-success, .alert-error, .confirmAlert { - grid-template-columns: repeat(3, auto); -} - -.alert-success, .alert-error { - grid-template-columns: repeat(1, auto) !important; - justify-content: space-around !important; -} - /* Red blink background */ .bkg-red-blink { background-color: #FF495C; @@ -80,9 +71,6 @@ h3 { border-radius: 50%; margin-left: auto; margin-right: auto; - /* margin-top: 10px; - margin-bottom: 10px; */ - /* padding: 4px; */ color: white; text-align: center; text-decoration: none; @@ -296,8 +284,9 @@ h3 { display: flex; flex-direction: row; justify-content: space-between; - align-items: center; - width: 95%; + column-gap: 20px; + align-items: flex-start; + width: 100%; } .event-camera-name-id { @@ -322,10 +311,6 @@ h3 { min-height: 150px; } -.event-id { - align-self: center; -} - .event-loading { background-color: #152637; border-radius: 8px; @@ -648,10 +633,6 @@ footer #github img { width: 25px; } bottom: 6px; } -.select-all-media-checkbox { - margin-right: 14px; -} - .event-media-checkbox-container { position: absolute; top: 8px; @@ -783,11 +764,6 @@ footer #github img { width: 25px; } width: 29.5%; } - .action, .alert-success, .alert-error, .confirmAlert { - display: grid; - grid-template-columns: repeat(3, 33%); - } - .main-buttons-container { display: grid; align-items: center; @@ -855,6 +831,7 @@ footer #github img { width: 25px; } .event-metadata { flex-direction: column; + align-items: center; row-gap: 20px; width: 250px; margin-left: 20px; @@ -867,6 +844,10 @@ footer #github img { width: 25px; } row-gap: 20px; } + .event-id { + align-self: center; + } + .event-media-checkbox, .select-all-media-checkbox { width: 22px !important; height: 22px !important; diff --git a/www/version b/www/version index acf69b48..7cbea073 100644 --- a/www/version +++ b/www/version @@ -1 +1 @@ -5.1.0 \ No newline at end of file +5.2.0 \ No newline at end of file diff --git a/www/views/includes/containers/buttons/top.inc.php b/www/views/includes/containers/buttons/top.inc.php index 9965d0ad..55be433d 100644 --- a/www/views/includes/containers/buttons/top.inc.php +++ b/www/views/includes/containers/buttons/top.inc.php @@ -33,7 +33,7 @@ -
+
-
+
-

+

diff --git a/www/views/includes/panels/userspace.inc.php b/www/views/includes/panels/userspace.inc.php index 92c764a7..34c0dbd3 100644 --- a/www/views/includes/panels/userspace.inc.php +++ b/www/views/includes/panels/userspace.inc.php @@ -1,11 +1,5 @@ - -
- Logout -
-
-
CHANGE PASSWORD
@@ -15,13 +9,18 @@
NEW PASSWORD
-
NEW PASSWORD (re-type)
+
NEW PASSWORD (confirm)


+
LOGOUT FROM MOTION-UI
+ + + +

-

+

-

+

-

+
-
-

- -

+

+ Event # +

+

- New'; - } ?> + New

-
- -

- -

-
-
-

+

+