Your IP : 216.73.216.86
import 'ui.design-tokens';
import { BitrixVue } from 'ui.vue3';
import { PullClient } from 'pull.client';
import { Browser } from 'main.core';
import './status.css';
const HIDE_TIMEOUT = 4000;
const STATUS_CHANGE_DEFAULT_TIMEOUT = 500;
const STATUS_CHANGE_CONNECTING_TIMEOUT = 5000;
const STATUS_CHANGE_OFFLINE_TIMEOUT = 1000;
// @vue/component
export const PullStatus = {
name: 'PullStatus',
props:
{
canReconnect: {
type: Boolean,
default: false,
},
},
emits: ['reconnect'],
data(): Object
{
return {
status: PullClient.PullStatus.Online,
showed: null,
};
},
computed:
{
containerClass(): string[]
{
const result = [];
let visibilityClass = '';
if (this.showed === true)
{
visibilityClass = '--show';
}
else if (this.showed === false)
{
visibilityClass = '--hide';
}
const statusClass = `--${this.status}`;
result.push(visibilityClass, statusClass);
return result;
},
connectionText(): string
{
let result = '';
if (this.status === PullClient.PullStatus.Online)
{
result = this.$Bitrix.Loc.getMessage('BX_PULL_STATUS_ONLINE');
}
else if (this.status === PullClient.PullStatus.Offline)
{
result = this.$Bitrix.Loc.getMessage('BX_PULL_STATUS_OFFLINE');
}
else if (this.status === PullClient.PullStatus.Connecting)
{
result = this.$Bitrix.Loc.getMessage('BX_PULL_STATUS_CONNECTING');
}
return result;
},
button(): ?Object
{
if (this.status === PullClient.PullStatus.Online)
{
return null;
}
let hotkey = '';
let name = '';
if (this.canReconnect)
{
name = this.$Bitrix.Loc.getMessage('BX_PULL_STATUS_BUTTON_RECONNECT');
}
else
{
hotkey = Browser.isMac() ? '⌘+R' : 'Ctrl+R';
name = this.$Bitrix.Loc.getMessage('BX_PULL_STATUS_BUTTON_RELOAD');
}
return { title: name, key: hotkey };
},
},
watch:
{
status()
{
clearTimeout(this.hideTimeout);
if (this.status !== PullClient.PullStatus.Online)
{
return;
}
this.hideTimeout = setTimeout(() => {
this.showed = false;
}, HIDE_TIMEOUT);
},
},
created()
{
this.unsubscribeFunction = () => {};
this.initEvents();
},
beforeUnmount()
{
this.destroyEvents();
},
methods:
{
initEvents()
{
if (this.$Bitrix.PullClient.get())
{
this.subscribeToPullStatus();
}
this.$Bitrix.eventEmitter.subscribe(BitrixVue.events.pullClientChange, this.subscribeToPullStatus);
},
destroyEvents()
{
this.unsubscribeFunction();
this.$Bitrix.eventEmitter.unsubscribe(BitrixVue.events.pullClientChange, this.subscribeToPullStatus);
},
subscribeToPullStatus()
{
this.unsubscribeFunction();
this.unsubscribeFunction = this.$Bitrix.PullClient.get().subscribe({
type: PullClient.SubscriptionType.Status,
callback: (event) => this.onStatusChange(event.status),
});
},
reconnect()
{
if (this.canReconnect)
{
this.$emit('reconnect');
}
else
{
location.reload();
}
},
onStatusChange(status)
{
clearTimeout(this.setStatusTimeout);
if (this.status === status)
{
return;
}
const validStatuses = [
PullClient.PullStatus.Online,
PullClient.PullStatus.Offline,
PullClient.PullStatus.Connecting,
];
if (!validStatuses.includes(status))
{
return;
}
let timeout = STATUS_CHANGE_DEFAULT_TIMEOUT;
if (status === PullClient.PullStatus.Connecting)
{
timeout = STATUS_CHANGE_CONNECTING_TIMEOUT;
}
else if (status === PullClient.PullStatus.Offline)
{
timeout = STATUS_CHANGE_OFFLINE_TIMEOUT;
}
this.setStatusTimeout = setTimeout(() => {
this.status = status;
this.showed = true;
}, timeout);
},
},
template: `
<div class="bx-pull-vue3-status" :class="containerClass">
<div class="bx-pull-vue3-status-wrap">
<span class="bx-pull-vue3-status-text">{{ connectionText }}</span>
<span v-if="button" class="bx-pull-vue3-status-button" @click="reconnect">
<span class="bx-pull-vue3-status-button-title">{{ button.title }}</span>
<span class="bx-pull-vue3-status-button-key" v-html="button.key"></span>
</span>
</div>
</div>
`,
};