diff --git a/frontend/src/Notifications.svelte b/frontend/src/Notifications.svelte deleted file mode 100644 index 169d46a1..00000000 --- a/frontend/src/Notifications.svelte +++ /dev/null @@ -1,137 +0,0 @@ - - -{#if $notifications} -
  • - - -
    - -
    -
    • -{/if} - - diff --git a/frontend/src/TaskDetail.svelte b/frontend/src/TaskDetail.svelte index 209acfa1..a1e7790d 100644 --- a/frontend/src/TaskDetail.svelte +++ b/frontend/src/TaskDetail.svelte @@ -6,7 +6,7 @@ import SummaryComments from './SummaryComments.svelte'; import SubmitsDiff from './SubmitsDiff.svelte'; import { fetch } from './api.js'; import { user } from './global'; -import { notifications } from './notifications.js'; +import { notifications } from './utilities/notifications'; import { hideComments, HideCommentsState } from './stores.js'; export let url; diff --git a/frontend/src/main.js b/frontend/src/main.js index ba0de723..d6de9ac0 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -43,7 +43,6 @@ import App from './App.svelte'; import ColorTheme from './ColorTheme.svelte'; import CtrlP from './CtrlP.svelte'; import { safeMarkdown } from './markdown.js'; -import Notifications from './Notifications.svelte'; import PipelineStatus from './PipelineStatus.svelte'; import TaskDetail from './TaskDetail.svelte'; import UploadSolution from './UploadSolution.svelte'; @@ -118,11 +117,11 @@ const getCookies = () => { }; const cookies = getCookies(); +/* eslint-disable @typescript-eslint/no-unused-vars */ const enableNewUI = Object.keys(cookies).includes('newUI') && cookies['newUI'] != 0; createElement('app', App); createElement('submit-sources', TaskDetail); -if (!enableNewUI) createElement('notifications', Notifications); createElement('upload-solution', UploadSolution); createElement('pipeline-status', PipelineStatus); createElement('ctrlp', CtrlP); @@ -192,4 +191,4 @@ const registerSuspendedVueComponent = (name, component, configureApp = undefined registerSuspendedVueComponent('tasks-all', AllTasks); registerSuspendedVueComponent('inbus-import', InbusImport); -if (enableNewUI) registerVueComponent('notifications', NotificationsNew); +registerVueComponent('notifications', NotificationsNew); diff --git a/frontend/src/notifications.js b/frontend/src/notifications.js deleted file mode 100644 index 911a250e..00000000 --- a/frontend/src/notifications.js +++ /dev/null @@ -1,132 +0,0 @@ -import { writable, derived } from 'svelte/store'; -import { fetch } from './api.js'; - -export const notifications = (function () { - const { subscribe, set } = writable([]); - - async function refresh() { - const res = await fetch('/notification/all'); - set((await res.json())['notifications']); - } - - refresh(); - - return { - subscribe, - markRead: async (id) => { - const res = await fetch('/notification/mark_as_read/' + id, { method: 'POST' }); - set((await res.json())['notifications']); - }, - markAllRead: async () => { - const res = await fetch('/notification/mark_as_read', { method: 'POST' }); - set((await res.json())['notifications']); - } - }; -})(); - -export const pushNotifications = (function () { - const { subscribe, update } = writable({ - supported: false, - enabled: null - }); - - function getPublicKey() { - return document.querySelector('meta[name="django-webpush-vapid-key"]').content; - } - - function urlB64ToUint8Array(base64String) { - const padding = '='.repeat((4 - (base64String.length % 4)) % 4); - const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/'); - - const rawData = window.atob(base64); - const outputArray = new Uint8Array(rawData.length); - - for (var i = 0; i < rawData.length; ++i) { - outputArray[i] = rawData.charCodeAt(i); - } - return outputArray; - } - - const subscribeOpts = { - userVisibleOnly: true, - applicationServerKey: urlB64ToUint8Array(getPublicKey()) - }; - - async function getSubscription() { - if (!reg) { - return null; - } - - try { - let sub = await reg.pushManager.getSubscription(); - if (sub) { - return sub; - } - - sub = await reg.pushManager.subscribe(subscribeOpts); - - const browser = navigator.userAgent - .match(/(firefox|msie|chrome|safari|trident)/gi)[0] - .toLowerCase(); - const data = { - status_type: 'subscribe', - subscription: sub.toJSON(), - browser: browser, - group: null - }; - - await fetch('/webpush/save_information', { - method: 'post', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(data) - }); - return sub; - } catch (exception) { - console.log(exception); - } - - return null; - } - - async function subscribePushNotifications() { - const isEnabled = (await getSubscription()) !== null; - update((s) => { - s.enabled = isEnabled; - return s; - }); - return isEnabled; - } - - let reg = null; - if ('serviceWorker' in navigator && 'PushManager' in window && getPublicKey()) { - (async () => { - try { - reg = await navigator.serviceWorker.register('/static/service-worker.js'); - if (!reg.showNotification) { - return; - } - update((s) => { - s.supported = true; - return s; - }); - subscribePushNotifications(); - } catch (err) { - console.log(err); - } - })(); - } - - return { - subscribe, - subscribePushNotifications - }; -})(); - -export const notificationsCount = derived( - notifications, - ($notifications) => $notifications.filter((n) => n.unread).length -); -export const importantNotificationsCount = derived( - notifications, - ($notifications) => $notifications.filter((n) => n.important && n.unread).length -);