Port ban lists to Vue

This commit is contained in:
Pavel Djundik 2018-07-10 12:16:24 +03:00 committed by Pavel Djundik
parent ee0413de4b
commit 121dd35c3b
7 changed files with 80 additions and 38 deletions

View file

@ -43,7 +43,16 @@
aria-label="Toggle user list"/>
</span>
</div>
<div class="chat-content">
<div
v-if="channel.type === 'special'"
class="chat-content">
<component
:is="specialComponent"
:channel="channel"/>
</div>
<div
v-else
class="chat-content">
<div
ref="chat"
class="chat"
@ -80,6 +89,7 @@ const socket = require("../js/socket");
import MessageList from "./MessageList.vue";
import ChatInput from "./ChatInput.vue";
import ChatUserList from "./ChatUserList.vue";
import ListBans from "./Special/ListBans.vue";
export default {
name: "Chat",
@ -93,6 +103,13 @@ export default {
network: Object,
channel: Object,
},
computed: {
specialComponent() {
if (this.channel.special === "list_bans") {
return ListBans;
}
},
},
watch: {
"channel.messages"() {
const el = this.$refs.chat;
@ -107,6 +124,10 @@ export default {
},
},
created() {
if (!this.$refs.chat) {
return;
}
if (window.IntersectionObserver) {
this.historyObserver = new window.IntersectionObserver(loadMoreHistory, {
root: this.$refs.chat,

View file

@ -0,0 +1,31 @@
<template>
<table class="ban-list">
<thead>
<tr>
<th class="hostmask">Banned</th>
<th class="banned_by">Banned By</th>
<th class="banned_at">Banned At</th>
</tr>
</thead>
<tbody>
<tr
v-for="ban in channel.data"
:key="ban.hostmask">
<td class="hostmask">{{ ban.hostmask }}</td>
<td
class="banned_by"
v-html="$options.filters.parse(ban.banned_by)"/>
<td class="banned_at">{{ ban.banned_at | localetime }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
name: "ListBans",
props: {
channel: Object,
},
};
</script>

View file

@ -0,0 +1,7 @@
"use strict";
const socket = require("../socket");
socket.on("msg:special", function(data) {
findChannel(data.chan).data = data.data;
});

View file

@ -1,18 +0,0 @@
<table class="ban-list">
<thead>
<tr>
<th class="hostmask">Banned</th>
<th class="banned_by">Banned By</th>
<th class="banned_at">Banned At</th>
</tr>
</thead>
<tbody>
{{#each bans}}
<tr>
<td class="hostmask">{{hostmask}}</td>
<td class="banned_by">{{{parse banned_by}}}</td>
<td class="banned_at">{{{localetime banned_at}}}</td>
</tr>
{{/each}}
</tbody>
</table>

View file

@ -16,6 +16,12 @@ Chan.Type = {
SPECIAL: "special",
};
Chan.SpecialType = {
BANLIST: "list_bans",
CHANNELLIST: "list_channels",
IGNORELIST: "list_ignored",
};
Chan.State = {
PARTED: 0,
JOINED: 1,

View file

@ -44,11 +44,6 @@ class Msg {
return this.type !== Msg.Type.MOTD &&
this.type !== Msg.Type.ERROR &&
this.type !== Msg.Type.BANLIST &&
this.type !== Msg.Type.IGNORELIST &&
this.type !== "channel_list" &&
this.type !== "channel_list_loading" &&
this.type !== "channel_list_truncated" &&
this.type !== Msg.Type.TOPIC_SET_BY &&
this.type !== Msg.Type.WHOIS;
}
@ -76,8 +71,6 @@ Msg.Type = {
TOPIC: "topic",
TOPIC_SET_BY: "topic_set_by",
WHOIS: "whois",
BANLIST: "ban_list",
IGNORELIST: "ignore_list",
};
module.exports = Msg;

View file

@ -31,29 +31,31 @@ module.exports = function(irc, network) {
const chanName = `Banlist for ${channel}`;
let chan = network.getChannel(chanName);
const data = bans.map((data) => ({
hostmask: data.banned,
banned_by: data.banned_by,
banned_at: data.banned_at * 1000,
}));
if (typeof chan === "undefined") {
chan = client.createChannel({
type: Chan.Type.SPECIAL,
special: Chan.SpecialType.BANLIST,
name: chanName,
data: data,
});
client.emit("join", {
network: network.uuid,
chan: chan.getFilteredClone(true),
index: network.addChannel(chan),
});
}
} else {
chan.data = data;
chan.pushMessage(client,
new Msg({
type: Msg.Type.BANLIST,
bans: bans.map((data) => ({
hostmask: data.banned,
banned_by: data.banned_by,
banned_at: data.banned_at * 1000,
})),
}),
true
);
client.emit("msg:special", {
chan: chan.id,
data: data,
});
}
});
};