notification mark read

templates/panel/index.html

@@ -53,6 +53,7 @@ include!("./navbar/index.html"); .>
             </td>
             <td class="sitekey-list__key">
 				<div class="sitekey-list__edit">
+                    <. let key = format!("/sitekey/{}", &sitekey.key); .>
 					<. include!("./sitekey/view/__edit-sitekey-icon.html"); .>
 				</div>
             </td>

templates/panel/notifications/index.html

@@ -14,7 +14,7 @@ include!("../navbar/index.html"); .>
           </thead>
           <tbody class="notification__body">
             <. for notification in n.iter() { .>
-            <tr class="notification__item">
+			<tr class="notification__item" id="notification__item-<.= notification.id .>">
               <td>
                 <h3 class="notification__item-heading">
                   <.= notification.heading .>
@@ -34,6 +34,7 @@ include!("../navbar/index.html"); .>
                     src="<.= crate::FILES
                          .get("./static/cache/img/svg/check.svg")
                          .unwrap() .>"
+					data-id="<.= notification.id .>"
                     alt="Mark Read" 
                   />
 				</button>

templates/panel/notifications/main.scss

@@ -35,7 +35,7 @@
 }
 
 .notification__mark-read-btn:hover {
-  cursor: grab;
+  cursor: pointer;
   background-color: $light-grey;
 }
 

templates/panel/notifications/ts/index.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import genJsonPayload from '../../../utils/genJsonPayload';
+import createError from '../../../components/error';
+
+import ROUTES from '../../../api/v1/routes';
+
+const BTN = document.querySelectorAll('.notification__mark-read-btn');
+const TABLE_BODY = document.querySelector('.notification__body');
+
+const notification_record = (id: number) =>
+  <HTMLElement>TABLE_BODY.querySelector(`#notification__item-${id}`);
+
+const markRead = async (e: Event) => {
+  const element = <HTMLElement>e.target;
+
+  const id = Number.parseInt(element.dataset.id);
+
+  const payload = {
+    id,
+  };
+
+  const res = await fetch(ROUTES.markNotificationRead, genJsonPayload(payload));
+  if (res.ok) {
+    notification_record(id).remove();
+  } else {
+    const err = await res.json();
+    createError(err.error);
+  }
+};
+
+const addMarkReadEventListenet = () => {
+  BTN.forEach(btn => {
+    btn.addEventListener('click', markRead, true);
+  });
+};
+
+export const index = () => {
+  addMarkReadEventListenet();
+};

templates/panel/sitekey/edit/index.ts

@@ -30,8 +30,7 @@ import createError from '../../../components/error';
 
 import VIEWS from '../../../views/v1/routes';
 
-const BTN = <HTMLElement>document.querySelector('.sitekey-form__submit');
-const key = BTN.dataset.sitekey;
+const BTN_CLASS = document.querySelector('sitekey-form__submit');
 
 const submit = async (e: Event) => {
   e.preventDefault();
@@ -44,6 +43,9 @@ const submit = async (e: Event) => {
   const levels = LEVELS.getLevels();
   console.debug(`[form submition]: levels: ${levels}`);
 
+  const btn = <HTMLElement>document.querySelector(`${BTN_CLASS}`);
+  const key = btn.dataset.sitekey;
+
   const payload = {
     levels,
     duration,

templates/panel/sitekey/list/index.html

@@ -44,6 +44,7 @@ include!("../../navbar/index.html"); .>
             </td>
             <td class="sitekey-list__key">
 				<div class="sitekey-list__edit">
+                    <. let key = format!("/sitekey/{}", &sitekey.key); .>
 					<. include!("../view/__edit-sitekey-icon.html"); .>
 				</div>
             </td>

templates/panel/sitekey/view/__edit-sitekey-icon.html

@@ -1,4 +1,4 @@
-<a href="./edit/">
+<a href="<.= key .>/edit/">
   <img class="sitekey-form__edit" src="<.=
   crate::FILES.get("./static/cache/img/svg/edit.svg").unwrap() .>" alt="Edit
   sitekey" />

templates/panel/sitekey/view/__form-top.html

@@ -20,6 +20,7 @@
           />
         </a> 
         <. if READONLY { .>
+			<. let key = "."; .>
           <. include!("./__edit-sitekey-icon.html"); .>
         <. } .>
 	  </h1>