Add footer with switch.

Start working on dark theme
Fix links to products.
2026-03-01 10:46:47 +01:00 · 2026-01-30 15:51:40 +01:00 · 2026-01-28 08:33:22 +01:00 · 2026-01-28 08:31:41 +01:00
6 changed files with 109 additions and 14 deletions
--- a/src/Command/Migrate.php
+++ b/src/Command/Migrate.php
@@ -112,7 +112,7 @@ class Migrate extends Command
                    'productsUrl' => 'https://uk.ryobitools.eu/api/product-listing/get-products',
                    'cultureCode' => 'en-GB',
                    'currency' => 'GBP',
-                    'locale' => 'en',
+                    'locale' => 'uk',
                    'created_at' => now(),
                    'updated_at' => now(),
                ]
--- a/src/Command/ScrapeWebsite.php
+++ b/src/Command/ScrapeWebsite.php
@@ -38,7 +38,7 @@ class ScrapeWebsite extends Command
        $progress = new ProgressBar($output);
        $countries = Country::all();
        foreach($countries as $country) {
-            $output->writeln('Country name: ' . $country->countryName."\n");
+            $output->writeln('Country name: ' . $country->countryName);
            $progress->start();
            $products = $this->getProducts($country);
            $progress->setMaxSteps(count($products));
--- a/templates/footer.html.twig
+++ b/templates/footer.html.twig
@@ -0,0 +1,9 @@
+<div class="container">
+    <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
+        <div class="col-md-4 d-flex align-items-center">
+            <span class="mb-3 mb-md-0 text-body-secondary">© 2025 Company, Inc</span>
+            <a class="align-items-center text-decoration-none" data-bs-theme-value="light">☀️ Light</a>
+            <a class="align-items-center text-decoration-none" data-bs-theme-value="dark">🌕 Dark</a>
+        </div>
+    </footer>
+</div>
--- a/templates/product.html.twig
+++ b/templates/product.html.twig
@@ -22,7 +22,7 @@
                        </ol>
                    </nav>
                </td>
-                <td><a href='https://pl.ryobitools.eu/{{ product.url }}'>link</a></td>
+                <td><a href='https://{{ product.country.locale }}.ryobitools.eu{{ product.url }}'>link</a></td>
            </tr>
            <tr>
                <td colspan="5">
--- a/templates/productList.html.twig
+++ b/templates/productList.html.twig
@@ -62,7 +62,7 @@
                                    </ol>
                                </nav>
                            </td>
-                            <td class="align-middle"><a href='https://pl.ryobitools.eu/{{ product.url }}'>link</a></td>
+                            <td class="align-middle"><a href='https://{{ product.country.locale }}.ryobitools.eu{{ product.url }}'>link</a></td>
                            <td class="align-middle text-end">
                                {% if product.isDiscontinued() or product.priceCurrent == product.productStandardPrice %}
                                {{ product.priceLowest | format_currency(product.country.currency, {}, product.country.locale) }}
--- a/templates/template.html.twig
+++ b/templates/template.html.twig
@@ -1,8 +1,78 @@
 <!doctype html>
-<html lang="en" data-bs-theme="light">
+<html lang="en" data-bs-theme="">
 <head>
+    <script>
+        (() => {
+            'use strict'
+
+            const getStoredTheme = () => localStorage.getItem('theme')
+            const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+            const getPreferredTheme = () => {
+                const storedTheme = getStoredTheme()
+                if (storedTheme) {
+                    return storedTheme
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+            }
+
+            const setTheme = theme => {
+                if (theme === 'auto') {
+                    document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+                } else {
+                    document.documentElement.setAttribute('data-bs-theme', theme)
+                }
+            }
+
+            setTheme(getPreferredTheme())
+
+            const showActiveTheme = (theme, focus = false) => {
+                const themeSwitcher = document.querySelector('#bd-theme')
+
+                if (!themeSwitcher) {
+                    return
+                }
+
+                const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+
+                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                    element.classList.remove('active')
+                })
+
+                btnToActive.classList.add('active')
+
+                if (focus) {
+                    themeSwitcher.focus()
+                }
+            }
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme()
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme())
+                }
+            })
+
+            window.addEventListener('DOMContentLoaded', () => {
+                showActiveTheme(getPreferredTheme())
+
+                document.querySelectorAll('[data-bs-theme-value]')
+                    .forEach(toggle => {
+                        toggle.addEventListener('click', () => {
+                            const theme = toggle.getAttribute('data-bs-theme-value')
+                            setStoredTheme(theme)
+                            setTheme(theme)
+                            showActiveTheme(theme, true)
+                        })
+                    })
+            })
+        })()
+
+    </script>
    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ryobi crawler</title>
    <link href="/templates/css/bootstrap.min.css" rel="stylesheet"/>
@@ -13,32 +83,47 @@
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ path('app_home') }}">Crawler</a>

-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                {% cache "menu_count" ~ listType|default('') %}
                    <li class="nav-item">
-                        <a class="nav-link {% if app.request.pathinfo == path('app_home') %}active shadow-sm bg-body rounded{% endif %}" aria-current="page" href="{{ path('app_home') }}">All products <span class="badge text-bg-secondary">{{ allCount() }}</span></a>
+                        <a class="nav-link {% if app.request.pathinfo == path('app_home') %}active shadow-sm bg-body rounded{% endif %}"
+                           aria-current="page" href="{{ path('app_home') }}">All products <span
+                                    class="badge text-bg-secondary">{{ allCount() }}</span></a>
                    </li>
                    <li class="nav-item">
-                        <a class="nav-link {% if app.request.pathinfo == path('app_promos') %}active shadow-sm bg-body rounded{% endif %}" aria-current="page" href="{{ path('app_promos') }}">Promos <span class="badge text-bg-secondary">{{ promosCount() }}</span></a>
+                        <a class="nav-link {% if app.request.pathinfo == path('app_promos') %}active shadow-sm bg-body rounded{% endif %}"
+                           aria-current="page" href="{{ path('app_promos') }}">Promos <span
+                                    class="badge text-bg-secondary">{{ promosCount() }}</span></a>
                    </li>
                    <li class="nav-item">
-                        <a class="nav-link {% if app.request.pathinfo == path('app_lowest_price') %}active shadow-sm bg-body rounded{% endif %}" aria-current="page" href="{{ path('app_lowest_price') }}">Lowest price <span class="badge text-bg-secondary">{{ lowestPriceCount() }}</span></a>
+                        <a class="nav-link {% if app.request.pathinfo == path('app_lowest_price') %}active shadow-sm bg-body rounded{% endif %}"
+                           aria-current="page" href="{{ path('app_lowest_price') }}">Lowest price <span
+                                    class="badge text-bg-secondary">{{ lowestPriceCount() }}</span></a>
                    </li>
                    <li class="nav-item">
-                        <a class="nav-link {% if app.request.pathinfo == path('app_new') %}active shadow-sm bg-body rounded{% endif %}" aria-current="page" href="{{ path('app_new') }}">New in last 30 days <span class="badge text-bg-secondary">{{ newCount() }}</span></a>
+                        <a class="nav-link {% if app.request.pathinfo == path('app_new') %}active shadow-sm bg-body rounded{% endif %}"
+                           aria-current="page" href="{{ path('app_new') }}">New in last 30 days <span
+                                    class="badge text-bg-secondary">{{ newCount() }}</span></a>
                    </li>
                    <li class="nav-item">
-                        <a class="nav-link {% if app.request.pathinfo == path('app_discontinued') %}active shadow-sm bg-body rounded{% endif %}" aria-current="page" href="{{ path('app_discontinued') }}">Discontinued <span class="badge text-bg-secondary">{{ discontinuedCount() }}</span></a>
+                        <a class="nav-link {% if app.request.pathinfo == path('app_discontinued') %}active shadow-sm bg-body rounded{% endif %}"
+                           aria-current="page" href="{{ path('app_discontinued') }}">Discontinued <span
+                                    class="badge text-bg-secondary">{{ discontinuedCount() }}</span></a>
                    </li>
                {% endcache %}
+                {#                <li class="nav-item dropdown"> #}
+                {#                   #}
+                {#                </li> #}
            </ul>

            <form class="form-floating d-flex col-lg-6 col-sm-8" role="search" action="{{ path('app_search') }}">
-                <input class="form-control me-2 form-control-sm" type="search" id="floatingInputValue" name="search" placeholder="Search term eg. 36v or RCS18X" value="{{ search|default('') }}">
+                <input class="form-control me-2 form-control-sm" type="search" id="floatingInputValue" name="search"
+                       placeholder="Search term eg. 36v or RCS18X" value="{{ search|default('') }}">
                <button class="btn btn-outline-success" type="submit">Search</button>
                <label for="floatingInputValue">Search term eg. 36v or RCS18X</label>
            </form>
@@ -47,6 +132,7 @@

 </nav>
 {% block content %}{% endblock %}
+{{ include('footer.html.twig') }}
 <script src="/templates/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
Author	SHA1	Message	Date
Krzysiej	8a520b11d6	Add footer with switch.	2026-03-01 10:46:47 +01:00
Krzysiej	ddc4cf9997	Start working on dark theme	2026-01-30 15:51:40 +01:00
Krzysiej	6556ba0f88	Fix links to products.	2026-01-28 08:33:22 +01:00
Krzysiej	6da4f4257e	Fix links to products.	2026-01-28 08:31:41 +01:00