From 17894588300060ae0052d541b1ffdb662da70da0 Mon Sep 17 00:00:00 2001
From: mace <safemind@posteo.net>
Date: Sun, 29 Oct 2023 12:52:40 +0100
Subject: [PATCH] observer frontend

---
 src/reader/get.rs               |  1 +
 src/reader/structs/article.rs   |  1 +
 vue/src/assets/main.css         | 13 +++++++++++++
 vue/src/components/RssFeeds.vue | 20 +++++++-------------
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/reader/get.rs b/src/reader/get.rs
index 78bd659..9b57b03 100755
--- a/src/reader/get.rs
+++ b/src/reader/get.rs
@@ -52,6 +52,7 @@ pub async fn get(path: web::Path<JsonUser>, req: HttpRequest) -> impl Responder
                     content: feed_item.content,
                     url: feed_item.url,
                     timestamp: time,
+                    id: feed_item.id,
                 }
             })
             .collect();
diff --git a/src/reader/structs/article.rs b/src/reader/structs/article.rs
index 56e7040..2848d14 100644
--- a/src/reader/structs/article.rs
+++ b/src/reader/structs/article.rs
@@ -6,6 +6,7 @@ pub struct Article {
     pub content: String,
     pub url: String,
     pub timestamp: String,
+    pub id: i32,
 }
 
 // impl Article {
diff --git a/vue/src/assets/main.css b/vue/src/assets/main.css
index 08912f8..d7ae115 100644
--- a/vue/src/assets/main.css
+++ b/vue/src/assets/main.css
@@ -31,3 +31,16 @@ a,
   }
 }
 
+.feed-title {
+  cursor: pointer;
+  font-family: 'Courier New';
+  font-size: 22px;
+  border-bottom: 1px solid #ccc;
+  padding: 1em;
+}
+
+.feed-content {
+  font-family: Georgia, 'Times New Roman', Times, serif;
+  font-size: 20px;
+  padding: 1em;
+}
diff --git a/vue/src/components/RssFeeds.vue b/vue/src/components/RssFeeds.vue
index 8157c6f..469cc6c 100644
--- a/vue/src/components/RssFeeds.vue
+++ b/vue/src/components/RssFeeds.vue
@@ -56,12 +56,6 @@ const fetchData = async () => {
     console.error('Error fetching data:', error)
     showMessageForXSeconds(error, 5)
   }
-  //  const observedDivs = document.querySelectorAll(".observe");
-  //  if (observedDivs.length > 0) {
-  //    observedDivs.forEach(observedDiv => {
-  //      observer.observe(observedDiv);
-  //    });
-  //  }
 };
 
 async function sync() {
@@ -107,14 +101,14 @@ function handleIntersection(entries) {
   // The callback function for when the target element enters or exits the viewport
   entries.forEach(entry => {
     if (entry.isIntersecting) {
-      // Element is in the viewport
       console.log('Element is in sight');
     } else {
       // Element is out of sight
-      console.log('Element is out of sight');
-
-      // You can call your function here
+      console.log('Element is out of sight ' + entry.intersectionRect.y);
+      if (entry.intersectionRect.y == 0) {
+        console.log(feeds.value[entry.target.id]);
 
+      }
     }
   });
 }
@@ -132,9 +126,9 @@ onMounted(() => {
     <div id='article' class='article'>
       <p v-if="feeds.length == 0">No unread articles.</p>
       <template v-for="(feed, index) in feeds">
-        <div v-bind:id="'article_' + index" class="observe">
-          <h2 @click="getReadable(feed, index)">{{ feed.title }}</h2>
-          <p v-html='feed.content'></p>
+        <div v-bind:id="index" class="observe">
+          <h2 @click="getReadable(feed, index)" class="feed-title">{{ feed.title }}</h2>
+          <p class="feed-content" v-html='feed.content'></p>
         </div>
       </template>
     </div>