83 lines
2.8 KiB
HTML
83 lines
2.8 KiB
HTML
@defer(when store) {
|
|
<div id="layout" [class.routerOutletActive]="routerOutletActive()" [class.hideNetworkNav]="routerOutletActive() && breakpoint() == 'desktopSmall'">
|
|
<div id="router">
|
|
<router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"></router-outlet>
|
|
</div>
|
|
<div id="network-data">
|
|
<navbar backButtonDest="/chat" dataAlignment="center">
|
|
<div class="data">
|
|
<oimg [src]="store.networkData().picture" height="50px" width="50px" [radius]="15"></oimg>
|
|
<h2>{{store.networkData().name}}</h2>
|
|
</div>
|
|
|
|
<div class="items-right"></div>
|
|
</navbar>
|
|
|
|
<tui-tabs [(activeItemIndex)]="tabActiveIndex">
|
|
<button
|
|
iconStart="@tui.hash"
|
|
tuiTab
|
|
type="button"
|
|
>
|
|
{{"chat.network.tabs.channels"|translate}}
|
|
</button>
|
|
|
|
<button
|
|
disabled
|
|
iconStart="@tui.users"
|
|
tuiTab
|
|
type="button"
|
|
>
|
|
{{"chat.network.tabs.members"|translate}}
|
|
</button>
|
|
|
|
<button
|
|
iconStart="@tui.cog"
|
|
tuiTab
|
|
type="button"
|
|
>
|
|
{{"chat.network.tabs.settings"|translate}}
|
|
</button>
|
|
</tui-tabs>
|
|
|
|
<br/>
|
|
|
|
@switch (tabActiveIndex) {
|
|
@case (0) {
|
|
<main tuiGroup orientation="vertical" style="width: 100%">
|
|
@for (category of store.networkData().categories; track category) {
|
|
<div class="category">
|
|
<h2>{{category.name}}</h2>
|
|
|
|
<div tuiGroup orientation="vertical" style="width: 100%">
|
|
@for (channel of category.channels; track channel) {
|
|
<button tuiButton class="channel" [appearance]="router.url.endsWith(channel.channelId) ? 'primary' : 'secondary'" [disabled]="channel.type != 'message'" [routerLink]="'/chat/network/'+store.networkData().networkId+'/'+category.categoryId+'/'+channel.channelId">
|
|
@switch (channel.type) {
|
|
@case ("message") {
|
|
<tui-icon icon="@tui.hash"></tui-icon>
|
|
}
|
|
@case ("broadcast") {
|
|
<tui-icon icon="@tui.radio"></tui-icon>
|
|
}
|
|
@case ("voice") {
|
|
<tui-icon icon="@tui.audio-lines"></tui-icon>
|
|
}
|
|
}
|
|
<span>{{channel.name}}</span>
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</main>
|
|
}
|
|
@case (2) {
|
|
<main id="settings">
|
|
<network-settings [networkStore]="this.store"></network-settings>
|
|
</main>
|
|
}
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|