Big Routing/Tabbing/ReportService refactor, add ad blocks

1 files changed, 35 insertions, 7 deletions

diff --git a/src/ModeTab.vue b/src/ModeTab.vue
index 681b219..465f1e8 100644
--- a/src/ModeTab.vue
+++ b/src/ModeTab.vue
@@ -5,28 +5,48 @@
     <div class="columns is-multiline">
       <div class="column" v-if="hasTalents">
         <h2 class="title is-2">Highlights</h2>
-        <highlights :reportService="reportService"></highlights>
+        <highlights></highlights>
       </div>
 
       <div class="column is-narrow">
         <h2 class="title is-2">Top 10</h2>
-        <top-talents-box :reportService="reportService"></top-talents-box>
+        <top-talents-box></top-talents-box>
       </div>
     </div>
 
+    <div class="notification" v-show="adActive[0]">
+      <button class="delete" @click="adActive[0] = false"></button>
+      <h3 class="title is-3">Ad</h3>
+      <Adsense
+        data-ad-client="ca-pub-6856963757796636"
+        data-ad-slot="4801023518">
+      </Adsense>
+    </div>
+
     <div class="columns is-multiline" v-if="hasTalents">
-      <h2 class="title is-2">Individual Hero Statistics</h2>
       <div class="column is-two-thirds">
-        <hero-draft-grid :reportService="reportService"></hero-draft-grid>
+        <h2 class="title is-2">Individual Hero Statistics</h2>
+        <h3 class="subtitle">Select a Hero</h3>
+        <hero-draft-grid></hero-draft-grid>
       </div>
       <div class="column is-one-third">
-        <hero-talent-table :reportService="reportService"></hero-talent-table>
+        <h2 class="title is-2">{{ getHero(selectedActor) }} Statistics</h2>
+        <hero-talent-table></hero-talent-table>
       </div>
     </div>
 
+    <div class="notification" v-show="adActive[1]">
+      <button class="delete" @click="adActive[1] = false"></button>
+      <h3 class="title is-3">Ad</h3>
+      <Adsense
+        data-ad-client="ca-pub-6856963757796636"
+        data-ad-slot="3898218968">
+      </Adsense>
+    </div>
+
     <div>
       <h2 class="title is-2">All Hero Statistics</h2>
-      <report-table :reportService="reportService"></report-table>
+      <report-table></report-table>
     </div>
   </div>
 </template>
@@ -43,8 +63,16 @@ import IntroBox from './IntroBox.vue';
 import * as maps from './maps/maps.js';
 
 export default Vue.component('mode-tab', {
-  props: [ 'reportService' ],
   mixins: [ RouterParamMixin ],
+  data: function() {
+    return {
+      getHero: maps.getHero,
+      adActive: {
+        0: true,
+        1: true,
+      },
+    };
+  },
   computed: {
     hasTalents: function() {
       return maps.hasTalents(this.selectedMode);