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

wg svelte multiple component communication

Browse Source
This commit is contained in:
infidel 2022-11-21 18:58:44 +07:00
parent dbf9049c48
commit 6f44d2b645
21 changed files with 431 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/200.html
View File

@ -35,7 +35,7 @@
<script>
if (process === undefined) {
var process = { env: {PRODUCTION: true} };
var process = { env: {} };
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

2
public/404.html
View File

@ -35,7 +35,7 @@
<script>
if (process === undefined) {
var process = { env: {PRODUCTION: true} };
var process = { env: {} };
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

1
public/assets/styles/index.css
View File

@ -3,3 +3,4 @@
@tailwind components;
@tailwind utilities;

151
public/assets/styles/tailwind.css
View File

@ -1237,21 +1237,11 @@ select {
background-color: rgba(168, 85, 247, var(--tw-bg-opacity));
}
.bg-purple-600 {
--tw-bg-opacity: 1;
background-color: rgba(147, 51, 234, var(--tw-bg-opacity));
}
.bg-indigo-500 {
--tw-bg-opacity: 1;
background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
}
.bg-lightBlue-200 {
--tw-bg-opacity: 1;
background-color: rgba(186, 230, 253, var(--tw-bg-opacity));
@ -1272,11 +1262,26 @@ select {
background-color: rgba(2, 132, 199, var(--tw-bg-opacity));
}
.bg-cyan-500 {
--tw-bg-opacity: 1;
background-color: rgba(6, 182, 212, var(--tw-bg-opacity));
}
.bg-teal-50 {
--tw-bg-opacity: 1;
background-color: rgba(240, 253, 250, var(--tw-bg-opacity));
}
.bg-teal-200 {
--tw-bg-opacity: 1;
background-color: rgba(153, 246, 228, var(--tw-bg-opacity));
}
.bg-teal-300 {
--tw-bg-opacity: 1;
background-color: rgba(94, 234, 212, var(--tw-bg-opacity));
}
.bg-teal-500 {
--tw-bg-opacity: 1;
background-color: rgba(20, 184, 166, var(--tw-bg-opacity));
@ -1312,6 +1317,11 @@ select {
background-color: rgba(249, 115, 22, var(--tw-bg-opacity));
}
.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgba(254, 242, 242, var(--tw-bg-opacity));
}
.bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
@ -1387,51 +1397,21 @@ select {
background-color: rgba(30, 41, 59, var(--tw-bg-opacity));
}
.hover\:bg-purple-700:hover {
--tw-bg-opacity: 1;
background-color: rgba(126, 34, 206, var(--tw-bg-opacity));
}
.hover\:bg-blue-700:hover {
--tw-bg-opacity: 1;
background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
}
.focus\:bg-white:focus {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.focus\:bg-purple-700:focus {
--tw-bg-opacity: 1;
background-color: rgba(126, 34, 206, var(--tw-bg-opacity));
}
.focus\:bg-blue-700:focus {
--tw-bg-opacity: 1;
background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
}
.focus\:bg-gray-200:focus {
--tw-bg-opacity: 1;
background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
}
.active\:bg-purple-800:active {
--tw-bg-opacity: 1;
background-color: rgba(107, 33, 168, var(--tw-bg-opacity));
}
.active\:bg-indigo-600:active {
--tw-bg-opacity: 1;
background-color: rgba(79, 70, 229, var(--tw-bg-opacity));
}
.active\:bg-blue-800:active {
--tw-bg-opacity: 1;
background-color: rgba(30, 64, 175, var(--tw-bg-opacity));
}
.active\:bg-red-500:active {
--tw-bg-opacity: 1;
background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
@ -1556,10 +1536,6 @@ select {
border-color: rgba(113, 113, 122, var(--tw-border-opacity));
}
.rounded-none {
border-radius: 0px;
}
.rounded {
border-radius: 0.25rem;
}
@ -1596,16 +1572,6 @@ select {
border-bottom-left-radius: 0.25rem;
}
.rounded-t-md {
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}
.rounded-b-md {
border-bottom-right-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}
.rounded-t-lg {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
@ -1675,6 +1641,10 @@ select {
border-bottom-width: 2px;
}
.border-t-8 {
border-top-width: 8px;
}
.border-t {
border-top-width: 1px;
}
@ -2019,10 +1989,6 @@ select {
flex-grow: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-shrink {
flex-shrink: 1;
}
@ -2063,10 +2029,6 @@ select {
font-weight: 400;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
@ -2083,10 +2045,6 @@ select {
height: 0.5rem;
}
.h-4 {
height: 1rem;
}
.h-5 {
height: 1.25rem;
}
@ -2200,10 +2158,6 @@ select {
line-height: 1;
}
.leading-tight {
line-height: 1.25;
}
.leading-snug {
line-height: 1.375;
}
@ -2566,14 +2520,6 @@ select {
opacity: .8;
}
.hover\:opacity-75:hover {
opacity: 0.75;
}
.focus\:opacity-100:focus {
opacity: 1;
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
@ -2792,11 +2738,6 @@ select {
padding-right: 0.125rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.pt-0 {
padding-top: 0px;
}
@ -3092,21 +3033,6 @@ select {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:shadow-lg:focus {
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:shadow-none:focus {
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.active\:shadow-lg:active {
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
* {
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
@ -3229,11 +3155,21 @@ select {
color: rgba(2, 132, 199, var(--tw-text-opacity));
}
.text-teal-50 {
--tw-text-opacity: 1;
color: rgba(240, 253, 250, var(--tw-text-opacity));
}
.text-teal-500 {
--tw-text-opacity: 1;
color: rgba(20, 184, 166, var(--tw-text-opacity));
}
.text-teal-700 {
--tw-text-opacity: 1;
color: rgba(15, 118, 110, var(--tw-text-opacity));
}
.text-emerald-500 {
--tw-text-opacity: 1;
color: rgba(16, 185, 129, var(--tw-text-opacity));
@ -3279,11 +3215,6 @@ select {
color: rgba(63, 63, 70, var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgba(39, 39, 42, var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgba(24, 24, 27, var(--tw-text-opacity));
@ -3329,11 +3260,6 @@ select {
color: rgba(30, 41, 59, var(--tw-text-opacity));
}
.hover\:text-black:hover {
--tw-text-opacity: 1;
color: rgba(0, 0, 0, var(--tw-text-opacity));
}
.hover\:text-red-600:hover {
--tw-text-opacity: 1;
color: rgba(220, 38, 38, var(--tw-text-opacity));
@ -3409,10 +3335,6 @@ select {
text-decoration: none;
}
.hover\:no-underline:hover {
text-decoration: none;
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -3561,10 +3483,6 @@ select {
word-break: break-all;
}
.w-4 {
width: 1rem;
}
.w-5 {
width: 1.25rem;
}
@ -4137,3 +4055,4 @@ select {
@media (min-width: 1536px) {
}

2
public/index.html
View File

@ -35,7 +35,7 @@
<script>
if (process === undefined) {
var process = { env: {PRODUCTION: true} };
var process = { env: {} };
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

BIN
src/components/Cards/.CardCreateWGUser.svelte.swp
View File

Binary file not shown.

BIN
src/components/Cards/.CardSettings.svelte.swp
View File

Binary file not shown.

BIN
src/components/Cards/.CardWGControl.svelte.swp
View File

Binary file not shown.

BIN
src/components/Cards/.CardWGProfiles.svelte.swp
View File

Binary file not shown.

32
src/components/Cards/CardCreateWGUser.svelte
View File

@ -1,17 +1,3 @@
<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-t bg-white mb-0 px-6 py-6">
<div class="text-center flex justify-between">
<h6 class="text-blueGray-700 text-xl font-bold">My account</h6>
<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"
>
Settings
</button>
</div>
</div>
<div class="flex-auto px-4 lg:px-10 py-10 pt-0">
<form>
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
@ -30,7 +16,7 @@
id="grid-username"
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="lucky.jesse"
value="" placeholder="User Name"
/>
</div>
</div>
@ -55,13 +41,13 @@
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
for="grid-address"
>
Address
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="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
value=""
/>
</div>
<div class="relative w-full mb-3">
@ -69,13 +55,13 @@
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
for="grid-address"
>
Address
Allowed IP
</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="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
value=""
/>
</div>
<div class="relative w-full mb-3">
@ -83,13 +69,13 @@
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
for="grid-address"
>
Address
Extra Allowed IP
</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="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
value=""
/>
</div>
</div>
@ -103,9 +89,5 @@
<hr class="mt-6 border-b-1 border-blueGray-300" />
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
About Me
</h6>
</form>
</div>
</div>

106
src/components/Cards/CardTableInf.svelte
View File

@ -4,16 +4,25 @@
let trColor;
let footprint;
let infTable = [];
onMount(async () => {
await axios.get('/api2/wgLogs')
.then( response => {
infTable = response.data
});
console.log(infTable);
});
// onMount(async () => {
// const wgResponse = await axios.get('/api2/wgLogs')
// .then( response => {
// infTable = response.data
// });
// return await wgResponse.json();
// });
async function getwgResponse() {
const wgResponse = await fetch(
'/api2/wgLogs'
);
return await wgResponse.json();
}
// core components
import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
import CardWGControl from "components/Cards/CardWGControl.svelte";
// can be one of light or dark
export let color = "light";
@ -25,8 +34,30 @@
function handleMouseOut(e) {
trColor = "dark";
}
let promise = getwgResponse();
</script>
{#await promise}
<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'}"
>
Fetching...
</h3>
</div>
</div>
</div>
</div>
{:then infTable}
<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'}"
>
@ -43,45 +74,45 @@
</div>
<div class="block w-full overflow-x-auto">
<!-- Projects table -->
<table class="table-auto items-center w-full bg-transparent border-collapse">
<table class="table-auto border-collapse border border-slate-500 w-full">
<thead>
<tr>
<th
class="px-6 align-middle border border-solid py-3 text-xs 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'}"
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-xs 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'}"
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-xs 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'}"
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'}"
>
Public Key
</th>
<th
class="px-6 align-middle border border-solid py-3 text-xs 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'}"
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'}"
>
Data In
</th>
<th
class="px-6 align-middle border border-solid py-3 text-xs 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'}"
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'}"
>
Data Out
</th>
<th
class="px-6 align-middle border border-solid py-3 text-xs 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'}"
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'}"
>
Status
<th
class="px-6 align-middle border border-solid py-3 text-xs 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'}"
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'}"
>
Create Time
Created Time
</th>
<th
class="px-6 align-middle border border-solid py-3 text-xs 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'}"
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'}"
>
...
</th>
@ -89,49 +120,49 @@
</thead>
<tbody>
{#each infTable as infRows}
<tr class="{infRows.wgDin < 1 ? 'bg-red-700 border-red-600 text-red-200' : 'None'} ">
<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-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
class="border-t-8 px-4 align-middle border-l-0 border-r-0 whitespace-nowrap p-4 border-slate-700"
>
{ infRows.wgName }
</td>
<td
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
class="border-t-8 px-4 align-middle border-l-0 border-r-0 whitespace-nowrap p-4"
>
{ infRows.wgMail }
</td>
<td
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
class="border-t-8 px-4 align-middle border-l-0 border-r-0 whitespace-nowrap p-4"
>
{ infRows.wgKey }
</td>
<td
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
class="border-t-8 px-6 align-middle border-l-0 border-r-0 whitespace-nowrap p-4"
>
{ infRows.wgDin/1000000 } MBytes
</td>
<td
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
class="border-t-8 px-6 align-middle border-l-0 border-r-0 whitespace-nowrap p-4"
>
{ infRows.wgDout/1000000 } MBytes
</td>
<td
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
class="border-t-8 px-6 align-middle border-l-0 border-r-0 font-bold whitespace-nowrap p-4"
>
{ infRows.wgStatus }
{ infRows.wgStatus == 'true' ? 'Connected Now': infRows.wgDin < 1 ? 'Never Connected' : 'Not Connected Now' }
</td>
<td
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
class="border-t-8 px-6 align-middle border-l-0 border-r-0 whitespace-nowrap p-4"
>
{ infRows.wgTStamp }
</td>
<td
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
class="border-t-8 px-6 align-middle border-l-0 border-r-0 whitespace-nowrap p-4 text-right"
>
<TableDropdown />
</td>
@ -141,3 +172,24 @@
</table>
</div>
</div>
{:catch error}
<div class="h-screen">
<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}

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

@ -2,43 +2,74 @@
import CardSettings from "components/Cards/CardSettings.svelte";
import CardCreateWGUser from "components/Cards/CardCreateWGUser.svelte";
import CardWGFilter from "components/Cards/CardWGFilter.svelte";
import Modal from "components/Modals/Modals.svelte"
import CardWGControl from "components/Cards/CardWGControl.svelte";
let showModal = false;
let showFilter = false;
export let filter = null;
let submitFilter = null;
function toggleModal(){
showModal = !showModal;
console.log("Cunts...");
showFilter = false;
console.log("Modal...");
}
function handleOnSubmit() {
console.log("Submitted...");
}
function toggleFilter(){
showFilter = !showFilter;
showModal = false;
filter = submitFilter;
console.log("toggle Filter...");
console.log(filter);
}
function getwgResponse(param) {
const wgResponse = fetch(
'/api2/wgClients?filter='+param
);
return wgResponse;
}
</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="flex-auto px-4 lg:px-10 py-10 pt-0">
<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>
<div class="text-center flex justify">
<div></div>
<div>
<div class="rounded bg-white mb-0 px-6 py-6">
<div class="text-center flex justify-between">
<h6 class="text-blueGray-700 text-xl font-bold">Action</h6>
<div class="sm:flex sm:flex-col">
<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"
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
</button>
<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"
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}"
>
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="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"
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"
>
Backup
@ -49,36 +80,55 @@
</div>
{#if showModal}
<div class="modal z-50 fade fixed top-0 left-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollable" aria-modal="true" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable relative w-auto pointer-events-none">
<div class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
<div class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
<h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalCenteredScrollableLabel">
Modal title
</h5>
<button type="button"
class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body relative p-4">
<p>This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
<br><br><br><br><br><br><br><br><br><br>
<p>Just like that.</p>
</div>
<div
class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md">
<button type="button"
class="inline-block px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
data-bs-dismiss="modal">
Close
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-t bg-cyan-500 mb-0 px-6 py-6">
<div class="text-center flex justify-between">
<h6 class="text-teal-50 text-xl font-bold">Create Account</h6>
</div>
</div>
<div class="rounded-t bg-white mb-0 px-6 py-6">
<CardCreateWGUser />
<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}"
>
Apply
</button>
<button type="button"
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1">
Save changes
<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"
>
Cancel
</button>
</div>
</div>
{:else if showFilter}
<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-t bg-teal-500 mb-0 px-6 py-6">
<div class="text-center flex justify-between">
<h6 class="text-teal-50 text-xl font-bold">Create Filter</h6>
<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="{toggleFilter}"
>
Cancel
</button>
</div>
</div>
<div class="rounded-t bg-white mb-0 px-6 py-6">
<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="flex-auto px-4 lg:px-10 py-10 pt-0">
<CardWGFilter bind:submitFilter={submitFilter} on:submit={handleOnSubmit} />
</div>
</div>
</div>
</div>
{/if}

81
src/components/Cards/CardWGFilter.svelte Normal file
View File

@ -0,0 +1,81 @@
<script>
export let submitFilter = null;
function validate() {
console.log("I'm the tester function");
submitFilter = "meta";
console.log(submitFilter);
}
</script>
<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-12/12 px-4">
<div class="relative w-full mb-3">
<label
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
for="grid-username"
>
Username
</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>
</div>
<div class="relative w-full mb-3">
<label
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
for="grid-username"
>
Organization
</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 value="gci">GCI</option>
<option value="meta">META</option>
<option value="ph-training">PH-Training</option>
</select>
</div>
<div class="relative w-full mb-3">
<label
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
for="grid-username"
>
Email Domain
</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>
</div>
<div class="relative w-full mb-3">
<label
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
for="grid-username"
>
---
</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>
</div>
<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="submit" >
Apply
</button>
</form>

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

@ -2,14 +2,22 @@
// import axios from 'axios';
// import {onMount} from 'svelte';
let footprint;
export let wgProfileData = [];
// onMount(async () => {
// await axios.get('http://127.0.0.1:8000/api2/wgClients')
// .then( response => {
// wgProfileData = response.data
// });
// console.log(wgProfileData);
// });
let promise;
export let wgResponse = null;
export let filter = null;
async function getwgResponse(o_filter) {
const wgResponse = await fetch(
'/api2/wgClients?filter='+o_filter
);
return await wgResponse.json();
}
// let promise = getwgResponse();
$: filter != null ?
promise = getwgResponse(filter) : promise = getwgReseponse("");
// core components
@ -19,6 +27,20 @@
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 flex justify-between">
<h6 class="uppercase text-blueGray-500 text-xl font-bold">Fetching . . .</h6>
</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'}"
>
@ -39,42 +61,42 @@
<thead>
<tr>
<th
class="px-6 align-middle border border-solid py-3 text-xs 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'}"
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'}"
>
#
</th>
<th
class="px-6 align-middle border border-solid py-3 text-xs 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'}"
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-xs 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'}"
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-xs 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'}"
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-xs 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'}"
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="px-6 align-middle border border-solid py-3 text-xs 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'}"
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-xs 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'}"
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-xs 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'}"
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>
@ -82,49 +104,49 @@
</thead>
<tbody>
{#each wgProfileData as infRows}
<tr>
<tr class="{infRows.enabled != true ? 'bg-red-50 text-red-500 text-sm' : 'text-blueGray-500 bg-white text-sm'} ">
<td
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
>
{ infRows.data_id }
</td>
<td
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
>
{ infRows.name }
</td>
<td
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
>
{ infRows.email }
</td>
<td
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
>
{ infRows.allocated_ips }
</td>
<td
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
>
{ infRows.allowed_ips }
</td>
<td
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 font-bold"
>
{ infRows.enabled }
{ infRows.enabled != true ? 'Disabled' : 'Enabled' }
</td>
<td
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
>
{ infRows.updated_at }
</td>
<td
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs 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-4 text-right"
>
<TableDropdown />
</td>
@ -134,3 +156,26 @@
</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}

4
src/components/Headers/GlobalHeader.svelte
View File

@ -1,8 +1,10 @@
<script>
import HeaderStats from "components/Headers/HeaderStats.svelte";
</script>
<!-- Header -->
<div class="relative bg-teal-500 md:pt-32 pb-32 pt-12">
<HeaderStats />
</div>

18
src/components/Sidebar/Sidebar.svelte
View File

@ -109,6 +109,19 @@
</a>
</li>
<li class="items-center">
<a
use:link
href="/admin/wgProfiles"
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 Profiles
</a>
</li>
<li class="items-center">
<a
use:link
@ -125,16 +138,15 @@
<li class="items-center">
<a
use:link
href="/admin/wgProfiles"
href="/admin/wgBlast"
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 Profiles
WireGuard Blast
</a>
</li>
<li class="items-center">
<a
use:link

2
src/layouts/Admin.svelte
View File

@ -14,6 +14,7 @@
import Tables from "views/admin/Tables.svelte";
import wgLogs from "views/admin/wgLogs.svelte";
import wgProfiles from "views/admin/wgProfiles.svelte";
import wgBlast from "views/admin/wgBlast.svelte";
import Maps from "views/admin/Maps.svelte";
export let location;
@ -32,6 +33,7 @@
<Route path="tables" component="{Tables}" />
<Route path="wgLogs" component="{wgLogs}" />
<Route path="wgProfiles" component="{wgProfiles}" />
<Route path="wgBlast" component="{wgBlast}" />
<Route path="maps" component="{Maps}" />
</Router>
<FooterAdmin />

BIN
src/views/admin/.wgProfiles.svelte.swp
View File

Binary file not shown.

3
src/views/admin/Dashboard.svelte
View File

@ -11,9 +11,6 @@
<div>
<div class="mt-3 mb-6">
<HeaderStats />
</div>
<div class="flex flex-wrap">
<div class="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
<CardLineChart />

22
src/views/admin/wgBlast.svelte Normal file
View File

@ -0,0 +1,22 @@
<script>
// core components
import axios from 'axios';
import {onMount} from 'svelte';
import CardWGProfile from "components/Cards/CardWGProfiles.svelte";
import CardWGControl from "components/Cards/CardWGControl.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">
<CardWGControl />
<CardWGProfile />
</div>

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

@ -4,20 +4,26 @@
import {onMount} from 'svelte';
import CardWGProfile from "components/Cards/CardWGProfiles.svelte";
import CardWGControl from "components/Cards/CardWGControl.svelte";
export let location;
let wgResponse = null;
let filter = "";
let unique = {};
let wgProfileFetch = [];
onMount(async () => {
await axios.get('http://192.168.10.2:8000/api2/wgClients')
.then( response => {
wgProfileFetch = response.data
});
console.log(wgProfileFetch);
});
async function update_wg_table() {
}
// onMount(async () => {
// await axios.get('http://192.168.10.2:8000/api2/wgClients')
// .then( response => {
// wgProfileFetch = response.data
// });
// console.log(wgProfileFetch);
// });
</script>
<CardWGControl />
<div class="flex flex-wrap mt-4 mb-8">
<CardWGProfile
wgProfileData = { wgProfileFetch }
/>
<CardWGControl bind:filter={filter}/>
<CardWGProfile wgResponse={wgResponse} bind:filter={filter}/>
</div>