From 4f85ca29e1a335c7f669fcd051425fd917ef1aaa Mon Sep 17 00:00:00 2001 From: Matthieu Leproux Date: Mon, 13 Sep 2021 13:54:50 +0200 Subject: [PATCH] related to #1465 the filter "user" can be added and removed --- admin/themes/default/js/history.js | 123 +++++++---- admin/themes/default/template/history.tpl | 241 +++++++++++++++------- include/ws_functions/pwg.php | 1 + 3 files changed, 244 insertions(+), 121 deletions(-) diff --git a/admin/themes/default/js/history.js b/admin/themes/default/js/history.js index 99545913f..11e0dcc5c 100644 --- a/admin/themes/default/js/history.js +++ b/admin/themes/default/js/history.js @@ -1,6 +1,6 @@ $(document).ready(() => { - fillHistoryResult(); + fillHistoryResult(current_data); $(".filter").submit(function (e) { e.preventDefault(); @@ -36,10 +36,10 @@ $(document).ready(() => { data = raw_data.result[0]; imageDisplay = raw_data.result[1].display_thumbnail; - $(".tab .search-line").remove(); + // console.log("RESULTS"); + // console.log(data); - console.log("RESULTS"); - console.log(data); + current_data = raw_data.result[1]; var id = 0; @@ -53,11 +53,9 @@ $(document).ready(() => { } }).done( () => { activateLineOptions(); - } - - ) + }) - console.log(dataObj); + // console.log(dataObj); }); activateLineOptions(); @@ -88,49 +86,27 @@ function activateLineOptions() { }); } -function fillHistoryResult() { - - var dateObj = new Date(); - var month = dateObj.getUTCMonth() + 1; //months from 1-12 - var day = dateObj.getUTCDate(); - var year = dateObj.getUTCFullYear(); - - if (month < 10) month = "0" + month; - if (day < 10) day = "0" + day; - - today = year + "-" + month + "-" + day; - - var dataSend = { - start: "", - end: today, - types: { - 0: "none", - 1: "picture", - 2: "high", - 3: "other" - }, - user: "-1", - image_id: "", - filename: "", - ip: "", - display_thumbnail: "no_display_thumbnail", - } +function fillHistoryResult(ajaxParam) { + // console.log(current_data); $.ajax({ url: API_METHOD, method: "POST", dataType: "JSON", - data: dataSend, + data: ajaxParam, success: function (raw_data) { $(".loading").removeClass("hide"); - console.log(raw_data); + // console.log(ajaxParam.user); + // console.log(raw_data); data = raw_data.result[0]; imageDisplay = raw_data.result[1].display_thumbnail; // console.log("RESULTS"); // console.log(data); + //clear lines before refill + $(".tab .search-line").remove(); + var id = 0; - data.reverse().forEach(line => { lineConstructor(line, id, imageDisplay) id++ @@ -148,10 +124,36 @@ function fillHistoryResult() { function lineConstructor(line, id, imageDisplay) { let newLine = $("#-1").clone(); + let sections = [ + "categories", + "tags", + "best_rated", + "memories-1-year-ago", + "list", + "search", + "most_visited", + "recent_pics", + "recent_cats", + "favorites" + ] + + let icons = [ + "line-icon icon-folder-open icon-yellow", + "line-icon icon-tags icon-blue", + "line-icon icon-star icon-green", + "line-icon icon-wrench", + "line-icon icon-dice-solid icon-purple", + "line-icon icon-search icon-purple", + "line-icon icon-fire icon-red", + "line-icon icon-clock icon-yellow", + "line-icon icon-clock icon-yellow", + "line-icon icon-heart icon-red" + ]; + newLine.removeClass("hide"); /* console log to help debug */ - console.log(line); + // console.log(line); newLine.attr("id", id); // console.log(id); @@ -159,24 +161,61 @@ function lineConstructor(line, id, imageDisplay) { newLine.find(".date-hour").html(line.TIME); newLine.find(".user-name").html(line.USERNAME); + newLine.find(".user-name").attr("id", line.USERID); + newLine.find(".user-name").on("click", function () { + current_data.user = $(this).attr('id') + ""; + addUserFilter($(this).html()); + fillHistoryResult(current_data); + }) newLine.find(".user-ip").html(line.IP); - - console.log(line.EDIT_IMAGE); newLine.find(".edit-img").attr("href", line.EDIT_IMAGE) if (line.IMAGE != "") { newLine.find(".type-name").html(line.IMAGENAME); if (imageDisplay !== "no_display_thumbnail") { newLine.find(".type-icon").html(line.IMAGE); + } else { + newLine.find(".type-icon").addClass("line-icon icon-picture icon-yellow"); + newLine.find(".type-icon .icon-file-image").removeClass("icon-file-image"); } } else { - newLine.find(".type-icon").hide(); + newLine.find(".type-icon .icon-file-image").removeClass("icon-file-image"); newLine.find(".toggle-img-option").hide(); + + if (sections.indexOf(line.SECTION) != -1) { + var lineIconClass = icons[sections.indexOf(line.SECTION)]; + newLine.find(".type-icon i").addClass(lineIconClass) + } else { + console.log("ERROR ON THIS : " + line.SECTION); + } } + + newLine.find(".detail-item-1").html(line.SECTION); displayLine(newLine); } function displayLine(line) { $(".tab").append(line); +} + +function addUserFilter(username) { + console.log(username); + var newFilter = $("#default-filter").clone(); + console.log(newFilter); + + newFilter.removeClass("hide"); + + newFilter.find(".filter-title").html(username); + newFilter.find(".filter-icon").addClass("icon-user"); + + newFilter.find(".remove-filter").on("click", function () { + $(this).parent().remove(); + + current_data.user = "-1"; + fillHistoryResult(current_data); + + }) + + $(".filter-container").append(newFilter); } \ No newline at end of file diff --git a/admin/themes/default/template/history.tpl b/admin/themes/default/template/history.tpl index 4c1c6c1aa..1b4e6b4a4 100644 --- a/admin/themes/default/template/history.tpl +++ b/admin/themes/default/template/history.tpl @@ -6,6 +6,31 @@ jQuery(function(){ {* *} jQuery('[data-datepicker]').pwgDatepicker(); }); +var dateObj = new Date(); +var month = dateObj.getUTCMonth() + 1; //months from 1-12 +var day = dateObj.getUTCDate(); +var year = dateObj.getUTCFullYear(); + +if (month < 10) month = "0" + month; +if (day < 10) day = "0" + day; + +today = year + "-" + month + "-" + day; +var current_data = { + start: "", + end: today, + types: { + 0: "none", + 1: "picture", + 2: "high", + 3: "other" + }, + user: "-1", + image_id: "", + filename: "", + ip: "", + display_thumbnail: "no_display_thumbnail", +} + const API_METHOD = "{$API_METHOD}"; {/footer_script} @@ -15,6 +40,8 @@ const API_METHOD = "{$API_METHOD}"; {combine_script id='jquery.confirm' load='footer' require='jquery' path='themes/default/js/plugins/jquery-confirm.min.js'} {combine_css path="admin/themes/default/fontello/css/animation.css" order=10} {* order 10 is required, see issue 1080 *} +{combine_css path="admin/themes/default/css/components/general.css"} +

{'History'|@translate} {$TABSHEET_TITLE}

@@ -86,6 +113,46 @@ const API_METHOD = "{$API_METHOD}";
+
+
+
+
+ + + + {'unset'|translate} +
+
+ + + + {'unset'|translate} +
+
+ +
+
+
+ +
+
+ + test x +
+
+
+
+
+ {if isset($search_summary)}
{'Summary'|@translate} @@ -105,35 +172,6 @@ const API_METHOD = "{$API_METHOD}"; {if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if} -{* - - - - - - - - - - - - -{if !empty($search_results)} -{foreach from=$search_results item=detail name=res_loop} - - - - - - - - - - -{/foreach} -{/if} -
{'Date'|@translate}{'Time'|@translate}{'User'|@translate}{'IP'|@translate}{'Element'|@translate}{'Element type'|@translate}{'Section'|@translate}{'Album'|@translate} / {'Tags'|@translate}
{$detail.DATE}{$detail.TIME}{$detail.USER}{$detail.IP}{$detail.IMAGE}{$detail.TYPE}{$detail.SECTION}{$detail.CATEGORY}{$detail.TAGS}
*} -
@@ -166,7 +204,7 @@ const API_METHOD = "{$API_METHOD}";
- info 2 + Add as filter {'Edit'|@translate}
@@ -195,46 +233,6 @@ const API_METHOD = "{$API_METHOD}";
- - {*
-
- July 4th, 2042 - at 23:59:59 -
- -
- Zac le boss - 127.0.0.1 -
- -
- - -
- info 2 - info 1 -
- - -
- WIP - tag #99 -
- -
- -
-
- detail 1 -
-
- detail 2 -
-
- detail 3 -
-
-
*}
@@ -310,6 +308,88 @@ jQuery(document).ready( function() { .bold { font-weight: bold; } + +.history-filter { + background: #f3f3f3; + display: flex; + flex-direction: row; +} + +.hasDatepicker { + background: white !important; + border: solid 1px #D4D4D4; + padding: 5px 10px; + max-width: 180px; +} + +.filter-part { + display: flex; + flex-direction: column; + margin: 0 10px; +} + +.filter-part.elem-type label { + display: flex; + flex-direction: column; +} + +.elem-type-select{ + background: white !important; + border: solid 1px #D4D4D4; + padding: 5px 10px; + margin-bottom: 5px; +} + +.selectable-filter { + width: calc(50%-20px); + display: flex; + flex-direction: row; + margin-right: 20px; +} + +.selectable-filter label { + white-space: nowrap; +} + +.filter-container { + display: flex; + flex-direction: row; +} + +.filter-item { + margin: 0 5px; + white-space: nowrap; + +} + +.filter-title, .remove-filter, .filter-icon { + font-weight: bold; + color: black; + background: orange; + padding: 2px 0; +} + +.filter-title { + padding-right: 2px; +} + +.remove-filter { + border-bottom-right-radius: 15px; + border-top-right-radius: 15px; + padding-right: 6px; + padding-left: 4px; +} +.remove-filter:hover { + background: #ff7700; + cursor: pointer; +} + +.filter-icon { + padding-left: 2px; + border-bottom-left-radius: 5px; + border-top-left-radius: 5px; +} + .search-line { background: #fafafa; box-shadow: 0px 2px 4px #00000024; @@ -324,6 +404,11 @@ jQuery(document).ready( function() { margin-bottom: 10px; } +.line-icon { + padding: 10px; + border-radius: 50%; +} + .tab-title div { text-align: left; font-size: 1.1em; @@ -352,14 +437,14 @@ jQuery(document).ready( function() { .type-title, .type-section { - width: 200px; + width: 250px; text-align: left; padding-left: 10px; } .detail-title, .detail-section { - width: 200px; + max-width: 500px; text-align: left; padding-left: 10px; } @@ -367,11 +452,10 @@ jQuery(document).ready( function() { .detail-item { background: #f0f0f0f0; margin: 0 10px 0 0; - padding: 3px 6px; - border-radius: 20px; + padding: 4px 8px; + border-radius: 5px; - min-width: 50px; - max-width: 150px; + max-width: 250px; height: 20px; text-align: center; @@ -384,8 +468,7 @@ jQuery(document).ready( function() { } .date-section, -.user-section, -.detail-section { +.user-section { display: flex; flex-direction: column; justify-content: center; @@ -419,7 +502,7 @@ jQuery(document).ready( function() { .toggle-img-option { cursor: pointer; position: absolute; - margin-left: 15px; + margin-left: 38px; } .toggle-img-option::before{ diff --git a/include/ws_functions/pwg.php b/include/ws_functions/pwg.php index 0d747f5ae..73dd0182b 100644 --- a/include/ws_functions/pwg.php +++ b/include/ws_functions/pwg.php @@ -969,6 +969,7 @@ SELECT 'TIME' => $line['time'], 'USER' => $user_string, 'USERNAME' => $user_name, + 'USERID' => $line['user_id'], 'IP' => $line['IP'], 'IMAGE' => $image_string, 'IMAGENAME' => $image_title,