hide PWA actions if not supported;
better logging
This commit is contained in:
Dobromir Popov
@ -307,89 +307,95 @@ function PwaManager() {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
if (!isSupported()) {
|
||||
return (
|
||||
<div>
|
||||
<h1>{isAdmin && " PWA (admin)"}</h1>
|
||||
{!isStandAlone && !isPWAInstalled && (
|
||||
<p>Това устройство не поддържа нотификации</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<h1>{isAdmin && " PWA (admin)"}</h1>
|
||||
{!isStandAlone && !isPWAInstalled && (
|
||||
<button
|
||||
onClick={installPWA}
|
||||
className="bg-blue-500 hover:bg-blue-700 text-white text-xs py-1 px-2 rounded-full focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"
|
||||
>
|
||||
Инсталирай приложението
|
||||
</button>
|
||||
)}
|
||||
{isPWAInstalled && <p>Инсталирано!</p>}
|
||||
{/* {isStandAlone && <p>PWA App</p>} */}
|
||||
|
||||
<button
|
||||
onClick={installPWA}
|
||||
className="bg-blue-500 hover:bg-blue-700 text-white text-xs py-1 px-2 rounded-full focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"
|
||||
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 ? 'Спри известията' : 'Показвай известия'}
|
||||
</button>
|
||||
<button
|
||||
onClick={deleteAllSubscriptions}
|
||||
className="text-xs py-1 px-2 rounded-full focus:outline-none bg-red-500 hover:bg-red-700 text-white"
|
||||
>
|
||||
Инсталирай приложението
|
||||
Спри известията на всички мои устройства {subs != "" ? `(${subs})` : ""}
|
||||
</button>
|
||||
</div>
|
||||
{isAdmin &&
|
||||
<div>
|
||||
<button
|
||||
onClick={sendTestNotification}
|
||||
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 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'
|
||||
}`}
|
||||
>
|
||||
Broadcast 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'
|
||||
}`}
|
||||
>
|
||||
Broadcast CoverMe
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
{notificationPermission !== "granted" && (
|
||||
<button
|
||||
onClick={togglePushNotifications}
|
||||
className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${notificationPermission === "denied" ? 'bg-red-500 hover:bg-red-700 text-white' : 'bg-green-500 hover:bg-green-700 text-white'
|
||||
}`}
|
||||
>
|
||||
{notificationPermission === "denied" ? 'Notifications Denied!' : 'Enable Notifications'}
|
||||
</button>
|
||||
)}
|
||||
{isPWAInstalled && <p>Инсталирано!</p>}
|
||||
{!isSupported() && <p>Това устройство не поддържа нотификации</p>}
|
||||
{/* {isStandAlone && <p>PWA App</p>} */}
|
||||
<button
|
||||
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 ? 'Спри известията' : 'Показвай известия'}
|
||||
</button>
|
||||
<button
|
||||
onClick={deleteAllSubscriptions}
|
||||
className="text-xs py-1 px-2 rounded-full focus:outline-none bg-red-500 hover:bg-red-700 text-white"
|
||||
>
|
||||
Спри известията на всички мои устройства {subs != "" ? `(${subs})` : ""}
|
||||
</button>
|
||||
</div>
|
||||
{isAdmin &&
|
||||
<div>
|
||||
<button
|
||||
onClick={sendTestNotification}
|
||||
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 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'
|
||||
}`}
|
||||
>
|
||||
Broadcast 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'
|
||||
}`}
|
||||
>
|
||||
Broadcast CoverMe
|
||||
</button>
|
||||
|
||||
{isAdmin && <div>
|
||||
<div>
|
||||
<a href="https://t.me/mwhitnessing_bot" className="inline-flex items-center ml-4" target="_blank">
|
||||
<img src="/content/icons/telegram-svgrepo-com.svg" alt="Телеграм" width="32" height="32" className="align-middle" />
|
||||
<span className="align-middle">Телеграм</span>
|
||||
</a>
|
||||
|
||||
<a href="/api/auth/apple-signin" className="inline-flex items-center ml-4 bg-gray-100 button" target="_blank">
|
||||
<span className="align-middle">Apple sign-in</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{notificationPermission !== "granted" && (
|
||||
<button
|
||||
onClick={togglePushNotifications}
|
||||
className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${notificationPermission === "denied" ? 'bg-red-500 hover:bg-red-700 text-white' : 'bg-green-500 hover:bg-green-700 text-white'
|
||||
}`}
|
||||
>
|
||||
{notificationPermission === "denied" ? 'Notifications Denied!' : 'Enable Notifications'}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{isAdmin && <div>
|
||||
<div>
|
||||
<a href="https://t.me/mwhitnessing_bot" className="inline-flex items-center ml-4" target="_blank">
|
||||
<img src="/content/icons/telegram-svgrepo-com.svg" alt="Телеграм" width="32" height="32" className="align-middle" />
|
||||
<span className="align-middle">Телеграм</span>
|
||||
</a>
|
||||
|
||||
<a href="/api/auth/apple-signin" className="inline-flex items-center ml-4 bg-gray-100 button" target="_blank">
|
||||
<span className="align-middle">Apple sign-in</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PwaManager;
|
||||
|
||||
Reference in New Issue
Block a user