observer frontend

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();

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 {

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;
+}

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');
+      console.log('Element is out of sight ' + entry.intersectionRect.y);
-
+      if (entry.intersectionRect.y == 0) {
-      // You can call your function here
+        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">
+        <div v-bind:id="index" class="observe">
-          <h2 @click="getReadable(feed, index)">{{ feed.title }}</h2>
+          <h2 @click="getReadable(feed, index)" class="feed-title">{{ feed.title }}</h2>
-          <p v-html='feed.content'></p>
+          <p class="feed-content" v-html='feed.content'></p>
         </div>
       </template>
     </div>