102 lines
3.2 KiB
HTML
102 lines
3.2 KiB
HTML
{{template "partials/header" .}}
|
|
|
|
<div class="flex w-full flex-col items-center">
|
|
<h1 class="mb-6 text-3xl font-bold">{{ .TvShow.Title }}</h1>
|
|
|
|
<div class="mb-6 rounded-lg bg-white p-6 shadow-md">
|
|
<div class="mb-4 text-center">
|
|
<span class="text-gray-600">IMDb ID:</span>
|
|
<span class="font-semibold text-gray-800">{{ .TvShow.ShowID }}</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-8">
|
|
<ul class="space-y-2">
|
|
<li>
|
|
<span class="text-gray-600">Title:</span>
|
|
<span class="font-semibold text-gray-800">{{ .TvShow.Title }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="text-gray-600">Runtime:</span>
|
|
<span class="font-semibold text-gray-800"
|
|
>{{ .TvShow.Runtime }} min</span
|
|
>
|
|
</li>
|
|
<li>
|
|
<span class="text-gray-600">Seasons:</span>
|
|
<span class="font-semibold text-gray-800">{{len .TvShow.Seasons }}</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="space-y-2">
|
|
<li>
|
|
<span class="text-gray-600">Total votes:</span>
|
|
<span class="font-semibold text-gray-800">{{ .TvShow.Votes }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="text-gray-600">Average rating:</span>
|
|
<span class="font-semibold text-gray-800"
|
|
>{{printf "%.2f" .TvShow.AvgRating }}</span
|
|
>
|
|
</li>
|
|
<li>
|
|
<span class="text-gray-600">Median rating:</span>
|
|
<span class="font-semibold text-gray-800"
|
|
>{{printf "%.2f" .TvShow.MedianRating }}</span
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-6 w-2/3">
|
|
<h2 class="mb-6 text-center text-2xl font-bold">Seasons overall</h2>
|
|
<canvas id="seasons"></canvas>
|
|
</div>
|
|
|
|
<div class="mb-6 w-2/3">
|
|
<div x-data="{ selectedSeasonNumber: 1}">
|
|
<h2 class="mb-6 text-center text-2xl font-bold">
|
|
Season <span x-text="selectedSeasonNumber"></span>
|
|
</h2>
|
|
<canvas id="episodes"></canvas>
|
|
<div class="mt-4 flex items-center justify-center space-x-2">
|
|
{{ range .TvShow.Seasons }}
|
|
<button
|
|
class="rounded-md border-2 border-black px-4 py-2 font-semibold text-black hover:bg-black hover:text-white"
|
|
:class="selectedSeasonNumber === {{ .Number }} ? 'bg-black text-white' : 'text-black'"
|
|
x-on:click="selectedSeasonNumber = {{ .Number }}; loadSeason({{ .Number }})"
|
|
>
|
|
S{{ .Number }}
|
|
</button>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{template "partials/footer" .}}
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"
|
|
integrity="sha512-vCUbejtS+HcWYtDHRF2T5B0BKwVG/CLeuew5uT2AiX4SJ2Wff52+kfgONvtdATqkqQMC9Ye5K+Td0OTaz+P7cw=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"
|
|
></script>
|
|
<script type="module">
|
|
import { initCharts, loadSpecificSeason } from "/js/components/charts.js";
|
|
|
|
let tvShow = "{{ .TvShowJSON }}";
|
|
let tvShowParsed = JSON.parse(tvShow);
|
|
|
|
function loadSeason(season) {
|
|
const currentScrollY = window.scrollY;
|
|
loadSpecificSeason(tvShowParsed, season);
|
|
window.scrollTo(0, currentScrollY);
|
|
}
|
|
|
|
window.loadSeason = loadSeason;
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
initCharts(tvShowParsed);
|
|
});
|
|
</script>
|