The functionality of the right button is nearly finished #19

app/scripts/popup.ts

@@ -137,7 +137,7 @@ let div_new_critique: any; // the div for only on of the new criteria
 let  div_all_new_criteria = $('<div></div>');
 let val = 0; // for counting the new criteria
 
-
+let counter_former_AGBs = DISPLAY_FORMER_CRITERIA;
 
 $(document).ready(
   function listenToClicks() {
@@ -257,6 +257,52 @@ $(checkbox_1).change( (e: any) => {
      AGBformer_div
      .attr('id', 'AGBformer_div')
      .append(AGBformer_button_left);
+
+ $(AGBformer_button_left).click( () => {
+  AGBformer_div.html('');
+   AGBformer_div
+.append(AGBformer_button_left);
+/*  // This code is just being tested
+   if (counter_former_AGBs > RECENT_COUNT + DISPLAY_FORMER_CRITERIA) {
+
+   for ( let i = counter_former_AGBs + DISPLAY_FORMER_CRITERIA; i > counter_former_AGBs; i--) {
+     let lS_new: any = localStorage.getItem(counter_key);
+     AGBformer[i] = $('<button></button>')
+     .attr('class', 'AGBformer');
+     AGBformer_text = $('<div></div>')
+     .append(AGBformer_link[i])
+     .append('<br>');
+     // giving the empty buttons an interface
+     if ( i > parseInt(lS_new)) {
+       let button_empty_text = 'AGBs hinzufügen';
+       let empty_img = $('<i></i>')
+       .attr('id', 'empty_img')
+       .attr('class', 'fa fa-plus-circle')
+       .attr('aria-hidden', 'true');
+       let empty = $('<div></div>')
+       .attr('id', 'empty')
+       .append(empty_img)
+       .append('<br>')
+       .append(button_empty_text);
+       AGBformer[i].append(empty);
+     }
+     if (i <= lS) {
+       AGBformer_text.append(AGBformer_text_date);
+     }
+
+     AGBformer[i].append(AGBformer_text);
+     AGBformer_div.append(AGBformer[i]);
+   }
+   counter_former_AGBs -= DISPLAY_FORMER_CRITERIA;
+ }
+ AGBformer_div
+ .append(AGBformer_button_right);
+ */
+});
+
+
+
+// Original adding of the AGBs
     for ( let i = 0; i < DISPLAY_FORMER_CRITERIA; i++) {
       AGBformer_link[i] = localStorage.getItem(key_formerAGBs[i]);
       let lS_new: any = localStorage.getItem(counter_key);
@@ -294,6 +340,46 @@ $(checkbox_1).change( (e: any) => {
       let AGBformer_button_right = $('<button></button>')
       .attr('id', 'AGBformer_rightbutton')
       .append(AGBformer_button_right_img);
+      $(AGBformer_button_right).click( () => {
+        AGBformer_div.html('');
+        AGBformer_div
+     .append(AGBformer_button_left);
+        if (counter_former_AGBs < RECENT_COUNT - DISPLAY_FORMER_CRITERIA) {
+
+        for ( let i = counter_former_AGBs; i < counter_former_AGBs + DISPLAY_FORMER_CRITERIA; i++) {
+          let lS_new: any = localStorage.getItem(counter_key);
+          AGBformer[i] = $('<button></button>')
+          .attr('class', 'AGBformer');
+          AGBformer_text = $('<div></div>')
+          .append(AGBformer_link[i])
+          .append('<br>');
+          // giving the empty buttons an interface
+          if ( i > parseInt(lS_new)) {
+            let button_empty_text = 'AGBs hinzufügen';
+            let empty_img = $('<i></i>')
+            .attr('id', 'empty_img')
+            .attr('class', 'fa fa-plus-circle')
+            .attr('aria-hidden', 'true');
+            let empty = $('<div></div>')
+            .attr('id', 'empty')
+            .append(empty_img)
+            .append('<br>')
+            .append(button_empty_text);
+            AGBformer[i].append(empty);
+          }
+          if (i <= lS) {
+            AGBformer_text.append(AGBformer_text_date);
+          }
+
+          AGBformer[i].append(AGBformer_text);
+          AGBformer_div.append(AGBformer[i]);
+        }
+        counter_former_AGBs += DISPLAY_FORMER_CRITERIA;
+      }
+      AGBformer_div
+      .append(AGBformer_button_right);
+    });
+
       AGBformer_div.append(AGBformer_button_right);
 
     div_agb_2.append(AGBformer_div);