account based feeds

[rss-reader.git] / html / app.html
diff --git a/html/app.html b/html/app.html

index 0928724be0aa0d1b73fa324423e17248cfc49c16..e4c0b1de97ea505d026c4992f211d33861008d90 100644 (file)
--- a/html/app.html
+++ b/html/app.html
@@ -3,16 +3,16 @@
    <head>
      <title>News River</title>
      <meta charset="utf-8">
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="/style.css">
      <script src="https://unpkg.com/htmx.org@1.7.0"></script>
      <base target="_blank">
    </head>
    <body class="app">
-    <div id="feed-pane" valign="top" hx-get="/feeds" hx-trigger="load, newFeed from:body, every 900s" hx-target="#feed-list">
+    <div id="feed-pane" valign="top" hx-get="/accounts/{ACCOUNT_ID}/feeds" hx-trigger="load, newFeed from:body, every 900s" hx-target="#feed-list">
        <h1>Feed List</h1>
        <div id="feed-list"></div>
        <div id="add-feed">
-        <form hx-post="/feeds">
+        <form hx-post="/accounts/{ACCOUNT_ID}/feeds" hx-includes="#auth-token">
            <input type="url" name="link" placeholder="Link to RSS Feed">
            <button type="submit" class="btn">Add</button>
          </form>
@@ -25,18 +25,18 @@
      </div>
    </body>
    <script>
-    function $(sel, root, opts) {
-      const el = (root || document).querySelectorAll(sel);
-      if(opts && opts.array) { 
-        return Array.from(el);
-      }
-      if(el.length === 1) {
-        return el[0];
-      }
-      else {
-        return Array.from(el);
-      }
-    }
+function $(sel, root, opts) {
+  const el = (root || document).querySelectorAll(sel);
+  if(opts && opts.array) { 
+    return Array.from(el);
+  }
+  if(el.length === 1) {
+    return el[0];
+  }
+  else {
+    return Array.from(el);
+  }
+}
  
  function activeMarker(e) {
    // clear sibling active class.
@@ -50,31 +50,31 @@ function activeMarker(e) {
    e.target.classList.add('active');
  }
  
-    $('body').addEventListener('click', e => {
-      const actions = e.target.getAttribute('data-actions');
-      if(actions && actions.split(' ').includes('activate')) {
-        activeMarker(e);
-      }
-      if (e.target.classList.contains('unread') && e.target.getAttribute('data-feed-item-id') !== null) {
-        e.target.classList.remove('unread');
-        // ok it was unread.. so we should figure out the id that it belongs
-        // to and decr the counter for that!
-        const feedId = e.target.getAttribute('data-feed-id');
-        const el = $(`#feed-list a[data-feed-id="${feedId}"] .unread-count`);
-        if(el) {
-          if(el.innerHTML.length) {
-            let count = parseInt(el.innerHTML.split('(')[1].split(')')[0]);
-            count--;
-            if(count < 1) {
-              el.innerHTML = '';
-              el.parentElement.classList.remove('unread');
-            }
-            else {
-              el.innerHTML = `(${count})`;
-            }
-          }
+$('body').addEventListener('click', e => {
+  const actions = e.target.getAttribute('data-actions');
+  if(actions && actions.split(' ').includes('activate')) {
+    activeMarker(e);
+  }
+  if (e.target.classList.contains('unread') && e.target.getAttribute('data-feed-item-id') !== null) {
+    e.target.classList.remove('unread');
+    // ok it was unread.. so we should figure out the id that it belongs
+    // to and decr the counter for that!
+    const feedId = e.target.getAttribute('data-feed-id');
+    const el = $(`#feed-list a[data-feed-id="${feedId}"] .unread-count`);
+    if(el) {
+      if(el.innerHTML.length) {
+        let count = parseInt(el.innerHTML.split('(')[1].split(')')[0]);
+        count--;
+        if(count < 1) {
+          el.innerHTML = '';
+          el.parentElement.classList.remove('unread');
+        }
+        else {
+          el.innerHTML = `(${count})`;
          }
        }
-    });
+    }
+  }
+});
    </script>
  </html>