jeffemmett
/
ggraph
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI binding fixes kinda

This commit is contained in:
Orion Reed 2024-07-19 13:10:32 +02:00
parent 5070b2f7e5
commit c668f32d04
1 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/AgentButton.tsx
View File

@ -16,10 +16,12 @@ export function AgentButton() {
{ name: 'Bark', boundClientIds: ['312342', '312343'], color: '#32d96c' }, { name: 'Bark', boundClientIds: ['312342', '312343'], color: '#32d96c' },
{ name: 'Meow', boundClientIds: [], color: '#3db9eb' }, { name: 'Meow', boundClientIds: [], color: '#3db9eb' },
]) ])
const [boundToAgent, setBoundToAgent] = useState<string | null>('Meow') const [boundToAgent, setBoundToAgent] = useState<string | null>('Bark')
const sansYou = agents.filter((agent: Agent) => agent.name !== boundToAgent)
const boundAgents = sansYou.filter((agent: Agent) => agent.boundClientIds.length > 0)
const unboundAgents = sansYou.filter((agent: Agent) => agent.boundClientIds.length === 0)
const you = agents.find((agent: Agent) => agent.name === boundToAgent) const you = agents.find((agent: Agent) => agent.name === boundToAgent)
const agentsWithoutYou = agents.filter((agent: Agent) => agent.name !== boundToAgent)
const handleColorChange = (name: string, color: string) => { const handleColorChange = (name: string, color: string) => {
setAgents(agents.map(agent => setAgents(agents.map(agent =>
@ -59,7 +61,7 @@ export function AgentButton() {
onBind={() => handleBind(you.name)} onBind={() => handleBind(you.name)}
/>} />}
<Separator /> <Separator />
{agentsWithoutYou.map((agent: Agent) => ( {boundAgents.map((agent: Agent) => (
<AgentItem <AgentItem
key={agent.name} key={agent.name}
agent={agent} agent={agent}
@ -68,17 +70,28 @@ export function AgentButton() {
onBind={() => handleBind(agent.name)} onBind={() => handleBind(agent.name)}
/> />
))} ))}
<Separator />
{unboundAgents.map((agent: Agent) => (
<AgentItem
key={agent.name}
agent={agent}
isUnbound
onColorChange={(color) => handleColorChange(agent.name, color)}
onDelete={() => handleDelete(agent.name)}
onBind={() => handleBind(agent.name)}
/>
))}
</Dropdown> </Dropdown>
</div> </div>
) )
} }
function AgentItem({ agent, onColorChange, onDelete, onBind }: { agent: Agent, onColorChange: (color: string) => void, onDelete: () => void, onBind: () => void }) { function AgentItem({ agent, isUnbound, onColorChange, onDelete, onBind }: { agent: Agent, isUnbound?: boolean, onColorChange: (color: string) => void, onDelete: () => void, onBind: () => void }) {
return <DropdownItem> return <DropdownItem>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}> <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<ColorPicker color={agent.color} onChange={onColorChange} /> {!isUnbound && <ColorPicker color={agent.color} onChange={onColorChange} />}
<span onClick={onBind}>{agent.name}</span> <span onClick={onBind} style={{ color: isUnbound ? 'grey' : 'black' }}>{agent.name}</span>
</div> </div>
<DeleteButton onClick={onDelete} /> <DeleteButton onClick={onDelete} />
</div> </div>