add darkmode, minimize js/css

project/assets/bootstrap.js

@@ -1,5 +1,5 @@
 import { startStimulusApp } from '@symfony/stimulus-bridge';
-
+import './services/theme_controller'
 // Registers Stimulus controllers from controllers.json and in the controllers/ directory
 export const app = startStimulusApp(require.context(
     '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
@@ -7,4 +7,3 @@ export const app = startStimulusApp(require.context(
     /\.[jt]sx?$/
 ));
 // register any custom, 3rd party controllers here
-// app.register('some_controller_name', SomeImportedController);

project/assets/controllers/thememode_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus';
+export default class extends Controller {
+    modes;
+    currentState;
+    connect() {
+        this.modes = $(this.element).find('p');
+        this.currentState = localStorage.getItem('themeMode');
+        this.changeState()
+    }
+    switch(event) {
+        var mode = event.params.mode;
+        this.changeState(mode);
+
+    }
+
+    changeState(newState) {
+        if (typeof newState !== 'undefined') {
+            localStorage.setItem("themeMode", newState);
+            this.currentState = newState;
+        }
+        // $('html').attr('data-bs-theme', this.currentState);
+        this.modes.filter((e,tmp)=>{
+            const obj = $(tmp);
+            obj.toggle(!obj.hasClass(this.currentState));
+        })
+    }
+}

project/assets/services/theme_controller.js

@@ -0,0 +1,75 @@
+(() => {
+    '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 themeSwitcherText = document.querySelector('#bd-theme-text')
+        const activeThemeIcon = document.querySelector('.theme-icon-active use')
+        const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+        const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+            element.classList.remove('active')
+            element.setAttribute('aria-pressed', 'false')
+        })
+
+        btnToActive.classList.add('active')
+        btnToActive.setAttribute('aria-pressed', 'true')
+        activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+        const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+        themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+        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')
+                    console.log(theme)
+                    setStoredTheme(theme)
+                    setTheme(theme)
+                    showActiveTheme(theme, true)
+                })
+            })
+    })
+})()

project/assets/styles/main.less

@@ -1,5 +1,5 @@
 body {
-  background-color: #e6e6e6;
+  //background-color: #e6e6e6;
 }
 .reports-all {
   .col {

project/src/Twig/AppExtension.php

@@ -19,6 +19,7 @@ class AppExtension extends AbstractExtension
     {
         return [
             new TwigFunction('enum', [$this, 'enumChecker']),
+            new TwigFunction('is_route_active', [$this, 'getActualRoute']),
         ];
     }
 
@@ -35,4 +36,9 @@ class AppExtension extends AbstractExtension
     {
         return $currentEnum->name === $needEnumName;
     }
+
+    public function getActualRoute(string $value, string $route): string
+    {
+        return $value === $route ? 'active' : '';
+    }
 }

project/templates/base.html.twig

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="pl">
+<html lang="pl" data-bs-theme="">
 <head>
     {% if app.environment == "prod" %}
         <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
@@ -7,9 +7,8 @@
 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
+    <meta name="turbo-prefetch" content="false">
     <title>{% block title %}Sprawozdania{% endblock %}</title>
-
     {% block stylesheets %}
         {# 'app' must match the first argument to addEntry() in webpack.config.js #}
         {{ encore_entry_link_tags('app') }}

project/templates/navigation/switch_months.html.twig

@@ -1,40 +1,40 @@
 {% macro month_menu(routeName, months, currentMonth) %}
     <div class="row reports-months-all">
-        <div class="col">
+        {#        <div class="col">#}
-            <div class="card">
+        {#            <div class="card">#}
-                <a href="{{ path(routeName, {monthId:-1}) }}" class="btn  {% if currentMonth is null %}btn-success{% else %}btn-secondary{% endif %}">Zaległe</a>
+        {#                <a href="{{ path(routeName, {monthId:-1}) }}" class="btn  {% if currentMonth is null %}btn-success{% else %}btn-secondary{% endif %}">Zaległe</a>#}
-            </div>
+        {#            </div>#}
-        </div>
+        {#        </div>#}
+        {#        {% for id,month in months %}#}
+        {#            {% set isCurrent = currentMonth is not null and month | date("Y-m") == currentMonth | date("Y-m") %}#}
+        {#            <div class="col col-xxl-1 col-xl-2 col-lg-2 col-md-3 col-sm-3 col-4">#}
+        {#                <div class="card">#}
+        {#                    <a href="{{ path(routeName,{monthId: id}) }}"  class="btn {% if isCurrent %}btn-success{% else %}btn-secondary{% endif %}">#}
+        {#                        {% if routeName=='app_schedule' %}#}
+        {#                            {{ id }}#}
+        {#                        {% else %}#}
+        {#                            {{ month | date("Y-m") }}#}
+        {#                        {% endif %}#}
+        {#                    </a>#}
+        {#                </div>#}
+        {#            </div>#}
+        {#        {% endfor %}#}
+        <ul class="nav nav-underline nav-fill">
+            <li class="nav-item">
+                <a href="{{ path(routeName, {monthId:-1}) }}" class="nav-link {% if currentMonth is null %}active{% endif %}">Zaległe</a>
+            </li>
             {% for id,month in months %}
                 {% set isCurrent = currentMonth is not null and month | date("Y-m") == currentMonth | date("Y-m") %}
-            <div class="col col-xxl-1 col-xl-2 col-lg-2 col-md-3 col-sm-3 col-4">
+                <li class="nav-item">
-                <div class="card">
+                    <a class="nav-link {% if isCurrent %} active{% endif %}" href="{{ path(routeName,{monthId: id}) }}">
-                    <a href="{{ path(routeName,{monthId: id}) }}"  class="btn {% if isCurrent %}btn-success{% else %}btn-secondary{% endif %}">
                         {% if routeName=='app_schedule' %}
                             {{ id }}
                         {% else %}
                             {{ month | date("Y-m") }}
                         {% endif %}
                     </a>
-                </div>
+                </li>
-            </div>
             {% endfor %}
-{#        <ul class="nav nav-tabs">#}
+        </ul>
-{#            <li class="nav-item">#}
-{#                <a class="nav-link {% if currentMonth is null %}active{% endif %}" aria-current="page" href="{{ path(routeName, {monthId:-1}) }}">Zaległe</a>#}
-{#            </li>#}
-{#            {% for id,month in months %}#}
-{#                {% set isCurrent = currentMonth is not null and month | date("Y-m") == currentMonth | date("Y-m") %}#}
-{#                <li class="nav-item">#}
-{#                    <a class="nav-link {% if isCurrent %}active{% endif %}" href="{{ path(routeName,{monthId: id}) }}" aria-current="page">#}
-{#                        {% if routeName=='app_schedule' %}#}
-{#                            {{ id }}#}
-{#                        {% else %}#}
-{#                            {{ month | date("Y-m") }}#}
-{#                        {% endif %}#}
-{#                    </a>#}
-{#                </li>#}
-{#            {% endfor %}#}
-{#        </ul>#}
     </div>
 {% endmacro %}

project/templates/navigation/top.html.twig

@@ -1,69 +1,54 @@
-{#<nav class="navbar navbar-inverse">#}
+{% set route = app.request.attributes.get('_route') %}
-{#    <div class="container-fluid">#}
+<nav class="navbar navbar-light navbar-expand-md justify-content-md-center justify-content-start">
-{#        <div class="navbar-header">#}
-{#            <a class="navbar-brand" href="{{ path('app_base') }}">WebSiteName</a>#}
-{#        </div>#}
-{#        <ul class="nav navbar-nav">#}
-{#            <li class="active"><a href="{{ path('app_base') }}">Home</a></li>#}
-{#            <li class="dropdown">#}
-{#                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Klienci#}
-{#                    <span class="caret"></span></a>#}
-{#                <ul class="dropdown-menu">#}
-{#                    <li><a href="{{ path('app_customers_list') }}">Lista</a></li>#}
-{#                    <li><a href="{{ path('app_base') }}">Dodaj klienta</a></li>#}
-{#                    <li><a href="#">Page 1-3</a></li>#}
-{#                </ul>#}
-{#            </li>#}
-{#            <li><a href="#">Page 2</a></li>#}
-{#            <li><a href="#">Page 3</a></li>#}
-{#        </ul>#}
-{#    </div>#}
-{#</nav>#}
-<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
     <div class="container-fluid">
         <a class="navbar-brand" href="{{ path('index') }}">CRM</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="navbarSupportedContent">
-            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <ul class="navbar-nav">
                 {% if is_granted('reportView') %}
                     <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="{{ path('app_base') }}">Sprawozdania</a>
+                        <a class="nav-link {{ is_route_active('app_base', route) }}" aria-current="page" href="{{ path('app_base') }}">Sprawozdania</a>
                     </li>
                 {% endif %}
                 <li class="nav-item">
-                    <a class="nav-link active" aria-current="page" href="{{ path('app_schedule') }}">Harmonogramy</a>
+                    <a class="nav-link {{ is_route_active('app_schedule', route) }}" aria-current="page" href="{{ path('app_schedule') }}">Harmonogramy</a>
                 </li>
                 {% if is_granted('clientView') %}
                     <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="{{ path('app_customers_list') }}">Klienci</a>
+                        <a class="nav-link {{ is_route_active('app_customers_list', route) }}" aria-current="page" href="{{ path('app_customers_list') }}">Klienci</a>
                     </li>
                 {% endif %}
-{#                <li class="nav-item dropdown">#}
-{#                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">#}
-{#                        Klienci#}
-{#                    </a>#}
-{#                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">#}
-{#                        <li><a class="dropdown-item" href="{{ path('app_customers_list') }}">Lista</a></li>#}
-{#                        <li><a class="dropdown-item" href="{{ path('app_add_client') }}">Dodaj klienta</a></li>#}
-{#                        <li><hr class="dropdown-divider"></li>#}
-{#                        <li><a class="dropdown-item" href="#">Something else here</a></li>#}
-{#                    </ul>#}
-{#                </li>#}
-{#                <li class="nav-item">#}
-{#                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>#}
-{#                </li>#}
             </ul>
-            {% if is_granted('clientAdd') %}
+            <ul class="navbar-nav">
-                <div class="d-flex">
+                <li class="nav-item">
-                    <a  href="{{ path('app_add_client') }}" class="btn btn-success btn-outline-dark" type="submit">Dodaj klienta</a>
+                    <a href="{{ path('app_add_client') }}" class="btn btn-outline-success" type="submit"><i class="fa-regular fa-id-card"></i> Dodaj klienta</a>
-                </div>
+                </li>
-            {% endif %}
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        <i class="fa-solid fa-circle-user"></i>
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
+                        <li data-controller="thememode">
+                            <p class="nav-link dark" data-action="click->thememode#switch" data-thememode-mode-param="dark" data-bs-theme-value="dark"><i class="fa-solid fa-moon"></i> Tryb ciemny</p>
+                            <p class="nav-link light" data-action="click->thememode#switch" data-thememode-mode-param="light" data-bs-theme-value="light"><i class="fa-regular fa-sun"></i> Tryb jasny</p>
+                        </li>
+                        <li><hr class="dropdown-divider"></li>
+                        <li><a class="nav-link" href="{{ path('app_logout') }}"><i class="fa-solid fa-right-from-bracket"></i> Wyloguj</a></li>
+                    </ul>
+                </li>
+            </ul>
+{#            {% if is_granted('clientAdd') %}#}
+{#                <div class="d-flex">#}
+{#                    <a  href="{{ path('app_add_client') }}" class="btn btn-outline-success" type="submit">Dodaj klienta</a>#}
+{#                </div>#}
+{#            {% endif %}#}
+
+{#            <div class="d-flex">#}
+{#                <a  href="{{ path('app_logout') }}" class="btn btn-outline-primary" type="submit">Wyloguj</a>#}
+{#            </div>#}
 
-            <div class="d-flex">
-                <a  href="{{ path('app_logout') }}" class="btn btn-primary btn-outline-dark" type="submit">Wyloguj</a>
-            </div>
 {#            <form class="d-flex">#}
 {#                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">#}
 {#                <button class="btn btn-outline-success" type="submit">Search</button>#}

project/templates/reports/list.html.twig

@@ -17,37 +17,35 @@
                     <h3 class="card-header">{{ reports.status.takeLang }}</h3>
                     <div class="card-body">
                         {% for report in reports.reports %}
-                            <div class="card text-{{ reports.status.textColor }} border-dark report-one  {{ reports.status.name | lower }}">
+                            <div class="card text-{{ reports.status.textColor }} report-one  {{ reports.status.name | lower }}">
                                 <div class="report-number">
                                     <div class="badge bg-{{ reports.status.takeBadgeBg }} text-dark" data-toggle="tooltip" data-placement="bottom" title="Numer sprawozdania">{{ report.number }}</div>
                                 </div>
-                                {% if enum(reports.status, 'COMPLETE') %}
+                                {% if enum(reports.status, 'COMPLETE') and false %}
                                     <div class="report-mark-uncompleted">
-{#                                        <div class="badge bg-danger text-dark" data-toggle="tooltip" data-placement="bottom" title="Oznacz jako nie zakończone">#}
 
                                         <form action="{{ path('app_set_status_todo',{id:report.id}) }}" method="post">
                                             <input type="hidden" name="token" value="{{ csrf_token('report-status') }}">
                                             <input type="hidden" name="unDone" value="1">
-                                                <button type="submit"  class="badge bg-danger text-dark" data-toggle="tooltip" data-placement="bottom" title="Oznacz jako nie zakończone"><i class="fa fa-solid fa-remove"></i></button>
+                                            <button type="submit"  class="badge bg-danger" data-toggle="tooltip" data-placement="bottom" title="Oznacz jako nie zakończone"><i class="fa fa-solid fa-remove"></i></button>
                                         </form>
 
-{#                                        </div>#}
                                     </div>
                                 {% endif %}
                                 <div class="card-header">
                                     <h5 class="card-title">
                                         {% if is_granted('clientView') %}
-                                            <a href="{{ path('app_client',{id: report.client.id}) }}" class="link-{{ reports.status.linkColor }}">{{ report.client.strName }}</a>
+                                            <a href="{{ path('app_client',{id: report.client.id}) }}" >{{ report.client.strName }}</a>
                                         {% else %}
                                             {{ report.client.strName }}
                                         {% endif %}
                                     </h5>
                                 </div>
-                                {% if not enum(reports.status, 'COMPLETE') %}
+{#                                {% if not enum(reports.status, 'COMPLETE') %}#}
                                     <div class="card-body">
                                         <p class="card-text">{{ sets.statusForm(report, reportToDoList, reports.status) }}</p>
                                     </div>
-                                {% endif %}
+{#                                {% endif %}#}
                                 {% if enum(reports.status, 'WORKING') %}
                                     <div class="card-footer bg-transparent">
                                         {{ sets.progress(report, reportToDoList|length) }}

project/webpack.config.js

@@ -72,6 +72,14 @@ Encore
 
     // uncomment if you're having problems with a jQuery plugin
     //.autoProvidejQuery()
+    .configureTerserPlugin(options => {
+        options.terserOptions = {
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }
+    })
 ;
 
 module.exports = Encore.getWebpackConfig();