Feature: currency rates (#170)

* Currency feature

Author: advaa123

app/main.py

@@ -8,7 +8,7 @@
 from app.dependencies import (logger, MEDIA_PATH, STATIC_PATH, templates)
 from app.internal import daily_quotes, json_data_loader
 from app.routers import (
-    agenda, calendar, categories, dayview, email,
+    agenda, calendar, categories, currency, dayview, email,
     event, invitation, profile, search, telegram, whatsapp
 )
 from app.telegram.bot import telegram_bot
@@ -38,6 +38,7 @@ def create_tables(engine, psql_environment):
     agenda.router,
     calendar.router,
     categories.router,
+    currency.router,
     dayview.router,
     email.router,
     event.router,

app/routers/currency.py

@@ -0,0 +1,32 @@
+import datetime
+
+from app.dependencies import templates
+from fastapi import APIRouter, Request
+
+
+router = APIRouter()
+
+# TODO: Add this as a feature to the calendar view/
+#           day view/features panel frontend
+
+
+@router.get("/currency")
+def today_currency(request: Request):
+    """Current day currency router"""
+
+    date = datetime.date.today().strftime("%Y-%m-%d")
+    return currency(request, date)
+
+
+@router.get("/currency/{date}")
+def currency(request: Request, date: str):
+    """Custom date currency router"""
+
+    # TODO: get user default/preferred currency
+    base = "USD"
+
+    return templates.TemplateResponse("currency.html", {
+        "request": request,
+        "base": base,
+        "date": date
+    })

app/static/currency.css

@@ -0,0 +1,6 @@
+div[data-visible='0'] {
+    display: none;
+}
+div[data-visible='1'] {
+    display: block;
+}

app/static/currency.js

@@ -0,0 +1,71 @@
+function getCurrency(baseCurrency, dateToday) {
+    const showCurrencyElement = document.getElementById("showCurrency")
+    const currencyViewElement = document.getElementById("currencyView");
+    const myUrl = 'https://api.exchangeratesapi.io/' + dateToday + '?base=' + baseCurrency
+
+    async function getResponse(myUrl) {
+        let response = await fetch(myUrl);
+        if (response.ok) {
+            let result = await response.json();
+            currencyViewElement.innerHTML = "";
+            showCurrencyElement.dataset.visible = "1";
+            return result;
+        }
+    }
+
+    getResponse(myUrl)
+        .then(result => buildCurrencyList(result));
+
+    function buildCurrencyList(data) {
+        function getListItem() {
+            const listItem = document.createElement("li");
+            listItem.className = "list-group-item title_size_small";
+            return listItem;
+        }
+
+        function createBoldListItem(fieldString, currViewElem) {
+            const listItem = getListItem();
+            const boldItem = document.createElement("strong");
+            boldItem.innerHTML = fieldString;
+            listItem.appendChild(boldItem);
+            currViewElem.appendChild(listItem);
+        }
+
+        function getAnchorItem() {
+            const linkItem = document.createElement("a");
+            linkItem.setAttribute("href", "javascript:void(0)");
+            linkItem.setAttribute("id", key);
+            linkItem.innerText = key;
+            return linkItem;
+        }
+
+        function getRatesItem(fieldString) {
+            let ratesItem = document.createElement("div");
+            ratesItem.setAttribute("style", "display: inline;")
+            ratesItem.innerHTML = fieldString;
+            return ratesItem;
+        }
+
+        function createAllElements(dataRates, baseCurr, currViewElem) {
+            for (key in dataRates) {
+                if (key !== baseCurr) {
+                    let listItem = getListItem();
+                    let linkItem = getAnchorItem();
+                    let ratesItem = getRatesItem(": " + dataRates[key]);
+                    listItem.appendChild(linkItem);
+                    listItem.appendChild(ratesItem);
+                    currViewElem.appendChild(listItem);
+                }
+            }
+        }
+
+        // Create Base currency list item
+        createBoldListItem("BASE: " + baseCurrency, currencyViewElement);
+        // Create all rates list items
+        createAllElements(data.rates, baseCurrency, currencyViewElement);
+        // Create date list item
+        createBoldListItem(dateToday, currencyViewElement);
+
+        return true;
+    }
+}

app/templates/currency.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+    <link rel="stylesheet" href="{{ url_for('static', path='/currency.css') }}">
+    <title>currency</title>
+</head>
+
+<body>
+    <div id="showCurrency" data-visible="0">
+        <p style="margin: 1rem;">
+            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
+                aria-expanded="false" aria-controls="collapseExample">
+                Currency</button>
+        <div class="row" style="margin: 1rem; width: 14rem;">
+            <div class="col">
+                <div class="collapse multi-collapse" id="collapseExample">
+                    <ul class="list-group list-group-flush" id="currencyView">
+                        <!-- JS currency content -->
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script type="text/javascript" src="{{ url_for('static', path='/currency.js')}}"></script>
+    <script type="text/javascript">
+        getCurrency("{{ base | safe }}", "{{ date | safe }}");
+        document.getElementById("currencyView").addEventListener("click", function (e) {
+            if (e.target && e.target.nodeName == "A") {
+                getCurrency(e.target.id, "{{ date | safe }}");
+            }
+        }, false);
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
+        crossorigin="anonymous"></script>
+</body>
+
+</html>

tests/test_currency.py

@@ -0,0 +1,10 @@
+CURRENCY = '/currency'
+CUSTOM_DATE = "/2021-1-3"
+
+
+def test_router_good(client):
+    resp = client.get(CURRENCY)
+    assert resp.ok
+    resp = client.get(CURRENCY + CUSTOM_DATE)
+    assert resp.ok
+    assert b'Currency</button>' in resp.content