ryjek/sprawozdania
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add darkmode, minimize js/css

Browse Source
This commit is contained in:
Ryjek
2024-08-09 10:53:16 +02:00
parent db660b3a89
commit 354aa9c3be
11 changed files with 665 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files
project/assets/bootstrap.js
Vendored
+1 -2
View File
@@ -1,5 +1,5 @@
import { startStimulusApp } from '@symfony/stimulus-bridge'; import { startStimulusApp } from '@symfony/stimulus-bridge';
import './services/theme_controller'
// Registers Stimulus controllers from controllers.json and in the controllers/ directory // Registers Stimulus controllers from controllers.json and in the controllers/ directory
export const app = startStimulusApp(require.context( export const app = startStimulusApp(require.context(
'@symfony/stimulus-bridge/lazy-controller-loader!./controllers', '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
@@ -7,4 +7,3 @@ export const app = startStimulusApp(require.context(
/\.[jt]sx?$/ /\.[jt]sx?$/
)); ));
// register any custom, 3rd party controllers here // register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);
project/assets/controllers/thememode_controller.js
+27
View File
@@ -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
+75
View File
@@ -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 -1
View File
@@ -1,5 +1,5 @@
body { body {
background-color: #e6e6e6; //background-color: #e6e6e6;
} }
.reports-all { .reports-all {
.col { .col {
project/composer.lock
Generated
+471 -393
View File
File diff suppressed because it is too large Load Diff
project/src/Twig/AppExtension.php
+6
View File
@@ -19,6 +19,7 @@ class AppExtension extends AbstractExtension
{ {
return [ return [
new TwigFunction('enum', [$this, 'enumChecker']), new TwigFunction('enum', [$this, 'enumChecker']),
new TwigFunction('is_route_active', [$this, 'getActualRoute']),
]; ];
} }
@@ -35,4 +36,9 @@ class AppExtension extends AbstractExtension
{ {
return $currentEnum->name === $needEnumName; return $currentEnum->name === $needEnumName;
} }
public function getActualRoute(string $value, string $route): string
{
return $value === $route ? 'active' : '';
}
} }
project/templates/base.html.twig
+2 -3
View File
@@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="pl"> <html lang="pl" data-bs-theme="">
<head> <head>
{% if app.environment == "prod" %} {% if app.environment == "prod" %}
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /> <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
@@ -7,9 +7,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="turbo-prefetch" content="false">
<title>{% block title %}Sprawozdania{% endblock %}</title> <title>{% block title %}Sprawozdania{% endblock %}</title>
{% block stylesheets %} {% block stylesheets %}
{# 'app' must match the first argument to addEntry() in webpack.config.js #} {# 'app' must match the first argument to addEntry() in webpack.config.js #}
{{ encore_entry_link_tags('app') }} {{ encore_entry_link_tags('app') }}
project/templates/navigation/switch_months.html.twig
+30 -30
View File
@@ -1,40 +1,40 @@
{% macro month_menu(routeName, months, currentMonth) %} {% macro month_menu(routeName, months, currentMonth) %}
<div class="row reports-months-all"> <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 %} {# {% for id,month in months %}#}
{% set isCurrent = currentMonth is not null and month | date("Y-m") == currentMonth | date("Y-m") %} {# {% 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="col col-xxl-1 col-xl-2 col-lg-2 col-md-3 col-sm-3 col-4">#}
<div class="card"> {# <div class="card">#}
<a href="{{ path(routeName,{monthId: id}) }}" class="btn {% if isCurrent %}btn-success{% else %}btn-secondary{% endif %}"> {# <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") %}
<li class="nav-item">
<a class="nav-link {% if isCurrent %} active{% endif %}" href="{{ path(routeName,{monthId: id}) }}">
{% if routeName=='app_schedule' %} {% if routeName=='app_schedule' %}
{{ id }} {{ id }}
{% else %} {% else %}
{{ month | date("Y-m") }} {{ month | date("Y-m") }}
{% endif %} {% endif %}
</a> </a>
</div> </li>
</div> {% endfor %}
{% endfor %} </ul>
{# <ul class="nav nav-tabs">#}
{# <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> </div>
{% endmacro %} {% endmacro %}
project/templates/navigation/top.html.twig
+34 -49
View File
@@ -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"> <div class="container-fluid">
<a class="navbar-brand" href="{{ path('index') }}">CRM</a> <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"> <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> <span class="navbar-toggler-icon"></span>
</button> </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') %} {% if is_granted('reportView') %}
<li class="nav-item"> <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> </li>
{% endif %} {% endif %}
<li class="nav-item"> <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> </li>
{% if is_granted('clientView') %} {% if is_granted('clientView') %}
<li class="nav-item"> <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> </li>
{% endif %} {% 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> </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">#} {# <form class="d-flex">#}
{# <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">#} {# <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">#}
{# <button class="btn btn-outline-success" type="submit">Search</button>#} {# <button class="btn btn-outline-success" type="submit">Search</button>#}
project/templates/reports/list.html.twig
+10 -12
View File
@@ -17,37 +17,35 @@
<h3 class="card-header">{{ reports.status.takeLang }}</h3> <h3 class="card-header">{{ reports.status.takeLang }}</h3>
<div class="card-body"> <div class="card-body">
{% for report in reports.reports %} {% 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="report-number">
<div class="badge bg-{{ reports.status.takeBadgeBg }} text-dark" data-toggle="tooltip" data-placement="bottom" title="Numer sprawozdania">{{ report.number }}</div> <div class="badge bg-{{ reports.status.takeBadgeBg }} text-dark" data-toggle="tooltip" data-placement="bottom" title="Numer sprawozdania">{{ report.number }}</div>
</div> </div>
{% if enum(reports.status, 'COMPLETE') %} {% if enum(reports.status, 'COMPLETE') and false %}
<div class="report-mark-uncompleted"> <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"> <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="token" value="{{ csrf_token('report-status') }}">
<input type="hidden" name="unDone" value="1"> <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> </form>
{# </div>#}
</div> </div>
{% endif %} {% endif %}
<div class="card-header"> <div class="card-header">
<h5 class="card-title"> <h5 class="card-title">
{% if is_granted('clientView') %} {% 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 %} {% else %}
{{ report.client.strName }} {{ report.client.strName }}
{% endif %} {% endif %}
</h5> </h5>
</div> </div>
{% if not enum(reports.status, 'COMPLETE') %} {# {% if not enum(reports.status, 'COMPLETE') %}#}
<div class="card-body"> <div class="card-body">
<p class="card-text">{{ sets.statusForm(report, reportToDoList, reports.status) }}</p> <p class="card-text">{{ sets.statusForm(report, reportToDoList, reports.status) }}</p>
</div> </div>
{% endif %} {# {% endif %}#}
{% if enum(reports.status, 'WORKING') %} {% if enum(reports.status, 'WORKING') %}
<div class="card-footer bg-transparent"> <div class="card-footer bg-transparent">
{{ sets.progress(report, reportToDoList|length) }} {{ sets.progress(report, reportToDoList|length) }}
project/webpack.config.js
+8
View File
@@ -72,6 +72,14 @@ Encore
// uncomment if you're having problems with a jQuery plugin // uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery() //.autoProvidejQuery()
.configureTerserPlugin(options => {
options.terserOptions = {
output: {
comments: false
},
sourceMap: true
}
})
; ;
module.exports = Encore.getWebpackConfig(); module.exports = Encore.getWebpackConfig();