Broadcast system

Spomky-Labs · Mar 7, 2024 · 3945160 · 3945160
1 parent 4eeaa8c
commit 3945160
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 24 deletions.
diff --git a/assets/controllers.json b/assets/controllers.json
@@ -8,6 +8,10 @@
             "backgroundsync-form": {
                 "enabled": true,
                 "fetch": "lazy"
+            },
+            "sync-broadcast": {
+                "enabled": true,
+                "fetch": "lazy"
             }
         }
     },

diff --git a/composer.lock b/composer.lock
diff --git a/config/packages/pwa.yaml b/config/packages/pwa.yaml
@@ -35,11 +35,12 @@ pwa:
             page_cache:
                 urls:
                 - 'app_homepage'
-                - '_api_/items{._format}_get_collection'
             offline_fallback:
                 page: 'app_homepage'
             background_sync:
-                - queue_name: 'sync-queue'
-                  regex: 'https://localhost\\:8000(\/|\/items\/.*)$'
-                  max_retention_time: 7200
-                  force_sync_fallback: false
+                - queue_name: 'items'
+                  regex: '\/items\/.*$'
+                  broadcast_channel: 'items-sync'
+                - queue_name: 'add'
+                  regex: '\/add$'
+                  broadcast_channel: 'add-item'
diff --git a/src/Controller/HomepageController.php b/src/Controller/HomepageController.php
@@ -16,22 +16,30 @@ public function __construct(
         private readonly ItemRepository $itemRepository,
     ){}
 
-    #[Route('/', name: 'app_homepage', methods: [Request::METHOD_GET, Request::METHOD_POST])]
-    public function homepage(Request $request): Response
+    #[Route('/', name: 'app_homepage', methods: [Request::METHOD_GET])]
+    public function homepage(): Response
     {
         $form = $this->itemHandler->prepare();
-        $item = $this->itemHandler->handle($form, $request);
-        if ($item !== null) {
-            $this->addFlash('success', 'Item added');
-            return $this->redirectToRoute('app_homepage');
-        }
 
         return $this->render('homepage/index.html.twig', [
             'form' => $form,
             'items' => $this->itemRepository->findBy([], ['id' => 'DESC'], 50),
         ]);
     }
 
+    #[Route('/add', name: 'app_add_item', methods: [Request::METHOD_POST])]
+    public function addItem(Request $request): Response
+    {
+        $form = $this->itemHandler->prepare();
+        $item = $this->itemHandler->handle($form, $request);
+        if ($item !== null) {
+            $this->addFlash('success', 'Item added');
+            return $this->redirectToRoute('app_homepage');
+        }
+        $this->addFlash('error', 'Item not added');
+        return $this->redirectToRoute('app_homepage');
+    }
+
     #[Route('/items/{id}/toggle', name: 'app_toggle', methods: [Request::METHOD_POST])]
     public function toggle(string $id): Response
     {

diff --git a/templates/homepage/index.html.twig b/templates/homepage/index.html.twig
@@ -40,11 +40,6 @@
             installButton.classList.remove('hover:bg-gray-50', 'dark:hover:bg-gray-800');
             installButton.classList.add('text-white', 'bg-blue-400', 'dark:bg-blue-500', 'cursor-not-allowed', 'font-medium', 'rounded-lg', 'text-sm', 'px-5', 'py-2.5', 'text-center');
         }
-
-        const bc = new BroadcastChannel("background-sync");
-        bc.onmessage = (event) => {
-            console.log(event.data);
-        };
     </script>
 {% endblock %}
 {% block body %}
@@ -63,7 +58,37 @@
         </div>
     </section>
     <section class="bg-white dark:bg-gray-900">
-        <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12" {{ stimulus_controller('@pwa/connection-status') }}>
+        <div class="px-4 mx-auto max-w-screen-xl text-center px-4" {{ stimulus_controller('@pwa/sync-broadcast', {channel: 'add-item'}) }}>
+            <div
+                class="flex items-center p-4 mb-4 text-sm border rounded-lg"
+                role="alert"
+            >
+                <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+                </svg>
+                <div>
+                    <span class="font-medium">Remaining requests (add item)</span>: <span {{ stimulus_target('@pwa/sync-broadcast', 'remaining') }}>0</span>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="bg-white dark:bg-gray-900">
+        <div class="px-4 mx-auto max-w-screen-xl text-center px-4" {{ stimulus_controller('@pwa/sync-broadcast', {channel: 'items-sync'}) }}>
+            <div
+                class="flex items-center p-4 mb-4 text-sm border rounded-lg"
+                role="alert"
+            >
+                <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+                </svg>
+                <div>
+                    <span class="font-medium">Remaining requests (item modification)</span>: <span {{ stimulus_target('@pwa/sync-broadcast', 'remaining') }}>0</span>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="bg-white dark:bg-gray-900">
+        <div class="mx-auto max-w-screen-xl text-center px-4" {{ stimulus_controller('@pwa/connection-status') }}>
             <div
                 {{ stimulus_target('@pwa/connection-status', 'attribute') }}
                 class="flex items-center p-4 mb-4 text-sm border rounded-lg online:text-green-800 online:bg-green-50 online:dark:bg-gray-800 online:dark:text-green-400 offline:text-yellow-800 offline:bg-yellow-50 offline:dark:bg-gray-800 offline:dark:text-yellow-300"
@@ -144,12 +169,18 @@
                                             Add a new item
                                         </h2>
                                     </div>
-                                    {{ form_start(form, {attr: {class: 'max-w-sm mx-auto'}}) }}
+                                    {# {{ form_start(form, {attr: {class: 'max-w-sm mx-auto'}}) }} #}
+                                    <form
+                                        {{ stimulus_controller('@pwa/backgroundsync-form', {redirection: path('app_homepage')}) }}
+                                        action="{{ path('app_add_item') }}"
+                                        method="post"
+                                        class="max-w-sm mx-auto"
+                                    >
                                     <div class="mb-5">
                                         {{ form_label(form.name, null, {label_attr: {class: 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'}}) }}
                                         {{ form_widget(form.name, {attr: {class: 'block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-base focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'}}) }}
                                     </div>
-                                    <button type="submit" class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+                                    <button {{ stimulus_action('@pwa/backgroundsync-form', 'send') }} type="submit" class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                                         Add
                                     </button>
                                     <button {{ stimulus_action('modal', 'close')}} class="text-lg absolute top-5 right-5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-4 h-4 ms-auto dark:hover:bg-gray-600 dark:hover:text-white">