Bulk request & csrf token handler

src/components/Cards/CardStats.svelte

@@ -15,6 +15,7 @@
   // can be any of the background color utilities
   // from tailwindcss
   export let statIconColor = "bg-red-500";
+
 </script>
 
 <div

src/components/Cards/CardWGControl.svelte

@@ -10,9 +10,27 @@
 
     let showModal = false;
     let showFilter = false;
-    let filter_action = false;
+    export let filter_action;
+    export let checked_vals;
     let submitFilter = "";
     
+    $: getCookie("csrftoken") == null?
+        login_wg() : console.log("Cookie Error");
+
+    function login_wg() {
+
+        const rawResponse = fetch('/api2/wgLogin', {
+            method: 'GET',
+            headers: {
+              'Authorization': 'Basic ' + btoa('tipadmin:tiplab123'),
+              'Accept': 'application/json',
+              'Content-Type': 'application/json'
+            }
+        });
+        
+        console.log(rawResponse);
+    }
+
     $: submitFilter != ""?
         apply_filter() : filter = "";
     
@@ -42,6 +60,42 @@
       console.log(filter);
     }
     
+    function getCookie(name) {
+        let cookieValue = null;
+        if (document.cookie && document.cookie !== '') {
+            const cookies = document.cookie.split(';');
+            for (let i = 0; i < cookies.length; i++) {
+                const cookie = cookies[i].trim();
+                // Does this cookie string begin with the name we want?
+                if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                    break;
+                }
+            }
+        }
+        return cookieValue;
+    }
+
+    async function bulk_disable_req(state) {
+        login_wg();
+        let csrftoken = getCookie('csrftoken');
+        console.log(csrftoken);
+
+        const rawResponse = await fetch('/api2/wgEditState?id=bulk&state='+state, {
+            method: 'POST',
+            credentials: 'include',
+            mode: 'same-origin',
+            headers: {
+              'X-CSRFToken': csrftoken,
+              'Accept': 'application/json',
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(checked_vals)
+        });
+
+        const content = await rawResponse.json();
+    }
+
 </script>
 
 <div
@@ -155,12 +209,20 @@
       <h6 class="text-blueGray-700 text-xl font-bold">Filter Action</h6>
       <div class="">
 
+        <button
+          class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          type="button"
+          on:click="{bulk_disable_req('false')}"
+        >
+          Disable Selected
+        </button>
+
         <button
           class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
           type="button"
           on:click="{toggleModal}"
         >
-          Create Profile
+          Edit Profile
         </button>
 
         <button
@@ -170,12 +232,6 @@
         >
           Filter
         </button>
-        <button
-          class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
-          type="button"
-        >
-          Apply to System
-        </button>
         <button
           class="mt-3 bg-red-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
           type="button"

src/components/Cards/CardWGFilter.svelte

@@ -39,7 +39,11 @@
 
             console.log(data);
             console.log("I'm the tester function");
-            submitFilter = data["name"]+"+"+data["org"]+"+"+data["email_domain"];
+
+            submitFilter = null;
+
+            submitFilter = data["name"]+"+"+data["org"]+"+"+data["email_domain"]+"+"+data["user_state"];
+            
             console.log(submitFilter);
         }
 
@@ -147,13 +151,12 @@
               class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               for="grid-username"
             >
-              ---
+              State
             </label>
-            <select class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
+            <select name="user_state" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
-              <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
+              <option class="text-blueGray-100" value="" disabled selected>Select state</option>
-              <option>GCI</option>
+              <option value="false">Disabled</option>
-              <option>META</option>
+              <option value="true">Enabled</option>
-              <option>PH-Training</option>
             </select>
           </div>
             <button

src/components/Cards/CardWGProfiles.svelte

@@ -2,25 +2,93 @@
     // import axios from 'axios';
     // import {onMount} from 'svelte';
     import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
-
+    export let filter_action;
+    export let checked_vals;
     let footprint;
     let promise;
+    let checkbox_vals = [];
+    // let checked_vals = [];
 
-    export let wgResponse = null;
+    export const wgResponse = null;
-    export let filter = "";
+    export let filter;
 
     async function getwgResponse(o_filter) {
             const wgResponse = await fetch(
                     '/api2/wgClients?filter='+o_filter
                 );
-
             return await wgResponse.json();
         }
 
+    let selectedID = new Set();
+
+    const onCheckId = event => {
+        filter_action = true;
+        const row_id = event.target.value; 
+        if (event.target.checked) {
+            selectedID.add(row_id);
+            checked_vals.push(row_id);
+        } else {
+            selectedID.delete(row_id);
+            const index = checked_vals.indexOf(row_id);
+            checked_vals.splice(index, 1);
+        }
+
+        selectedID = selectedID;
+        console.log(checked_vals);
+    };
+
+    const onSelectAll = event => {
+        filter_action = true;
+        console.log("Select All...");
+        console.log(checkbox_vals);
+
+        if (event.target.checked) {
+            selectedID = new Set(checkbox_vals);
+        } else {
+            selectedID.clear();
+        } 
+        selectedID = selectedID;
+    };
+
     // let promise = getwgResponse();
     
-    $: filter != ""?
+    async function promise_handler(filter){
-        promise = getwgResponse(filter) : promise = getwgResponse("");
+
+        checkbox_vals = []
+        const wg_promise = getwgResponse(filter);
+
+        const wg_resp = await wg_promise;
+
+        console.log("[+] ID Arrays");
+        console.log(wg_resp);
+
+
+        let i = 0;
+
+        // for (let i = 0; i < wg_resp.length; i++) {
+
+        // for ( const x in wg_resp.json) {
+        //         for ( const v in x ) {
+        //                 console.log(v);
+        //                 // console.log(v["id"]);
+        //             }
+        // }
+
+        wg_resp.forEach(function (arrayItem) {
+            var x = arrayItem.id;
+                checkbox_vals.push(x);
+            console.log(x);
+        });
+
+         console.log("IDs ->");
+         console.log(checkbox_vals);
+
+        return wg_resp
+
+    }
+    $: filter ?
+        // promise = getwgResponse(filter) : promise = getwgResponse("");
+        promise = promise_handler(filter) : promise = promise_handler("");
 
     export let color = "light";
 
@@ -78,7 +146,7 @@
           <th
             class="px-4 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-300 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
-              <input id="default-checkbox" type="checkbox" value="" class="w-4 h-4 text-teal-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+          <input id="select-all" checked={selectedID.size == wgProfileData.length} on:change={onSelectAll} type="checkbox" value="" class="w-4 h-4 text-teal-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
               <label for="default-checkbox" class="ml-2 text-sm font-bold text-blueGray-500 dark:text-gray-300">#</label>
           </th>
           <th
@@ -125,7 +193,7 @@
                 <td
                   class="bg-blueGray-300 border-t-8 px-4 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 rounded"
                 >
-                <input id="default-checkbox" type="checkbox" value="{infRows.id}" class="w-4 h-4 text-teal-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                <input checked={selectedID.has(infRows.id)} id="{ infRows.id }" type="checkbox" value="{ infRows.id }" on:change={onCheckId} class="w-4 h-4 text-teal-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="default-checkbox" class="ml-2 text-sm font-bold text-blueGray-500 dark:text-gray-300">{ infRows.data_id }</label>
                 </td>
 
@@ -166,7 +234,7 @@
                 <td
                   class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 text-right"
                 >
-                  <TableDropdown />
+                <TableDropdown bind:filter={ filter } bind:wg_id={ infRows.id } bind:wg_user_state={ infRows.enabled } />
                 </td>
             </tr>
         {/each}

src/components/Dropdowns/TableDropdown.svelte

@@ -5,6 +5,9 @@
   // core components
 
   let dropdownPopoverShow = false;
+  export let wg_user_state;
+  export let wg_id;
+  export let filter = "";
 
   let btnDropdownRef;
   let popoverDropdownRef;
@@ -20,6 +23,25 @@
       });
     }
   };
+
+ async function wg_user_disable(wg_id,state) {
+     console.log("ID -> "+wg_id);
+     console.log("State -> "+state);
+     console.log("Filter state before -> "+filter);
+
+     let tmp_filter = filter;
+     filter = null;
+     filter = tmp_filter;
+
+     console.log("Filter state after -> "+filter);
+
+      state = !state;
+      const wgReq = await fetch(
+          '/api2/wgEditState?id='+wg_id+'&state='+state
+      );
+
+  }
+
 </script>
 
 <div>
@@ -35,23 +57,24 @@
     bind:this="{popoverDropdownRef}"
     class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
   >
-    <a
+    <button
       href="#pablo" on:click={(e) => e.preventDefault()}
       class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Show Detail
-    </a>
+    </button>
-    <a
+    <button
       href="#pablo" on:click={(e) => e.preventDefault()}
       class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Edit
-    </a>
+    </button>
-    <a
+    <button
-      href="#pablo" on:click={(e) => e.preventDefault()}
+            on:click={ (e) => wg_user_disable(wg_id, wg_user_state) }
       class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
-      Delete
+        { wg_user_state != true ? 'Enable' : 'Disable' }
-    </a>
+
+    </button>
   </div>
 </div>

src/views/admin/wgProfiles.svelte

@@ -6,8 +6,10 @@
   import CardWGControl from "components/Cards/CardWGControl.svelte";
 
   let wgResponse = null;
-  let filter = "";
+  let filter = null;
   let unique = {};
+  let filter_action = false;
+  let checked_vals = [];
 
   let wgProfileFetch = [];
 
@@ -21,9 +23,10 @@
   //                 });
   //         console.log(wgProfileFetch);
   //         });
+
 </script>
 
 <div class="flex flex-wrap mt-4 mb-8">
-    <CardWGControl bind:filter={filter}/>
+    <CardWGControl bind:checked_vals={checked_vals} bind:filter_action={filter_action} bind:filter={filter}/>
-    <CardWGProfile wgResponse={wgResponse} bind:filter={filter}/>
+    <CardWGProfile bind:checked_vals={checked_vals} bind:filter_action={filter_action} wgResponse={wgResponse} bind:filter={filter}/>
 </div>