Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 21:07:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

RecentActivity: months and weekdays are now dynamic

Browse source
This commit is contained in:
Valentin Kaelin 2019-08-20 23:14:22 +02:00
parent 1ff6f6f5e6
commit 7aaf8aa248
1 changed files with 20 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
client/src/components/RecentActivity.vue
View file

@ -3,9 +3,10 @@
<div class="inline-block bg-blue-800 rounded-lg p-3"> <div class="inline-block bg-blue-800 rounded-lg p-3">
<h4 class="font-bold text-base text-white text-left">Recent Activity</h4> <h4 class="font-bold text-base text-white text-left">Recent Activity</h4>
<div class="flex"> <div class="flex">
<span class="ml-12 text-blue-200 font-semibold text-xs">Jun</span> <span class="ml-12 text-blue-200 font-semibold text-xs">{{ gridDays[0].month }}</span>
<span class="ml-16 text-blue-200 font-semibold text-xs">Jul</span> <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[37].month }}</span>
<span class="ml-16 text-blue-200 font-semibold text-xs">Aug</span> <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[68].month }}</span>
<span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[99].month }}</span>
</div> </div>
<div class="mt-1 flex"> <div class="mt-1 flex">
<div class="flex flex-col"> <div class="flex flex-col">
@ -22,7 +23,7 @@
style="width: calc(20px * 15); height: calc(20px * 7)" style="width: calc(20px * 15); height: calc(20px * 7)"
> >
<div <div
v-for="(day, index) in gridDays" v-for="(day, index) in gridDays.slice(indexFirstMonday)"
:key="day.timestamp" :key="day.timestamp"
:title="day.date + ' : ' + day.matches + ' game(s)'" :title="day.date + ' : ' + day.matches + ' game(s)'"
:class="[getCaseMargin(index), getCaseColor(day.matches)]" :class="[getCaseMargin(index), getCaseColor(day.matches)]"
@ -31,12 +32,6 @@
</div> </div>
</div> </div>
</div> </div>
<ul>
<li
v-for="(day) in matchesPerDay"
:key="day.timestamp"
>{{ day.date + ' : ' + day.matches + ' game(s)' }}</li>
</ul>
</div> </div>
</template> </template>
@ -52,8 +47,8 @@ export default {
data() { data() {
return { return {
gridDays: [], gridDays: [],
nbColumns: 15, indexFirstMonday: 0,
matchesPerDay: [] nbColumns: 15
}; };
}, },
@ -72,9 +67,12 @@ export default {
const day = new Date(); const day = new Date();
day.setDate(day.getDate() - nbDaysInGrid + i); day.setDate(day.getDate() - nbDaysInGrid + i);
const formattedDay = day.toLocaleString("fr", options); const formattedDay = day.toLocaleString("fr", options);
this.gridDays.push({ this.gridDays.push({
date: formattedDay, date: formattedDay,
matches: 0 matches: 0,
day: day.toLocaleString("en", { weekday: "long" }).substring(0, 2),
month: day.toLocaleString("en", { month: "long" }).substring(0, 3)
}); });
} }
@ -92,24 +90,25 @@ export default {
} }
} }
console.log(this.gridDays); // Get the index of the first Monday
this.indexFirstMonday = this.gridDays.findIndex(d => d.day === "Mo");
}, },
getCaseColor(nbMatches) { getCaseColor(nbMatches) {
/* TODO: change this */ /* TODO: change this */
if(nbMatches > 5) { if (nbMatches > 5) {
return 'bg-teal-200' return "bg-teal-200";
} else if (nbMatches > 4) { } else if (nbMatches > 4) {
return 'bg-teal-300' return "bg-teal-300";
} else if (nbMatches > 3) { } else if (nbMatches > 3) {
return 'bg-teal-400' return "bg-teal-400";
} else if (nbMatches > 1) { } else if (nbMatches > 1) {
return 'bg-teal-500' return "bg-teal-500";
} }
return 'bg-teal-700' return "bg-teal-700";
}, },
getCaseMargin(index) { getCaseMargin(index) {
if (index % 7 !== 0) { if (index % 7 !== 0) {
return 'mt-1' return "mt-1";
} }
} }
}, },