Improve views

main
Norore 3 months ago
parent e9d030a089
commit 46120dc3c7
  1. 34
      src/App.vue
  2. 48
      src/components/Container.vue
  3. 14
      src/components/Player.vue
  4. 13
      src/components/PlayerGrid.vue
  5. 2
      src/components/Sidebar.vue
  6. 9
      src/views/Adina.vue
  7. 9
      src/views/Appraisal.vue
  8. 9
      src/views/Cairn.vue
  9. 9
      src/views/ConjuredAmalgamate.vue
  10. 9
      src/views/Deimos.vue
  11. 10
      src/views/Desmina.vue
  12. 11
      src/views/Dhuum.vue
  13. 9
      src/views/Escort.vue
  14. 9
      src/views/Gates.vue
  15. 9
      src/views/Gorseval.vue
  16. 22
      src/views/Home.vue
  17. 9
      src/views/KeepConstruct.vue
  18. 9
      src/views/Largos.vue
  19. 9
      src/views/Matthias.vue
  20. 9
      src/views/MursaatOverseer.vue
  21. 9
      src/views/Peerless.vue
  22. 9
      src/views/PrisonCamp.vue
  23. 9
      src/views/Qadim.vue
  24. 9
      src/views/River.vue
  25. 9
      src/views/Sabetha.vue
  26. 9
      src/views/Sabir.vue
  27. 9
      src/views/Samarog.vue
  28. 9
      src/views/Slothasor.vue
  29. 9
      src/views/SpiritWoods.vue
  30. 9
      src/views/Statues.vue
  31. 9
      src/views/TwistedCastle.vue
  32. 9
      src/views/ValeGuardian.vue
  33. 9
      src/views/Xera.vue

@ -17,29 +17,7 @@ export default {
data() {
return {
roles: ["Alac", "cDPS", "pDPS", "Quick", "Heal", "Tank", "HK", "Kite"],
team: [
{
id: 0,
name: "Test 1",
can: ["tank", "dps"],
role: "Tank",
group: 1
},
{
id: 1,
name: "Test 2",
can: ["tank", "alac", "quick"],
role: "Alac",
group: 1
},
{
id: 2,
name: "Test 3",
can: ["alac"],
role: "Alac",
group: 2
}
]
team: []
}
},
mounted() {
@ -55,8 +33,9 @@ export default {
this.team.push(player)
localStorage.team = JSON.stringify(this.team)
},
editPlayer(id, player) {
this.team[id] = player
rolePlayer(args) {
const player = this.team.find((player) => player.id == args.playerId)
player.role = args.role
localStorage.team = JSON.stringify(this.team)
},
resetTeam() {
@ -73,9 +52,8 @@ export default {
<Container :roles="roles"
:team="team"
@addPlayer="addPlayer($event)"
@editPlayer="editPlayer($event)"
@resetTeam="resetTeam($event)"
/>
@rolePlayer="rolePlayer($event)"
@resetTeam="resetTeam($event)" />
<Footer/>
</template>

@ -1,21 +1,43 @@
<script>
import Sidebar from "./Sidebar.vue";
import AddPlayer from '../components/AddPlayer.vue';
import PlayerGrid from "./PlayerGrid.vue";
export default {
name: "Container",
props: ['roles', 'team', 'player'],
emits: ['addPlayer', 'resetTeam'],
props: ['roles', 'team', 'player', 'playerId', 'role'],
emits: ['addPlayer', 'rolePlayer', 'resetTeam'],
components: {
Sidebar,
AddPlayer
PlayerGrid
},
prop: {
pageTitle: String,
teamView: Boolean
},
data() {
return {
pageTitle: '',
teamView: true
}
},
watch: {
'$route' (to, from) {
const notTeamView = ['help', 'about']
this.teamView = !notTeamView.includes(this.$route['name'])
}
},
methods: {
addPlayer(player) {
this.$emit('addPlayer', player)
},
rolePlayer(args) {
this.$emit('rolePlayer', args)
},
resetTeam() {
this.$emit('resetTeam')
},
setPageTitle(title) {
this.pageTitle = title
}
}
}
@ -26,8 +48,22 @@ export default {
<div id="container" class="row">
<Sidebar />
<div id="content" class="col-sm-10">
<router-view :roles="roles" :team="team" @addPlayer="addPlayer($event)" @resetTeam="resetTeam($event)"/>
<div v-if="teamView == true" id="content" class="col-sm-10">
<h1>{{ pageTitle }}</h1>
<h2>Team</h2>
<PlayerGrid :roles="roles"
:team="team"
@addPlayer="addPlayer($event)"
@rolePlayer="rolePlayer($event)"
@resetTeam="resetTeam($event)" />
<router-view @setPageTitle="setPageTitle($event)" />
</div>
<div v-else id="content" class="col-sm-10">
<router-view />
</div>
</div>
</main>

@ -1,7 +1,12 @@
<script>
export default {
name: 'Player',
props: ['player']
props: ['player'],
methods: {
setRole(playerId, role) {
this.$emit('rolePlayer', {"playerId": playerId, "role": role})
}
}
}
</script>
@ -11,6 +16,11 @@ export default {
<div class="col">{{ player.name }}</div>
<div class="col"><span class="btn btn-sm btn-outline-info">{{ player.role }}</span></div>
</div>
<ul class="list-inline m-0"><li class="list-inline-item" v-for="role in player.can">{{ role }}</li></ul>
<ul class="list-inline m-0">
<li class="list-inline-item"
v-for="role in player.can">
<span @click="setRole(player.id, role)">{{ role }}</span>
</li>
</ul>
</div>
</template>

@ -5,7 +5,7 @@ import AddPlayer from './AddPlayer.vue'
export default {
name: 'PlayerGrid',
props: ['roles', 'team'],
emits: ['addPlayer', 'resetTeam'],
emits: ['addPlayer', 'rolePlayer', 'resetTeam'],
components: {
Player,
AddPlayer
@ -46,6 +46,9 @@ export default {
addPlayer(player) {
this.$emit('addPlayer', player)
},
rolePlayer(args) {
this.$emit('rolePlayer', args)
},
resetTeam() {
this.$emit('resetTeam')
}
@ -72,7 +75,7 @@ export default {
class="drag-el"
draggable="true"
@dragstart="startDrag($event, player)">
<Player :player="player"/>
<Player :player="player" @rolePlayer="rolePlayer($event)" />
</div>
</div>
</div>
@ -88,7 +91,7 @@ export default {
class="drag-el"
draggable="true"
@dragstart="startDrag($event, player)">
<Player :player="player"/>
<Player :player="player" @rolePlayer="rolePlayer($event)" />
</div>
</div>
</div>
@ -104,7 +107,7 @@ export default {
class="drag-el"
draggable="true"
@dragstart="startDrag($event, player)">
<Player :player="player"/>
<Player :player="player" @rolePlayer="rolePlayer($event)" />
</div>
</div>
</div>
@ -120,7 +123,7 @@ export default {
class="drag-el"
draggable="true"
@dragstart="startDrag($event, player)">
<Player :player="player"/>
<Player :player="player" @rolePlayer="rolePlayer($event)" />
</div>
</div>
</div>

@ -75,7 +75,7 @@ export default {
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li>
<router-link to="/escort" class="link-light d-inline-flex text-decoration-none rounded">
<img src="/img/IconMcLeod.png" alt="McLeod icon"> Siege the Stronghold
<img src="/img/IconMcLeod.png" alt="McLeod icon"> Siege of the Stronghold
</router-link>
</li>
<li>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Adina',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Cardinal Adina (CM)')
}
}
</script>
<template>
<h1>Cardinal Adina (CM)</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Appraisal',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Sorting and Appraisal')
}
}
</script>
<template>
<h1>Sorting and Appraisal</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Cairn',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Cairn the Indomitable (CM)')
}
}
</script>
<template>
<h1>Cairn the Indomitable (CM)</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'ConjuredAmalgamate',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Conjured Amalgamate (CM)')
}
}
</script>
<template>
<h1>Conjured Amalgamate (CM)</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Deimos',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Deimos (CM)')
}
}
</script>
<template>
<h1>Deimos (CM)</h1>
<PlayerGrid :team="team" />
</template>

@ -1,18 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Desmina',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Soulless Horror (CM)')
}
}
</script>
<template>
<h1>Soulless Horror (CM)</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Dhuum',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Dhuum (CM)')
}
}
</script>
<template>
<h1>Dhuum (CM)</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Escort',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Siege of the Stronghold')
}
}
</script>
<template>
<h1>Siege of the Stronghold</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Gates',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Gates of Ahdhashim')
}
}
</script>
<template>
<h1>Gates of Ahdhashim</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Gorseval',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Gorseval the Multifarious')
}
}
</script>
<template>
<h1>Gorseval the Multifarious</h1>
<PlayerGrid :team="team" />
</template>

@ -1,28 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Home',
props: ['roles', 'team'],
emits: ['addPlayer', 'resetTeam'],
components: {
PlayerGrid
},
methods: {
addPlayer(player) {
this.$emit('addPlayer', player)
},
resetTeam() {
this.$emit('resetTeam')
}
mounted() {
this.$emit('setPageTitle', 'Home')
}
}
</script>
<template>
<h1>Home</h1>
<h2>Team</h2>
<PlayerGrid :roles="roles" :team="team" @addPlayer="addPlayer($event)" @resetTeam="resetTeam($event)" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'KeepConstruct',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Keep Construct (CM)')
}
}
</script>
<template>
<h1>Keep Construct (CM)</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Largos',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Twin Largos (CM)')
}
}
</script>
<template>
<h1>Twin Largos (CM)</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Matthias',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Matthias Gabrel')
}
}
</script>
<template>
<h1>Matthias Gabrel</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Mursaat',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Mursaat Overseer (CM)')
}
}
</script>
<template>
<h1>Mursaat Overseer (CM)</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Peerless',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Qadim the Peerless (CM)')
}
}
</script>
<template>
<h1>Qadim the Peerless (CM)</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'PrisonCamp',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Prison Camp')
}
}
</script>
<template>
<h1>Prison Camp</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Qadim',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Qadim (CM)')
}
}
</script>
<template>
<h1>Qadim (CM)</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'River',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'River of Souls')
}
}
</script>
<template>
<h1>River of Souls</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Sabetha',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Sabetha the Saboteur')
}
}
</script>
<template>
<h1>Sabetha the Saboteur</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Sabir',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Cardinal Sabir (CM)')
}
}
</script>
<template>
<h1>Cardinal Sabir (CM)</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Samarog',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Samarog (CM)')
}
}
</script>
<template>
<h1>Samarog (CM)</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Slothasor',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Slothasor')
}
}
</script>
<template>
<h1>Slothasor</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'SpiritWoods',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Spirit Woods')
}
}
</script>
<template>
<h1>Spirit Woods</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Statues',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Statues of Grenth')
}
}
</script>
<template>
<h1>Statues of Grenth</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'TwistedCastle',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Twisted Castle')
}
}
</script>
<template>
<h1>Twisted Castle</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'ValeGuardian',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Vale Guardian')
}
}
</script>
<template>
<h1>Vale Guardian</h1>
<PlayerGrid :team="team" />
</template>

@ -1,17 +1,12 @@
<script>
import PlayerGrid from '../components/PlayerGrid.vue'
export default {
name: 'Xera',
props: ['team'],
components: {
PlayerGrid
mounted() {
this.$emit('setPageTitle', 'Xera')
}
}
</script>
<template>
<h1>Xera</h1>
<PlayerGrid :team="team" />
</template>
Loading…
Cancel
Save