Skip to content

Commit

Permalink
Web improved connect UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Oct 27, 2024
1 parent 175e923 commit bd9482b
Show file tree
Hide file tree
Showing 6 changed files with 128 additions and 128 deletions.
10 changes: 0 additions & 10 deletions platforms/interface/ui/components/connectionDropdown.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,6 @@
<h5>Connection code <span class="text-red-500">*</span></h5>
<input value={item.code} placeholder="crs_abcde12345" class="input mt-1" type="text" id="code" />
</div>

<div>
<h5>MAC address</h5>
<input value={item.mac ?? ""} placeholder="AA:BB:CC:DD:EE:FF" class="input mt-1" type="text" id="mac" />
</div>
</div>
</ModularDialog>
<button
Expand Down Expand Up @@ -103,11 +98,6 @@
<h5>Connection code <span class="text-red-500">*</span></h5>
<input placeholder="crs_abcde12345" class="input mt-1" type="text" id="code" />
</div>

<div>
<h5>MAC address</h5>
<input placeholder="AA:BB:CC:DD:EE:FF" class="input mt-1" type="text" id="mac" />
</div>
</div>
</ModularDialog>
</div>
Expand Down
50 changes: 23 additions & 27 deletions platforms/interface/ui/utils/connection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ export const editConnectionCode = (code: string) => {

const nameInput = document.getElementById("name") as HTMLInputElement
const codeInput = document.getElementById("code") as HTMLInputElement
const macInput = document.getElementById("mac") as HTMLInputElement

if (nameInput.value === "") {
return alert("Please enter a name for your connection")
Expand All @@ -27,35 +26,32 @@ export const editConnectionCode = (code: string) => {
settings.connectionCodes[id] = {
name: nameInput.value,
code: codeInput.value,
mac: macInput.value,
}

setSettings(settings)
}

export const addConnectionCode = () => {
const settings = getSettings()

const nameInput = document.getElementById("name") as HTMLInputElement
const codeInput = document.getElementById("code") as HTMLInputElement
const macInput = document.getElementById("mac") as HTMLInputElement

if (nameInput.value === "") {
return alert("Please enter a name for your connection")
}

if (!codeInput.value.startsWith("crs_")) {
return alert("Invalid connection code! The connection code must start with: crs_")
}

settings.connectionCodes = [
...settings.connectionCodes,
{
name: nameInput.value,
code: codeInput.value,
mac: macInput.value,
},
]

setSettings(settings)
}
const settings = getSettings()

const nameInput = document.getElementById("name") as HTMLInputElement
const codeInput = document.getElementById("code") as HTMLInputElement

if (nameInput.value === "") {
return alert("Please enter a name for your connection")
}

if (!codeInput.value.startsWith("crs_")) {
return alert("Invalid connection code! The connection code must start with: crs_")
}

settings.connectionCodes = [
...settings.connectionCodes,
{
name: nameInput.value,
code: codeInput.value,
},
]

setSettings(settings)
}
91 changes: 3 additions & 88 deletions platforms/interface/web/src/components/connect.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,7 @@
<div class="m-20 mx-auto flex w-full max-w-2xl flex-row px-3">
<div class="flex w-full flex-col gap-3">
{#each $settings.connectionCodes as item}
<div class="transparent-900 flex w-full flex-col space-y-1 rounded-xl p-5">
<div class="flex flex-row items-center justify-between">
<div class="flex flex-row items-center gap-2">
<div class="transparent-800 rounded-full p-3">
<Power id="power" class="h-5 w-5 text-white" />
</div>
<h4>{item.name}</h4>
</div>
<div>
<ModularDialog title={"Edit Remote Connection"} description={"You can get your connection code from the Cores desktop app."}>
<slot slot="openButton">
<Dialog.Trigger class="rounded-full bg-white p-3 text-black duration-200 ease-in-out hover:bg-gray-300">
<Pencil class="h-5 w-5" />
</Dialog.Trigger>
</slot>
<slot slot="confirmButton">
<Dialog.Close
on:click={() => {
editConnectionCode(item.code)
}}
class="smallButton"
>
<Pencil />
Edit
</Dialog.Close>
</slot>
<slot slot="deleteButton">
<button
class="smallButton border-red-600 bg-red-600 text-white hover:text-red-600"
on:click={() => deleteConnectionCode(item.code)}
>
<Trash2 />
Delete
</button>
</slot>
<div class="flex flex-col flex-wrap gap-3">
<div>
<h5>Name <span class="text-red-500">*</span></h5>
<input value={item.name} placeholder="My Home PC" class="input mt-1" type="text" id="name" />
</div>

<div>
<h5>Connection code <span class="text-red-500">*</span></h5>
<input value={item.code} placeholder="crs_abcde12345" class="input mt-1" type="text" id="code" />
</div>

<div>
<h5>MAC address</h5>
<input value={item.mac ?? ""} placeholder="AA:BB:CC:DD:EE:FF" class="input mt-1" type="text" id="mac" />
</div>
</div>
</ModularDialog>
<button
class="rounded-full bg-white p-3 text-black duration-200 ease-in-out hover:bg-gray-300"
on:click={() => {
$settings.connectionCode = item.code
$state.currentCode = item.code
goto("/home")
}}
>
<Plug class="h-5 w-5" />
</button>
</div>
</div>
<div class="flex flex-row flex-wrap items-center justify-start gap-1 pt-1">
<div class="transparent-800 flex flex-row items-center gap-1 rounded-xl p-1 px-3">
<KeyRound class="h-5 w-5" color={"#d3cfcf"} />
<h5>crs_********{item.code.slice(-2)}</h5>
</div>
<div class="transparent-800 flex flex-row items-center gap-1 rounded-xl p-1 px-3">
<Network class="h-5 w-5" color={"#d3cfcf"} />
<h5>{item.mac || "N/A"}</h5>
</div>
<div class="transparent-800 flex flex-row items-center gap-1 rounded-xl p-1 px-3">
<Globe class="h-5 w-5" color={"#d3cfcf"} />
<h5>Unknown</h5>
</div>
</div>
</div>
<ConnectItem {item} />
{/each}
{#if $settings.connectionCodes.length === 0}
<h2 class="mb-5 text-center">Add a new remote connection</h2>
Expand All @@ -104,23 +26,16 @@
<h5>Connection code <span class="text-red-500">*</span></h5>
<input placeholder="crs_abcde12345" class="input mt-1" type="text" id="code" />
</div>

<div>
<h5>MAC address</h5>
<input placeholder="AA:BB:CC:DD:EE:FF" class="input mt-1" type="text" id="mac" />
</div>
</div>
</ModularDialog>
</div>
</div>

<script lang="ts">
import { settings } from "ui/stores/settings.ts"
import { Plug, Trash2, Pencil, Network, KeyRound, Power, Globe } from "lucide-svelte"
import { goto } from "$app/navigation"
import { state } from "../stores/state.ts"
import ModularDialog from "ui/components/modularDialog.svelte"
import { Plus } from "lucide-svelte"
import { Dialog } from "bits-ui"
import { addConnectionCode, deleteConnectionCode, editConnectionCode } from "ui/utils/connection.ts"
import { addConnectionCode } from "ui/utils/connection.ts"
import ConnectItem from "./connectItem.svelte"
</script>
101 changes: 101 additions & 0 deletions platforms/interface/web/src/components/connectItem.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<div class="transparent-900 flex w-full flex-col space-y-1 rounded-xl p-5">
<div class="flex flex-row items-center justify-between">
<div class="flex flex-row items-center gap-2">
<div class="transparent-800 flex items-center justify-center rounded-full p-3">
{#if status === "online"}
<img src="/favicon.ico" alt="Cores logo" class="h-5 w-5" />
{:else}
<img src="/grayscale.png" alt="Cores logo" class="h-5 w-5" />
{/if}
</div>
<h4>{item.name}</h4>
</div>
<div>
<ModularDialog title={"Edit Remote Connection"} description={"You can get your connection code from the Cores desktop app."}>
<slot slot="openButton">
<Dialog.Trigger class="rounded-full bg-white p-3 text-black duration-200 ease-in-out hover:bg-gray-300">
<Pencil class="h-5 w-5" />
</Dialog.Trigger>
</slot>
<slot slot="confirmButton">
<Dialog.Close
on:click={() => {
editConnectionCode(item.code)
}}
class="smallButton"
>
<Pencil />
Edit
</Dialog.Close>
</slot>
<slot slot="deleteButton">
<button
class="smallButton border-red-600 bg-red-600 text-white hover:text-red-600"
on:click={() => deleteConnectionCode(item.code)}
>
<Trash2 />
Delete
</button>
</slot>
<div class="flex flex-col flex-wrap gap-3">
<div>
<h5>Name <span class="text-red-500">*</span></h5>
<input value={item.name} placeholder="My Home PC" class="input mt-1" type="text" id="name" />
</div>

<div>
<h5>Connection code <span class="text-red-500">*</span></h5>
<input value={item.code} placeholder="crs_abcde12345" class="input mt-1" type="text" id="code" />
</div>
</div>
</ModularDialog>
<button
class="rounded-full bg-white p-3 text-black duration-200 ease-in-out hover:bg-gray-300"
on:click={() => {
$settings.connectionCode = item.code
$state.currentCode = item.code
goto("/home")
}}
>
<Plug class="h-5 w-5" />
</button>
</div>
</div>
<div class="flex flex-row flex-wrap items-center justify-start gap-1 pt-1">
<div class="transparent-800 flex flex-row items-center gap-1 rounded-xl p-1 px-3">
<Globe class="h-5 w-5" color={"#d3cfcf"} />
<h5>{status === "online" ? "Online" : "Unknown"}</h5>
</div>
<div class="transparent-800 flex flex-row items-center gap-1 rounded-xl p-1 px-3">
<KeyRound class="h-5 w-5" color={"#d3cfcf"} />
<h5>crs_********{item.code.slice(-2)}</h5>
</div>
</div>
</div>

<script lang="ts">
import { Plug, Trash2, Pencil, Network, KeyRound, Globe } from "lucide-svelte"
import { goto } from "$app/navigation"
import ModularDialog from "ui/components/modularDialog.svelte"
import { Dialog } from "bits-ui"
import { deleteConnectionCode, editConnectionCode } from "ui/utils/connection.ts"
import { settings } from "ui/stores/settings.ts"
import { state } from "../stores/state.ts"
import { onMount } from "svelte"
export let item: LibSettings["connectionCodes"][0]
type Status = "unknown" | "online" | "offline"
let status = "unknown" as Status
onMount(async () => {
const res = await fetch(`https://rtc-usw.levminer.com/status/${item.code}`)
const json = await res.json()
if (json.online) {
status = "online"
}
})
</script>
4 changes: 1 addition & 3 deletions platforms/interface/web/src/routes/(app)/settings/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,13 +113,11 @@
setTimeout(() => {
const nameInput = document.getElementById("name") as HTMLInputElement
const codeInput = document.getElementById("code") as HTMLInputElement
const macInput = document.getElementById("mac") as HTMLInputElement
console.log(nameInput, codeInput, macInput)
console.log(nameInput, codeInput)
nameInput.value = name
codeInput.value = connectionCode
macInput.value = mac
}, 250)
}
})
Expand Down
Binary file added platforms/interface/web/static/grayscale.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit bd9482b

Please sign in to comment.