related to #1465 added summary to history results

admin/themes/default/js/history.js

@@ -105,6 +105,53 @@ function activateLineOptions() {
   });
 }
 
+function fillSummaryResult(summary) {
+  $(".user-list").empty();
+
+  $(".summary-lines .summary-data").html(summary.NB_LINES);
+  $(".summary-weight .summary-data").html(unit_MB.replace("%s", summary.FILESIZE));
+  $(".summary-users .summary-data").html(summary.USERS);
+  $(".summary-guests .summary-data").html(summary.GUESTS);
+
+  var id_of = [];
+  var user_dot_title = "";
+
+  // not sorted
+  summary.MEMBERS.forEach(keyval => {
+    for (const [key, value] of Object.entries(keyval)) {
+      id_of[key] = value;
+      user_dot_title += key + ", ";
+    }
+  });
+  user_dot_title = user_dot_title.slice(0, -2);
+  $(".user-dot").attr("title", user_dot_title).addClass("tiptip");
+
+  var tmp = 0;
+  //sorted
+  for (const [key, value] of Object.entries(summary.SORTED_MEMBERS)) {
+    if (tmp < 5) {
+      new_user_item = $("#-2").clone();
+
+      new_user_item.removeClass("hide");
+      new_user_item.find(".user-item-name").html(key);
+      new_user_item.data("user-id", id_of[key]);
+  
+      new_user_item.on("click", function () {
+        if (current_param.user != id_of[key]) {
+          current_param.user = $(this).data("user-id");
+          addUserFilter(key)
+          fillHistoryResult(current_param);
+        }
+      })
+      $(".user-list").append(new_user_item);
+      $(".user-dot").hide();
+      tmp++;
+    } else {
+      $(".user-dot").show();
+    }
+  }
+}
+
 function fillHistoryResult(ajaxParam) {
   // console.log(current_param);
 
@@ -115,13 +162,12 @@ function fillHistoryResult(ajaxParam) {
     data: ajaxParam,
     success: function (raw_data) {
       $(".loading").removeClass("hide");
-      // console.log(ajaxParam.user);
-      // console.log(raw_data);
       data = raw_data.result["lines"];
       imageDisplay = raw_data.result["params"].display_thumbnail;
-      // console.log("RESULTS");
       maxPage = raw_data.result["maxPage"];
-      console.log(data);
+      summary = raw_data.result["summary"];
+      // console.log(raw_data);
+
       //clear lines before refill
       $(".tab .search-line").remove();
       
@@ -130,6 +176,8 @@ function fillHistoryResult(ajaxParam) {
         lineConstructor(line, id, imageDisplay)
         id++
       });
+
+      fillSummaryResult(summary);
     },
     error: function (e) {
       console.log(e);

admin/themes/default/template/history.tpl

@@ -40,6 +40,7 @@ const str_list = "{'Random photo'|translate}";
 const str_favorites = "{'Your favorites'|translate}";
 const str_recent_cats = "{'Recent albums'|translate}";
 const str_recent_pics = "{'Recent photos'|translate}";
+const unit_MB = "{"%s MB"|@translate}";
 {/footer_script}
 
 {combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
@@ -75,7 +76,6 @@ const str_recent_pics = "{'Recent photos'|translate}";
       <label>
         {'Action'|@translate}
         <select name="types[]" class="elem-type-select user-action-select advanced-filter-select">
-          {* {html_options values=$type_option_values output=$type_option_values|translate selected=$type_option_selected} *}
           <option value=""></option>
           <option value="visited">{'Visited'|@translate} </option>
           <option value="downloaded">{'Downloaded'|@translate} </option>
@@ -114,6 +114,36 @@ const str_recent_pics = "{'Recent photos'|translate}";
 </fieldset>
 {/if}
 
+{* Used to be copied in JS *}
+<span id="-2" class="icon-green summary-user-item hide">
+  <i class="icon-green icon-user-1"> </i>
+  <i class="icon-green icon-plus-circled"> </i> 
+  <span class="user-item-name"> User test </span>
+</span>
+{*  *}
+
+<div class="search-summary">
+  <div class="summary-lines">
+    <span class="icon-yellow icon-menu summary-icons"></span>
+    <span class="summary-data"> </span>
+  </div>
+  <div class="summary-weight">
+    <span class="icon-purple icon-download summary-icons"></span>
+    <span class="summary-data"> </span>
+  </div>
+  <div class="summary-users">
+    <span class="icon-green icon-user-1 summary-icons"></span>
+    <span class="summary-data"> </span>
+    <div class="user-list">
+    </div>
+    <span class="user-dot icon-green summary-user-item">...</span>
+  </div>
+  <div class="summary-guests">
+    <span class="icon-blue icon-user-1 summary-icons"></span>
+    <span class="summary-data"> </span>
+  </div>
+</div>
+
 {if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
 
 <div class="container">
@@ -584,4 +614,64 @@ jQuery(document).ready( function() {
   width: 70px;
   height: 70px;
 }
+
+/* Summary */
+
+.search-summary {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100px;
+}
+
+.summary-lines,
+.summary-weight,
+.summary-users,
+.summary-guests {
+  white-space: nowrap;
+}
+
+.summary-icons {
+  padding: 10px;
+  border-radius: 50%;
+  margin: 0 5px;
+}
+
+.summary-users {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.summary-user-item {
+  padding: 2px 10px;
+  border-radius: 20px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+
+.summary-user-item .icon-plus-circled {
+  display: none;
+}
+
+.summary-user-item:hover .icon-plus-circled {
+  display: inline-block;
+}
+
+.summary-user-item:hover .icon-user-1 {
+  display: none;
+}
+
+.summary-users .summary-data {
+  margin: 0 5px 0 0 !important;
+}
+
+.summary-data {
+  font-weight: bold;
+  margin: 0 15px 0 0;
+}
+
 </style>