Update News page

app/templates/main/news.html.j2

@@ -9,7 +9,7 @@
     </div>
 
     <div class="col s12">
-      <div id="mastodon"></div>
+      <div id="aggregated-news"></div>
 
       <div class="card" id="april-2022-update">
         <div class="card-content">
@@ -132,29 +132,116 @@
 {% block scripts %}
 {{ super() }}
 <script>
-  let mastodonElement = document.querySelector('#mastodon');
-  fetch(`https://fedihum.org/api/v1/accounts/109386364241901080/statuses`, {method: 'GET', headers: {Accept: 'application/json'}})
-    .then((response) => {return response.json();})
-    .then((statuses) => {
-      for (let status of statuses) {
-        console.log(status);
-        let contentHtml = `<div>${status.content}</div>`
-        let tagsHtml = '<p>';
-        for (let tag of status.tags) {
-          tagsHtml += `<a href="${tag.url}" class="chip">${tag.name}</a>`;
-        }
-        tagsHtml += '</p>';
-        let statusHtml = `
-          <div id="${status.id}" class="card">
+  function getMastodonStatuses() {
+    return new Promise((resolve, reject) => {
+      fetch(`https://fedihum.org/api/v1/accounts/109386364241901080/statuses`, {method: 'GET', headers: {Accept: 'application/json'}})
+        .then((response) => {
+          if (!response.ok) {reject(response);}
+          return response.json();
+        })
+        .then((statuses) => {resolve(statuses);})
+      });
+  }
+  function getBisBlogsEntries() {
+    return new Promise((resolve, reject) => {
+      fetch(`https://blogs.uni-bielefeld.de/blog/uniintern/feed/entries/atom?cat=%2FAllgemein`, {method: 'GET', headers: {Accept: 'application/xml'}})
+        .then((response) => {
+          if (!response.ok) {reject(response);}
+          return response.text();
+        })
+        .then((responseText) => {return new DOMParser().parseFromString(responseText, 'application/xml');})
+        .then((xmlDocument) => {return xmlDocument.toObject();})
+        .then((feed) => {resolve(feed);});
+    });
+  }
+  function sortAggregatedNews(a, b) {
+    let aDate;
+    let bDate;
+
+    switch (a.source) {
+      case 'mastodon':
+        aDate = new Date(a.created_at);
+        break;
+      case 'big-blogs':
+        aDate = new Date(a.published);
+        break;
+      default:
+        throw new Error('Unknown source');
+    }
+    switch (b.source) {
+      case 'mastodon':
+        bDate = new Date(b.created_at);
+        break;
+      case 'big-blogs':
+        bDate = new Date(b.published);
+        break;
+      default:
+        throw new Error('Unknown source');
+    }
+    return bDate - aDate;
+  }
+  function aggregateNews() {
+    return new Promise((resolve, reject) => {
+      Promise.all([getMastodonStatuses(), getBisBlogsEntries()])
+        .then(
+          (responses) => {
+            console.log(responses[1]);
+            let mastodonStatuses = responses[0].map((obj) => {return { ...obj, source: 'mastodon'}});
+            let bisBlogsEntries = responses[1].feed.entry.map((obj) => {return { ...obj, source: 'big-blogs'};});
+            let aggregatedNews = [...mastodonStatuses, ...bisBlogsEntries];
+            aggregatedNews.sort(sortAggregatedNews);
+            resolve(aggregatedNews);
+          },
+          (error) => {reject(error);}
+        );
+    });
+  }
+
+  function mastodonStatusToHtml(status) {
+    return htmlString = `
+      <div class="card white-text" style="background-color:#5D50E7;">
+        <div class="card-content">
+          <span class="card-title">New Actitvity on Mastodon</span>
+          ${status.content}
+        </div>
+      </div>
+    `.trim();
+  }
+  function bisBlogsEntryToHtml(entry) {
+    return `
+      <div class="row">
+        <div class="col s1">
+          <img src="https://blogs.uni-bielefeld.de/blog/uniintern/resource/themabilder/unilogo-square.svg" alt="Bielefeld University Blogs" class="responsive-img">
+        </div>
+        <div class="col s11">
+          <div class="card" style="background-color: #14f5b4;">
             <div class="card-content">
-              <span class="card-title">Mastodon News</span>
-              ${contentHtml}
-              ${tagsHtml}
+              <span class="card-title">${entry.title['#text']}</span>
+              ${entry.content['#text']}
             </div>
           </div>
-        `;
-        mastodonElement.insertAdjacentHTML('beforeend', statusHtml);
+        </div>
+      </div>
+    `.trim();
+  }
+
+  let aggregatedNewsElement = document.querySelector('#aggregated-news');
+  aggregateNews().then((aggregatedNews) => {
+    for (let item of aggregatedNews) {
+      let itemHtmlString;
+      switch (item.source) {
+        case 'mastodon':
+          console.log(item);
+          itemHtmlString = mastodonStatusToHtml(item);
+          break;
+        case 'big-blogs':
+          itemHtmlString = bisBlogsEntryToHtml(item);
+          break;
+        default:
+          throw new Error('Unknown source');
       }
-    });
+      aggregatedNewsElement.insertAdjacentHTML('beforeend', itemHtmlString);
+    }
+  });
 </script>
 {% endblock scripts %}