212 lines
8.2 KiB
Svelte
212 lines
8.2 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { getCookie } from "components/Utils/CookieHandler.js";
|
|
|
|
let trColor;
|
|
let footprint;
|
|
let infTable = [];
|
|
|
|
// onMount(async () => {
|
|
// const wgResponse = await axios.get('/api2/wgLogs')
|
|
// .then( response => {
|
|
// infTable = response.data
|
|
// });
|
|
// return await wgResponse.json();
|
|
// });
|
|
|
|
async function getwgResponse() {
|
|
let csrftoken = getCookie('csrftoken');
|
|
let authToken = getCookie('Token');
|
|
console.log(csrftoken);
|
|
console.log(authToken);
|
|
const wgResponse = await fetch(
|
|
'/api2/wgLogs', {
|
|
method: 'GET',
|
|
credentials: 'include',
|
|
mode: 'same-origin',
|
|
headers: {
|
|
'X-CSRFToken': csrftoken,
|
|
'Authorization': "Token "+authToken,
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
|
|
}
|
|
}
|
|
);
|
|
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";
|
|
|
|
function handleMouseOver(e) {
|
|
trColor = "light";
|
|
}
|
|
|
|
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'}"
|
|
>
|
|
<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'}"
|
|
>
|
|
Accesss Logs
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="block w-full overflow-x-auto">
|
|
<!-- Projects table -->
|
|
<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-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'}"
|
|
>
|
|
Public Key
|
|
</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'}"
|
|
>
|
|
Data In
|
|
</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'}"
|
|
>
|
|
Data Out
|
|
</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'}"
|
|
>
|
|
Status
|
|
<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'}"
|
|
>
|
|
Last Session Access 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'}"
|
|
>
|
|
...
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#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"
|
|
>
|
|
{ infRows.wgName }
|
|
</td>
|
|
|
|
<td
|
|
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-8 px-4 align-middle border-l-0 border-r-0 whitespace-nowrap p-4"
|
|
>
|
|
{ infRows.wgKey }
|
|
</td>
|
|
|
|
<td
|
|
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-8 px-6 align-middle border-l-0 border-r-0 whitespace-nowrap p-4"
|
|
>
|
|
{ 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"
|
|
>
|
|
{ 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"
|
|
>
|
|
{ infRows.wgTStamp }
|
|
</td>
|
|
<td
|
|
class="border-t-8 px-6 align-middle border-l-0 border-r-0 whitespace-nowrap p-4 text-right"
|
|
>
|
|
<TableDropdown />
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</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}
|
|
|