114 lines
4.6 KiB
Vue
114 lines
4.6 KiB
Vue
<template>
|
|
<modal dialogClass="modal-lg" :buttons="false" :action="l('commands.help')" id="command-help">
|
|
<div style="overflow: auto;">
|
|
<div v-for="command in filteredCommands">
|
|
<h4>{{command.name}}</h4>
|
|
<i>{{l('commands.help.syntax', command.syntax)}}</i>
|
|
<div>{{command.help}}</div>
|
|
<div v-if="command.params.length">
|
|
{{l('commands.help.parameters')}}
|
|
<div v-for="param in command.params" class="params">
|
|
<b>{{param.name}}</b> - {{param.help}}
|
|
</div>
|
|
</div>
|
|
<div v-if="command.context"><i>{{command.context}}</i></div>
|
|
<div v-if="command.permission"><i>{{command.permission}}</i></div>
|
|
</div>
|
|
</div>
|
|
<div class="input-group" style="padding:10px 0;flex-shrink:0">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text"><span class="fas fa-search"></span></div>
|
|
</div>
|
|
<input class="form-control" v-model="filter" :placeholder="l('filter')"/>
|
|
</div>
|
|
</modal>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {Component, Hook} from '@f-list/vue-ts';
|
|
import CustomDialog from '../components/custom_dialog';
|
|
import Modal from '../components/Modal.vue';
|
|
import core from './core';
|
|
import l from './localize';
|
|
import commands, {CommandContext, ParamType, Permission} from './slash_commands';
|
|
|
|
type CommandItem = {
|
|
name: string,
|
|
help: string,
|
|
context: string | undefined,
|
|
permission: string | undefined,
|
|
params: {name: string, help: string}[],
|
|
syntax: string
|
|
};
|
|
|
|
@Component({
|
|
components: {modal: Modal}
|
|
})
|
|
export default class CommandHelp extends CustomDialog {
|
|
commands: CommandItem[] = [];
|
|
filter = '';
|
|
l = l;
|
|
|
|
get filteredCommands(): ReadonlyArray<CommandItem> {
|
|
if(this.filter.length === 0) return this.commands;
|
|
const filter = new RegExp(this.filter.replace(/[^\w]/gi, '\\$&'), 'i');
|
|
return this.commands.filter((x) => filter.test(x.name));
|
|
}
|
|
|
|
@Hook('mounted')
|
|
mounted(): void {
|
|
const permissions = core.connection.vars.permissions;
|
|
for(const key in commands) {
|
|
const command = commands[key]!;
|
|
if(command.documented !== undefined ||
|
|
command.permission !== undefined && command.permission > 0 && (command.permission & permissions) === 0) continue;
|
|
const params = [];
|
|
let syntax = `/${key} `;
|
|
if(command.params !== undefined)
|
|
for(let i = 0; i < command.params.length; ++i) {
|
|
const param = command.params[i];
|
|
const paramKey = param.type === ParamType.Character ? 'param_character' : `${key}.param${i}`;
|
|
const name = l(`commands.${paramKey}`);
|
|
const data = {
|
|
name: param.optional !== undefined ? l('commands.help.paramOptional', name) : name,
|
|
help: l(`commands.${paramKey}.help`)
|
|
};
|
|
params.push(data);
|
|
syntax += (param.optional !== undefined ? `[${name}]` : `<${name}>`) +
|
|
(param.delimiter !== undefined ? param.delimiter : ' ');
|
|
}
|
|
let context = '';
|
|
if(command.context !== undefined) {
|
|
if((command.context & CommandContext.Channel) > 0) context += `${l('commands.help.contextChannel')}\n`;
|
|
if((command.context & CommandContext.Private) > 0) context += `${l('commands.help.contextPrivate')}\n`;
|
|
if((command.context & CommandContext.Console) > 0) context += `${l('commands.help.contextConsole')}\n`;
|
|
}
|
|
this.commands.push({
|
|
name: `/${key} - ${l(`commands.${key}`)}`,
|
|
help: l(`commands.${key}.help`),
|
|
context,
|
|
permission: command.permission !== undefined ?
|
|
l(`commands.help.permission${Permission[command.permission]}`) : undefined,
|
|
params,
|
|
syntax
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#command-help {
|
|
h4 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.params {
|
|
padding-left: 20px;
|
|
}
|
|
.modal-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style> |