beenull/webvm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Svelte: Extract NetworkingTab button into a reusable component

Browse source
This commit is contained in:
Alessandro Pignotti 2024-10-13 22:30:57 +02:00
parent 134a947547
commit f88f568f7e
2 changed files with 12 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/lib/NetworkingTab.svelte
View file

@ -1,6 +1,7 @@
<script> <script>
import { networkData, startLogin } from '$lib/network.js' import { networkData, startLogin } from '$lib/network.js'
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import PanelButton from './PanelButton.svelte';
var dispatch = createEventDispatcher(); var dispatch = createEventDispatcher();
var connectionState = networkData.connectionState; var connectionState = networkData.connectionState;
function handleConnect() { function handleConnect() {
@ -97,6 +98,6 @@
} }
</script> </script>
<h1 class="text-lg font-bold">Networking</h1> <h1 class="text-lg font-bold">Networking</h1>
<a href={getClickUrl($connectionState)} target="_blank" on:click={getClickHandler($connectionState)} on:contextmenu={getRightClickHandler($connectionState)}><p class="bg-neutral-700 p-2 rounded-md {isClickableState($connectionState) ? "hover:bg-neutral-500 cursor-pointer" : ""}" title={getButtonTooltip($connectionState)}><img src="assets/tailscale.svg" class="inline w-8"/><span class="ml-1">{getButtonText($connectionState)}</span></p></a> <PanelButton buttonIcon="assets/tailscale.svg" clickUrl={getClickUrl($connectionState)} clickHandler={getClickHandler($connectionState)} rightClickHandler={getRightClickHandler($connectionState)} buttonTooltip={getButtonTooltip($connectionState)} buttonText={getButtonText($connectionState)}/>
<p>WebVM can connect to the Internet via Tailscale</p> <p>WebVM can connect to the Internet via Tailscale</p>
<p>Using Tailscale is required since browser do not support TCP/UDP sockets (yet!)</p> <p>Using Tailscale is required since browser do not support TCP/UDP sockets (yet!)</p>

10
src/lib/PanelButton.svelte Normal file
View file

@ -0,0 +1,10 @@
<script>
export let clickUrl = null;
export let clickHandler = null;
export let rightClickHandler = null;
export let buttonTooltip = null;
export let buttonText;
export let buttonIcon;
</script>
<a href={clickUrl} target="_blank" on:click={clickHandler} on:contextmenu={rightClickHandler}><p class="bg-neutral-700 p-2 rounded-md {(clickUrl != null || clickHandler != null) ? "hover:bg-neutral-500 cursor-pointer" : ""}" title={buttonTooltip}><img src={buttonIcon} class="inline w-8"/><span class="ml-1">{buttonText}</span></p></a>