107 lines
3.2 KiB
Plaintext
107 lines
3.2 KiB
Plaintext
|
package ngtemplates
|
||
|
|
|
||
|
|
import (
|
||
|
|
"fmt"
|
||
|
|
"reichard.io/antholume/database"
|
||
|
|
"reichard.io/antholume/graph"
|
||
|
|
)
|
||
|
|
|
||
|
|
type UserStatistics struct {
|
||
|
|
WPM UserTimeStatistics
|
||
|
|
Duration UserTimeStatistics
|
||
|
|
Words UserTimeStatistics
|
||
|
|
}
|
||
|
|
|
||
|
|
type UserTimeStatistics struct {
|
||
|
|
All []UserStatisticEntry
|
||
|
|
Year []UserStatisticEntry
|
||
|
|
Month []UserStatisticEntry
|
||
|
|
Week []UserStatisticEntry
|
||
|
|
}
|
||
|
|
|
||
|
|
type UserStatisticEntry struct {
|
||
|
|
UserID string
|
||
|
|
Value string
|
||
|
|
}
|
||
|
|
|
||
|
|
// TODO
|
||
|
|
templ InfoCard(name string, size int, link string) {
|
||
|
|
}
|
||
|
|
|
||
|
|
// TODO
|
||
|
|
templ LeaderboardCard(name string, stats UserTimeStatistics) {
|
||
|
|
}
|
||
|
|
|
||
|
|
// TODO
|
||
|
|
templ StreakCard(streak database.UserStreak) {
|
||
|
|
}
|
||
|
|
|
||
|
|
templ Home(
|
||
|
|
dailyReadData []database.GetDailyReadStatsRow,
|
||
|
|
dailyReadSVG graph.SVGGraphData,
|
||
|
|
userStatistics UserStatistics,
|
||
|
|
streaks []database.UserStreak,
|
||
|
|
databaseInfo struct{ DocumentsSize, ActivitySize, ProgressSize, DevicesSize int },
|
||
|
|
) {
|
||
|
|
<div class="flex flex-col gap-4">
|
||
|
|
<div class="w-full">
|
||
|
|
<div class="relative w-full bg-white shadow-lg dark:bg-gray-700 rounded">
|
||
|
|
<p
|
||
|
|
class="absolute top-3 left-5 text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"
|
||
|
|
>
|
||
|
|
Daily Read Totals
|
||
|
|
</p>
|
||
|
|
<div class="relative">
|
||
|
|
<svg viewBox="26 0 755 { dailyReadSVG.Height }" preserveAspectRatio="none" width="100%" height="6em">
|
||
|
|
<!-- Bezier Line Graph -->
|
||
|
|
<path
|
||
|
|
fill="#316BBE"
|
||
|
|
fill-opacity="0.5"
|
||
|
|
stroke="none"
|
||
|
|
d="{ dailyReadSVG.BezierPath } { dailyReadSVG.BezierFill }"
|
||
|
|
></path>
|
||
|
|
<path fill="none" stroke="#316BBE" d="{ dailyReadSVG.BezierPath }"></path>
|
||
|
|
</svg>
|
||
|
|
<div
|
||
|
|
class="flex absolute w-full h-full top-0"
|
||
|
|
style="width: calc(100%*31/30); transform: translateX(-50%); left: 50%"
|
||
|
|
>
|
||
|
|
<!-- Required for iOS "Hover" Events (onclick) -->
|
||
|
|
for index := range dailyReadSVG.LinePoints {
|
||
|
|
<div
|
||
|
|
onclick
|
||
|
|
class="opacity-0 hover:opacity-100 w-full"
|
||
|
|
style="background: linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)) no-repeat center/2px 100%"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="flex flex-col items-center p-2 rounded absolute top-3 dark:text-white text-xs pointer-events-none"
|
||
|
|
style="transform: translateX(-50%); background-color: rgba(128, 128, 128, 0.2); left: 50%"
|
||
|
|
>
|
||
|
|
<span>{ dailyReadData[index].Date }</span>
|
||
|
|
<span>{ fmt.Sprint(dailyReadData[index].MinutesRead) } minutes</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||
|
|
@InfoCard("Documents", databaseInfo.DocumentsSize, "./documents")
|
||
|
|
@InfoCard("Activity Records", databaseInfo.ActivitySize, "./activity")
|
||
|
|
@InfoCard("Progress Records", databaseInfo.ProgressSize, "./progress")
|
||
|
|
@InfoCard("Devices", databaseInfo.DevicesSize, "")
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||
|
|
for _, item := range streaks {
|
||
|
|
@StreakCard(item)
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||
|
|
@LeaderboardCard("WPM", userStatistics.WPM)
|
||
|
|
@LeaderboardCard("Duration", userStatistics.Duration)
|
||
|
|
@LeaderboardCard("Words", userStatistics.Words)
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|