related to #1465 added edit link to drop down

admin/themes/default/js/history.js

@@ -1,6 +1,6 @@
 $(document).ready(() => {
 
-  fillHistoryResult()
+  fillHistoryResult();
   
   $(".filter").submit(function (e) {
     e.preventDefault();
@@ -33,102 +33,38 @@ $(document).ready(() => {
         display_thumbnail: dataObj['display_thumbnail'],
       },
       success: function (raw_data) {
-        data = raw_data.result;
+        data = raw_data.result[0];
+        imageDisplay = raw_data.result[1].display_thumbnail;
+
+        $(".tab .search-line").remove();
+
         console.log("RESULTS");
         console.log(data);
 
         var id = 0;
 
-        data.forEach(line => {
-          lineConstructor(line, id)
+        data.reverse().forEach(line => {
+          lineConstructor(line, id, imageDisplay)
           id++
         });
       },
       error: function (e) {
         console.log("Something went wrong: " + e);
       }
-    })
+    }).done( () => {
+      activateLineOptions();
+    }
+      
+    )
 
     console.log(dataObj);
   });
 
-  function fillHistoryResult() {
+  activateLineOptions();
 
-    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",
-    }
-
-    $.ajax({
-      url: API_METHOD,
-      method: "POST",
-      dataType: "JSON",
-      data: dataSend,
-      success: function (raw_data) {
-        $(".loading").removeClass("hide");
-        data = raw_data.result;
-        console.log("RESULTS");
-        console.log(data);
-
-        var id = 0;
-
-        data.forEach(line => {
-          lineConstructor(line, id)
-          id++
-        });
-      },
-      error: function (e) {
-        console.log("Something went wrong: " + e);
-      }
-    }).done(() => {
-      $(".loading").addClass("hide");
-    })
-  }
-
-  function lineConstructor(line, id) {
-    let newLine = $("#-1").clone();
-
-    newLine.removeClass("hide");
-
-    /* console log to help debug */
-    console.log(line);
-    newLine.attr("id", id);
-    console.log(id);
-
-    newLine.find(".date-day").html(line.DATE);
-    newLine.find(".date-hour").html(line.TIME);
-
-    newLine.find(".user-name").html(line.USERNAME);
-    newLine.find(".user-ip").html(line.IP);
-
-    displayLine(newLine);
-  }
-
-  function displayLine(line) {
-    $(".tab").append(line);
-}
+})
 
+function activateLineOptions() {
   $(".search-line").find(".img-option").hide();
 
   /* Display the option on the click on "..." */
@@ -150,5 +86,97 @@ $(document).ready(() => {
       $(".search-line").find(".img-option").hide();
     }
   });
+}
 
-})
+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",
+  }
+
+  $.ajax({
+    url: API_METHOD,
+    method: "POST",
+    dataType: "JSON",
+    data: dataSend,
+    success: function (raw_data) {
+      $(".loading").removeClass("hide");
+      console.log(raw_data);
+      data = raw_data.result[0];
+      imageDisplay = raw_data.result[1].display_thumbnail;
+      // console.log("RESULTS");
+      // console.log(data);
+
+      var id = 0;
+
+      data.reverse().forEach(line => {
+        lineConstructor(line, id, imageDisplay)
+        id++
+      });
+    },
+    error: function (e) {
+      console.log(e);
+    }
+  }).done(() => {
+    activateLineOptions();
+    $(".loading").addClass("hide");
+  })
+}
+
+function lineConstructor(line, id, imageDisplay) {
+  let newLine = $("#-1").clone();
+
+  newLine.removeClass("hide");
+
+  /* console log to help debug */
+  console.log(line);
+  newLine.attr("id", id);
+  // console.log(id);
+
+  newLine.find(".date-day").html(line.DATE);
+  newLine.find(".date-hour").html(line.TIME);
+
+  newLine.find(".user-name").html(line.USERNAME);
+  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").hide();
+    newLine.find(".toggle-img-option").hide();
+  }
+  
+  displayLine(newLine);
+}
+
+function displayLine(line) {
+  $(".tab").append(line);
+}

admin/themes/default/template/history.tpl

@@ -150,12 +150,8 @@ const API_METHOD = "{$API_METHOD}";
     </div>
   </div>
 
-  <div class="tab">
-    <div class="loading hide"> 
-      <span class="icon-spin6 animate-spin"> </span>
-    </div>
-
-    <div class="search-line hide" id="-1">
+  {* Used to be copied in js *}
+  <div class="search-line hide" id="-1">
       <div class="date-section">
         <span class="date-day bold"> July 4th, 2042 </span>
         <span> at <span class="date-hour">23:59:59</span> </span>
@@ -171,7 +167,7 @@ const API_METHOD = "{$API_METHOD}";
         <span class="icon-ellipsis-vert toggle-img-option">
           <div class="img-option">
             <span> info 2</span>
-            <span> info 1</span>
+            <a class="edit-img" href="">{'Edit'|@translate}</a>
           </div>
         </span>
 
@@ -195,6 +191,11 @@ const API_METHOD = "{$API_METHOD}";
       </div>
     </div>
 
+  <div class="tab">
+    <div class="loading hide"> 
+      <span class="icon-spin6 animate-spin"> </span>
+    </div>
+
     {* <div class="search-line" id="-2">
       <div class="date-section">
         <span class="date-day bold"> July 4th, 2042 </span>
@@ -436,8 +437,13 @@ jQuery(document).ready( function() {
   border-radius: 10px;
 }
 
-.img-option span {
+.img-option span, .img-option a {
   padding: 5px 10px;
+  text-decoration: none;
+}
+
+.img-option a:hover {
+  color: #3a3a3a;
 }
 
 .img-option:after {
@@ -456,7 +462,7 @@ jQuery(document).ready( function() {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
 }
-.img-option span:hover:last-child {
+.img-option a:hover:last-child {
   background: linear-gradient(130deg, #bbbbbb 0%, #e5e5e5 100%);
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;