Improve views

src/App.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>

src/components/Container.vue

@@ -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>

src/components/Player.vue

@@ -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>

src/components/PlayerGrid.vue

@@ -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>

src/components/Sidebar.vue

@@ -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>

src/views/Adina.vue

@@ -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>

src/views/Appraisal.vue

@@ -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>

src/views/Cairn.vue

@@ -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>

src/views/ConjuredAmalgamate.vue

@@ -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>

src/views/Deimos.vue

@@ -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>

src/views/Desmina.vue

@@ -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>

src/views/Dhuum.vue

@@ -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>

src/views/Escort.vue

@@ -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>

src/views/Gates.vue

@@ -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>

src/views/Gorseval.vue

@@ -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>

src/views/Home.vue

@@ -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>

src/views/KeepConstruct.vue

@@ -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>

src/views/Largos.vue

@@ -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>

src/views/Matthias.vue

@@ -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>

src/views/MursaatOverseer.vue

@@ -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>

src/views/Peerless.vue

@@ -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>

src/views/PrisonCamp.vue

@@ -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>

src/views/Qadim.vue

@@ -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>

src/views/River.vue

@@ -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>

src/views/Sabetha.vue

@@ -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>

src/views/Sabir.vue

@@ -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>

src/views/Samarog.vue

@@ -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>

src/views/Slothasor.vue

@@ -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>

src/views/SpiritWoods.vue

@@ -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>

src/views/Statues.vue

@@ -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>

src/views/TwistedCastle.vue

@@ -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>

src/views/ValeGuardian.vue

@@ -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>

src/views/Xera.vue

@@ -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>