infidel/ocp-wg-frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Bulk request & csrf token handler

Browse Source
This commit is contained in:
infidel 2022-11-30 16:00:49 +07:00
parent 1c30ccb51f
commit c08c689a14
6 changed files with 190 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Cards/CardStats.svelte
View File

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

72
src/components/Cards/CardWGControl.svelte
View File

@ -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"

17
src/components/Cards/CardWGFilter.svelte
View File

@ -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" >
<option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
<option>GCI</option>
<option>META</option>
<option>PH-Training</option>
<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 state</option>
<option value="false">Disabled</option>
<option value="true">Enabled</option>
</select>
</div>
<button

86
src/components/Cards/CardWGProfiles.svelte
View File

@ -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 let filter = "";
export const wgResponse = null;
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 != ""?
promise = getwgResponse(filter) : promise = getwgResponse("");
async function promise_handler(filter){
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}

39
src/components/Dropdowns/TableDropdown.svelte
View File

@ -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>
<a
</button>
<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>
<a
href="#pablo" on:click={(e) => e.preventDefault()}
</button>
<button
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
</a>
{ wg_user_state != true ? 'Enable' : 'Disable' }
</button>
</div>
</div>

9
src/views/admin/wgProfiles.svelte
View File

@ -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}/>
<CardWGProfile wgResponse={wgResponse} bind:filter={filter}/>
<CardWGControl bind:checked_vals={checked_vals} bind:filter_action={filter_action} bind:filter={filter}/>
<CardWGProfile bind:checked_vals={checked_vals} bind:filter_action={filter_action} wgResponse={wgResponse} bind:filter={filter}/>
</div>