diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/_film_card.html | 5 | ||||
| -rw-r--r-- | templates/detail.html | 1 | ||||
| -rw-r--r-- | templates/form.html | 5 | ||||
| -rw-r--r-- | templates/stats.html | 30 | ||||
| -rw-r--r-- | templates/year_review.html | 18 |
5 files changed, 57 insertions, 2 deletions
diff --git a/templates/_film_card.html b/templates/_film_card.html index 5e8e6e4..a4e206f 100644 --- a/templates/_film_card.html +++ b/templates/_film_card.html @@ -43,11 +43,12 @@ {% if film.date_watched %}<span>{{ film.date_watched }}</span>{% endif %} {% if film.runtime %}<span>{{ film.runtime }} min</span>{% endif %} {% if film.language %}<span>{{ film.language }}</span>{% endif %} - {% if film.rewatch %}<span>Rewatch</span>{% endif %} + {% if film.rewatch %}<span>Rewatch{% if film.rewatch_count %} #{{ film.rewatch_count }}{% endif %}</span>{% endif %} </div> - {% if film.context or film.how_found or film.watched_with %} + {% if film.genre or film.context or film.how_found or film.watched_with %} <div class="tag-row"> + {% if film.genre %}<span>{{ film.genre }}</span>{% endif %} {% if film.context %}<span>{{ film.context }}</span>{% endif %} {% if film.how_found %}<span>{{ film.how_found }}</span>{% endif %} {% if film.watched_with %}<span>With {{ film.watched_with }}</span>{% endif %} diff --git a/templates/detail.html b/templates/detail.html index 20897b0..156dec2 100644 --- a/templates/detail.html +++ b/templates/detail.html @@ -78,6 +78,7 @@ <article class="detail-panel"> <p class="eyebrow">Production</p> <div class="detail-meta"> + {% if film.genre %}<span>{{ film.genre }}</span>{% endif %} {% if film.country %}<span>{{ film.country }}</span>{% endif %} {% if film.language %}<span>{{ film.language }}</span>{% endif %} {% if film.year %}<span>{{ film.year }}</span>{% endif %} diff --git a/templates/form.html b/templates/form.html index 4009e87..489d9c6 100644 --- a/templates/form.html +++ b/templates/form.html @@ -52,6 +52,11 @@ </div> <div class="field"> + <label for="genre">Genre</label> + <input id="genre" name="genre" value="{{ film.genre if film and film.genre else '' }}"> + </div> + + <div class="field"> <label for="language">Language</label> <input id="language" name="language" value="{{ film.language if film and film.language else '' }}"> </div> diff --git a/templates/stats.html b/templates/stats.html index e0a6a91..9b71679 100644 --- a/templates/stats.html +++ b/templates/stats.html @@ -78,6 +78,26 @@ </div> <ol id="watched-with" class="stats-list"></ol> </section> + + <section class="stats-panel"> + <div class="stats-panel-header"> + <div> + <p class="eyebrow">Genres</p> + <h2>Most watched</h2> + </div> + </div> + <ol id="top-genres" class="stats-list"></ol> + </section> + + <section class="stats-panel"> + <div class="stats-panel-header"> + <div> + <p class="eyebrow">Decades</p> + <h2>By era</h2> + </div> + </div> + <ol id="film-decades" class="stats-list"></ol> + </section> </section> {% endblock %} @@ -118,6 +138,16 @@ <li><span>${item.watched_with}</span><strong>${item.count}</strong></li> `).join(""); + const topGenres = document.getElementById("top-genres"); + topGenres.innerHTML = data.films_per_genre.slice(0, 8).map((item) => ` + <li><span>${item.genre}</span><strong>${item.count}</strong></li> + `).join(""); + + const filmDecades = document.getElementById("film-decades"); + filmDecades.innerHTML = data.films_per_decade.map((item) => ` + <li><span>${item.decade}</span><strong>${item.count}</strong></li> + `).join(""); + const starDistribution = document.getElementById("star-distribution"); const maxStars = Math.max(1, ...data.star_distribution.map((item) => item.count)); starDistribution.innerHTML = data.star_distribution.map((item) => ` diff --git a/templates/year_review.html b/templates/year_review.html index 1234e80..3d03cc0 100644 --- a/templates/year_review.html +++ b/templates/year_review.html @@ -89,6 +89,24 @@ {% endfor %} </ol> </article> + + <article class="review-panel"> + <p class="eyebrow">Decades</p> + <ol class="stats-list"> + {% for item in films_per_decade %} + <li><span>{{ item.decade }}</span><strong>{{ item.count }}</strong></li> + {% endfor %} + </ol> + </article> + + <article class="review-panel"> + <p class="eyebrow">Genres</p> + <ol class="stats-list"> + {% for item in films_per_genre %} + <li><span>{{ item.genre }}</span><strong>{{ item.count }}</strong></li> + {% endfor %} + </ol> + </article> </section> <section class="review-panel"> |