feat: 🎉 Rating Orama!

2023-04-09 06:45:27 +02:00
commit b2f4b573f3
61 changed files with 8130 additions and 0 deletions
@@ -0,0 +1,101 @@
+{{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>