.gitignore

@@ -1,3 +1,5 @@
+.vscode
+
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]

Files-API/MANIFEST.in

@@ -0,0 +1,2 @@
+graft articles_api/articles_files
+global-exclude *.pyc

Files-API/articles/article_4.txt

@@ -1 +0,0 @@
-Hello world!

Files-API/articles_api/__init__.py

@@ -0,0 +1,30 @@
+import os
+
+from flask import Flask
+
+
+def create_app(test_config=None):
+    # create and configure the app
+    app = Flask(__name__)
+    app.config.from_mapping(
+        SECRET_KEY='dev')
+
+    if test_config is None:
+        # load the instance config, if it exists, when not testing
+        app.config.from_pyfile('config.py', silent=True)
+    else:
+        # load the test config if passed in
+        app.config.from_mapping(test_config)
+
+    # ensure the instance folder exists
+    try:
+        os.makedirs(app.instance_path)
+    except OSError:
+        pass
+
+    from articles_api.articles.articles import articles_api_bp
+
+    app.register_blueprint(articles_api_bp)
+    app.add_url_rule('/', endpoint="index")
+
+    return app

Files-API/articles_api/articles/articles.py

@@ -0,0 +1,29 @@
+import os
+from flask import send_from_directory, jsonify, Blueprint, current_app
+from flask_cors import CORS, cross_origin
+
+
+articles_api_bp = Blueprint(
+    "articles", __name__, template_folder="templates")
+
+cors = CORS(articles_api_bp, resources={r"/articles": {"origins": "http://localhost:5500"}})
+
+
+@articles_api_bp.route("/<path:article>")
+@cross_origin(origin="localhost", headers=["Content-Type", "Authorization"])
+def send_text_file(article):
+    return send_from_directory(directory="articles_files", path=article)
+
+
+@articles_api_bp.route('/')
+@cross_origin(origin="localhost", headers=["Content-Type", "Authorization"])
+def index():
+    # List files in articles directory
+    files = list()
+    for filename in os.listdir(os.path.join(
+            current_app.root_path, "articles_files")):
+        path = os.path.join(os.path.join(
+            current_app.root_path, "articles_files"), filename)
+        if os.path.isfile(path):
+            files.append(filename)
+    return jsonify(files)

Files-API/files_api.py

@@ -1,32 +0,0 @@
-import os
-from flask import Flask, send_from_directory, jsonify
-from flask_cors import CORS, cross_origin
-
-
-app = Flask(__name__, static_url_path='')
-app.config["SECRET_KEY"] = "f82abccd93a28b6cdda4525c9afa7a30"
-app.config["CORS_HEADERS"] = "Content-Type"
-
-cors = CORS(app, resources={r"/articles": {"origins": "http://localhost:5500"}})
-
-
-@app.route("/articles/<path:article>")
-@cross_origin(origin="localhost", headers=["Content-Type", "Authorization"])
-def send_text_file(article):
-    return send_from_directory(directory="articles", path=article)
-
-
-@app.route("/articles")
-@cross_origin(origin="localhost", headers=["Content-Type", "Authorization"])
-def list_files():
-    files = list()
-    for filename in os.listdir("articles"):
-        path = os.path.join("articles", filename)
-        if os.path.isfile(path):
-            files.append(filename)
-    return jsonify(files)
-
-
-if __name__ == "__main__":
-    app.run()
-

Files-API/requirements.txt

@@ -1,3 +1,4 @@
+-e git+https://git.ccom.uprrp.edu/ccorrada/CarDieAleCa.git@5055e56314e136e6abfc24a48da9767b89da8ad8#egg=articles_api&subdirectory=Files-API
 backcall==0.2.0
 click==8.0.3
 decorator==5.1.0

Files-API/run.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+export FLASK_APP=articles_api
+export FLASK_ENV=development
+flask run

Files-API/setup.py

@@ -0,0 +1,14 @@
+from setuptools import find_packages, setup
+
+setup(
+    name="articles_api",
+    version="1.0.0",
+    packages=["articles_api",
+              "articles_api.articles"],
+    include_package_data=True,
+    zip_safe=False,
+    install_requires=[
+        "flask",
+        "flask_cors"
+    ]
+)

app_template/www/articles.html

@@ -53,28 +53,7 @@
 		<script src="sortposts.js"></script>
 
 		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-		<script>
-			var articles;
-			axios.get(`http://localhost:5000/articles`)
-					.then(response => {
-						articles = response.data;
-
-						for (element of articles) {
-							axios.get(`http://localhost:5000/articles/${element}`)
-								.then(response => {
-									let articlesHeading = document.querySelector("#articles-heading").parentElement;
-									let articleDiv = document.createElement("button");
-									articleDiv.textContent = response.data;
-
-									articleDiv.classList.add("m-5", "article-content");
-									articlesHeading.appendChild(articleDiv);
-								})
-								.catch(error => console.error(error));
-						}
-					})
-					.catch(error => console.error(error));
-
-		</script>
+		<script src="fetch_articles.js"></script>
 	</head>
 	<body>
 	<header role="banner" id="fh5co-header">

app_template/www/css/main.css

@@ -40,3 +40,15 @@ button.article-content {
     top: 0;
     background: linear-gradient(transparent 150px, white);
 }
+
+.modal-content {
+    background-color: rgb(75, 75, 75) !important;
+}
+
+.modal button.btn.btn-secondary {
+    background-color: rgb(59, 59, 59) !important;
+}
+
+.modal button.close {
+    color: rgb(255, 0, 0) !important;
+}

app_template/www/fetch_articles.js

@@ -0,0 +1,46 @@
+var articles;
+axios.get("136.145.231.32:8080")
+    .then(response => {
+        articles = response.data;
+        for (let i = 0; i < articles.length; i++) {
+            let element = articles[i];
+            axios.get(`136.145.231.32:8080/${element}`)
+                .then(response => {
+                    let articlesHeading = document.querySelector("#articles-heading").parentElement;
+                    let articleButton = document.createElement("button");
+                    articleButton.textContent = response.data;
+
+                    articleButton.classList.add("m-5", "article-content");
+                    articleButton.setAttribute("data-toggle", "modal");
+                    articleButton.setAttribute("data-target", `#articleModal${i}`);
+
+                    let modal = document.createElement("div");
+                    modal.classList.add("modal", "fade");
+                    modal.setAttribute("id", `articleModal${i}`);
+                    modal.setAttribute("tabindex", "-1");
+                    modal.setAttribute("aria-labelledby", `articleModalLabel${i}`);
+                    modal.setAttribute("aria-hidden", "true");
+                    modal.innerHTML = `
+                        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <h5 class="modal-title" id="articleModalLabel${i}">${element}</h5>
+                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                        <span aria-hidden="true">&times;</span>
+                                    </button>
+                                </div>
+                                <div class="modal-body">
+                                    ${response.data}
+                                </div>
+                                <div class="modal-footer">
+                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                                </div>
+                            </div>
+                        </div>`;
+                    document.body.appendChild(modal);
+                    articlesHeading.appendChild(articleButton);
+                })
+                .catch(error => console.error(error));
+        }
+    })
+    .catch(error => console.error(error));