diff --git a/public/js/app.js b/public/js/app.js index 3a23118e..3ea8f006 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -9,6 +9,89 @@ if ('serviceWorker' in navigator) { let ratingEditMode = false +document.addEventListener('DOMContentLoaded', function () { + const theme = document.cookie.split('; ').find((row) => row.startsWith('theme='))?.split('=')[1] ?? 'light'; + document.getElementById('darkModeInput').checked = theme !== 'light' + + const logPlayModalSearchInput = document.getElementById('logPlayModalSearchInput'); + if (logPlayModalSearchInput != null) { + logPlayModalSearchInput.addEventListener('change', updateLogPlayModalButtonState); + document.getElementById('logPlayModalSearchInput').addEventListener('input', updateLogPlayModalButtonState); + document.getElementById('logPlayModalSearchInput').addEventListener('keypress', loadLogModalSearchResultsOnEnterPress); + + new Datepicker(document.getElementById('logPlayModalWatchDateInput'), { + format: document.getElementById('dateFormatJavascript').value, + title: 'Watch date', + }) + + document.getElementById('logPlayModal').addEventListener('show.bs.modal', function () { + document.getElementById('logPlayModalWatchDateInput').value = getCurrentDate() + }) + + document.getElementById('logPlayModal').addEventListener('hidden.bs.modal', function () { + document.getElementById('logPlayModalSearchInput').value = '' + resetLogModalLogInputs() + resetLogModalSearchResults() + backToLogModalSearchResults() + }) + } +}); + +function setTheme(theme, force = false) { + const htmlTag = document.getElementById('html'); + + if (force === false && htmlTag.dataset.bsTheme === theme) { + return + } + + let cookieDate = new Date; + cookieDate.setFullYear(cookieDate.getFullYear() + 1); + document.cookie = 'theme=' + theme + ';path=/;expires=' + cookieDate.toUTCString() + ';' + + htmlTag.dataset.bsTheme = theme + + if (theme === 'light') { + updateHtmlThemeColors('light', 'dark') + + return; + } + + updateHtmlThemeColors('dark', 'light') +} + +function updateHtmlThemeColors(mainColor, secondaryColor) { + const logSpecificMovieButton = document.getElementById('logSpecificMovieButton'); + const moreSpecificMovieButton = document.getElementById('moreSpecificMovieButton'); + const toggleWatchDatesButton = document.getElementById('toggleWatchDatesButton'); + if (logSpecificMovieButton != null && moreSpecificMovieButton != null && toggleWatchDatesButton != null) { + toggleWatchDatesButton.classList.add('btn-' + secondaryColor) + toggleWatchDatesButton.classList.remove('btn-' + mainColor) + logSpecificMovieButton.classList.add('btn-outline-' + secondaryColor) + logSpecificMovieButton.classList.remove('btn-outline-' + mainColor) + moreSpecificMovieButton.classList.add('btn-outline-' + secondaryColor) + moreSpecificMovieButton.classList.remove('btn-outline-' + mainColor) + } + + const playStatsDiv1 = document.getElementById('playStatsDiv1'); + const playStatsDiv2 = document.getElementById('playStatsDiv2'); + if (playStatsDiv1 != null && playStatsDiv2 != null) { + playStatsDiv1.classList.add('text-' + secondaryColor) + playStatsDiv1.classList.remove('text-' + mainColor) + playStatsDiv2.classList.add('text-' + secondaryColor) + playStatsDiv2.classList.remove('text-' + mainColor) + + document.querySelectorAll('.activeItemButton').forEach((element) => { + if (mainColor === 'dark') { + element.classList.add('text-white'); + element.classList.remove('activeItemButtonActiveLight'); + } else { + element.classList.remove('text-white'); + element.classList.add('activeItemButtonActiveLight'); + } + }); + } +} + async function searchTmdbWithLogModalSearchInput() { resetLogModalSearchResults() document.getElementById('logPlayModalSearchSpinner').classList.remove('d-none') @@ -147,17 +230,6 @@ function loadLogModalSearchResultsOnEnterPress(event) { } } -document.getElementById('logPlayModal').addEventListener('show.bs.modal', function () { - document.getElementById('logPlayModalWatchDateInput').value = getCurrentDate() -}) - -document.getElementById('logPlayModal').addEventListener('hidden.bs.modal', function () { - document.getElementById('logPlayModalSearchInput').value = '' - resetLogModalLogInputs() - resetLogModalSearchResults() - backToLogModalSearchResults() -}) - function resetLogModalLogInputs() { document.getElementById('logPlayModalTmdbIdInput').value = '' document.getElementById('logPlayModalWatchDateInput').value = getCurrentDate() @@ -358,57 +430,3 @@ function toggleThemeSwitch() { setTheme('light') } - -setTheme(window.localStorage.getItem('theme') ?? 'light', true) - -function setTheme(theme, force = false) { - if (force === false && document.getElementById('html').dataset.bsTheme === theme) { - return - } - - window.localStorage.setItem('theme', theme); - document.getElementById('html').dataset.bsTheme = theme - - if (theme === 'light') { - updateHtmlThemeColors('light', 'dark') - - return; - } - - updateHtmlThemeColors('dark', 'light') -} - -function updateHtmlThemeColors(mainColor, secondaryColor) { - document.getElementById('darkModeInput').checked = mainColor === "dark" - - const logSpecificMovieButton = document.getElementById('logSpecificMovieButton'); - const moreSpecificMovieButton = document.getElementById('moreSpecificMovieButton'); - const toggleWatchDatesButton = document.getElementById('toggleWatchDatesButton'); - if (logSpecificMovieButton != null && moreSpecificMovieButton != null && toggleWatchDatesButton != null) { - toggleWatchDatesButton.classList.add('btn-' + secondaryColor) - toggleWatchDatesButton.classList.remove('btn-' + mainColor) - logSpecificMovieButton.classList.add('btn-outline-' + secondaryColor) - logSpecificMovieButton.classList.remove('btn-outline-' + mainColor) - moreSpecificMovieButton.classList.add('btn-outline-' + secondaryColor) - moreSpecificMovieButton.classList.remove('btn-outline-' + mainColor) - } - - const playStatsDiv1 = document.getElementById('playStatsDiv1'); - const playStatsDiv2 = document.getElementById('playStatsDiv2'); - if (playStatsDiv1 != null && playStatsDiv2 != null) { - playStatsDiv1.classList.add('text-' + secondaryColor) - playStatsDiv1.classList.remove('text-' + mainColor) - playStatsDiv2.classList.add('text-' + secondaryColor) - playStatsDiv2.classList.remove('text-' + mainColor) - - document.querySelectorAll('.activeItemButton').forEach((element) => { - if (mainColor === 'dark') { - element.classList.add('text-white'); - element.classList.remove('activeItemButtonActiveLight'); - } else { - element.classList.remove('text-white'); - element.classList.add('activeItemButtonActiveLight'); - } - }); - } -} diff --git a/src/Factory.php b/src/Factory.php index eb203bb3..f3c5aeea 100644 --- a/src/Factory.php +++ b/src/Factory.php @@ -276,6 +276,7 @@ public static function createTwigEnvironment(ContainerInterface $container) : Tw $twig->addGlobal('dateFormatPhp', $dateFormatPhp); $twig->addGlobal('dateFormatJavascript', $dataFormatJavascript); $twig->addGlobal('requestUrlPath', self::createCurrentHttpRequest()->getPath()); + $twig->addGlobal('theme', $_COOKIE['theme'] ?? 'light'); return $twig; } diff --git a/templates/base.html.twig b/templates/base.html.twig index 3f7e2aee..fc9d9936 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -1,5 +1,5 @@ - + {% block title %}{% endblock %} diff --git a/templates/page/dashboard.html.twig b/templates/page/dashboard.html.twig index 042acdb9..a9bf8eed 100644 --- a/templates/page/dashboard.html.twig +++ b/templates/page/dashboard.html.twig @@ -20,7 +20,7 @@ {{ include('component/user-select.html.twig') }}

Overview

-
+
{{ totalPlayCount }}
TOTAL PLAYS
@@ -32,7 +32,7 @@

-
+
{{ averagePlaysPerDay }}
PLAYS PER DAY
@@ -47,7 +47,8 @@
-
  • +
  • Last Plays
    • diff --git a/templates/page/movie.html.twig b/templates/page/movie.html.twig index 88801fe8..e4621971 100644 --- a/templates/page/movie.html.twig +++ b/templates/page/movie.html.twig @@ -112,7 +112,9 @@
    - @@ -141,7 +143,7 @@
    @@ -151,7 +153,7 @@