NextGraph
/
nextgraph-rs
1
2
Fork 0
Code Issues 1 Pull Requests Packages Projects 2 Releases 3 Activity

fix GUI details

Browse Source
pull/27/head
Niko PLP 2 months ago
parent 16e0baa90a
commit 8975f26714
3 changed files with 76 additions and 81 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 86
      ng-app/src/routes/AccountInfo.svelte
  2. 6
      ng-app/src/routes/User.svelte
  3. 65
      ng-app/src/routes/WalletInfo.svelte

86
ng-app/src/routes/AccountInfo.svelte
Unescape View File

@ -59,9 +59,9 @@
server_type: Object { server_type: Object {
Domain Domain
Localhost: 1440 // if domain not exist Localhost: 1440 // if domain not exist
BoxPrivate // What are they for? rs type Vec<BindAddress> BoxPrivate // one IPv4 and optionally one IPv6 to connect to an NGbox on private LAN rs type Vec<BindAddress>
Public // What are they for? rs type Vec<BindAddress> Public // one IPv4 and optionally one IPv6 to connect to an NGbox on public (edge) internet. rs type Vec<BindAddress>
BoxPublicDyn // What are they for? rs type Vec<BindAddress> BoxPublicDyn // same but with dynamic IPs that can be retrieved with a special API. rs type Vec<BindAddress>
} }
] ]
*/ */
@ -128,6 +128,7 @@
$: display_brokers = Object.entries(wallet_unlocked?.brokers || {}).map( $: display_brokers = Object.entries(wallet_unlocked?.brokers || {}).map(
// @ts-ignore // @ts-ignore
([broker_id, [broker]]) => { ([broker_id, [broker]]) => {
//TODO: there can be several broker definitions for the same broker_id (if the broker can be reached by different means)
return { return {
id: broker_id, id: broker_id,
can_forward: broker.ServerV0.can_forward, can_forward: broker.ServerV0.can_forward,
@ -140,22 +141,22 @@
} }
); );
$: console.info(JSON.stringify(device_info)); // $: console.info(JSON.stringify(device_info));
$: console.debug( // $: console.debug(
"info", // "info",
device_info, // device_info,
"walletSites", // "walletSites",
walletSites, // walletSites,
"wallet", // "wallet",
$active_wallet, // $active_wallet,
"connections", // "connections",
$connections, // $connections,
"display_brokers", // "display_brokers",
display_brokers, // display_brokers,
"display_sites", // "display_sites",
display_sites // display_sites
); // );
onMount(async () => { onMount(async () => {
ng.client_info().then((res) => { ng.client_info().then((res) => {
@ -172,13 +173,13 @@
divClass="bg-gray-60 overflow-y-auto py-4 px-3 rounded dark:bg-gray-800" divClass="bg-gray-60 overflow-y-auto py-4 px-3 rounded dark:bg-gray-800"
> >
<!-- Go Back--> <!-- Go Back-->
<SidebarGroup ulClass="space-y-2"> <SidebarGroup ulClass="space-y-2" role="menu">
<li> <li>
<h2 class="text-xl mb-6">Account Info</h2> <h2 class="text-xl mb-6">Account Info</h2>
</li> </li>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<li <li
tabindex="0" tabindex="0"
role="menuitem"
class="flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" class="flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
on:keypress={() => window.history.go(-1)} on:keypress={() => window.history.go(-1)}
on:click={() => window.history.go(-1)} on:click={() => window.history.go(-1)}
@ -196,10 +197,8 @@
<li <li
class="flex items-center p-2 text-base font-normal text-gray-900" class="flex items-center p-2 text-base font-normal text-gray-900"
> >
<h3 <h3 class="flex items-center mt-2 text-lg font-normal">
class="flex items-center mt-2 text-lg font-normal text-gray-600" {site.name} account
>
{site.name}
</h3> </h3>
</li> </li>
@ -226,19 +225,19 @@
class="flex flex-col ml-3 items-start text-left overflow-auto" class="flex flex-col ml-3 items-start text-left overflow-auto"
> >
<div> <div>
<label class="text-gray-500">Name</label> <span class="text-gray-500">Name</span>
<span>{device.name}</span> <span class="break-all">{device.name}</span>
</div> </div>
<div> <div>
<label class="text-gray-500">Id</label> <span class="text-gray-500">ID</span>
<span>{device.peer_id}</span> <span class="break-all">{device.peer_id}</span>
</div> </div>
<div> <div>
<label class="text-gray-500">Version</label> <span class="text-gray-500">Version</span>
<span>{device.version}</span> <span>{device.version}</span>
</div> </div>
<div> <div>
<label class="text-gray-500">Device Type</label> <span class="text-gray-500">System</span>
<span> {device.device_name}</span> <span> {device.device_name}</span>
</div> </div>
</div> </div>
@ -274,29 +273,27 @@
/> />
</div> </div>
<div <div class="flex flex-col ml-3 items-start text-left">
class="flex flex-col ml-3 items-start text-left overflow-auto"
>
<div> <div>
<label class="text-gray-500">Address</label> <span class="text-gray-500">Address</span><br />
<span>{broker.address}</span> <span class="break-all">{broker.address}</span>
</div> </div>
<div> <div>
<label class="text-gray-500">Last Connected</label> <span class="text-gray-500">Last Connected</span><br />
<span>{broker.last_connected}</span> <span class="break-all">{broker.last_connected}</span>
</div> </div>
<div> <div>
<label class="text-gray-500">ID</label> <span class="text-gray-500">ID</span>
<span>{broker.id}</span> <span class="break-all">{broker.id}</span>
</div> </div>
<div> <!-- <div>
<label class="text-gray-500">Can Forward?</label> <span class="text-gray-500">Can Forward?</span>
<span>{broker.can_forward}</span> <span>{broker.can_forward}</span>
</div> </div>
<div> <div>
<label class="text-gray-500">Can Verify?</label> <span class="text-gray-500">Can Verify?</span>
<span>{broker.can_verify}</span> <span>{broker.can_verify}</span>
</div> </div> -->
</div> </div>
</li> </li>
{/each} {/each}
@ -364,7 +361,4 @@
li.clickable { li.clickable {
cursor: pointer; cursor: pointer;
} }
.site-cnx-details {
@apply mt-0 !important;
}
</style> </style>

6
ng-app/src/routes/User.svelte
Unescape View File

@ -123,13 +123,13 @@
<SidebarWrapper <SidebarWrapper
divClass="bg-gray-60 overflow-y-auto py-4 px-3 rounded dark:bg-gray-800" divClass="bg-gray-60 overflow-y-auto py-4 px-3 rounded dark:bg-gray-800"
> >
<SidebarGroup ulClass="space-y-2"> <SidebarGroup ulClass="space-y-2" role="menu">
<li> <li>
<h2 class="text-xl mb-6">User panel</h2> <h2 class="text-xl mb-6">User panel</h2>
</li> </li>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<li <li
tabindex="0" tabindex="0"
role="menuitem"
class="flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" class="flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
on:keypress={() => window.history.go(-1)} on:keypress={() => window.history.go(-1)}
on:click={() => window.history.go(-1)} on:click={() => window.history.go(-1)}
@ -161,9 +161,9 @@
{/if} {/if}
</li> </li>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<li <li
tabindex="0" tabindex="0"
role="menuitem"
class="flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" class="flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
on:keypress={logout} on:keypress={logout}
on:click={logout} on:click={logout}

65
ng-app/src/routes/WalletInfo.svelte
Unescape View File

@ -79,10 +79,10 @@
} }
let wallet_remove_modal_open = false; let wallet_remove_modal_open = false;
async function remove_wallet_clicked() { function remove_wallet_clicked() {
wallet_remove_modal_open = true; wallet_remove_modal_open = true;
} }
// TODO: WTF, this does not close the modal???
const close_modal = () => { const close_modal = () => {
wallet_remove_modal_open = false; wallet_remove_modal_open = false;
}; };
@ -90,7 +90,7 @@
async function remove_wallet_confirmed() { async function remove_wallet_confirmed() {
if (!active_wallet) return; if (!active_wallet) return;
// TODO: Wait for implementation // TODO: Wait for implementation
// ng.wallet_remove($active_wallet.id); // await ng.wallet_remove($active_wallet.id);
close_active_wallet(); close_active_wallet();
} }
</script> </script>
@ -102,16 +102,16 @@
<SidebarWrapper <SidebarWrapper
divClass="bg-gray-60 overflow-y-auto py-4 px-3 rounded dark:bg-gray-800" divClass="bg-gray-60 overflow-y-auto py-4 px-3 rounded dark:bg-gray-800"
> >
<SidebarGroup ulClass="space-y-2"> <SidebarGroup ulClass="space-y-2" role="menu">
<li> <li>
<h2 class="text-xl mb-6">Wallet Info</h2> <h2 class="text-xl mb-6">Wallet Info</h2>
</li> </li>
<!-- Go Back --> <!-- Go Back -->
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<li <li
tabindex="0" tabindex="0"
class="text-left text-left flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" role="menuitem"
class="text-left flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
on:keypress={() => window.history.go(-1)} on:keypress={() => window.history.go(-1)}
on:click={() => window.history.go(-1)} on:click={() => window.history.go(-1)}
> >
@ -207,6 +207,7 @@
<!-- Remove Wallet --> <!-- Remove Wallet -->
<li <li
tabindex="0" tabindex="0"
role="menuitem"
class="text-left flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" class="text-left flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
on:keypress={remove_wallet_clicked} on:keypress={remove_wallet_clicked}
on:click={remove_wallet_clicked} on:click={remove_wallet_clicked}
@ -218,32 +219,33 @@
/> />
</div> </div>
<span class="ml-3">Remove Wallet from Device</span> <span class="ml-3">Remove Wallet from Device</span>
<Modal
autoclose
outsideclose
bind:open={wallet_remove_modal_open}
title="Remove Wallet"
>
<p class="mt-4">
Are you sure you want to remove this wallet from your device?
</p>
<div class="mt-4 flex justify-end">
<button on:click={close_modal}> Cancel </button>
<button
class="mr-2 bg-primary-700 text-white"
on:click={remove_wallet_confirmed}
>
Remove
</button>
</div>
</Modal>
</li> </li>
<Modal
autoclose
outsideclose
bind:open={wallet_remove_modal_open}
title="Remove Wallet"
>
<p class="mt-4">
Are you sure you want to remove this wallet from your device?
</p>
<div class="mt-4 flex justify-end">
<button on:click={close_modal}> Cancel </button>
<button
class="mr-2 bg-primary-700 text-white"
on:click={remove_wallet_confirmed}
>
Remove
</button>
</div>
</Modal>
<!-- TODO: Show QR-Code --> <!-- TODO: Show QR-Code -->
{#if false} {#if false}
<li <li
tabindex="0" tabindex="0"
role="menuitem"
class="text-left flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" class="text-left flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
> >
<div> <div>
@ -253,16 +255,17 @@
/> />
</div> </div>
<span class="ml-3">Wallet QR-Code</span> <span class="ml-3">Wallet QR-Code</span>
<Modal autoclose outsideclose title="My Wallet QR-Code"
>Use this QR-Code to log in with your wallet on new devices.
</Modal>
</li> </li>
<Modal autoclose outsideclose title="My Wallet QR-Code"
>Use this QR-Code to log in with your wallet on new devices.
</Modal>
{/if} {/if}
<!-- TODO: Copy Wallet Link --> <!-- TODO: Copy Wallet Link -->
{#if false} {#if false}
<li <li
tabindex="0" tabindex="0"
role="menuitem"
class="text-left flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" class="text-left flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
> >
<div> <div>
@ -279,6 +282,7 @@
{#if false} {#if false}
<li <li
tabindex="0" tabindex="0"
role="menuitem"
class="text-left flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" class="text-left flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
> >
<!-- TODO: Same as with the trash icon, this is not same-sized as the others. --> <!-- TODO: Same as with the trash icon, this is not same-sized as the others. -->
@ -345,7 +349,4 @@
li.clickable { li.clickable {
cursor: pointer; cursor: pointer;
} }
.site-cnx-details {
@apply mt-0 !important;
}
</style> </style>

Write Preview
Loading…
Cancel
Save