Add ability to display extra cards and add a post max age

config.json

@@ -4,5 +4,9 @@
   "navbarColor": "#008939",
   "duration": 10,
   "refreshDuration": 30,
+  "maxAge": 604800,
+  "extraCards": [
+    "<img src='sharepic.jpg' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>"
+  ],
   "includeReplies": true
 }

script.js

@@ -34,11 +34,15 @@ const timeAgo = function(seconds) {
 };
 
 let includeReplies;
+// max post age in seconds
+let maxAge;
 // below times are in milliseconds
 // duration for slide animations
 let duration;
 // refresh rate
 let refresh;
+// extra cards text
+let extraCards;
 
 // fetchConfig fetches the configuration from the config.json file
 const fetchConfig = async function() {
@@ -47,16 +51,22 @@ const fetchConfig = async function() {
         $('#navbar-brand').text(config.navbarBrandText);
         $('.navbar').css('background-color', config.navbarColor);
         includeReplies = config.includeReplies;
+        maxAge = config.maxAge;
         duration = config.duration * 1000;
         refresh = config.refreshDuration * 1000;
+        extraCards = config.extraCards;
         return config.defaultServerUrl;
     } catch (error) {
         console.log("Error loading config.json:", error);
         $('#navbar-brand').text("Netzbegrünung Mastowall");
         $('.navbar').css('background-color', "#008939");
         includeReplies = true;
+        maxAge = 60 * 60 * 24 * 7;
         duration = 10000;
         refresh = 30000;
+        extraCards = [
+            "<div><img src='sharepic.jpg' style='max-width: 100%;max-height: 100%'></div>"
+        ];
         return "https://gruene.social";
     }
 }
@@ -107,11 +117,20 @@ const displayPost = function(post) {
     return 1;
 };
 
+const processPosts = function(posts) {
+    posts = posts.filter((post) => secondsAgo(new Date(post.created_at)) < maxAge);
+
+    posts.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+
+    return posts;
+};
+
 // updateWall displays all posts
 const updateWall = function(posts) {
     if (!posts || posts.length === 0) return;
 
-    posts.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+    posts = processPosts(posts);
+
     let ret = 0
     posts.forEach(post => ret += displayPost(post));
     $('.masonry-grid').masonry('layout');
@@ -123,7 +142,7 @@ const updateWall = function(posts) {
 const updateCarousel = function(slides, posts) {
     if (!posts || posts.length === 0) return;
 
-    posts.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+    posts = processPosts(posts);
     
     // remove slides in carousel
     slides.innerHTML = "";
@@ -163,6 +182,15 @@ const updateCarousel = function(slides, posts) {
         `;
         newHTML += '</div>';
     }
+    for( let i = 0; i < extraCards.length; i++ ) {
+        newHTML += `<div class="carousel-item" data-mdb -interval="${duration * 2}" data-mdb-pause="false">
+        <div className="card-big">
+            <div class="d-flex align-items-center mb-4">
+                ${extraCards[i]}
+            </div>
+        </div>
+        </div>`;
+    }
     newHTML += '</div>'
     document.getElementById("myCarousel").innerHTML = newHTML;
 };
@@ -267,7 +295,8 @@ $(document).ready(async function() {
     const popover = $('#popover');
 
     if (hashtagsArray.length > 0 && hashtagsArray[0] !== '') {
-        const allPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
+        let allPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
+
         updateWall(allPosts.flat());
         setTimeout(function() {
             $('.masonry-grid').masonry('layout');