Port channel list to Vue

This commit is contained in:
Pavel Djundik 2018-07-10 12:37:48 +03:00 committed by Pavel Djundik
parent 96569e71a3
commit db803a8548
7 changed files with 57 additions and 47 deletions

View File

@ -90,6 +90,7 @@ import MessageList from "./MessageList.vue";
import ChatInput from "./ChatInput.vue"; import ChatInput from "./ChatInput.vue";
import ChatUserList from "./ChatUserList.vue"; import ChatUserList from "./ChatUserList.vue";
import ListBans from "./Special/ListBans.vue"; import ListBans from "./Special/ListBans.vue";
import ListChannels from "./Special/ListChannels.vue";
export default { export default {
name: "Chat", name: "Chat",
@ -105,8 +106,9 @@ export default {
}, },
computed: { computed: {
specialComponent() { specialComponent() {
if (this.channel.special === "list_bans") { switch (this.channel.special) {
return ListBans; case "list_bans": return ListBans;
case "list_channels": return ListChannels;
} }
}, },
}, },

View File

@ -0,0 +1,34 @@
<template>
<span v-if="channel.data.text">{{channel.data.text}}</span>
<table v-else class="channel-list">
<thead>
<tr>
<th class="channel">Channel</th>
<th class="users">Users</th>
<th class="topic">Topic</th>
</tr>
</thead>
<tbody>
<tr
v-for="chan in channel.data"
:key="chan.channel">
<td
class="channel"
v-html="$options.filters.parse(chan.channel)"/>
<td class="users">{{ chan.num_users }}</td>
<td
class="topic"
v-html="$options.filters.parse(chan.topic)"/>
</tr>
</tbody>
</table>
</template>
<script>
export default {
name: "ListChannels",
props: {
channel: Object,
},
};
</script>

View File

@ -1200,16 +1200,6 @@ background on hover (unless active) */
color: var(--body-color-muted); color: var(--body-color-muted);
} }
#chat .special .time,
#chat .special .from {
display: none;
}
#chat .special .date-marker-container,
#chat .special .unread-marker {
display: none;
}
#chat .special table th { #chat .special table th {
word-break: normal; word-break: normal;
} }

View File

@ -7,6 +7,7 @@ require("./join");
require("./more"); require("./more");
require("./msg"); require("./msg");
require("./msg_preview"); require("./msg_preview");
require("./msg_special");
require("./names"); require("./names");
require("./network"); require("./network");
require("./nick"); require("./nick");

View File

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

View File

@ -1,13 +0,0 @@
<!-- htmlmin:ignore -->
{{#diff "reset"}}{{/diff}}
{{#each users}}
{{#diff mode}}
{{#unless @first}}
</div>
{{/unless}}
<div class="user-mode {{modes mode}}">
{{/diff}}
{{> user_name}}
{{/each}}
</div>
<!-- htmlmin:ignore -->

View File

@ -10,30 +10,21 @@ module.exports = function(irc, network) {
irc.on("channel list start", function() { irc.on("channel list start", function() {
network.chanCache = []; network.chanCache = [];
updateListStatus(new Msg({ updateListStatus({
text: "Loading channel list, this can take a moment...", text: "Loading channel list, this can take a moment...",
type: "channel_list_loading", });
}));
}); });
irc.on("channel list", function(channels) { irc.on("channel list", function(channels) {
Array.prototype.push.apply(network.chanCache, channels); Array.prototype.push.apply(network.chanCache, channels);
updateListStatus({
text: `Loaded ${network.chanCache.length} channels...`,
});
}); });
irc.on("channel list end", function() { irc.on("channel list end", function() {
updateListStatus(new Msg({ updateListStatus(network.chanCache.sort((a, b) => b.num_users - a.num_users).slice(0, MAX_CHANS));
type: "channel_list",
channels: network.chanCache.sort(function(a, b) {
return b.num_users - a.num_users;
}).slice(0, MAX_CHANS),
}));
if (network.chanCache.length > MAX_CHANS) {
updateListStatus(new Msg({
type: "channel_list_truncated",
text: "Channel list is too large: truncated to " + MAX_CHANS + " channels.",
}));
}
network.chanCache = []; network.chanCache = [];
}); });
@ -44,7 +35,9 @@ module.exports = function(irc, network) {
if (typeof chan === "undefined") { if (typeof chan === "undefined") {
chan = client.createChannel({ chan = client.createChannel({
type: Chan.Type.SPECIAL, type: Chan.Type.SPECIAL,
special: Chan.SpecialType.CHANNELLIST,
name: "Channel List", name: "Channel List",
data: msg,
}); });
client.emit("join", { client.emit("join", {
@ -52,11 +45,13 @@ module.exports = function(irc, network) {
chan: chan.getFilteredClone(true), chan: chan.getFilteredClone(true),
index: network.addChannel(chan), index: network.addChannel(chan),
}); });
} } else {
chan.data = msg;
client.emit("msg", { client.emit("msg:special", {
chan: chan.id, chan: chan.id,
msg: msg, data: msg,
}); });
} }
}
}; };