116 lines
2.4 KiB
Vue
116 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
v-if="networks.length === 0"
|
||
|
|
class="empty">
|
||
|
|
You are not connected to any networks yet.
|
||
|
|
</div>
|
||
|
|
<Draggable
|
||
|
|
v-else
|
||
|
|
:list="networks"
|
||
|
|
:options="{ handle: '.lobby', draggable: '.network', ghostClass: 'network-placeholder' }"
|
||
|
|
class="networks"
|
||
|
|
@change="onNetworkSort"
|
||
|
|
@start="onDragStart"
|
||
|
|
@end="onDragEnd"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
v-for="network in networks"
|
||
|
|
:key="network.uuid"
|
||
|
|
:class="{ 'not-connected': !network.status.connected, 'not-secure': !network.status.secure }"
|
||
|
|
:id="'network-' + network.uuid"
|
||
|
|
:data-uuid="network.uuid"
|
||
|
|
:data-nick="network.nick"
|
||
|
|
class="network"
|
||
|
|
role="region"
|
||
|
|
>
|
||
|
|
<Channel
|
||
|
|
:channel="network.channels[0]"
|
||
|
|
:network="network"
|
||
|
|
:active-channel="activeChannel"
|
||
|
|
/>
|
||
|
|
<JoinChannel :channel="network.channels[0]"/>
|
||
|
|
|
||
|
|
<Draggable
|
||
|
|
:options="{ draggable: '.chan', ghostClass: 'chan-placeholder' }"
|
||
|
|
:list="network.channels"
|
||
|
|
class="channels"
|
||
|
|
@change="onChannelSort"
|
||
|
|
@start="onDragStart"
|
||
|
|
@end="onDragEnd"
|
||
|
|
>
|
||
|
|
<Channel
|
||
|
|
v-for="(channel, index) in network.channels"
|
||
|
|
v-if="index > 0"
|
||
|
|
:key="channel.id"
|
||
|
|
:channel="channel"
|
||
|
|
:network="network"
|
||
|
|
:active-channel="activeChannel"
|
||
|
|
/>
|
||
|
|
</Draggable>
|
||
|
|
</div>
|
||
|
|
</Draggable>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Draggable from "vuedraggable";
|
||
|
|
import JoinChannel from "./JoinChannel.vue";
|
||
|
|
import Channel from "./Channel.vue";
|
||
|
|
|
||
|
|
// TODO: ignoreSortSync should be removed
|
||
|
|
import {findChannel} from "../js/vue";
|
||
|
|
import socket from "../js/socket";
|
||
|
|
// import options from "../js/options";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "Network",
|
||
|
|
components: {
|
||
|
|
JoinChannel,
|
||
|
|
Channel,
|
||
|
|
Draggable,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
activeChannel: Object,
|
||
|
|
networks: Array,
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onDragStart(e) {
|
||
|
|
e.target.classList.add("ui-sortable-helper");
|
||
|
|
},
|
||
|
|
onDragEnd(e) {
|
||
|
|
e.target.classList.remove("ui-sortable-helper");
|
||
|
|
},
|
||
|
|
onNetworkSort(e) {
|
||
|
|
if (!e.moved) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
socket.emit("sort", {
|
||
|
|
type: "networks",
|
||
|
|
order: this.networks.map((n) => n.uuid),
|
||
|
|
});
|
||
|
|
|
||
|
|
// options.settings.ignoreSortSync = true;
|
||
|
|
},
|
||
|
|
onChannelSort(e) {
|
||
|
|
if (!e.moved) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const channel = findChannel(e.moved.element.id);
|
||
|
|
|
||
|
|
if (!channel) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
socket.emit("sort", {
|
||
|
|
type: "channels",
|
||
|
|
target: channel.network.uuid,
|
||
|
|
order: channel.network.channels.map((c) => c.id),
|
||
|
|
});
|
||
|
|
|
||
|
|
// options.settings.ignoreSortSync = true;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|