118 lines
4.3 KiB
Vue
118 lines
4.3 KiB
Vue
<template>
|
|
<modal :action="l('chat.setStatus')" @submit="setStatus" @close="reset" dialogClass="w-100 modal-lg statusEditor">
|
|
<div class="form-group" id="statusSelector">
|
|
<label class="control-label">{{l('chat.setStatus.status')}}</label>
|
|
<dropdown linkClass="custom-select">
|
|
<span slot="title"><span class="fa fa-fw" :class="getStatusIcon(status)"></span>{{l('status.' + status)}}</span>
|
|
<a href="#" class="dropdown-item" v-for="item in statuses" @click.prevent="status = item">
|
|
<span class="fa fa-fw" :class="getStatusIcon(item)"></span>{{l('status.' + item)}}
|
|
</a>
|
|
</dropdown>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label">{{l('chat.setStatus.message')}}</label>
|
|
<editor id="text" v-model="text" classes="form-control" maxlength="255">
|
|
<div class="bbcode-editor-controls">
|
|
{{getByteLength(text)}} / 255
|
|
</div>
|
|
</editor>
|
|
</div>
|
|
<div class="form-group">
|
|
<button type="button" @click="showStatusPicker" class="btn btn-outline-secondary">History</button>
|
|
</div>
|
|
|
|
<status-picker ref="statusPicker" :callback="insertStatusMessage" :curStatus="enteredText"></status-picker>
|
|
</modal>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {Component} from '@f-list/vue-ts';
|
|
import CustomDialog from '../components/custom_dialog';
|
|
import Dropdown from '../components/Dropdown.vue';
|
|
import Modal from '../components/Modal.vue';
|
|
import {Editor} from './bbcode';
|
|
import {getByteLength} from './common';
|
|
import core from './core';
|
|
import {Character, userStatuses} from './interfaces';
|
|
import l from './localize';
|
|
import {getStatusIcon} from './UserView.vue';
|
|
import StatusPicker from './StatusPicker.vue';
|
|
import * as _ from 'lodash';
|
|
|
|
@Component({
|
|
components: {modal: Modal, editor: Editor, dropdown: Dropdown, 'status-picker': StatusPicker}
|
|
})
|
|
export default class StatusSwitcher extends CustomDialog {
|
|
selectedStatus: Character.Status | undefined;
|
|
enteredText: string | undefined;
|
|
statuses = userStatuses;
|
|
l = l;
|
|
getByteLength = getByteLength;
|
|
getStatusIcon = getStatusIcon;
|
|
|
|
get status(): Character.Status {
|
|
return this.selectedStatus !== undefined ? this.selectedStatus : this.character.status;
|
|
}
|
|
|
|
set status(status: Character.Status) {
|
|
this.selectedStatus = status;
|
|
}
|
|
|
|
get text(): string {
|
|
return this.enteredText !== undefined ? this.enteredText : this.character.statusText;
|
|
}
|
|
|
|
set text(text: string) {
|
|
this.enteredText = text;
|
|
}
|
|
|
|
get character(): Character {
|
|
return core.characters.ownCharacter;
|
|
}
|
|
|
|
setStatus(): void {
|
|
core.connection.send('STA', {status: this.status, statusmsg: this.text});
|
|
|
|
// tslint:disable-next-line
|
|
this.updateHistory(this.text);
|
|
}
|
|
|
|
reset(): void {
|
|
this.selectedStatus = undefined;
|
|
this.enteredText = undefined;
|
|
}
|
|
|
|
insertStatusMessage(statusMessage: string): void {
|
|
this.text = statusMessage;
|
|
}
|
|
|
|
|
|
async updateHistory(statusMessage: string): Promise<void> {
|
|
if ((!statusMessage) || (statusMessage.trim() === '')) {
|
|
return;
|
|
}
|
|
|
|
const curHistory: string[] = (await core.settingsStore.get('statusHistory')) || [];
|
|
const statusMessageClean = statusMessage.toString().trim().toLowerCase();
|
|
const filteredHistory: string[] = _.reject(curHistory, (c: string) => (c.toString().trim().toLowerCase() === statusMessageClean));
|
|
const newHistory: string[] = _.take(_.concat([statusMessage], filteredHistory), 10);
|
|
|
|
await core.settingsStore.set('statusHistory', newHistory);
|
|
}
|
|
|
|
showStatusPicker(): void {
|
|
(<StatusPicker>this.$refs['statusPicker']).show();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.statusEditor .bbcode-toolbar .color-selector {
|
|
left: 58px !important;
|
|
}
|
|
|
|
.statusEditor .bbcode-toolbar .eicon-selector {
|
|
top: 30px !important;
|
|
}
|
|
</style>
|