LeagueStats/client/src/views/Summoner.vue

<template>
  <div v-if="overviewLoaded" key="overview" class="mt-3 flex text-center">
    <div class="mt-4 w-3/12">
      <SummonerChampions />
      <SummonerStats />
      <SummonerMates />
    </div>
    <div v-if="overview.matches.length" class="w-9/12">
      <ul>
        <Match
          v-for="(match, index) in overview.matches"
          :key="index"
          :data="overview.matches[index]"
        />
      </ul>
      <LoadingButton
        v-if="moreMatchesToFetch"
        @clicked="moreMatches"
        :loading="matchesLoading"
        btn-class="mt-4 block mx-auto bg-blue-800 px-4 py-2 rounded-md font-semibold hover:bg-blue-1000 shadow-lg"
      >More matches</LoadingButton>
    </div>
  </div>
  <div v-else class="mt-3 flex text-center">
    <div class="mt-4 w-3/12">
      <div class="bg-blue-800 rounded-lg" style="width: 300px; height: 339px;">
        <content-loader
          :height="339"
          :width="300"
          :speed="2"
          primary-color="#17314f"
          secondary-color="#2b6cb0"
        >
          <rect x="94" y="18" rx="3" ry="3" width="111" height="24" />
          <rect x="23" y="76" rx="3" ry="3" width="74" height="12" />
          <rect x="130" y="76" rx="3" ry="3" width="34" height="12" />
          <rect x="185" y="76" rx="3" ry="3" width="48" height="12" />
          <rect x="246" y="76" rx="3" ry="3" width="30" height="12" />
          <circle cx="40" cy="123" r="16" />
          <rect x="60" y="116" rx="3" ry="3" width="49" height="13" />
          <rect x="130" y="116" rx="3" ry="3" width="42" height="16" />
          <rect x="185" y="116" rx="3" ry="3" width="42" height="16" />
          <rect x="246" y="116" rx="3" ry="3" width="42" height="16" />
          <circle cx="40" cy="171" r="16" />
          <rect x="60" y="163" rx="3" ry="3" width="49" height="13" />
          <rect x="130" y="163" rx="3" ry="3" width="42" height="16" />
          <rect x="185" y="163" rx="3" ry="3" width="42" height="16" />
          <rect x="246" y="163" rx="3" ry="3" width="42" height="16" />
          <circle cx="40" cy="219" r="16" />
          <rect x="60" y="212" rx="3" ry="3" width="49" height="13" />
          <rect x="130" y="212" rx="3" ry="3" width="42" height="16" />
          <rect x="185" y="212" rx="3" ry="3" width="42" height="16" />
          <rect x="246" y="212" rx="3" ry="3" width="42" height="16" />
          <circle cx="40" cy="267" r="16" />
          <rect x="60" y="260" rx="3" ry="3" width="49" height="13" />
          <rect x="130" y="260" rx="3" ry="3" width="42" height="16" />
          <rect x="185" y="260" rx="3" ry="3" width="42" height="16" />
          <rect x="246" y="260" rx="3" ry="3" width="42" height="16" />
          <circle cx="40" cy="315" r="16" />
          <rect x="60" y="308" rx="3" ry="3" width="49" height="13" />
          <rect x="130" y="308" rx="3" ry="3" width="42" height="16" />
          <rect x="185" y="308" rx="3" ry="3" width="42" height="16" />
          <rect x="246" y="308" rx="3" ry="3" width="42" height="16" />
        </content-loader>
      </div>
      <div class="mt-4 bg-blue-800 rounded-lg" style="width: 300px; height: 828px;">
        <content-loader
          :height="828"
          :width="300"
          :speed="2"
          primary-color="#17314f"
          secondary-color="#2b6cb0"
        >
          <rect x="122" y="17" rx="3" ry="3" width="55" height="24" />
          <rect x="26" y="72" rx="4" ry="4" width="8" height="51" />
          <rect x="86" y="72" rx="4" ry="4" width="8" height="51" />
          <rect x="146" y="72" rx="4" ry="4" width="8" height="51" />
          <rect x="206" y="72" rx="4" ry="4" width="8" height="51" />
          <rect x="266" y="72" rx="4" ry="4" width="8" height="51" />
          <rect x="22" y="128" rx="3" ry="3" width="16" height="16" />
          <rect x="82" y="128" rx="3" ry="3" width="16" height="16" />
          <rect x="142" y="128" rx="3" ry="3" width="16" height="16" />
          <rect x="202" y="128" rx="3" ry="3" width="16" height="16" />
          <rect x="262" y="128" rx="3" ry="3" width="16" height="16" />
          <rect x="14" y="182" rx="3" ry="3" width="45" height="16" />
          <rect x="93" y="182" rx="3" ry="3" width="45" height="16" />
          <rect x="155" y="182" rx="3" ry="3" width="58" height="16" />
          <rect x="250" y="182" rx="3" ry="3" width="33" height="16" />
          <rect x="14" y="212" rx="3" ry="3" width="45" height="12" />
          <rect x="93" y="212" rx="3" ry="3" width="45" height="12" />
          <rect x="168" y="212" rx="3" ry="3" width="45" height="12" />
          <rect x="238" y="212" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="237" rx="3" ry="3" width="45" height="12" />
          <rect x="93" y="237" rx="3" ry="3" width="45" height="12" />
          <rect x="168" y="237" rx="3" ry="3" width="45" height="12" />
          <rect x="238" y="237" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="262" rx="3" ry="3" width="45" height="12" />
          <rect x="93" y="262" rx="3" ry="3" width="45" height="12" />
          <rect x="168" y="262" rx="3" ry="3" width="45" height="12" />
          <rect x="238" y="262" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="287" rx="3" ry="3" width="45" height="12" />
          <rect x="93" y="287" rx="3" ry="3" width="45" height="12" />
          <rect x="168" y="287" rx="3" ry="3" width="45" height="12" />
          <rect x="238" y="287" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="312" rx="3" ry="3" width="45" height="12" />
          <rect x="93" y="312" rx="3" ry="3" width="45" height="12" />
          <rect x="168" y="312" rx="3" ry="3" width="45" height="12" />
          <rect x="238" y="312" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="337" rx="3" ry="3" width="105" height="12" />
          <rect x="238" y="337" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="362" rx="3" ry="3" width="85" height="12" />
          <rect x="238" y="362" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="397" rx="3" ry="3" width="115" height="16" />
          <rect x="150" y="397" rx="3" ry="3" width="65" height="16" />
          <rect x="223" y="397" rx="3" ry="3" width="60" height="16" />
          <rect x="14" y="427" rx="3" ry="3" width="95" height="12" />
          <rect x="165" y="427" rx="3" ry="3" width="45" height="12" />
          <rect x="238" y="427" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="452" rx="3" ry="3" width="95" height="12" />
          <rect x="165" y="452" rx="3" ry="3" width="45" height="12" />
          <rect x="238" y="452" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="487" rx="3" ry="3" width="115" height="16" />
          <rect x="150" y="487" rx="3" ry="3" width="65" height="16" />
          <rect x="223" y="487" rx="3" ry="3" width="60" height="16" />
          <rect x="14" y="517" rx="3" ry="3" width="95" height="12" />
          <rect x="165" y="517" rx="3" ry="3" width="45" height="12" />
          <rect x="238" y="517" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="542" rx="3" ry="3" width="95" height="12" />
          <rect x="165" y="542" rx="3" ry="3" width="45" height="12" />
          <rect x="238" y="542" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="577" rx="3" ry="3" width="115" height="16" />
          <rect x="150" y="577" rx="3" ry="3" width="65" height="16" />
          <rect x="223" y="577" rx="3" ry="3" width="60" height="16" />
          <rect x="14" y="607" rx="3" ry="3" width="50" height="12" />
          <rect x="165" y="607" rx="3" ry="3" width="45" height="12" />
          <rect x="238" y="607" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="632" rx="3" ry="3" width="50" height="12" />
          <rect x="165" y="632" rx="3" ry="3" width="45" height="12" />
          <rect x="238" y="632" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="657" rx="3" ry="3" width="50" height="12" />
          <rect x="165" y="657" rx="3" ry="3" width="45" height="12" />
          <rect x="238" y="657" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="682" rx="3" ry="3" width="50" height="12" />
          <rect x="165" y="682" rx="3" ry="3" width="45" height="12" />
          <rect x="238" y="682" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="707" rx="3" ry="3" width="50" height="12" />
          <rect x="165" y="707" rx="3" ry="3" width="45" height="12" />
          <rect x="238" y="707" rx="3" ry="3" width="45" height="12" />
          <rect x="14" y="732" rx="3" ry="3" width="50" height="12" />
          <rect x="165" y="732" rx="3" ry="3" width="45" height="12" />
          <rect x="238" y="732" rx="3" ry="3" width="45" height="12" />
          <rect x="122" y="762" rx="3" ry="3" width="55" height="20" />
          <rect x="115" y="789" rx="3" ry="3" width="70" height="12" />
          <rect x="110" y="805" rx="3" ry="3" width="80" height="12" />
        </content-loader>
      </div>

      <div class="mt-4 bg-blue-800 rounded-lg" style="width: 300px; height: 384px;">
        <content-loader
          :height="384"
          :width="300"
          :speed="2"
          primary-color="#17314f"
          secondary-color="#2b6cb0"
        >
          <rect x="112" y="17" rx="3" ry="3" width="75" height="24" />
          <rect x="14" y="70" rx="3" ry="3" width="80" height="16" />
          <rect x="150" y="70" rx="3" ry="3" width="40" height="16" />
          <rect x="217" y="70" rx="3" ry="3" width="59" height="16" />
          <rect x="14" y="100" rx="3" ry="3" width="85" height="12" />
          <rect x="145" y="100" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="100" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="121" rx="3" ry="3" width="65" height="12" />
          <rect x="145" y="121" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="121" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="142" rx="3" ry="3" width="85" height="12" />
          <rect x="145" y="142" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="142" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="163" rx="3" ry="3" width="115" height="12" />
          <rect x="145" y="163" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="163" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="184" rx="3" ry="3" width="85" height="12" />
          <rect x="145" y="184" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="184" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="205" rx="3" ry="3" width="85" height="12" />
          <rect x="145" y="205" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="205" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="226" rx="3" ry="3" width="65" height="12" />
          <rect x="145" y="226" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="226" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="247" rx="3" ry="3" width="115" height="12" />
          <rect x="145" y="247" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="247" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="268" rx="3" ry="3" width="115" height="12" />
          <rect x="145" y="268" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="268" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="289" rx="3" ry="3" width="85" height="12" />
          <rect x="145" y="289" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="289" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="310" rx="3" ry="3" width="65" height="12" />
          <rect x="145" y="310" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="310" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="331" rx="3" ry="3" width="115" height="12" />
          <rect x="145" y="331" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="331" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="352" rx="3" ry="3" width="85" height="12" />
          <rect x="145" y="352" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="352" rx="3" ry="3" width="65" height="12" />
        </content-loader>
      </div>
    </div>
    <div class="w-9/12">
      <div
        v-for="index in 10"
        :key="index"
        class="mt-4 ml-4 bg-blue-800 rounded-lg"
        style="width: 884px; height: 144px;"
      >
        <content-loader
          :height="144"
          :width="884"
          :speed="2"
          primary-color="#17314f"
          secondary-color="#2b6cb0"
        >
          <rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
          <rect x="140" y="40" rx="6" ry="6" width="24" height="24" />
          <rect x="140" y="72" rx="6" ry="6" width="24" height="24" />
          <rect x="206" y="46" rx="3" ry="3" width="81" height="22" />
          <rect x="218" y="74" rx="3" ry="3" width="59" height="16" />
          <rect x="305" y="36" rx="6" ry="6" width="32" height="32" />
          <rect x="341" y="36" rx="6" ry="6" width="32" height="32" />
          <rect x="377" y="36" rx="6" ry="6" width="32" height="32" />
          <rect x="305" y="72" rx="6" ry="6" width="32" height="32" />
          <rect x="341" y="72" rx="6" ry="6" width="32" height="32" />
          <rect x="377" y="72" rx="6" ry="6" width="32" height="32" />
          <rect x="430" y="45" rx="3" ry="3" width="50" height="10" />
          <rect x="430" y="60" rx="3" ry="3" width="50" height="10" />
          <rect x="430" y="75" rx="3" ry="3" width="70" height="10" />
          <rect x="430" y="90" rx="3" ry="3" width="70" height="10" />
          <circle cx="608" cy="32" r="12" />
          <circle cx="608" cy="52" r="12" />
          <circle cx="608" cy="72" r="12" />
          <circle cx="608" cy="92" r="12" />
          <circle cx="608" cy="112" r="12" />
          <circle cx="672" cy="32" r="12" />
          <circle cx="672" cy="52" r="12" />
          <circle cx="672" cy="72" r="12" />
          <circle cx="672" cy="92" r="12" />
          <circle cx="672" cy="112" r="12" />
          <rect x="516" y="29" rx="3" ry="3" width="72" height="9" />
          <rect x="516" y="49" rx="3" ry="3" width="72" height="9" />
          <rect x="516" y="69" rx="3" ry="3" width="72" height="9" />
          <rect x="516" y="89" rx="3" ry="3" width="72" height="9" />
          <rect x="516" y="109" rx="3" ry="3" width="72" height="9" />
          <rect x="691" y="29" rx="3" ry="3" width="72" height="9" />
          <rect x="691" y="49" rx="3" ry="3" width="72" height="9" />
          <rect x="691" y="69" rx="3" ry="3" width="72" height="9" />
          <rect x="691" y="89" rx="3" ry="3" width="72" height="9" />
          <rect x="691" y="109" rx="3" ry="3" width="72" height="9" />
          <circle cx="830" cy="50" r="12" />
          <rect x="800" y="66" rx="3" ry="3" width="64" height="17" />
          <rect x="803" y="90" rx="3" ry="3" width="59" height="14" />
        </content-loader>
      </div>
      <div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
        <content-loader
          :height="40"
          :width="135"
          :speed="2"
          primary-color="#17314f"
          secondary-color="#2b6cb0"
        >
          <rect x="0" y="0" rx="6" ry="6" width="135" height="40" />
        </content-loader>
      </div>
    </div>
  </div>
</template>


<script>
import { ContentLoader } from 'vue-content-loader'
import { mapState, mapActions, mapGetters } from 'vuex'
import LoadingButton from '@/components/LoadingButton.vue'
import Match from '@/components/Match/Match.vue'
import SummonerChampions from '@/components/Summoner/Overview/SummonerChampions.vue'
import SummonerMates from '@/components/Summoner/Overview/SummonerMates.vue'
import SummonerStats from '@/components/Summoner/Overview/SummonerStats.vue'

export default {
  components: {
    ContentLoader,
    LoadingButton,
    Match,
    SummonerChampions,
    SummonerMates,
    SummonerStats,
  },

  computed: {
    ...mapState({
      overview: state => state.summoner.overview
    }),
    ...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'overviewLoaded', 'summonerFound'])
  },

  watch: {
    summonerFound() {
      this.fetchData()
    }
  },

  created() {
    this.fetchData()
  },

  methods: {
    fetchData() {
      if (!this.overviewLoaded && this.summonerFound) {
        this.overviewRequest()
      }
    },
    ...mapActions('summoner', ['moreMatches', 'overviewRequest']),
  },
}
</script>