117 lines
2.8 KiB
TypeScript
117 lines
2.8 KiB
TypeScript
import * as React from "bloatless-react";
|
|
|
|
import {
|
|
Channel,
|
|
addSecondaryChannel,
|
|
cannotAddSecondaryChannel,
|
|
cannotLeaveChannel,
|
|
cannotSetChannel,
|
|
leaveChannel,
|
|
newSecondaryChannelName,
|
|
primaryChannel,
|
|
removeSecondaryChannel,
|
|
secondaryChannels,
|
|
senderName,
|
|
setChannel,
|
|
} from "../model";
|
|
|
|
import { translation } from "../translations";
|
|
|
|
const secondaryChannelConverter: React.ListItemConverter<Channel> = (
|
|
channel
|
|
) => {
|
|
function remove() {
|
|
removeSecondaryChannel(channel);
|
|
}
|
|
|
|
return (
|
|
<div class="tile padding-0">
|
|
<div class="flex-row justify-apart align-center">
|
|
<b class="padding-h">{channel.channelName}</b>
|
|
|
|
<button
|
|
class="danger"
|
|
aria-label={translation.removeSecondaryChannel}
|
|
on:click={remove}
|
|
>
|
|
<span class="icon">delete</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export function CommunicationSection() {
|
|
return (
|
|
<div>
|
|
<h2>{translation.communication}</h2>
|
|
|
|
<label class="tile">
|
|
<span class="icon">account_circle</span>
|
|
<div>
|
|
<span>{translation.yourName}</span>
|
|
<input
|
|
bind:value={senderName}
|
|
placeholder={translation.yourNamePlaceholder}
|
|
></input>
|
|
</div>
|
|
</label>
|
|
|
|
<hr></hr>
|
|
|
|
<label class="tile">
|
|
<span class="icon">forum</span>
|
|
<div>
|
|
<span>{translation.primaryChannel}</span>
|
|
<input
|
|
bind:value={primaryChannel}
|
|
on:enter={setChannel}
|
|
placeholder={translation.channelPlaceholder}
|
|
></input>
|
|
</div>
|
|
</label>
|
|
<div class="flex-row width-input justify-end">
|
|
<button
|
|
class="danger width-50"
|
|
on:click={leaveChannel}
|
|
toggle:disabled={cannotLeaveChannel}
|
|
>
|
|
{translation.leaveChannel}
|
|
</button>
|
|
<button
|
|
class="primary width-50"
|
|
on:click={setChannel}
|
|
toggle:disabled={cannotSetChannel}
|
|
>
|
|
{translation.setInput}
|
|
<span class="icon">check</span>
|
|
</button>
|
|
</div>
|
|
|
|
<hr></hr>
|
|
|
|
<div class="flex-row width-input margin-bottom">
|
|
<input
|
|
bind:value={newSecondaryChannelName}
|
|
on:enter={addSecondaryChannel}
|
|
placeholder={translation.newSecondaryChannelPlaceholder}
|
|
class="width-100 flex"
|
|
></input>
|
|
<button
|
|
class="primary"
|
|
on:click={addSecondaryChannel}
|
|
toggle:disabled={cannotAddSecondaryChannel}
|
|
aria-label={translation.addSecondaryChannel}
|
|
>
|
|
<span class="icon">add</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
class="flex-column gap"
|
|
subscribe:children={[secondaryChannels, secondaryChannelConverter]}
|
|
></div>
|
|
</div>
|
|
);
|
|
}
|