2020-01-26 18:36:25 +01:00
|
|
|
import { html } from "lit-html";
|
|
|
|
import { __ } from '@converse/headless/i18n';
|
|
|
|
import tpl_occupant from "./occupant.js";
|
|
|
|
|
2020-01-28 19:25:21 +01:00
|
|
|
|
2020-01-26 18:36:25 +01:00
|
|
|
const PRETTY_CHAT_STATUS = {
|
|
|
|
'offline': 'Offline',
|
|
|
|
'unavailable': 'Unavailable',
|
|
|
|
'xa': 'Extended Away',
|
|
|
|
'away': 'Away',
|
|
|
|
'dnd': 'Do not disturb',
|
|
|
|
'chat': 'Chattty',
|
|
|
|
'online': 'Online'
|
|
|
|
};
|
|
|
|
|
|
|
|
const occupant_hint = (occupant) => __('Click to mention %1$s in your message.', occupant.get('nick'))
|
|
|
|
|
2020-01-30 21:59:51 +01:00
|
|
|
const i18n_invite = (o) => o._converse.view_mode === 'overlayed' ? __('Invite') : __('Invite someone');
|
|
|
|
const i18n_invite_hint = __('Invite someone to join this groupchat');
|
2020-01-27 13:20:23 +01:00
|
|
|
const i18n_participants = __('Participants');
|
2020-01-26 18:36:25 +01:00
|
|
|
|
|
|
|
|
2020-01-28 19:25:21 +01:00
|
|
|
const invite_widget = (o) => {
|
2020-01-27 13:20:23 +01:00
|
|
|
if (o.invitesAllowed()) {
|
|
|
|
return html`
|
2020-01-28 19:25:21 +01:00
|
|
|
<a class="open-invite-modal"
|
|
|
|
title="${i18n_invite_hint}"
|
|
|
|
data-toggle="modal"
|
|
|
|
data-target="#muc-invite-modal"
|
|
|
|
@click=${o.showInviteModal}>
|
|
|
|
<i class="btn btn-primary btn-circle fa fa-user-plus"></i>
|
2020-01-30 21:59:51 +01:00
|
|
|
${i18n_invite(o)}
|
2020-01-28 19:25:21 +01:00
|
|
|
</a>`;
|
2020-01-27 13:20:23 +01:00
|
|
|
} else {
|
|
|
|
return '';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-01-26 18:36:25 +01:00
|
|
|
|
|
|
|
export default (o) => html`
|
|
|
|
<div class="occupants-header">
|
|
|
|
<i class="hide-occupants fa fa-times"></i>
|
2020-01-27 13:20:23 +01:00
|
|
|
<div class="occupants-header--title">
|
|
|
|
<span class="occupants-heading">${i18n_participants}</span>
|
|
|
|
</div>
|
2020-01-26 18:36:25 +01:00
|
|
|
</div>
|
|
|
|
<div class="dragresize dragresize-occupants-left"></div>
|
|
|
|
<ul class="occupant-list">
|
|
|
|
${ o.occupants.map(occupant => {
|
|
|
|
return tpl_occupant(
|
|
|
|
Object.assign({
|
|
|
|
'jid': '',
|
|
|
|
'hint_show': PRETTY_CHAT_STATUS[occupant.get('show')],
|
|
|
|
'hint_occupant': occupant_hint(occupant)
|
|
|
|
}, occupant.toJSON())
|
|
|
|
);
|
|
|
|
}) }
|
|
|
|
</ul>
|
2020-01-28 19:25:21 +01:00
|
|
|
${ invite_widget(o) }
|
2020-01-26 18:36:25 +01:00
|
|
|
`;
|