Theme editor

.env.dist

@@ -33,13 +33,4 @@ SECRET_REGISTER=
 VAPID_PUBLIC_KEY=
 VAPID_PRIVATE_KEY=
 SENDER_ADDRESS=
-#light theme
-#THEME_NAVBAR='navbar sticky-top navbar-expand-lg navbar-light bg-light'
-#THEME_CARD='shadow p-3 mb-4 bg-light rounded'
-#THEME_TABLE='table table-light table-hover table-sm'
-#THEME_LINK_PRIMARY='text-primary'
-#THEME_LINK_SECONDARY='text-dark'
-#THEME_JUMBOTRON='jumbotron mt-3 bg-secondary text-light border border-light'
-#THEME_COLOR_1='light'
-#THEME_COLOR_2='dark'
 ###< app ###

assets/js/app.js

@@ -96,7 +96,7 @@ if('serviceWorker' in navigator && 'https:' == window.location.protocol) {
 }
 
 $(document).ready(function () {
-    $('label.required').append(' <small class="badge bg-' + themeColor2 + ' text-' + themeColor1 + ' ml-1">' + trans_required + '</small>');
+    $('label.required').append(' <small class="form-required ' + theme_form_required +'">' + trans_required + '</small>');
 
     $(document).on('click', '.dashboard-table-expand', function(event) {
         event.preventDefault();

config/packages/twig.yaml

@@ -1,12 +1,3 @@
 twig:
     default_path: '%kernel.project_dir%/templates'
     form_themes: ['bootstrap_5_layout.html.twig']
-    globals:
-        themeNavbar: '%env(THEME_NAVBAR)%'
-        themeCard: '%env(THEME_CARD)%'
-        themeTable: '%env(THEME_TABLE)%'
-        themeLinkPrimary: '%env(THEME_LINK_PRIMARY)%'
-        themeLinkSecondary: '%env(THEME_LINK_SECONDARY)%'
-        themeJumbotron: '%env(THEME_JUMBOTRON)%'
-        themeColor1: '%env(THEME_COLOR_1)%'
-        themeColor2: '%env(THEME_COLOR_2)%'

config/services.yaml

@@ -4,14 +4,6 @@
 # Put parameters here that don't need to change on each machine where the app is deployed
 # https://symfony.com/doc/current/best_practices/configuration.html#application-related-configuration
 parameters:
-    env(THEME_NAVBAR): 'navbar sticky-top navbar-expand-lg navbar-dark bg-dark'
-    env(THEME_CARD): 'shadow p-3 mb-4 bg-dark rounded'
-    env(THEME_TABLE): 'table table-dark table-hover table-sm'
-    env(THEME_LINK_PRIMARY): 'text-info'
-    env(THEME_LINK_SECONDARY): 'text-light'
-    env(THEME_JUMBOTRON): 'jumbotron mt-3 bg-secondary text-light border border-light'
-    env(THEME_COLOR_1): 'dark'
-    env(THEME_COLOR_2): 'light'
 
 services:
     # default configuration for services in *this* file

src/Controller/AbstractAppController.php

@@ -6,6 +6,7 @@
 use App\Manager\CallManager;
 use App\Manager\ElasticsearchClusterManager;
 use App\Manager\PaginatorManager;
+use App\Manager\AppThemeManager;
 use App\Model\CallRequestModel;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
@@ -31,6 +32,14 @@ public function setClusterManager(ElasticsearchClusterManager $elasticsearchClus
         $this->elasticsearchClusterManager = $elasticsearchClusterManager;
     }
 
+    /**
+     * @required
+     */
+    public function setAppThemeManager(AppThemeManager $appThemeManager)
+    {
+        $this->appThemeManager = $appThemeManager;
+    }
+
     /**
      * @required
      */
@@ -49,6 +58,14 @@ public function setTranslator(TranslatorInterface $translator)
 
     public function renderAbstract(Request $request, string $view, array $parameters = [], Response $response = null): Response
     {
+        $twig = $this->container->get('twig');
+
+        $saved = $request->cookies->get('theme') ? json_decode($request->cookies->get('theme'), true) : [];
+        $predefined = $this->appThemeManager->getPredefined('dark');
+        foreach ($predefined as $k => $v) {
+            $twig->addGlobal('theme_'.$k, $saved[$k] ?? $v);
+        }
+
         if (false === isset($parameters['firewall'])) {
             $parameters['firewall'] = true;
         }

src/Controller/AppThemeController.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Controller;
+
+use App\Controller\AbstractAppController;
+use App\Form\Type\AppThemeType;
+use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Component\HttpFoundation\Cookie;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpFoundation\RedirectResponse;
+
+/**
+ * @Route("/admin")
+ */
+class AppThemeController extends AbstractAppController
+{
+    /**
+     * @Route("/theme-editor", name="app_theme_editor")
+     */
+    public function index(Request $request): Response
+    {
+        $theme = [];
+
+        $saved = $request->cookies->get('theme') ? json_decode($request->cookies->get('theme'), true) : [];
+        $predefined = $this->appThemeManager->getPredefined('dark');
+        foreach ($predefined as $k => $v) {
+            $theme[$k] = $saved[$k] ?? $v;
+        }
+
+        $form = $this->createForm(AppThemeType::class, $theme, [
+        ]);
+
+        $form->handleRequest($request);
+
+        if ($form->isSubmitted() && $form->isValid()) {
+            try {
+                $cookie = Cookie::create('theme', json_encode($form->getData()), 2147483647, '/', null, true, false, false, Cookie::SAMESITE_LAX);
+                $response = new RedirectResponse($request->getUri());
+                $response->headers->setCookie($cookie);
+
+                $this->addFlash('info', 'theme_saved');
+
+                return $response;
+            } catch (CallException $e) {
+                $this->addFlash('danger', $e->getMessage());
+            }
+        }
+
+        return $this->renderAbstract($request, 'Modules/app_theme/app_theme_editor.html.twig', [
+            'form' => $form->createView(),
+            'predefined' => $this->appThemeManager->predefinedList(),
+        ]);
+    }
+}

src/Form/Type/AppThemeType.php

@@ -0,0 +1,53 @@
+<?php
+
+namespace App\Form\Type;
+
+use App\Manager\AppThemeManager;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Component\Validator\Constraints\NotBlank;
+use Symfony\Contracts\Translation\TranslatorInterface;
+
+class AppThemeType extends AbstractType
+{
+    public function __construct(AppThemeManager $appThemeManager, TranslatorInterface $translator)
+    {
+        $this->appThemeManager = $appThemeManager;
+        $this->translator = $translator;
+    }
+
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $keys = $this->appThemeManager->keys();
+
+        $i = 1;
+        foreach ($keys as $key) {
+            $builder->add($key, TextType::class, [
+                'label' => 'theme_'.$key,
+                'required' => true,
+                'constraints' => [
+                    new NotBlank(),
+                ],
+                'attr' => [
+                    'data-break-after' => 4 == $i || 8 == $i ? 'yes' : 'no',
+                ],
+            ]);
+            $i++;
+        }
+    }
+
+    public function configureOptions(OptionsResolver $resolver)
+    {
+        $resolver->setDefaults([
+            //'data_class' => AppUserModel::class,
+        ]);
+    }
+
+    public function getBlockPrefix()
+    {
+        return 'data';
+    }
+}

src/Manager/AppThemeManager.php

@@ -0,0 +1,73 @@
+<?php
+
+namespace App\Manager;
+
+use App\Manager\AbstractAppManager;
+
+class AppThemeManager extends AbstractAppManager
+{
+    private $predefined = [
+        'dark' => [
+            'body' => 'bg-dark text-light',
+            'navbar' => 'sticky-top navbar-expand-lg navbar-dark bg-dark',
+            'nav_link' => 'text-light',
+            'dropdown_menu' => 'dropdown-menu-dark border border-secondary',
+            'block' => 'shadow p-3 mb-4 bg-dark rounded',
+            'modal_content' => 'bg-dark',
+            'form_control' => 'bg-dark text-light',
+            'form_required' => 'badge bg-light text-dark ml-1',
+            'table' => 'table-dark table-hover table-sm',
+            'link_primary' => 'text-info',
+            'link_secondary' => 'text-light',
+            'jumbotron' => 'mt-3 bg-secondary text-light border border-light',
+            'color_1' => 'dark',
+            'color_2' => 'light',
+        ],
+        'light' => [
+            'body' => 'bg-light text-dark',
+            'navbar' => 'sticky-top navbar-expand-lg navbar-light bg-light',
+            'nav_link' => 'text-dark',
+            'dropdown_menu' => 'dropdown-menu-light border border-secondary',
+            'block' => 'shadow p-3 mb-4 bg-light rounded',
+            'modal_content' => 'bg-light',
+            'form_control' => 'bg-light text-dark',
+            'form_required' => 'badge bg-dark text-light ml-1',
+            'table' => 'table-light table-hover table-sm',
+            'link_primary' => 'text-primary',
+            'link_secondary' => 'text-dark',
+            'jumbotron' => 'mt-3 bg-secondary text-light border border-light',
+            'color_1' => 'light',
+            'color_2' => 'dark',
+        ],
+    ];
+
+    public function keys(): array
+    {
+        return [
+            'body',
+            'navbar',
+            'nav_link',
+            'dropdown_menu',
+            'block',
+            'modal_content',
+            'form_control',
+            'form_required',
+            'table',
+            'link_primary',
+            'link_secondary',
+            'jumbotron',
+            'color_1',
+            'color_2',
+        ];
+    }
+
+    public function predefinedList(): array
+    {
+        return $this->predefined;
+    }
+
+    public function getPredefined(string $theme): array
+    {
+        return $this->predefined[$theme];
+    }
+}

templates/Embed/card_embed.html.twig → templates/Embed/block_embed.html.twig

@@ -1,4 +1,4 @@
-<div class="{{ themeCard }}">
+<div class="block {{ theme_block }}">
     {% block content %}
     {% endblock %}
 </div>

templates/Embed/shard_reroute_cluster_embed.html.twig

@@ -6,7 +6,7 @@
 
 <div class="modal fade" id="modal{{ modalReference }}" tabindex="-1" role="dialog" aria-labelledby="modalLabel{{ modalReference }}" aria-hidden="true">
     <div class="modal-dialog" role="document">
-        <div class="modal-content bg-{{ themeColor1 }}">
+        <div class="modal-content {{ theme_modal_content }}">
             <form action="{{ form_action }}">
                 <div class="modal-header">
                     <h5 class="modal-title" id="modalLabel{{ modalReference }}">{{ title }}</h5>

templates/Embed/stats_table_embed.html.twig

@@ -1,18 +1,18 @@
 {% set limit = 15 %}
 
 <div class="col">
-    <div class="card bg-{{ themeColor1 }} border border-secondary mb-4">
+    <div class="card bg-{{ theme_color_1 }} border border-secondary mb-4">
         <div class="card-body card-dashboard" id="{{ key }}">
             <h4 class="card-title text-center">{% block title %}{% endblock %}</h4>
 
-            <table class="table table-{{ themeColor1 }} table-hover table-sm">
+            <table class="table {{ theme_table }}">
                 {% block content %}
                 {% endblock %}
             </table>
 
             {% block all %}
                 {% if limit < results|length %}
-                    <a href="#{{ key }}" class="btn btn-{{ themeColor2 }} btn-sm text-center d-block dashboard-table-expand">{{ 'all'|trans }} ({{ results|length }})</a>
+                    <a href="#{{ key }}" class="btn btn-{{ theme_color_2 }} btn-sm text-center d-block dashboard-table-expand">{{ 'all'|trans }} ({{ results|length }})</a>
                 {% endif %}
             {% endblock %}
         </div>

templates/Embed/table_embed.html.twig

@@ -1,5 +1,5 @@
 <div class="table-responsive">
-    <table class="{% block table_class %}{{ themeTable }}{% endblock %}">
+    <table class="table {{ theme_table }}">
 
     <thead>
     {% block thead %}