Update News page

app/templates/_scripts.html.j2

@@ -26,7 +26,8 @@
   'js/RessourceLists/JobResultList.js',
   'js/RessourceLists/SpacyNLPPipelineModelList.js',
   'js/RessourceLists/TesseractOCRPipelineModelList.js',
-  'js/RessourceLists/UserList.js'
+  'js/RessourceLists/UserList.js',
+  'js/XMLtoObject.js'
 %}
 <script src="{{ ASSET_URL }}"></script>
 {%- endassets %}
@@ -52,7 +53,7 @@
 
   // Initialize components
   M.AutoInit();
-  M.CharacterCounter.init(document.querySelectorAll('input[data-length][type="text"], input[data-length][type="email"], input[data-length][type="search"], input[data-length][type="password"], input[data-length][type="tel"], input[data-length][type="url"], textarea[data-length]'));
+  M.CharacterCounter.init(document.querySelectorAll('input[data-length], textarea[data-length]'));
   M.Dropdown.init(
     document.querySelectorAll('#nav-more-dropdown-trigger'),
     {alignment: 'right', constrainWidth: false, coverTrigger: false}

app/templates/corpora/corpora.html.j2

@@ -1,30 +1,46 @@
 {% extends "base.html.j2" %}
 
+{% block main_attribs %} class="service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
+
 {% block page_content %}
-<div class="parallax-container">
-  <div class="parallax"><img src="{{ url_for('static', filename='images/parallax_hq/canvas.png') }}"></div>
-  <div style="position: absolute; bottom: 0; width: 100%;">
-    <div class="container">
-      <div class="white-text">
-        <h1 id="title"><i class="nopaque-icons" style="font-size: inherit;">I</i>Corpora</h1>
-      </div>
-      <div class="white" style="padding: 0 15px; border-radius: 20px;">
-        <div class="input-field">
-          <i class="material-icons prefix">search</i>
-          <input id="public-corpora-search" placeholder="Find public corpora" type="text">
+<div class="corpus-list no-autoinit" id="corpus-list">
+  <div class="parallax-container">
+    <div class="parallax"><img src="{{ url_for('static', filename='images/parallax_hq/canvas.png') }}"></div>
+    <div style="position: absolute; bottom: 0; width: 100%;">
+      <div class="container">
+        <div class="white-text">
+          <h1 id="title"><i class="nopaque-icons" style="font-size: inherit;">I</i>Corpora</h1>
+        </div>
+        <div class="white" style="padding: 1px 35px 0 10px; border-radius: 35px;">
+          <div class="input-field">
+            <i class="material-icons prefix">search</i>
+            <input class="search" id="corpus-list-search" type="text">
+            <label for="corpus-list-search">Search corpus</label>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
 
 
-<div class="container">
   <div class="row">
     <div class="col s12" id="corpora">
       <div class="card">
         <div class="card-content">
-          <div class="corpus-list"></div>
+          <div>
+            <table>
+              <thead>
+                <tr>
+                  <th></th>
+                  <th>Title and Description</th>
+                  <th>Status</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody class="list"></tbody>
+            </table>
+            <ul class="pagination"></ul>
+          </div>
         </div>
       </div>
     </div>
@@ -36,9 +52,21 @@
 {% block scripts %}
 {{ super() }}
 <script>
-  let publicCorporaSearchElement = document.querySelector('#public-corpora-search');
-  let corpusList = CorpusList.getInstance(document.querySelector('#corpora .corpus-list .list'));
-  publicCorporaSearchElement.addEventListener('keyup', function() {corpusList.listjs.search(this.value);});
+  let corpusListElement = document.querySelector('#corpus-list');
+  let corpusListOptions = {
+    initialHtmlGenerator: null,
+    item: `
+      <tr class="clickable hoverable">
+        <td><a class="btn-floating disabled"><i class="material-icons service-color darken" data-service="corpus-analysis">book</i></a></td>
+        <td><b class="title"></b><br><i class="description"></i></td>
+        <td><span class="status badge new corpus-status-color corpus-status-text" data-badge-caption=""></span></td>
+        <td class="right-align">
+          <a class="action-button btn-floating service-color darken waves-effect waves-light" data-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
+        </td>
+      </tr>
+    `.trim(),
+  };
+  let corpusList = new CorpusList(corpusListElement, corpusListOptions);
   corpusList._init({{ corpora|tojson }});
 </script>
 {% endblock scripts %}

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 %}