Port ban lists to Vue

client/components/Chat.vue

@@ -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,

client/components/Special/ListBans.vue

@@ -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>

client/js/socket-events/msg_special.js

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

client/views/actions/ban_list.tpl

@@ -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>

src/models/chan.js

@@ -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,

src/models/msg.js

@@ -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;

src/plugins/irc-events/banlist.js

@@ -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,
+			});
+		}
 	});
 };