student_gamification.mustache

<v-app id="student_gamification" class="notemyprogress">
    <v-main>
        <pageheader :pagetitle="strings.title"
                    :helptitle="strings.helplabel"
                    :exitbutton="strings.exitbutton"
                    :helpcontents="get_help_content()"
                    :token="token"
                    @open_help_section_modal="openHelpSectionModalEvent">
        </pageheader>
        <template>
            <v-card class="align-center text-center flex">
                <v-row class="pt-8 px-8 justify-center">
                    <v-tabs v-model="tab" background-color="transparent">
                        <v-tab v-text="strings.tg_tab3"></v-tab>
                        <v-tab v-text="strings.tg_tab1"></v-tab>
                        <v-tab v-text="strings.tg_tab2"></v-tab>
                    </v-tabs>
                        <v-tabs-items v-model="tab">
                        <v-tab-item>
                                    <v-row>
                                            <v-card class="align-center text-center flex">
                                                <h4 class="py-5" v-text="settings.tit"></h4>
                                                <p v-if="levelInfo.nam" v-text="levelInfo.nam"></p>
                                                <v-badge
                                                        :content="indicators.level"
                                                        bottom
                                                        offset-x="20"
                                                        offset-y="20">
                                                    <v-avatar size="100">
                                                        <v-img src="{{{image}}}"></v-img>
                                                    </v-avatar>
                                                </v-badge>
                                                <v-card-text>
                                                    <small class="d-inline" v-text="indicators.pointsToNext"></small>
                                                    <sup>xp</sup>
                                                    <small v-text="strings.to_next_level"></small>
                                                    <v-progress-linear
                                                            color="#118AB2"
                                                            :value="indicators.progress" 
                                                            height="8"
                                                    >
                                                    </v-progress-linear>
                                                    <p v-if="levelInfo.des" class="pt-5" v-text="levelInfo.des"></p>
                                                    <h3 :class="[ !levelInfo.des ? 'pt-5' : 'pt-0']"
                                                        v-text="indicators.points +' '+strings.points"></h3>
                                                    <v-row class="justify-center text-left" v-for="action in activity" >
                                                        <v-col cols="5">
                                                            <small v-text="action.description"></small>
                                                        </v-col>
                                                        <v-col cols="3">
                                                            <small v-text="action.timeago"></small>
                                                        </v-col>
                                                        <v-col cols="3" sm="2">
                                                            <small v-text="action.points + ' '+strings.points"></small>
                                                        </v-col>
                                                    </v-row>
                                                </v-card-text>
                                                <v-card-actions>
                                                    <p class="py-0 px-2" v-text="settings.des"></p>
                                                </v-card-actions>
                                            </v-card>
                                    </v-row>
                                    <v-col>
                                        <h4 v-text=strings.overview></h4>
                                        <v-row class="py-5 px-8">
                                            <v-col v-for="(level, index) in levelsData" cols="12" sm="6" md="6" class="d-flex">
                                                <v-card class="pt-5 align-center text-center flex">
                                                    <v-badge
                                                            :content="level.lvl"
                                                            bottom
                                                            offset-x="20"
                                                            offset-y="20"
                                                    >
                                                        <v-avatar size="100">
                                                            <v-img src="{{{image}}}"></v-img>
                                                        </v-avatar>
                                                    </v-badge>
                                                    <v-card-text class="text--primary text-center">
                                                        <h6 v-if="level.nam" v-text="level.nam"></h6>
                                                        <p v-if="level.des" class="pt-4 text-left" v-text="level.des"></p>
                                                        <p class="mb-0 pb-0" v-text="level.points+' '+strings.points"></p>
                                                    </v-card-text>
                                                </v-card>
                                            </v-col>
                                        </v-row>
                                    </v-col>                                    
                                </v-col>
                                    </v-tab-item>
                                    <v-tab-item>
                                        <v-row class =" justify-center">
                                            <v-card elevation = 2 id="SpreadChart">
                                                <chart
                                                    :container="'week_resourcess'"
                                                    :chart="chart_spread()"
                                                    :lang="strings.chart"
                                                ></chart>
                                            </v-card>
                                        </v-row>
                                    </v-tab-item>
                        <v-tab-item> <!-- Level and settings  -->
                        <v-row v-if="strings.rankable"class="py-5 px-8">
                            <v-col cols="12" md="12">
                                <v-data-table
                                        :headers="table_headers()"
                                        :items="ranking"
                                        item-key="id"
                                        :items-per-page="7"
                                >
                                    <template v-slot:item.level="{ item }">
                                        <v-badge
                                                inline
                                                bordered
                                                :content="item.level"
                                        >
                                            <v-avatar size="30">
                                                <v-img src="{{{image}}}"></v-img>
                                            </v-avatar>
                                        </v-badge>
                                    </template>
                                    <template v-slot:item.progress_percentage="{ item }">
                                        <v-progress-linear
                                                color="#118AB2"
                                                :value="item.progress_percentage"
                                                height="8"
                                        >
                                        </v-progress-linear>
                                    </template>
                                    <template v-slot:item.total="{ item }">
                                        <p class="d-inline" v-text="item.total"></p>
                                        <sup>xp</sup>
                                    </template>
                                </v-data-table>
                            </v-col>
                        </v-row>
                        <v-row v-else>
                            <v-card
                              class="mx-auto"
                              max-width="90%"
                              outlined
                            >
                              <v-list-item three-line>
                                <v-list-item-content>
                                  <v-list-item-title class="text-h5 mb-1" v-text=strings.studentRanking1>
                                  </v-list-item-title>
                                  <v-list-item-subtitle v-text=strings.studentRanking2></v-list-item-subtitle>
                                </v-list-item-content>
  
                                <v-list-item-avatar
                                  tile
                                  size="80"
                                  color="red"
                                  
                                ><v-img src="{{{rankImage}}}"></v-img></v-list-item-avatar>
                              </v-list-item>
  
                              <v-card-actions>
                                <v-btn
                                  outlined
                                  rounded
                                  text
                                  @click=activateRanking()
                                  v-text=strings.studentRanking3
                                >
                                </v-btn>
                              </v-card-actions>
                            </v-card>
                        </v-row>
                    </v-tab-item>
                    </v-col>
                </v-row>
            </v-card>
            
        </template>
    </v-main>
</v-app>