basic support for push messages with actions

components/PwaManager.tsx

@@ -201,6 +201,42 @@ function PwaManager() {
         });
     };
 
+    async function sendTestReminder(event: MouseEvent<HTMLButtonElement, MouseEvent>): Promise<void> {
+        event.preventDefault();
+        if (!subscription) {
+            console.error('Web push not subscribed');
+            return;
+        }
+
+        await fetch('/api/notify', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ broadcast: true, message: 'Моля, въведете вашите предпочитания за юни до 25-ти май.' })
+        });
+    }
+
+    async function sendTestCoverMe(event: MouseEvent<HTMLButtonElement, MouseEvent>): Promise<void> {
+        event.preventDefault();
+        if (!subscription) {
+            console.error('Web push not subscribed');
+            return;
+        }
+
+        await fetch('/api/notify', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                broadcast: true, message: "Брат ТЕСТ търси заместник за 24-ти май от 10:00 ч. Можеш ли да го покриеш?",
+                //use fontawesome icons for actions
+                actions: [{ action: 'covermeaccepted', title: 'Да ', icon: '✅' }]
+            })
+        });
+    }
+
     return (
         <>
             <div>
@@ -216,24 +252,12 @@ function PwaManager() {
                 {isPWAInstalled && <p>App is installed!</p>}
                 {isStandAlone && <p>PWA App</p>}
                 <button
-                    onClick={subscribeToNotifications}
-                    disabled={isSubscribed}
-                    className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${isSubscribed ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'bg-green-500 hover:bg-green-700 text-white'
-                        }`}
-                >
-                    Subscribe to Notifications
+                    onClick={isSubscribed ? unsubscribeFromNotifications : subscribeToNotifications}
+                    disabled={false} // Since the button itself acts as a toggle, the disabled attribute might not be needed
+                    className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${isSubscribed ? 'bg-red-500 hover:bg-red-700 text-white' : 'bg-green-500 hover:bg-green-700 text-white'}`} >
+                    {isSubscribed ? 'Unsubscribe from Notifications' : 'Subscribe to Notifications'}
                 </button>
-                <button
-                    onClick={unsubscribeFromNotifications}
-                    disabled={!isSubscribed}
-                    className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${!isSubscribed ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'bg-red-500 hover:bg-red-700 text-white'
-                        }`}
-                >
-                    Unsubscribe from Notifications
-                </button>
-
-
-            </div>
+            </div >
             <div>
                 <button
                     onClick={sendTestNotification}
@@ -243,6 +267,22 @@ function PwaManager() {
                 >
                     Send Test Notification
                 </button>
+                <button
+                    onClick={sendTestReminder}
+                    disabled={!isSubscribed}
+                    className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${!isSubscribed ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'bg-yellow-500 hover:bg-yellow-600 text-white'
+                        }`}
+                >
+                    Send Reminder
+                </button>
+                <button
+                    onClick={sendTestCoverMe}
+                    disabled={!isSubscribed}
+                    className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${!isSubscribed ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'bg-yellow-500 hover:bg-yellow-600 text-white'
+                        }`}
+                >
+                    Send CoverMe
+                </button>
 
                 {notificationPermission !== "granted" && (
                     <button