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

23-os2l #32

Merged
thinkode merged 8 commits from 23-os2l into develop 2025-11-14 10:46:25 +00:00
Conversation 0 Commits 8 Files Changed 18 +62 -66
5 changed files with 62 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b579bb743a - Show all commits

9
frontend/src/components/General/Tab.svelte
View File

@@ -15,15 +15,14 @@
</script>
<div class="tabContainer" style="color: {$colors.white};">
<div class="headerContainer"
style='background-color: {$colors.third};'>
<div class="headerContainer">
{#each tabs as tab, index}
<RoundedButton text={tab.title} icon={tab.icon} tooltip={tab.tooltip} active={ (activeTab == index) ? true : false } on:click={() => setActiveTab(index)}/>
<RoundedButton style="margin: 0.1em;" text={tab.title} icon={tab.icon} tooltip={tab.tooltip} active={ (activeTab !== index) ? true : false } on:click={() => setActiveTab(index)}/>
{/each}
</div>
<div class="bodyContainer"
style='background-color: {$colors.first}; max-width: {maxWidth}; max-height: {maxHeight};'>
style='background-color: {$colors.first}; max-width: {maxWidth};'>
{#if tabs[activeTab]}
<svelte:component this={tabs[activeTab].component} />
{/if}
@@ -41,13 +40,11 @@
}
.headerContainer{
padding: 0.1em;
margin-bottom: 1em;
border-radius: 0.5em;
}
.bodyContainer{
padding: 0.5em;
background-color: red;
border-radius: 0.5em;
overflow:auto;
}
</style>

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

@@ -38,7 +38,7 @@
</script>
<div class="card" on:dblclick={dblclick}>
<div class="{selected ? "selected" : "unselected"} {status == "PERIPHERAL_CONNECTING" ? "waiting" : ""}" on:mousedown={click} style="color: {(status == "PERIPHERAL_DISCONNECTED") ? $colors.first : $colors.white};">
<div class="{selected ? "selected" : "unselected"} {status == "PERIPHERAL_CONNECTING" ? "waiting" : ""}" on:mousedown={click} style="color: {$colors.white};">
<div style="z-index: 1;">
<p>{#if status == "PERIPHERAL_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>
@@ -52,7 +52,7 @@
<div class="actions">
<InfoButton on:click={add} color="{(status == "PERIPHERAL_DISCONNECTED") ? $colors.first : $colors.white}" style="margin: 0.2em; display: { addable ? 'flex' : 'none' }" icon='bxs-message-square-add' interactive message={$_("projectHardwareAddTooltip")}/>
<InfoButton on:click={remove} color="{(status == "PERIPHERAL_DISCONNECTED") ? $colors.first : $colors.white}" style="margin: 0.2em; display: { removable ? 'flex' : 'none' }" icon='bx-trash' interactive message={$_("projectHardwareDeleteTooltip")}/>
<InfoButton on:click={remove} color="{$colors.white}" style="margin: 0.2em; display: { removable ? 'flex' : 'none' }" icon='bx-trash' interactive message={$_("projectHardwareDeleteTooltip")}/>
<InfoButton style="transition: background-color 0.3s ease; margin: 0.2em; display: { (status == "PERIPHERAL_ACTIVATED" || status == "PERIPHERAL_DEACTIVATED") ? 'flex' : 'none' }" background={ (signalizable && signalized) ? $colors.orange : (status == "PERIPHERAL_ACTIVATED") ? $colors.ok : (status == "PERIPHERAL_DEACTIVATED") ? $colors.nok : null} icon='bx-pulse' hide={!signalizable}/>
</div>
</div>
@@ -63,19 +63,33 @@
background: linear-gradient(to bottom right, var(--second-color), var(--third-color));
}
.card{
position: relative;
position: relative;
}
.selected {
background-color: var(--first-color);
background-color: var(--third-color);
position: relative;
margin: 0.2em;
padding-left: 0.3em;
padding-bottom: 0.3em;
border-radius: 0.2em;
padding: 0.2em 0.3em 0.5em 0.5em;
border-radius: 0.5em;
display: flex;
justify-content: space-between;
text-align: left;
cursor: pointer;
overflow: hidden;
}
.unselected{
background-color: var(--second-color);
position: relative;
margin: 0.2em;
padding: 0.2em 0.3em 0.5em 0.5em;
border-radius: 0.5em;
display: flex;
justify-content: space-between;
text-align: left;
cursor: pointer;
overflow: hidden;
}
.subtitle{
margin-bottom: 0.5em;
}
@@ -94,7 +108,7 @@
.waiting::before{
content: '';
position: absolute;
background: linear-gradient(var(--second-color), var(--first-color));
background: linear-gradient(var(--first-color), var(--second-color));
width: 100%;
height: 60%;
animation: rotate 3s linear infinite;
@@ -108,21 +122,6 @@
border-radius: 0.2em;
}
.unselected{
background-color: var(--third-color);
background: fixed;
position: relative;
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;
overflow: hidden;
}
/* Définition de l'animation */
@keyframes rotate {
from {

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

@@ -1,9 +1,8 @@
<script lang=ts>
import DeviceCard from "./DeviceCard.svelte";
import Tab from "../General/Tab.svelte";
import Input from "../General/Input.svelte";
import { t, _ } from 'svelte-i18n'
import { generateToast, needProjectSave, peripherals } from "../../stores";
import { generateToast, needProjectSave, peripherals, colors } from "../../stores";
import { get } from "svelte/store"
import { UpdatePeripheralSettings, GetPeripheralSettings, RemovePeripheral, AddPeripheral } from "../../../wailsjs/go/main/App";
import RoundedButton from "../General/RoundedButton.svelte";
@@ -79,22 +78,25 @@
</script>
<div class="hardware">
<div style="padding: 0.5em;">
<p style="margin-bottom: 1em;">{$_("projectHardwareAvailableLabel")}</p>
<div class="libraryPanel">
<div class="availableHardware">
<p style="color: var(--first-color);"><i class='bx bxs-plug'></i> {$_("projectHardwareDetectedLabel")}</p>
{#each Object.entries($peripherals) as [serialNumber, peripheral]}
{#if peripheral.isDetected}
<DeviceCard on:add={() => addPeripheral(peripheral)} on:dblclick={() => {
if(!peripheral.isSaved)
addPeripheral(peripheral)
}}
status="PERIPHERAL_CONNECTED" title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={"S/N: " + peripheral.SerialNumber} addable={!peripheral.isSaved}/>
{/if}
{/each}
<p style="color: var(--first-color);"><i class='bx bxs-network-chart' ></i> {$_("projectHardwareOthersLabel")}</p>
<RoundedButton on:click={()=>addPeripheral({Name: "OS2L connection", ProtocolName: "OS2L", SerialNumber: ""})} text="Add an OS2L peripheral" icon="bx-plus-circle" tooltip="Configure an OS2L connection"/>
<p style="color: var(--white-color);"><i class='bx bxs-plug'></i> {$_("projectHardwareDetectedLabel")}</p>
</div>
{#each Object.entries($peripherals) as [serialNumber, peripheral]}
{#if peripheral.isDetected}
<DeviceCard on:add={() => addPeripheral(peripheral)} on:dblclick={() => {
if(!peripheral.isSaved)
addPeripheral(peripheral)
}}
status="PERIPHERAL_CONNECTED" title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={"S/N: " + peripheral.SerialNumber} addable={!peripheral.isSaved}/>
{/if}
{/each}
<div class="availableHardware">
<p style="color: var(--white-color);"><i class='bx bxs-network-chart' ></i> {$_("projectHardwareOthersLabel")}</p>
</div>
<DeviceCard on:add={() => addPeripheral({Name: "OS2L virtual device", ProtocolName: "OS2L", SerialNumber: ""})}
on:dblclick={() => addPeripheral({Name: "OS2L virtual device", ProtocolName: "OS2L", SerialNumber: ""})}
status="PERIPHERAL_CONNECTED" title={"OS2L virtual device"} type={"OS2L"} location={""} addable={true}/>
</div>
<div style="padding: 0.5em; flex:2; width:100%;">
@@ -111,7 +113,6 @@
<i>{$_("projectHardwareEmptyLabel")}</i>
{/if}
</div>
<p style="margin-bottom: 1em;">{$_("projectHardwareSettingsLabel")} (<b>{selectedPeripheralSN == null ? $_("projectHardwareNoSelection") : selectedPeripheralSN}</b>)</p>
<div class='flexSettings'>
{#if Object.keys(selectedPeripheralSettings).length > 0}
{#each Object.entries(selectedPeripheralSettings) as [settingName, settingValue]}
@@ -119,8 +120,6 @@
<Input on:blur={(event) => validate(settingName, event.detail.target.value)} label={$t(settingName)} type="{typeof(settingValue)}" width='100%' value="{settingValue}"/>
</div>
{/each}
{:else}
<i>{$_("projectHardwareNoSettingLabel")}</i>
{/if}
</div>
</div>
@@ -149,19 +148,23 @@
border-radius: 0.5em;
padding: 0.2em;
max-height: calc(100vh - 300px);
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
/* overflow: visible; */
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.availableHardware::-webkit-scrollbar {
display: none;
}
.configuredHardware {
background-color: var(--second-color);
border-radius: 0.5em;
.libraryPanel {
padding: 0.5em;
padding: 0.2em;
/* width: 13em; */
height: calc(100vh - 2*8px - 2*4px - 40px - 1em - 2*0.1em - 2*0.1em - 2*0.4em - 21.6px - 2*0.5em);
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.libraryPanel::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge */
}
.configuredHardware {
display: flex;
flex-wrap: wrap;
}

2
frontend/src/components/Settings/Settings.svelte
View File

@@ -12,7 +12,7 @@
</script>
<!-- Project tabcontrol -->
<Tab { tabs } maxHeight='73vh'/>
<Tab { tabs }/>
<style>
</style>

9
frontend/src/lang/en.json
View File

@@ -34,16 +34,13 @@
"projectHardwareShowLabel" : "My Show",
"projectHardwareInputsLabel": "INPUTS",
"projectHardwareOutputsLabel": "OUTPUTS",
"projectHardwareDeleteTooltip": "Delete this peripheral",
"projectHardwareAddTooltip": "Add this peripheral to project",
"projectHardwareDeleteTooltip": "Delete",
"projectHardwareAddTooltip": "Add to project",
"projectHardwareNoSelection": "Empty",
"projectHardwareAvailableLabel": "Available peripherals",
"projectHardwareSavedLabel": "Project peripherals",
"projectHardwareSavedLabel": "Saved in project",
"projectHardwareDetectedLabel": "Detected",
"projectHardwareOthersLabel": "Others",
"projectHardwareEmptyLabel": "No hardware saved for this project",
"projectHardwareSettingsLabel": "Peripheral settings",
"projectHardwareNoSettingLabel": "No setting can be displayed",
"peripheralArrivalToast": "Peripheral inserted:",
"peripheralRemovalToast": "Peripheral removed:",