Added Frontend

frontend/js/main.ts

@@ -0,0 +1,93 @@
+let articleParent = document.getElementById("articles");
+
+function updateSeach(value: string) {
+    if(value == "") {
+        addRecent()
+        return
+    }
+
+    let query: SearchQuery = {
+        query: value,
+        limit: 5
+    }
+
+
+    clearArticles()
+    search(query).then(function(data) {
+        data.forEach(function(article) {
+            addArticle(article)
+        })
+    })
+}
+
+function clearArticles() {
+    articleParent.innerHTML = ""
+}
+
+window.onload = function() {
+    addRecent()
+}
+
+function addRecent () {
+    clearArticles()
+    recent(5).then(function(data) {
+        data.forEach(function(article) {
+            addArticle(article)
+        })
+    })
+}
+
+function addArticle(article: ArticleSummary) {
+    let articleA = document.createElement("a")
+    articleA.setAttribute("href", article.link)
+
+    let articleDiv = document.createElement("div")
+    articleDiv.setAttribute("class", "article")
+
+    let articleHeader = document.createElement("div")
+    articleHeader.setAttribute("class", "article-header")
+
+    let articleHeaderTitle = document.createElement("h3")
+    articleHeaderTitle.innerHTML = article.title
+
+    articleHeader.appendChild(articleHeaderTitle)
+    articleDiv.appendChild(articleHeader)
+
+    let articleDescription = document.createElement("div")
+    articleDescription.setAttribute("class", "article-description")
+
+    let articleDescriptionP = document.createElement("p")
+
+    let articleDescriptionTopics = document.createElement("i")
+    articleDescriptionTopics.innerHTML = article.tags.join(", ")
+
+    let articleDescriptionAuthors = document.createElement("i")
+    articleDescriptionAuthors.innerHTML = article.authors[0].name //TODO join ALL Auhtors
+
+    let articleDescriptionDate = document.createElement("i")
+    articleDescriptionDate.innerHTML = article.modified.toString()
+
+    articleDescriptionP.appendChild(articleDescriptionTopics)
+    articleDescriptionP.appendChild(articleDescriptionAuthors)
+    articleDescriptionP.appendChild(articleDescriptionDate)
+
+    articleDescription.appendChild(articleDescriptionP)
+    articleDiv.appendChild(articleDescription)
+
+    let articleBody = document.createElement("div")
+    articleBody.setAttribute("class", "article-body")
+
+    let articleBodyP = document.createElement("p")
+    articleBodyP.innerHTML = article.summary
+
+    articleBody.appendChild(articleBodyP)
+    articleDiv.appendChild(articleBody)
+
+    articleA.appendChild(articleDiv)
+    articleParent.appendChild(articleA)
+
+    let divider = document.createElement("div")
+    divider.setAttribute("class", "divider")
+
+    articleParent.appendChild(divider)
+}