From dd416e7758fc50dbebd352fff80d1160aedf4c8f Mon Sep 17 00:00:00 2001 From: infidel Date: Wed, 14 Dec 2022 00:06:43 +0700 Subject: [PATCH] Interactive table, bind value of array to html content SUCESS --- package-lock.json | 11 + package.json | 1 + public/assets/styles/tailwind.css | 74 +++++ src/components/Cards/CardCreateWGUser.svelte | 172 ++++++++++- src/components/Cards/CardTableInf.svelte | 17 +- src/components/Cards/CardUploadCSV.svelte | 289 ++++++++++++++++++ src/components/Cards/CardWGCRUD.svelte | 298 +++++++++++++++++++ src/components/Cards/CardWGControl.svelte | 10 +- src/components/Cards/CardWGFilter.svelte | 109 +++++-- src/components/Cards/CardWGProfiles.svelte | 20 +- src/components/Sidebar/Sidebar.svelte | 13 + src/layouts/Admin.svelte | 2 + src/views/admin/wgCRUD.svelte | 22 ++ 13 files changed, 982 insertions(+), 56 deletions(-) create mode 100644 src/components/Cards/CardUploadCSV.svelte create mode 100644 src/components/Cards/CardWGCRUD.svelte create mode 100644 src/views/admin/wgCRUD.svelte diff --git a/package-lock.json b/package-lock.json index 56f5e25..29b03a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index df43a15..9923262 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/public/assets/styles/tailwind.css b/public/assets/styles/tailwind.css index 6b0064b..fb32998 100644 --- a/public/assets/styles/tailwind.css +++ b/public/assets/styles/tailwind.css @@ -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; } diff --git a/src/components/Cards/CardCreateWGUser.svelte b/src/components/Cards/CardCreateWGUser.svelte index 23d2a76..cb5a3d0 100644 --- a/src/components/Cards/CardCreateWGUser.svelte +++ b/src/components/Cards/CardCreateWGUser.svelte @@ -1,10 +1,94 @@ + +
-
+
User Information
-
-
-
-
+
+ + +
+ {#await promise_IPs } +
+
+
Loading
+
+
+
+
+ {:then IPs}
- + +
+
+ {#each IPs.allocated_ips as ip_val} + + {/each} +
+
+ {/await}
-
-
Contact Information
diff --git a/src/components/Cards/CardTableInf.svelte b/src/components/Cards/CardTableInf.svelte index a29541d..24e029c 100644 --- a/src/components/Cards/CardTableInf.svelte +++ b/src/components/Cards/CardTableInf.svelte @@ -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} { infRows.wgName } { infRows.wgMail } { infRows.wgKey } { infRows.wgDin/1000000 } MBytes { infRows.wgDout/1000000 } MBytes { infRows.wgStatus == 'true' ? 'Connected Now': infRows.wgDin < 1 ? 'Never Connected' : 'Not Connected Now' } { infRows.wgTStamp } diff --git a/src/components/Cards/CardUploadCSV.svelte b/src/components/Cards/CardUploadCSV.svelte new file mode 100644 index 0000000..395072f --- /dev/null +++ b/src/components/Cards/CardUploadCSV.svelte @@ -0,0 +1,289 @@ + + + +
+
+
+
Action
+
+ + + +

SVG, PNG, JPG or GIF (MAX. 800x400px).

+ + + + + +
+
+
+
+ +
+
+ + + + + {#each headers as cell} + + {/each} + + + + + {#each data as row, i} + {#if row.length = 4} + + + {#each row as cell} + + {/each} + + + + {/if} + {/each} + + + {#each newRow as cell} + + {/each} + + + +
+ # + + { cell } + + Action +
+ {i + 1} + + + + +
+ # + + + + +
+
+ +
+ + + + + + + +
+
diff --git a/src/components/Cards/CardWGCRUD.svelte b/src/components/Cards/CardWGCRUD.svelte new file mode 100644 index 0000000..0adbe06 --- /dev/null +++ b/src/components/Cards/CardWGCRUD.svelte @@ -0,0 +1,298 @@ + + +{#await promise} + +
+
+
+
+
+
+ + Task in progress + +
+
+ + 0% + +
+
+
+
+
+
+
+
+
+ +{:then wgProfileData} + +
+
+
+
+

+ User Profiles +

+
+
+
+
+ + + + + + + + + + + + + + + + {#each wgProfileData as infRows} + + + + + + + + + + + + + + + + {/each} + +
+ + + + Name + + Mail + + Assigned IP + + Allowed IP + + Status + + Created Time + + Action +
+ + + + { infRows.name } + + + + { infRows.allocated_ips } + + { infRows.allowed_ips } + + { infRows.enabled != true ? 'Disabled' : 'Enabled' } + + { infRows.updated_at } + + +
+
+
+ +{:catch error} + +
+
+
+
+
Error
+
+
+
+
+
+

{error.message}

+
+
+
+
+
+ +{/await} diff --git a/src/components/Cards/CardWGControl.svelte b/src/components/Cards/CardWGControl.svelte index e24040f..c1e197a 100644 --- a/src/components/Cards/CardWGControl.svelte +++ b/src/components/Cards/CardWGControl.svelte @@ -128,6 +128,13 @@ > Create Profile + diff --git a/src/components/Cards/CardWGFilter.svelte b/src/components/Cards/CardWGFilter.svelte index 7cec9f2..0c4abe3 100644 --- a/src/components/Cards/CardWGFilter.svelte +++ b/src/components/Cards/CardWGFilter.svelte @@ -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 @@
{:then wgOrgs} - + + +
+
+ {#each wgOrgs.orgs as ip_val} + + {/each} +
+
+ {/await} @@ -160,14 +219,26 @@ {:then wgEmail} - + +
+
+ {#each wgEmail.email as email_val} + + {/each} +
+
{/await}
diff --git a/src/components/Cards/CardWGProfiles.svelte b/src/components/Cards/CardWGProfiles.svelte index ba05094..47759cb 100644 --- a/src/components/Cards/CardWGProfiles.svelte +++ b/src/components/Cards/CardWGProfiles.svelte @@ -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 @@ { infRows.name } { infRows.email } { infRows.allocated_ips } { infRows.allowed_ips } { infRows.enabled != true ? 'Disabled' : 'Enabled' } { infRows.updated_at } diff --git a/src/components/Sidebar/Sidebar.svelte b/src/components/Sidebar/Sidebar.svelte index 85fb30c..6c2b349 100644 --- a/src/components/Sidebar/Sidebar.svelte +++ b/src/components/Sidebar/Sidebar.svelte @@ -137,6 +137,19 @@ +
  • + + + WireGuard CRUD + +
    • +
  • + diff --git a/src/views/admin/wgCRUD.svelte b/src/views/admin/wgCRUD.svelte new file mode 100644 index 0000000..f961418 --- /dev/null +++ b/src/views/admin/wgCRUD.svelte @@ -0,0 +1,22 @@ + + +
    + +