Multiple changes:

* General visual changes (refs #16) * Refactors code further (refs #15) * Makes former AGBs more enhanced (refs #19) * Makes criterias clickables (closes #21)
fhstp · Oct 22, 2018 · dd71418 · dd71418
1 parent 411853c
commit dd71418
Show file tree

Hide file tree

Showing 8 changed files with 236 additions and 152 deletions.
diff --git a/app/pages/popup.html b/app/pages/popup.html
@@ -33,7 +33,7 @@ <h3 class="running_text" style="font-weight:bold">Highlighter ermöglicht es dir
             <li class="running_text">Check die AGBs!</li>
         </ol>
 
-        <button type="button"  class="button_primary" id="button_firstpage">OK! Alles klar!</button>
+        <button type="button" class="btn btn-primary" id="button_firstpage">OK! Alles klar!</button>
 
     </div>
 </div>
@@ -49,7 +49,7 @@ <h3 class="running_text" style="font-weight:bold">Du kannst auch zwei verschiede
             <li class="running_text">Treffe die Kriterienauswahl</li>
             <li class="running_text">Vergleiche die AGBs!</li>
         </ol>
-        <button type="button"  class="button_primary" id="button_secondpage">OK! Alles klar!</button>
+        <button type="button" class="btn btn-primary" id="button_secondpage">OK! Alles klar!</button>
 
     </div>
 </div>

diff --git a/app/scripts/additional_scripts/create_page.ts b/app/scripts/additional_scripts/create_page.ts
@@ -1,10 +1,9 @@
 import * as $ from 'jquery';
-import { setFormerAGB } from './index';
-import { createBadges } from './index';
+import swal from 'sweetalert2';
+
+import { setFormerAGB, createBadges, setValueOfAGB, removeAGB } from './index';
 import { sendData_no_compare, sendData_with_compare } from './server_interaction';
 import { getValueUsingClass } from './utility';
-import { setValueOfAGB } from './index';
-
 
 export function create_criteria() {
   let input_criteria = $('<input>')
@@ -16,31 +15,28 @@ export function create_criteria() {
 }
 
 export function create_criteria_button() {
-
   let input_criteria_button = $('<button></button>')
     .attr('type', 'button')
-    .attr('class', 'button_primary')
+    .attr('class', 'btn btn-primary')
     .attr('id', 'button_critiques');
 
   input_criteria_button.append('OK');
   return input_criteria_button;
 }
 
 let input_criteria_button = create_criteria_button();
-
 let input_criteria = $('<input>') // with only input as the string it had been added 9 times
   .attr('type', 'text')
   .attr('id', 'input_critiques')
+  .attr('class', 'form-control')
   .attr('placeholder', 'Kriterien hinzufügen');
 
-
 export function loadSecondPage() {
   $('#div_page_3').addClass('hidden');
   $('#button_thirdpage').addClass('hidden');
   $('#content_2').removeClass('hidden');
 }
 
-
 export function loadThirdPage(triggers: Map<string, boolean>, pageSwitch: string, crits: any) {
   let checkbox_1 = $('<input>');
   let div_agb_2: any; // div in which the added inputs of the checkbox are
@@ -51,23 +47,15 @@ export function loadThirdPage(triggers: Map<string, boolean>, pageSwitch: string
   let title_div: any;
 
   let checkbox_array = new Array(); // checkboxes of the criteria
-  let textNode_array = new Array(); // actually strings & the text for the checkboxes
-
-  // to add critics this button is made
-  let add_button: any;
-  let add_button_image: any;
-
-  let button_delete_criteria: any;
-  let image_delete_criteria: any;
+  // let textNode_array = new Array(); // actually strings & the text for the checkboxes
 
-  let div_new_critique: any; // the div for only on of the new criteria
-  // div_new_critique = new Array();
+  // Various storages for the buttons
+  let add_button: any, add_button_image: any, button_delete_criteria: any,
+  image_delete_criteria: any, div_new_critique: any; // the div for only on of the new criteria
 
   let div_all_new_criteria = $('<div></div>');
   let add_critics: any; // the div for adding the critiria
 
-
-
   $(checkbox_1).change((e: any) => {
     if (e.target.checked && !triggers.get('checkbox_first_time')) {
       if (localStorage.getItem(pageSwitch) === 'false') {
@@ -129,7 +117,7 @@ export function loadThirdPage(triggers: Map<string, boolean>, pageSwitch: string
 
   // div-tag
   let div = $('<div></div>')
-    .attr('id', 'div_page_3');
+    .attr('id', 'div_page_3_1');
 
   checkbox_1
     .attr('type', 'checkbox')
@@ -188,21 +176,12 @@ export function loadThirdPage(triggers: Map<string, boolean>, pageSwitch: string
   }
 
 
-  add_button = $('<button></button>')
-    .attr('id', 'add_button');
-
-  add_button_image = $('<i></i>')
-    .attr('id', 'add_buttonimage')
-    .attr('class', 'fa fa-plus-circle')
-    .attr('aria-hidden', 'true');
-
+  add_button = $(`<button class="btn" id="add_button"><i id="add_buttonimage"
+  class="fa fa-plus-circle" aria-hidden="true"></i> Kriterien hinzufügen</button>`);
 
   add_critics = $('<div></div>')
     .attr('id', 'div_add_crits')
-    .append(add_button)
-    .append('Kriterien hinzufügen');
-  add_button.attr('id', 'button_add')
-    .append(add_button_image);
+    .append(add_button);
 
   div_page_3.append(add_critics);
 
@@ -219,7 +198,7 @@ export function loadThirdPage(triggers: Map<string, boolean>, pageSwitch: string
   $(document).on('keydown', '#input_critiques', function (evt) {
     if (evt.keyCode === 13) {
       // Ignore Error: Due to no Type of event.target -> See: https://stackoverflow.com/questions/28900077/why-is-event-target-not-element-in-typescript
-      const val = evt.target.value; // eslint-disable-line
+      const val = (evt.target as any).value; // eslint-disable-line
       if (val !== undefined || val !== '' || val !== null) {
         let trig = false;
         // check if they are already added
@@ -280,7 +259,12 @@ export function loadThirdPage(triggers: Map<string, boolean>, pageSwitch: string
             $('#input_critiques').val('');
             trig = true;
           } else {
-            alert('Dieses Kriterium ist schon hinzugefügt');
+            swal({
+              type: 'error',
+              title: 'Achtung',
+              text: 'Dieses Kriterium ist schon hinzugefügt!',
+              showCloseButton: true
+            });
             triggers.set('criteria_selected', false);
           }
       }
@@ -357,7 +341,13 @@ export function loadThirdPage(triggers: Map<string, boolean>, pageSwitch: string
         // After the new criteria is added -> reset input field.
         $('#input_critiques').val('');
       } else {
-        alert('Dieses Kriterium ist schon hinzugefügt');
+        swal({
+          type: 'error',
+          title: 'Achtung',
+          text: 'Dieses Kriterium ist schon hinzugefügt!',
+          showCloseButton: true,
+          customClass: 'bootstrapLook'
+        });
         triggers.set('criteria_selected', false);
         // After checking if the value is already added -> reset input field.
         $('#input_critiques').val('');
@@ -392,7 +382,9 @@ export function loadThirdPage(triggers: Map<string, boolean>, pageSwitch: string
 }
 $(document).on('click', '.buttonFormer', function () {
   setValueOfAGB(Number($(this).attr('data-btn')));
-
+});
+$(document).on('click', '.closebtn', function () {
+  removeAGB(Number($(this).attr('data-btn')));
 });
 // a counter for the number of times the critiques-div was hidden
 let counter: number;

diff --git a/app/scripts/additional_scripts/formerAGB.ts b/app/scripts/additional_scripts/formerAGB.ts
@@ -1,4 +1,5 @@
 import * as $ from 'jquery';
+
 const key = 'FormerAGB';
 
 export function setFormerAGB(link: string, agb: any) {
@@ -13,7 +14,7 @@ export function setFormerAGB(link: string, agb: any) {
 export function createBadges() {
   // if not set
   if (!localStorage.hasOwnProperty(key)) {
-      return null;
+    return null;
   } else {
     let buttonArray: any[] = [];
     let buttondiv = $('<div id="buttonDiv"></div>');
@@ -26,11 +27,12 @@ export function createBadges() {
       let re = /\.[a-z]*?(.*)/; // capture everything behind...
       link = link.replace(re, '');
       // let button = $('<button type="button" class="btn btn-primary" id="former_' + i + '"><span class="badge badge-light"></span></button>')
-      let button = $('<button type="button" class="btn btn-primary buttonFormer" data-btn="' + i + '"><span class="badge badge-light"></span></button>')
-        .append(link);
-        buttondiv.append(button);
-        buttonArray.push(buttondiv);
+      let button = $(`<div class="chip">
+      <button type="button" class="buttonFormer" data-btn="${i}">${link}</button>
+      <span class="closebtn" data-btn="${i}">&times</span></div>`);
+      buttondiv.append(button);
     }
+    buttonArray.push(buttondiv);
     return buttonArray;
   }
 }
@@ -44,8 +46,11 @@ export function setValueOfAGB(localStorageidx: number) {
 
 }
 
-/** HELPER METHODS **/
+export function removeAGB(localStorageidx: number) {
+  console.log('delete: ', localStorageidx);
+}
 
+/** HELPER METHODS **/
 
 function checkLocalStorage(agb: any) {
   // If there are no entries -> just push it

diff --git a/app/scripts/additional_scripts/index.ts b/app/scripts/additional_scripts/index.ts
@@ -11,3 +11,4 @@ export { insertIntoHTML_without_compare } from './server_interaction';
 export { setFormerAGB } from './formerAGB';
 export { createBadges } from './formerAGB';
 export { setValueOfAGB } from './formerAGB';
+export { removeAGB } from './formerAGB';
diff --git a/app/scripts/popup.ts b/app/scripts/popup.ts
@@ -35,7 +35,6 @@ triggers.set('criteria_selected', false);
 
 $(document).ready(
   function listenToClicks() {
-
     let lS = localStorage.getItem(load_first_page);
     let number_page: any;
     number_page = 1;