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 ChatUserList from "./ChatUserList.vue";
import ListBans from "./Special/ListBans.vue";
import ListChannels from "./Special/ListChannels.vue";
export default {
name: "Chat",
@ -105,8 +106,9 @@ export default {
},
computed: {
specialComponent() {
if (this.channel.special === "list_bans") {
return ListBans;
switch (this.channel.special) {
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);
}
#chat .special .time,
#chat .special .from {
display: none;
}
#chat .special .date-marker-container,
#chat .special .unread-marker {
display: none;
}
#chat .special table th {
word-break: normal;
}

View File

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

View File

@ -1,7 +1,8 @@
"use strict";
const socket = require("../socket");
const {findChannel} = require("../vue");
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() {
network.chanCache = [];
updateListStatus(new Msg({
updateListStatus({
text: "Loading channel list, this can take a moment...",
type: "channel_list_loading",
}));
});
});
irc.on("channel list", function(channels) {
Array.prototype.push.apply(network.chanCache, channels);
updateListStatus({
text: `Loaded ${network.chanCache.length} channels...`,
});
});
irc.on("channel list end", function() {
updateListStatus(new Msg({
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.",
}));
}
updateListStatus(network.chanCache.sort((a, b) => b.num_users - a.num_users).slice(0, MAX_CHANS));
network.chanCache = [];
});
@ -44,7 +35,9 @@ module.exports = function(irc, network) {
if (typeof chan === "undefined") {
chan = client.createChannel({
type: Chan.Type.SPECIAL,
special: Chan.SpecialType.CHANNELLIST,
name: "Channel List",
data: msg,
});
client.emit("join", {
@ -52,11 +45,13 @@ module.exports = function(irc, network) {
chan: chan.getFilteredClone(true),
index: network.addChannel(chan),
});
}
} else {
chan.data = msg;
client.emit("msg", {
chan: chan.id,
msg: msg,
});
client.emit("msg:special", {
chan: chan.id,
data: msg,
});
}
}
};