Move server list to its own component

This commit is contained in:
James Lyne 2021-05-17 14:17:52 +01:00
parent 0facb446f5
commit 78a818491e
3 changed files with 58 additions and 13 deletions

View File

@ -30,6 +30,7 @@
<!-- <SvgIcon name="settings"></SvgIcon>--> <!-- <SvgIcon name="settings"></SvgIcon>-->
<!-- </button>--> <!-- </button>-->
</header> </header>
<ServerList v-if="serverCount > 1" v-show="currentlyVisible.has('maps')"></ServerList>
<WorldList v-if="mapCount > 1" v-show="currentlyVisible.has('maps')"></WorldList> <WorldList v-if="mapCount > 1" v-show="currentlyVisible.has('maps')"></WorldList>
<PlayerList v-if="previouslyVisible.has('players')" v-show="currentlyVisible.has('players')"></PlayerList> <PlayerList v-if="previouslyVisible.has('players')" v-show="currentlyVisible.has('players')"></PlayerList>
<FollowTarget v-if="following" v-show="followActive" :target="following"></FollowTarget> <FollowTarget v-if="following" v-show="followActive" :target="following"></FollowTarget>
@ -40,6 +41,7 @@
import {defineComponent, computed} from "@vue/runtime-core"; import {defineComponent, computed} from "@vue/runtime-core";
import PlayerList from './sidebar/PlayerList.vue'; import PlayerList from './sidebar/PlayerList.vue';
import WorldList from './sidebar/WorldList.vue'; import WorldList from './sidebar/WorldList.vue';
import ServerList from "@/components/sidebar/ServerList.vue";
import FollowTarget from './sidebar/FollowTarget.vue'; import FollowTarget from './sidebar/FollowTarget.vue';
import {useStore} from "@/store"; import {useStore} from "@/store";
import SvgIcon from "@/components/SvgIcon.vue"; import SvgIcon from "@/components/SvgIcon.vue";
@ -50,6 +52,7 @@ import "@/assets/icons/maps.svg";
export default defineComponent({ export default defineComponent({
components: { components: {
ServerList,
SvgIcon, SvgIcon,
PlayerList, PlayerList,
FollowTarget, FollowTarget,
@ -62,6 +65,7 @@ export default defineComponent({
previouslyVisible = computed(() => store.state.ui.previouslyVisibleElements), previouslyVisible = computed(() => store.state.ui.previouslyVisibleElements),
smallScreen = computed(() => store.state.ui.smallScreen), smallScreen = computed(() => store.state.ui.smallScreen),
mapCount = computed(() => store.state.maps.size), mapCount = computed(() => store.state.maps.size),
serverCount = computed(() => store.state.servers.size),
following = computed(() => store.state.followTarget), following = computed(() => store.state.followTarget),
toggleElement = (element: DynmapUIElement) => { toggleElement = (element: DynmapUIElement) => {
@ -76,6 +80,7 @@ export default defineComponent({
return { return {
mapCount, mapCount,
serverCount,
currentlyVisible, currentlyVisible,
previouslyVisible, previouslyVisible,
toggleElement, toggleElement,

View File

@ -0,0 +1,52 @@
<!--
- Copyright 2020 James Lyne
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-->
<template>
<section class="sidebar__section" v-if="servers.size > 1">
<span class="section__heading">Servers</span>
<ul class="section__content">
<ServerListItem :server="server" v-for="[name, server] in servers" :key="name"></ServerListItem>
</ul>
</section>
</template>
<script lang="ts">
import ServerListItem from './ServerListItem.vue';
import {defineComponent} from 'vue';
import {useStore} from "@/store";
export default defineComponent({
name: 'ServerList',
components: {
ServerListItem
},
computed: {
heading() {
return 'Servers';
},
servers() {
return useStore().state.servers;
}
},
});
</script>
<style scoped>
</style>

View File

@ -15,12 +15,6 @@
--> -->
<template> <template>
<section class="sidebar__section" v-if="servers.size > 1">
<span class="section__heading">Servers</span>
<ul class="section__content">
<ServerListItem :server="server" v-for="[name, server] in servers" :key="name"></ServerListItem>
</ul>
</section>
<section class="sidebar__section"> <section class="sidebar__section">
<span class="section__heading">{{ heading }}</span> <span class="section__heading">{{ heading }}</span>
<ul class="section__content"> <ul class="section__content">
@ -34,15 +28,13 @@
<script lang="ts"> <script lang="ts">
import WorldListItem from './WorldListItem.vue'; import WorldListItem from './WorldListItem.vue';
import ServerListItem from './ServerListItem.vue';
import {defineComponent} from 'vue'; import {defineComponent} from 'vue';
import {useStore} from "@/store"; import {useStore} from "@/store";
export default defineComponent({ export default defineComponent({
name: 'WorldList', name: 'WorldList',
components: { components: {
WorldListItem, WorldListItem
ServerListItem
}, },
computed: { computed: {
@ -52,10 +44,6 @@ export default defineComponent({
worlds() { worlds() {
return useStore().state.worlds; return useStore().state.worlds;
},
servers() {
return useStore().state.servers;
} }
}, },
}); });