Interactive table, bind value of array to html content SUCESS
This commit is contained in:
infidel
parent
ea9e7fb5d0
commit
dd416e7758
11
package-lock.json
generated
11
package-lock.json
generated
@ -15,6 +15,7 @@
|
||||
"@tailwindcss/forms": "0.2.1",
|
||||
"axios": "^1.1.3",
|
||||
"chart.js": "2.9.4",
|
||||
"papaparse": "^5.3.2",
|
||||
"sirv-cli": "1.0.11",
|
||||
"svelte-routing": "1.5.0",
|
||||
"tailwindcss": "^2.2.19"
|
||||
@ -1396,6 +1397,11 @@
|
||||
"integrity": "sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/papaparse": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.3.2.tgz",
|
||||
"integrity": "sha512-6dNZu0Ki+gyV0eBsFKJhYr+MdQYAzFUGlBMNj3GNrmHxmz1lfRa24CjFObPXtjcetlOv5Ad299MhIK0znp3afw=="
|
||||
},
|
||||
"node_modules/parent-module": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
|
||||
@ -3277,6 +3283,11 @@
|
||||
"integrity": "sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg==",
|
||||
"dev": true
|
||||
},
|
||||
"papaparse": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.3.2.tgz",
|
||||
"integrity": "sha512-6dNZu0Ki+gyV0eBsFKJhYr+MdQYAzFUGlBMNj3GNrmHxmz1lfRa24CjFObPXtjcetlOv5Ad299MhIK0znp3afw=="
|
||||
},
|
||||
"parent-module": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
|
||||
|
||||
@ -31,6 +31,7 @@
|
||||
"@tailwindcss/forms": "0.2.1",
|
||||
"axios": "^1.1.3",
|
||||
"chart.js": "2.9.4",
|
||||
"papaparse": "^5.3.2",
|
||||
"sirv-cli": "1.0.11",
|
||||
"svelte-routing": "1.5.0",
|
||||
"tailwindcss": "^2.2.19"
|
||||
|
||||
@ -1375,6 +1375,10 @@ select {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.m-1 {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.m-2 {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
@ -2235,6 +2239,12 @@ select {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.space-x-0 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0px * var(--tw-space-x-reverse));
|
||||
margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(1rem * var(--tw-space-x-reverse));
|
||||
@ -2609,6 +2619,21 @@ select {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.border-teal-300 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(94, 234, 212, var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-amber-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(245, 158, 11, var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-amber-600 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(217, 119, 6, var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-red-600 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(220, 38, 38, var(--tw-border-opacity));
|
||||
@ -2654,6 +2679,11 @@ select {
|
||||
border-color: rgba(71, 85, 105, var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.hover\:border-teal-500:hover {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(20, 184, 166, var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.focus\:border-black:focus {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(0, 0, 0, var(--tw-border-opacity));
|
||||
@ -2769,6 +2799,16 @@ select {
|
||||
background-color: rgba(245, 158, 11, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-amber-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(217, 119, 6, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-amber-700 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(180, 83, 9, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-orange-200 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(254, 215, 170, var(--tw-bg-opacity));
|
||||
@ -2864,11 +2904,21 @@ select {
|
||||
background-color: rgba(30, 41, 59, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-teal-500:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(20, 184, 166, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.focus\:bg-white:focus {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.focus\:bg-teal-400:focus {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(45, 212, 191, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.focus\:bg-gray-200:focus {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
|
||||
@ -3079,6 +3129,11 @@ select {
|
||||
padding-right: 0.375rem;
|
||||
}
|
||||
|
||||
.py-0 {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
@ -3337,6 +3392,11 @@ select {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.focus\:text-base:focus {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.font-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
@ -3345,6 +3405,10 @@ select {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -3591,6 +3655,11 @@ select {
|
||||
color: rgba(30, 41, 59, var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-white:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(255, 255, 255, var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-red-600:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(220, 38, 38, var(--tw-text-opacity));
|
||||
@ -3616,6 +3685,11 @@ select {
|
||||
color: rgba(30, 41, 59, var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.focus\:text-white:focus {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(255, 255, 255, var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -1,10 +1,94 @@
|
||||
<script>
|
||||
|
||||
import { getCookie } from "components/Utils/CookieHandler.js";
|
||||
|
||||
let user_ip = [];
|
||||
let user_allowed_ip = [];
|
||||
let user_ip_txt;
|
||||
let user_allowed_ip_txt;
|
||||
|
||||
async function getwgIpRecs() {
|
||||
let csrftoken = getCookie('csrftoken');
|
||||
let authToken = getCookie('Token');
|
||||
const wgResponse = await fetch(
|
||||
'/api2/wgUserRecommendations', {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
mode: 'same-origin',
|
||||
headers: {
|
||||
'Authorization': "Token "+authToken,
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
});
|
||||
|
||||
return await wgResponse.json();
|
||||
}
|
||||
|
||||
function validate() {
|
||||
console.log("Validate user creation here...");
|
||||
}
|
||||
|
||||
function select_ip(ip) {
|
||||
|
||||
if (!user_ip.includes(ip)) {
|
||||
|
||||
user_ip.push(ip);
|
||||
window.document.getElementById(ip).classList.add('bg-amber-500');
|
||||
|
||||
} else {
|
||||
|
||||
// user_ip.splice(ip);
|
||||
const index = user_ip.indexOf(ip);
|
||||
if (index > -1) {
|
||||
user_ip.splice(index, 1);
|
||||
}
|
||||
window.document.getElementById(ip).classList.remove('bg-amber-500');
|
||||
|
||||
}
|
||||
|
||||
user_ip_txt = user_ip.join(", ");
|
||||
|
||||
console.log(user_ip);
|
||||
console.log(user_ip_txt);
|
||||
|
||||
}
|
||||
|
||||
function select_allowed_ip(ip) {
|
||||
|
||||
if (!user_allowed_ip.includes(ip)) {
|
||||
|
||||
user_allowed_ip.push(ip);
|
||||
window.document.getElementById(ip).classList.add('bg-amber-500');
|
||||
|
||||
} else {
|
||||
|
||||
// user_allowed_ip.splice(ip);
|
||||
const index = user_allowed_ip.indexOf(ip);
|
||||
if (index > -1) {
|
||||
user_allowed_ip.splice(index, 1);
|
||||
}
|
||||
window.document.getElementById(ip).classList.remove('bg-amber-500');
|
||||
|
||||
}
|
||||
|
||||
user_allowed_ip_txt = user_allowed_ip.join(", ");
|
||||
|
||||
console.log(user_allowed_ip);
|
||||
console.log(user_allowed_ip_txt);
|
||||
|
||||
}
|
||||
|
||||
let promise_IPs = getwgIpRecs();
|
||||
|
||||
</script>
|
||||
|
||||
<div class="flex-auto px-4 lg:px-10 py-10 pt-0">
|
||||
<form>
|
||||
<form on:submit|preventDefault={validate}>
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
User Information
|
||||
</h6>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
@ -19,8 +103,6 @@
|
||||
value="" placeholder="User Name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
@ -32,10 +114,32 @@
|
||||
id="grid-email"
|
||||
type="email"
|
||||
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"
|
||||
value="jesse@example.com"
|
||||
placeholder="jesse@example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-email"
|
||||
>
|
||||
Organization
|
||||
</label>
|
||||
<input
|
||||
id="grid-email"
|
||||
type="name"
|
||||
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"
|
||||
placeholder="jesse@example.com"
|
||||
/>
|
||||
</div>
|
||||
{#await promise_IPs }
|
||||
<div class="relative pt-1">
|
||||
<div class="flex mb-2 items-center justify-between">
|
||||
<h6> Loading </h6>
|
||||
</div>
|
||||
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200">
|
||||
</div>
|
||||
</div>
|
||||
{:then IPs}
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
@ -43,12 +147,27 @@
|
||||
>
|
||||
IP Allocation
|
||||
</label>
|
||||
<input
|
||||
id="grid-address"
|
||||
type="text"
|
||||
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"
|
||||
value=""
|
||||
/>
|
||||
<input
|
||||
id="grid-email"
|
||||
type="text"
|
||||
class="border-0 px-3 py-2 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"
|
||||
bind:value={user_ip_txt}
|
||||
/>
|
||||
<div class="relative pt-1">
|
||||
<div class="flex-wrap mt-2 mb-2 items-center">
|
||||
{#each IPs.allocated_ips as ip_val}
|
||||
<button
|
||||
id="{ip_val}"
|
||||
class="border-2 border-amber-500 px-4 py-1 text-xs font-bold text-blueGray-500 rounded mr-2 active:bg-red-500 hover:bg-teal-500 hover:border-teal-500 hover:text-white"
|
||||
value="{ip_val}"
|
||||
type="button"
|
||||
on:click="{() => select_ip(ip_val)}"
|
||||
>
|
||||
{ip_val}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
@ -60,10 +179,33 @@
|
||||
<input
|
||||
id="grid-address"
|
||||
type="text"
|
||||
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"
|
||||
value=""
|
||||
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 "
|
||||
bind:value={user_allowed_ip_txt}
|
||||
/>
|
||||
<div class="relative pt-1">
|
||||
<div class="flex flex-wrap mt-2 mb-2 items-center">
|
||||
{#each Object.entries(IPs.allowed_ips) as [key, ip_val]}
|
||||
<div class="space-x-0">
|
||||
<button
|
||||
class="border-2 border-amber-600 bg-amber-600 px-1 py-1 text-xs font-bold text-blueGray-100 rounded-l"
|
||||
>
|
||||
{key}
|
||||
</button>
|
||||
<button
|
||||
id="{ip_val}"
|
||||
class="border-2 border-amber-600 px-1 py-1 text-xs font-bold text-blueGray-500 rounded-r mr-2 active:bg-red-500 hover:bg-teal-500 hover:border-teal-500 hover:text-white"
|
||||
value="{ip_val}"
|
||||
type="button"
|
||||
on:click="{() => select_allowed_ip(ip_val)}"
|
||||
>
|
||||
{ip_val}
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/await}
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
@ -80,8 +222,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mt-6 border-b-1 border-blueGray-300" />
|
||||
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
Contact Information
|
||||
</h6>
|
||||
|
||||
@ -25,7 +25,6 @@
|
||||
credentials: 'include',
|
||||
mode: 'same-origin',
|
||||
headers: {
|
||||
'X-CSRFToken': csrftoken,
|
||||
'Authorization': "Token "+authToken,
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
@ -138,47 +137,47 @@
|
||||
{#each infTable as infRows}
|
||||
<tr class="{infRows.wgDin < 1 ? 'bg-red-50 text-red-500 text-sm' : infRows.wgStatus == 'true' ? 'bg-teal-50 text-sm text-teal-700 ' : 'text-blueGray-500 bg-blueGray-50 text-sm'} ">
|
||||
<td
|
||||
class="border-t-8 px-4 align-middle border-l-0 border-r-0 whitespace-nowrap p-4 border-slate-700"
|
||||
class="border-t-8 px-4 align-middle border-l-0 border-r-0 whitespace-nowrap p-2 border-slate-700"
|
||||
>
|
||||
{ infRows.wgName }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-8 px-4 align-middle border-l-0 border-r-0 whitespace-nowrap p-4"
|
||||
class="border-t-8 px-4 align-middle border-l-0 border-r-0 whitespace-nowrap p-2"
|
||||
>
|
||||
{ infRows.wgMail }
|
||||
</td>
|
||||
<td
|
||||
class="border-t-8 px-4 align-middle border-l-0 border-r-0 whitespace-nowrap p-4"
|
||||
class="border-t-8 px-4 align-middle border-l-0 border-r-0 whitespace-nowrap p-2"
|
||||
>
|
||||
{ infRows.wgKey }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 whitespace-nowrap p-4"
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 whitespace-nowrap p-2"
|
||||
>
|
||||
{ infRows.wgDin/1000000 } MBytes
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 whitespace-nowrap p-4"
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 whitespace-nowrap p-2"
|
||||
>
|
||||
{ infRows.wgDout/1000000 } MBytes
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 font-bold whitespace-nowrap p-4"
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 font-bold whitespace-nowrap p-2"
|
||||
>
|
||||
{ infRows.wgStatus == 'true' ? 'Connected Now': infRows.wgDin < 1 ? 'Never Connected' : 'Not Connected Now' }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 whitespace-nowrap p-4"
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 whitespace-nowrap p-2"
|
||||
>
|
||||
{ infRows.wgTStamp }
|
||||
</td>
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 whitespace-nowrap p-4 text-right"
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 whitespace-nowrap p-2 text-right"
|
||||
>
|
||||
<TableDropdown />
|
||||
</td>
|
||||
|
||||
289
src/components/Cards/CardUploadCSV.svelte
Normal file
289
src/components/Cards/CardUploadCSV.svelte
Normal file
@ -0,0 +1,289 @@
|
||||
<script>
|
||||
|
||||
import PapaParse from 'papaparse';
|
||||
import { getCookie } from "components/Utils/CookieHandler.js";
|
||||
|
||||
let onUpload;
|
||||
let dataToCSV = [];
|
||||
|
||||
let prevDataToCSV;
|
||||
let allowedFiledExtensions = ['csv']; let maxFileSize = 3145728;
|
||||
let data = [];
|
||||
|
||||
let placeholder = [
|
||||
"Name",
|
||||
"Email",
|
||||
"Code",
|
||||
"Organization"
|
||||
];
|
||||
|
||||
let headers = [
|
||||
"Name",
|
||||
"Email",
|
||||
"Code",
|
||||
"Organization"
|
||||
];
|
||||
|
||||
|
||||
let newRow = [...placeholder];
|
||||
// bound to the uploaded file
|
||||
let uploader;
|
||||
|
||||
async function postWGReg(data) {
|
||||
let csrftoken = getCookie('csrftoken');
|
||||
let authToken = getCookie('Token');
|
||||
console.log(csrftoken);
|
||||
console.log(authToken);
|
||||
const wgResponse = await fetch(
|
||||
'/api2/wgBulkReg?', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
mode: 'same-origin',
|
||||
headers: {
|
||||
'Authorization': "Token "+authToken,
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
return await wgResponse.json();
|
||||
}
|
||||
|
||||
$: {
|
||||
// Monitor props
|
||||
if (dataToCSV !== prevDataToCSV && dataToCSV.length !== 0) {
|
||||
prevDataToCSV = dataToCSV;
|
||||
const csvData = PapaParse.unparse(dataToCSV); // Change this to parser of yours <papaparse or django backed parser>
|
||||
onUpload ? onUpload(csvData) : console.log("CSV Data: ", csvData);
|
||||
}
|
||||
}
|
||||
|
||||
function submitRegistration(){
|
||||
console.log("I'm submitting registration data");
|
||||
console.log(data);
|
||||
}
|
||||
function clearData(){
|
||||
data = [];
|
||||
}
|
||||
|
||||
function addRow(){
|
||||
console.log("Should add row here...");
|
||||
data = [...data, [...newRow]];
|
||||
newRow = placeholder;
|
||||
placeholder = ["", "", "", ""];
|
||||
}
|
||||
function checkData(){
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
function deleteRow(rowTarget) {
|
||||
data = data.filter(row => row != rowTarget);
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
function uploadFile(event) {
|
||||
event.preventDefault();
|
||||
const file = uploader.files[0];
|
||||
|
||||
console.log(file);
|
||||
|
||||
const fileExtensionArray = file.type.split("/");
|
||||
const fileExtension = fileExtensionArray[fileExtensionArray.length-1];
|
||||
|
||||
if (file.size > maxFileSize) {
|
||||
console.log("Your stupid file is too big");
|
||||
return;
|
||||
}
|
||||
|
||||
if (fileExtension.includes('csv') && file.size < maxFileSize) {
|
||||
console.log("Will proceed with your file after the infrastructure ready...");
|
||||
const csvData = PapaParse.parse(
|
||||
file,
|
||||
{
|
||||
complete: (results) => {
|
||||
onUpload ? onUpload(results.data) : data = results.data;
|
||||
}
|
||||
}
|
||||
);
|
||||
} else if (allowedFiledExtensions.includes(fileExtension)) {
|
||||
onUpload ? onUpload(file) : console.log("Broken file, plain content : ", file);
|
||||
} else {
|
||||
console.log("Wrong extension stupid ...");
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
|
||||
>
|
||||
<div class="rounded bg-white mb-0 px-6 py-6">
|
||||
<div class="text-center flex justify-between">
|
||||
<h6 class="mt-3 text-blueGray-700 text-xl font-bold">Action</h6>
|
||||
<div class="">
|
||||
|
||||
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload file</label>
|
||||
<input class="block w-full text-sm text-teal-500 border border-teal-300 rounded-lg cursor-pointer bg-teal-50 dark:text-teal-400 focus:outline-none dark:bg-teal-700 dark:border-teal-600 dark:placeholder-teal-400"
|
||||
aria-describedby="file_input_help"
|
||||
bind:this={uploader}
|
||||
on:change={uploadFile}
|
||||
id="file_input"
|
||||
type="file"
|
||||
/>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300" id="file_input_help">SVG, PNG, JPG or GIF (MAX. 800x400px).</p>
|
||||
|
||||
<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"
|
||||
>
|
||||
Search
|
||||
</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"
|
||||
>
|
||||
Filter
|
||||
</button>
|
||||
<button
|
||||
class="mt-3 bg-amber-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-600 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"
|
||||
>
|
||||
Backup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg border-0 bg-blueGray-200"
|
||||
>
|
||||
<div class="rounded mb-0 px-6 py-6">
|
||||
<table class="items-center w-full bg-transparent">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 bg-blueGray-50 text-blueGray-500 border-blueGray-100"
|
||||
>
|
||||
#
|
||||
</th>
|
||||
{#each headers as cell}
|
||||
<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 bg-blueGray-50 text-blueGray-500 border-blueGray-100"
|
||||
>
|
||||
{ cell }
|
||||
</th>
|
||||
{/each}
|
||||
<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 bg-blueGray-50 text-blueGray-500 border-blueGray-100"
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data as row, i}
|
||||
{#if row.length = 4}
|
||||
<tr class="border-t-8 text-blueGray-500 bg-white text-sm">
|
||||
<td
|
||||
class="border-blueGray-200 px-6 align-middle text-sm whitespace-nowrap p-2"
|
||||
>
|
||||
{i + 1}
|
||||
</td>
|
||||
{#each row as cell}
|
||||
<td
|
||||
class="px-4 align-middletext-sm whitespace-nowrap p-2 focus:outline-none focus:bg-teal-400 focus:text-white focus:text-base"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search here..."
|
||||
class="border-0 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:ring-2 focus:ring-teal-500 w-full pl-10"
|
||||
bind:value={cell}
|
||||
/>
|
||||
</td>
|
||||
{/each}
|
||||
<td
|
||||
class="px-6 align-middle text-sm whitespace-nowrap p-2"
|
||||
>
|
||||
<button
|
||||
class="bg-red-500 text-white active:bg-red-500 font-bold uppercase text-xs px-2 py-1 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
on:click={ () => deleteRow(row) }
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
<tr class="text-blueGray-500 border-t-8 bg-white text-sm">
|
||||
<td
|
||||
class="border-blueGray-200 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2"
|
||||
>
|
||||
#
|
||||
</td>
|
||||
{#each newRow as cell}
|
||||
<td
|
||||
class="px-6 align-middletext-sm whitespace-nowrap p-2 focus:outline-none focus:bg-teal-400 focus:text-white focus:text-base"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search here..."
|
||||
class="border-0 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:ring-2 focus:ring-teal-500 w-full pl-10"
|
||||
bind:value={cell}
|
||||
/>
|
||||
</td>
|
||||
{/each}
|
||||
<td
|
||||
class=" px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2"
|
||||
>
|
||||
<button
|
||||
class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-2 py-1 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
on:click={ addRow }
|
||||
>
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="bg-white mb-0 px-6 py-6">
|
||||
|
||||
<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={ () => postWGReg(data)}
|
||||
>
|
||||
Submit Registration
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="mt-3 bg-amber-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={ () => checkData() }
|
||||
>
|
||||
Check Current Data
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="mt-3 bg-red-400 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={ () => clearData() }
|
||||
>
|
||||
Clear Data
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
298
src/components/Cards/CardWGCRUD.svelte
Normal file
298
src/components/Cards/CardWGCRUD.svelte
Normal file
@ -0,0 +1,298 @@
|
||||
<script>
|
||||
|
||||
import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
|
||||
import { getCookie } from "components/Utils/CookieHandler.js";
|
||||
|
||||
|
||||
export let filter_action;
|
||||
export let checked_vals;
|
||||
let footprint;
|
||||
let promise;
|
||||
let checkbox_vals = [];
|
||||
// let checked_vals = [];
|
||||
|
||||
export const wgResponse = null;
|
||||
export let 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 getwgResponse(o_filter) {
|
||||
let csrftoken = getCookie('csrftoken');
|
||||
let authToken = getCookie('Token');
|
||||
console.log(csrftoken);
|
||||
console.log(authToken);
|
||||
console.log("-<>-"+checked_vals);
|
||||
const wgResponse = await fetch(
|
||||
'/api2/wgFilterClients?'+o_filter, {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
mode: 'same-origin',
|
||||
headers: {
|
||||
'Authorization': "Token "+authToken,
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
|
||||
}
|
||||
}
|
||||
);
|
||||
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;
|
||||
checked_vals = checkbox_vals;
|
||||
};
|
||||
|
||||
// let 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";
|
||||
|
||||
</script>
|
||||
|
||||
{#await promise}
|
||||
|
||||
<div
|
||||
class="rounded relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
|
||||
>
|
||||
<div class="rounded bg-white mb-0 px-6 py-6">
|
||||
<div class="text-center w-full">
|
||||
<div class="relative pt-1">
|
||||
<div class="flex mb-2 items-center justify-between">
|
||||
<div>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-orange-600 bg-orange-200">
|
||||
Task in progress
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-xs font-semibold inline-block text-orange-600">
|
||||
0%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200">
|
||||
<div style="width:30%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{:then wgProfileData}
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 border-0">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
|
||||
<h3
|
||||
class="font-semibold text-lg {color === 'light' ? 'text-blueGray-700' : 'text-white'}"
|
||||
>
|
||||
User Profiles
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block w-full overflow-x-auto">
|
||||
<!-- Projects table -->
|
||||
<table class="w-full striped hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<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="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
|
||||
class="px-6 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-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
class="px-6 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-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Mail
|
||||
</th>
|
||||
<th
|
||||
class="px-6 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-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Assigned IP
|
||||
</th>
|
||||
<th
|
||||
class="px-6 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-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Allowed IP
|
||||
</th>
|
||||
<th
|
||||
class="uppercase px-6 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-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class="px-6 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-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Created Time
|
||||
</th>
|
||||
<th
|
||||
class="px-6 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-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each wgProfileData as infRows}
|
||||
<tr class="{infRows.enabled != true ? 'bg-red-50 text-red-500 text-sm' : 'text-blueGray-500 bg-white text-sm'} ">
|
||||
|
||||
<td
|
||||
class="bg-blueGray-300 border-t-8 px-4 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2 rounded"
|
||||
>
|
||||
<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>
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2"
|
||||
>
|
||||
{ infRows.name }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2"
|
||||
contenteditable="true" bind:innerHTML={infRows.email} />
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2"
|
||||
>
|
||||
{ infRows.allocated_ips }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2"
|
||||
>
|
||||
{ infRows.allowed_ips }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2 font-bold"
|
||||
>
|
||||
{ infRows.enabled != true ? 'Disabled' : 'Enabled' }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2"
|
||||
>
|
||||
{ infRows.updated_at }
|
||||
</td>
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2 text-right"
|
||||
>
|
||||
<TableDropdown bind:filter={ filter } bind:wg_id={ infRows.id } bind:wg_user_state={ infRows.enabled } />
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{:catch error}
|
||||
|
||||
<div class="h-screen w-full">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
|
||||
>
|
||||
<div class="rounded-t bg-red-200 mb-0 px-6 py-6">
|
||||
<div class="text-center flex justify-between">
|
||||
<h6 class="uppercase text-blueGray-500 text-xl font-bold">Error</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-t mt-3 mb-3 px-4 py-3 border-0">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full h-full px-4 max-w-full flex-grow flex-1">
|
||||
<p class="text-lg text-red-500"> {error.message} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/await}
|
||||
@ -128,6 +128,13 @@
|
||||
>
|
||||
Create Profile
|
||||
</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="{toggleFilter}"
|
||||
>
|
||||
Search
|
||||
</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"
|
||||
@ -167,13 +174,14 @@
|
||||
<button
|
||||
class="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}"
|
||||
on:click="{() => console.log("Submit after validated")}"
|
||||
>
|
||||
Apply
|
||||
</button>
|
||||
<button
|
||||
class="bg-red-400 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}"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
@ -3,10 +3,56 @@
|
||||
import { getCookie } from "components/Utils/CookieHandler.js";
|
||||
|
||||
export let submitFilter;
|
||||
|
||||
let barWidth = 0;
|
||||
|
||||
let filter_org = [];
|
||||
let filter_org_txt = [];
|
||||
let filter_email = [];
|
||||
let filter_email_txt = [];
|
||||
|
||||
const addColor = () => barWidth += 1;
|
||||
|
||||
function select_email(ip) {
|
||||
if (!filter_email.includes(ip)) {
|
||||
|
||||
filter_email.push(ip);
|
||||
window.document.getElementById(ip).classList.add('bg-amber-500');
|
||||
|
||||
} else {
|
||||
|
||||
// filter_email.splice(ip);
|
||||
const index = filter_email.indexOf(ip);
|
||||
if (index > -1) {
|
||||
filter_email.splice(index, 1);
|
||||
}
|
||||
window.document.getElementById(ip).classList.remove('bg-amber-500');
|
||||
}
|
||||
filter_email_txt = filter_email.join(", ");
|
||||
console.log(filter_email);
|
||||
console.log(filter_email_txt);
|
||||
}
|
||||
|
||||
function select_org(ip) {
|
||||
if (!filter_org.includes(ip)) {
|
||||
|
||||
filter_org.push(ip);
|
||||
window.document.getElementById(ip).classList.add('bg-amber-500');
|
||||
|
||||
} else {
|
||||
|
||||
// filter_org.splice(ip);
|
||||
const index = filter_org.indexOf(ip);
|
||||
if (index > -1) {
|
||||
filter_org.splice(index, 1);
|
||||
}
|
||||
window.document.getElementById(ip).classList.remove('bg-amber-500');
|
||||
}
|
||||
filter_org_txt = filter_org.join(", ");
|
||||
console.log(filter_org);
|
||||
console.log(filter_org_txt);
|
||||
}
|
||||
|
||||
function progress_start() {
|
||||
for (let i = 0; i < 1000; i++) {
|
||||
addColor();
|
||||
@ -22,7 +68,6 @@
|
||||
credentials: 'include',
|
||||
mode: 'same-origin',
|
||||
headers: {
|
||||
'X-CSRFToken': csrftoken,
|
||||
'Authorization': "Token "+authToken,
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
@ -41,7 +86,6 @@
|
||||
credentials: 'include',
|
||||
mode: 'same-origin',
|
||||
headers: {
|
||||
'X-CSRFToken': csrftoken,
|
||||
'Authorization': "Token "+authToken,
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
@ -66,7 +110,7 @@
|
||||
|
||||
submitFilter = null;
|
||||
|
||||
submitFilter = data["name"]+"+"+data["org"]+"+"+data["email_domain"]+"+"+data["user_state"];
|
||||
submitFilter = "name="+data["name"]+"&orgs="+data["org"]+"&emails="+data["email_domain"]+"&state="+data["user_state"];
|
||||
|
||||
console.log(submitFilter);
|
||||
}
|
||||
@ -123,14 +167,29 @@
|
||||
</div>
|
||||
</div>
|
||||
{:then wgOrgs}
|
||||
<select name="org" 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="" >No Organization</option>
|
||||
{#each wgOrgs as value}
|
||||
<p> {value} </p>
|
||||
<option value="{value.orgs}">{value.orgs}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<input
|
||||
name="org"
|
||||
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"
|
||||
bind:value={filter_org_txt}
|
||||
|
||||
/>
|
||||
|
||||
<div class="relative pt-1">
|
||||
<div class="flex-wrap mt-2 mb-2 space-x-4 justify-center">
|
||||
{#each wgOrgs.orgs as ip_val}
|
||||
<button
|
||||
id="{ip_val}"
|
||||
class="border-2 border-amber-500 px-4 py-0 text-xs font-bold text-blueGray-500 rounded mr-2 active:bg-red-500 hover:bg-teal-500 hover:border-teal-500 hover:text-white"
|
||||
value="{ip_val}"
|
||||
type="button"
|
||||
on:click="{() => select_org(ip_val)}"
|
||||
>
|
||||
{ip_val}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/await}
|
||||
</div>
|
||||
|
||||
@ -160,14 +219,26 @@
|
||||
</div>
|
||||
</div>
|
||||
{:then wgEmail}
|
||||
<select name="email_domain" 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 Email Domain</option>
|
||||
<option class="text-blueGray-100" value="" >No Email</option>
|
||||
{#each wgEmail as value}
|
||||
<p> {value} </p>
|
||||
<option value="{value.email}">{value.email}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<input
|
||||
name="email_domain"
|
||||
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"
|
||||
bind:value={filter_email_txt}
|
||||
/>
|
||||
<div class="relative pt-1">
|
||||
<div class="flex-wrap mt-2 mb-2 space-x-4 justify-center">
|
||||
{#each wgEmail.email as email_val}
|
||||
<button
|
||||
id="{email_val}"
|
||||
class="border-2 border-amber-500 px-4 py-0 text-xs font-bold text-blueGray-500 rounded mr-2 active:bg-red-500 hover:bg-teal-500 hover:border-teal-500 hover:text-white"
|
||||
value="{email_val}"
|
||||
type="button"
|
||||
on:click="{() => select_email(email_val)}"
|
||||
>
|
||||
{email_val}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/await}
|
||||
</div>
|
||||
<div class="relative w-full mb-3">
|
||||
|
||||
@ -39,12 +39,11 @@
|
||||
console.log(authToken);
|
||||
console.log("-<>-"+checked_vals);
|
||||
const wgResponse = await fetch(
|
||||
'/api2/wgClients?filter='+o_filter, {
|
||||
'/api2/wgFilterClients?'+o_filter, {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
mode: 'same-origin',
|
||||
headers: {
|
||||
'X-CSRFToken': csrftoken,
|
||||
'Authorization': "Token "+authToken,
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
@ -102,7 +101,6 @@
|
||||
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);
|
||||
@ -227,48 +225,48 @@
|
||||
<tr class="{infRows.enabled != true ? 'bg-red-50 text-red-500 text-sm' : 'text-blueGray-500 bg-white text-sm'} ">
|
||||
|
||||
<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"
|
||||
class="bg-blueGray-300 border-t-8 px-4 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2 rounded"
|
||||
>
|
||||
<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>
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2"
|
||||
>
|
||||
{ infRows.name }
|
||||
</td>
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2"
|
||||
>
|
||||
{ infRows.email }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2"
|
||||
>
|
||||
{ infRows.allocated_ips }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2"
|
||||
>
|
||||
{ infRows.allowed_ips }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 font-bold"
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2 font-bold"
|
||||
>
|
||||
{ infRows.enabled != true ? 'Disabled' : 'Enabled' }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2"
|
||||
>
|
||||
{ infRows.updated_at }
|
||||
</td>
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 text-right"
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-2 text-right"
|
||||
>
|
||||
<TableDropdown bind:filter={ filter } bind:wg_id={ infRows.id } bind:wg_user_state={ infRows.enabled } />
|
||||
</td>
|
||||
|
||||
@ -137,6 +137,19 @@
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
href="/admin/wgCRUD"
|
||||
class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/tables') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
|
||||
>
|
||||
<i
|
||||
class="fas fa-table mr-2 text-sm {location.href.indexOf('/admin/tables') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
|
||||
></i>
|
||||
WireGuard CRUD
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
import wgLogs from "views/admin/wgLogs.svelte";
|
||||
import wgProfiles from "views/admin/wgProfiles.svelte";
|
||||
import wgBlast from "views/admin/wgBlast.svelte";
|
||||
import wgCRUD from "views/admin/wgCRUD.svelte";
|
||||
import Maps from "views/admin/Maps.svelte";
|
||||
|
||||
export let location;
|
||||
@ -34,6 +35,7 @@
|
||||
<Route path="tables" component="{Tables}" />
|
||||
<Route path="wgLogs" component="{wgLogs}" />
|
||||
<Route path="wgProfiles" component="{wgProfiles}" />
|
||||
<Route path="wgCRUD" component="{wgCRUD}" />
|
||||
<Route path="wgBlast" component="{wgBlast}" />
|
||||
<Route path="maps" component="{Maps}" />
|
||||
</Router>
|
||||
|
||||
22
src/views/admin/wgCRUD.svelte
Normal file
22
src/views/admin/wgCRUD.svelte
Normal file
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
// core components
|
||||
import axios from 'axios';
|
||||
import {onMount} from 'svelte';
|
||||
import CardWGControl from "components/Cards/CardWGControl.svelte";
|
||||
import CardWGCRUD from "components/Cards/CardWGCRUD.svelte";
|
||||
import CardUploadCSV from "components/Cards/CardUploadCSV.svelte";
|
||||
|
||||
export let location;
|
||||
let wgProfileFetch = [];
|
||||
// onMount(async () => {
|
||||
// await axios.get('http://192.168.10.2:8000/api2/wgClients')
|
||||
// .then( response => {
|
||||
// wgProfileFetch = response.data
|
||||
// });
|
||||
// console.log(wgProfileFetch);
|
||||
// });
|
||||
</script>
|
||||
|
||||
<div class="flex flex-wrap mt-4 mb-8">
|
||||
<CardUploadCSV />
|
||||
</div>
|
||||
Reference in New Issue
Block a user