DMXStage/dmxconnect
2
0
Fork 1
generated from thinkode/modelRepository
Code Issues 6 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

peripheral selection optimized

Browse Source
This commit is contained in:
Valentin Boulanger
2025-01-25 12:16:29 +01:00
parent 6941c06661
commit 0114ed03bf
2 changed files with 42 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/Settings/DeviceCard.svelte
View File

@@ -37,7 +37,7 @@
</script>
<div class="card" on:dblclick={dblclick}>
<div class="profile" on:mousedown={click} style="color: {disconnected ? $colors.first : $colors.white}; border: {selected ? "solid " + $colors.first : "none"};">
<div class="profile {selected ? "selected" : "unselected"}" on:mousedown={click} style="color: {disconnected ? $colors.first : $colors.white};">
<div>
<p>{#if disconnected}<i class='bx bx-no-signal' style="font-size:100%; color: var(--nok-color);"></i> {/if}{title}</p>
<h6 class="subtitle">{type} {location != '' ? "- " : ""}<i>{location}</i></h6>
@@ -60,16 +60,29 @@
<style>
.profile:hover{
background-color: var(--third-color);
.unselected:hover{
background: linear-gradient(to bottom right, var(--second-color), var(--third-color));
}
.card{
position: relative;
}
.profile {
background-color: var(--second-color);
.selected {
background-color: var(--first-color);
margin: 0.2em;
padding-left: 0.3em;
padding-bottom: 0.3em;
border-radius: 0.2em;
display: flex;
justify-content: space-between;
text-align: left;
cursor: pointer;
}
.unselected{
background-color: var(--third-color);
background: fixed;
margin: 0.2em;
padding-left: 0.3em;
padding-bottom: 0.3em;
border-radius: 0.2em;
display: flex;
justify-content: space-between;

33
frontend/src/components/Settings/InputsOutputsContent.svelte
View File

@@ -117,14 +117,29 @@
let selectedPeripheralSN = null
let selectedPeripheralSettings = {}
function selectPeripheral(peripheral){
// Load the settings array
GetPeripheralSettings(peripheral.ProtocolName, peripheral.SerialNumber).then((peripheralSettings) => {
selectedPeripheralSettings = peripheralSettings
}).catch((error) => {
generateToast('error', 'bx-error', $_("getPeripheralSettingsErrorToast"))
})
// Select the current peripheral
selectedPeripheralSN = peripheral.SerialNumber
// Load the settings array if the peripheral is detected
if (peripheral.isDetected){
GetPeripheralSettings(peripheral.ProtocolName, peripheral.SerialNumber).then((peripheralSettings) => {
selectedPeripheralSettings = peripheralSettings
}).catch((error) => {
generateToast('error', 'bx-error', $_("getPeripheralSettingsErrorToast"))
})
// Select the current peripheral
selectedPeripheralSN = peripheral.SerialNumber
}
}
$: {
Object.entries($peripherals).filter(([serialNumber, peripheral]) => {
if (!peripheral.isDetected && peripheral.isSaved && selectedPeripheralSN == serialNumber) {
selectedPeripheralSN = null
selectedPeripheralSettings = {}
}
});
}
function unselectPeripheral(){
selectedPeripheralSN = null
selectedPeripheralSettings = {}
}
// Get the number of saved peripherals
$: savedPeripheralNumber = Object.values($peripherals).filter(peripheral => peripheral.isSaved).length;
@@ -156,7 +171,7 @@
{#each Object.entries($peripherals) as [serialNumber, peripheral]}
{#if peripheral.isSaved}
<DeviceCard on:delete={() => removePeripheral(peripheral)} on:dblclick={() => removePeripheral(peripheral)} on:click={() => selectPeripheral(peripheral)}
disconnected={!peripheral.isDetected} title={peripheral.Name == "" ? "Please wait..." : peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} selected={serialNumber == selectedPeripheralSN} removable signalizable/>
disconnected={!peripheral.isDetected} title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} selected={serialNumber == selectedPeripheralSN} removable signalizable/>
{/if}
{/each}
{:else}