From 257b4312e526dbe2828940d00e3888203f348a62 Mon Sep 17 00:00:00 2001
From: Santiago Lo Coco <se23m504@technikum-wien.at>
Date: Sun, 20 Oct 2024 15:46:47 +0200
Subject: [PATCH] Add API and webapp

---
 .env.dev                    |   2 +
 .gitignore                  |   6 ++
 app.py                      |  46 ++++++++++
 db.py                       |  43 +++++++++
 requirements.txt            |   5 ++
 run.bat                     |   6 ++
 run.sh                      |   6 ++
 templates/index copy 2.html | 174 ++++++++++++++++++++++++++++++++++++
 templates/index copy.html   | 108 ++++++++++++++++++++++
 templates/index.html        | 173 +++++++++++++++++++++++++++++++++++
 10 files changed, 569 insertions(+)
 create mode 100644 .env.dev
 create mode 100644 .gitignore
 create mode 100644 app.py
 create mode 100644 db.py
 create mode 100644 requirements.txt
 create mode 100644 run.bat
 create mode 100644 run.sh
 create mode 100644 templates/index copy 2.html
 create mode 100644 templates/index copy.html
 create mode 100644 templates/index.html

diff --git a/.env.dev b/.env.dev
new file mode 100644
index 0000000..f610df0
--- /dev/null
+++ b/.env.dev
@@ -0,0 +1,2 @@
+FLASK_SECRET_KEY=your_secret_key
+DATABASE=sqlite:///endpoints.db
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a97a307
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+.env
+.venv
+__pycache__/
+*.py[cod]
+*$py.class
+
diff --git a/app.py b/app.py
new file mode 100644
index 0000000..03684d0
--- /dev/null
+++ b/app.py
@@ -0,0 +1,46 @@
+import os
+from flask import Flask, render_template, request, redirect, url_for, jsonify, abort
+from db import *
+# from routes import register_routes
+from dotenv import load_dotenv
+
+load_dotenv()
+DATABASE_URI = os.getenv('DATABASE')
+
+app = Flask(__name__)
+app.config['SQLALCHEMY_DATABASE_URI'] = DATABASE_URI
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+
+init_db(app)
+
+@app.route('/')
+def homepage():
+    endpoints = get_endpoints_from_db()
+    return render_template('index.html', endpoints=endpoints)
+
+@app.route('/api/endpoints', methods=['GET'])
+def get_endpoints():
+    endpoints = get_endpoints_from_db()
+    return jsonify(endpoints)
+
+@app.route('/api/endpoints/<int:endpoint_id>', methods=['GET'])
+def get_endpoint(endpoint_id):
+    endpoint = get_endpoint_by_id(endpoint_id)
+    if endpoint:
+        return jsonify(endpoint)
+    else:
+        abort(404)
+
+@app.route('/api/endpoints/<int:endpoint_id>', methods=['PUT'])
+def update_endpoint(endpoint_id):
+    data = request.get_json()
+    new_url = data.get('url')
+
+    if new_url:
+        update_endpoint_in_db(endpoint_id, new_url)
+        return jsonify({"status": "success", "message": f"Endpoint {endpoint_id} updated to {new_url}"}), 200
+    else:
+        return jsonify({"status": "error", "message": "No new endpoint provided."}), 400
+
+if __name__ == '__main__':
+    app.run(host='windows.local', port=5000)
diff --git a/db.py b/db.py
new file mode 100644
index 0000000..f853b94
--- /dev/null
+++ b/db.py
@@ -0,0 +1,43 @@
+from flask_sqlalchemy import SQLAlchemy
+
+db = SQLAlchemy()
+
+class Endpoint(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    url = db.Column(db.String, nullable=False)
+
+def init_db(app):
+    db.init_app(app)
+    with app.app_context():
+        db.create_all()
+        init_default_endpoints()
+
+def init_default_endpoints():
+    existing_endpoints = {endpoint.id for endpoint in Endpoint.query.all()}
+
+    # Define default endpoints
+    default_endpoints = [
+        Endpoint(id="1", url="http://windows.local:8100/mystream/"),
+        Endpoint(id="2", url="http://windows.local:8200/mystream/")
+    ]
+
+    # with db.session.begin():
+    for endpoint in default_endpoints:
+        if endpoint.id not in existing_endpoints:
+            db.session.add(endpoint)
+
+def get_endpoints_from_db():
+    endpoints = Endpoint.query.all()
+    return [{"id": endpoint.id, "url": endpoint.url} for endpoint in endpoints]
+
+def update_endpoint_in_db(endpoint_id, new_url):
+    with db.session.begin():
+        endpoint = Endpoint.query.get(endpoint_id)
+        if endpoint:
+            endpoint.url = new_url
+        else:
+            db.session.add(Endpoint(id=endpoint_id, url=new_url))
+
+def get_endpoint_by_id(endpoint_id):
+    endpoint = Endpoint.query.get(int(endpoint_id))
+    return {"id": endpoint.id, "url": endpoint.url} if endpoint else None
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..a65ce4c
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,5 @@
+Flask==3.0.3
+waitress==3.0.0
+python-dotenv==1.0.1
+SQLAlchemy==2.0.36
+Flask-SQLAlchemy==3.1.1
\ No newline at end of file
diff --git a/run.bat b/run.bat
new file mode 100644
index 0000000..d50d8f8
--- /dev/null
+++ b/run.bat
@@ -0,0 +1,6 @@
+@echo off
+
+python -m venv .venv
+call .venv\Scripts\activate
+pip install -r requirements.txt
+python app.py
\ No newline at end of file
diff --git a/run.sh b/run.sh
new file mode 100644
index 0000000..4210f5a
--- /dev/null
+++ b/run.sh
@@ -0,0 +1,6 @@
+#!/bin/bash
+
+python -m venv .venv
+source .venv/bin/activate
+pip install -r requirements.txt
+python app.py
\ No newline at end of file
diff --git a/templates/index copy 2.html b/templates/index copy 2.html
new file mode 100644
index 0000000..1804962
--- /dev/null
+++ b/templates/index copy 2.html	
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Endpoints manager</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 20px;
+            background-color: #f9f9f9;
+            color: #333;
+        }
+
+        h1 {
+            color: #4CAF50;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 20px 0;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+
+        th, td {
+            padding: 12px;
+            border: 1px solid #ccc;
+            text-align: left;
+        }
+
+        th {
+            background-color: #4CAF50;
+            color: white;
+        }
+
+        tbody tr:hover {
+            background-color: #f1f1f1;
+        }
+
+        .update-btn {
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            padding: 8px 12px;
+            cursor: pointer;
+            border-radius: 4px;
+            transition: background-color 0.3s ease;
+        }
+
+        .update-btn:hover {
+            background-color: #45a049;
+        }
+
+        input[type="text"] {
+            padding: 8px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            width: calc(100% - 100px);
+            margin-right: 10px;
+            box-sizing: border-box;
+        }
+
+        input[type="text"]:focus {
+            outline: none;
+            border-color: #4CAF50;
+        }
+
+        h2 {
+            margin-top: 40px;
+            color: #333;
+        }
+
+        pre {
+            background-color: #fff;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            overflow-x: auto;
+        }
+
+        @media (max-width: 600px) {
+            table, th, td {
+                font-size: 14px;
+            }
+
+            input[type="text"] {
+                width: calc(100% - 80px);
+            }
+
+            .update-btn {
+                padding: 6px 10px;
+            }
+        }
+    </style>
+</head>
+<body>
+
+<h1>Endpoints Manager</h1>
+
+<table>
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>URL</th>
+            <th>Action</th>
+        </tr>
+    </thead>
+    <tbody id="endpoints-table-body">
+        {% for id, url in endpoints.items() %}
+        <tr>
+            <td>{{ id }}</td>
+            <td id="url-{{ id }}">{{ url }}</td>
+            <td>
+                <input type="text" id="new-url-{{ id }}" placeholder="New URL">
+                <button class="update-btn" onclick="updateEndpoint({{ id }})">Update</button>
+            </td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
+
+<h2>cURL Commands</h2>
+<pre>
+# Get all endpoints
+curl http://windows.local:5000/api/endpoints
+
+# Get Endpoint 1
+curl http://windows.local:5000/api/endpoints/1
+
+# Get Endpoint 2
+curl http://windows.local:5000/api/endpoints/2
+
+# Update Endpoint 1
+curl -X PUT http://windows.local:5000/api/endpoints/1 -H "Content-Type: application/json" -d '{"url": "http://new.url/for/endpoint1"}'
+
+# Update Endpoint 2
+curl -X PUT http://windows.local:5000/api/endpoints/2 -H "Content-Type: application/json" -d '{"url": "http://new.url/for/endpoint2"}'
+</pre>
+
+<script>
+function updateEndpoint(endpointId) {
+    const newUrl = document.getElementById(`new-url-${endpointId}`).value;
+    if (newUrl) {
+        fetch(`http://windows.local:5000/api/endpoints/${endpointId}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ url: newUrl }),
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === 'success') {
+                document.getElementById(`url-${endpointId}`).innerText = newUrl;
+            } else {
+                alert(data.message);
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            alert('Failed to update endpoint.');
+        });
+    } else {
+        alert('Please enter a new URL.');
+    }
+}
+</script>
+
+</body>
+</html>
diff --git a/templates/index copy.html b/templates/index copy.html
new file mode 100644
index 0000000..25b4ae5
--- /dev/null
+++ b/templates/index copy.html	
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Endpoints Manager</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        th, td {
+            padding: 10px;
+            border: 1px solid #ccc;
+            text-align: left;
+        }
+        th {
+            background-color: #f4f4f4;
+        }
+        .update-btn {
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+
+<h1>Endpoints Manager</h1>
+
+<table>
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>URL</th>
+            <th>Action</th>
+        </tr>
+    </thead>
+    <tbody id="endpoints-table-body">
+        {% for id, url in endpoints.items() %}
+        <tr>
+            <td>{{ id }}</td>
+            <td id="url-{{ id }}">{{ url }}</td>
+            <td>
+                <input type="text" id="new-url-{{ id }}" placeholder="New URL">
+                <button class="update-btn" onclick="updateEndpoint({{ id }})">Update</button>
+            </td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
+
+<h2>cURL Commands</h2>
+<pre>
+# Get all endpoints
+curl http://windows.local:5000/api/endpoints
+
+# Get Endpoint 1
+curl http://windows.local:5000/api/endpoints/1
+
+# Get Endpoint 2
+curl http://windows.local:5000/api/endpoints/2
+
+# Update Endpoint 1
+curl -X PUT http://windows.local:5000/api/endpoints/1 -H "Content-Type: application/json" -d '{"url": "http://new.url/for/endpoint1"}'
+
+# Update Endpoint 2
+curl -X PUT http://windows.local:5000/api/endpoints/2 -H "Content-Type: application/json" -d '{"url": "http://new.url/for/endpoint2"}'
+</pre>
+
+<script>
+function updateEndpoint(endpointId) {
+    const newUrl = document.getElementById(`new-url-${endpointId}`).value;
+    if (newUrl) {
+        fetch(`http://windows.local:5000/api/endpoints/${endpointId}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ url: newUrl }),
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === 'success') {
+                document.getElementById(`url-${endpointId}`).innerText = newUrl;
+            } else {
+                alert(data.message);
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            alert('Failed to update endpoint.');
+        });
+    } else {
+        alert('Please enter a new URL.');
+    }
+}
+</script>
+
+</body>
+</html>
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..ee15cfd
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Endpoints manager</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 20px;
+            background-color: #f9f9f9;
+            color: #333;
+        }
+
+        h1 {
+            color: #4CAF50;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 20px 0;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+
+        th, td {
+            padding: 12px;
+            border: 1px solid #ccc;
+            text-align: left;
+        }
+
+        th {
+            background-color: #4CAF50;
+            color: white;
+        }
+
+        tbody tr:hover {
+            background-color: #f1f1f1;
+        }
+
+        .update-btn {
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            padding: 8px 12px;
+            cursor: pointer;
+            border-radius: 4px;
+            transition: background-color 0.3s ease;
+        }
+
+        .update-btn:hover {
+            background-color: #45a049;
+        }
+
+        input[type="url"] {
+            padding: 8px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            width: calc(100% - 100px);
+            margin-right: 10px;
+            box-sizing: border-box;
+        }
+
+        input[type="url"]:focus {
+            outline: none;
+            border-color: #4CAF50;
+        }
+
+        h2 {
+            margin-top: 40px;
+            color: #333;
+        }
+
+        pre {
+            background-color: #fff;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            overflow-x: auto;
+        }
+
+        @media (max-width: 600px) {
+            table, th, td {
+                font-size: 14px;
+            }
+
+            input[type="url"] {
+                width: calc(100% - 80px);
+            }
+
+            .update-btn {
+                padding: 6px 10px;
+            }
+        }
+    </style>
+</head>
+<body>
+
+<h1>Endpoints manager</h1>
+
+<table>
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>URL</th>
+            <th>Action</th>
+        </tr>
+    </thead>
+    <tbody id="endpoints-table-body">
+        {% for endpoint in endpoints %}
+        <tr>
+            <td>{{ endpoint.id }}</td>
+            <td id="url-{{ endpoint.id }}">{{ endpoint.url }}</td>
+            <td>
+                <form onsubmit="return updateEndpoint(event, '{{ endpoint.id }}')">
+                    <input type="url" id="new-url-{{ endpoint.id }}" placeholder="New URL" required>
+                    <button type="submit" class="update-btn">Update</button>
+                </form>
+            </td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
+
+<h2>cURL Commands</h2>
+<pre>
+# Get all endpoints
+curl http://windows.local:5000/api/endpoints
+
+# Get Endpoint 1
+curl http://windows.local:5000/api/endpoints/1
+
+# Get Endpoint 2
+curl http://windows.local:5000/api/endpoints/2
+
+# Update Endpoint 1
+curl -X PUT http://windows.local:5000/api/endpoints/1 -H "Content-Type: application/json" -d '{"url": "http://new.url/for/endpoint1"}'
+
+# Update Endpoint 2
+curl -X PUT http://windows.local:5000/api/endpoints/2 -H "Content-Type: application/json" -d '{"url": "http://new.url/for/endpoint2"}'
+</pre>
+
+<script>
+function updateEndpoint(event, endpointId) {
+    event.preventDefault();
+    const newUrl = document.getElementById(`new-url-${endpointId}`).value;
+
+    fetch(`http://windows.local:5000/api/endpoints/${endpointId}`, {
+        method: 'PUT',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ url: newUrl }),
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.status === 'success') {
+            document.getElementById(`url-${endpointId}`).innerText = newUrl;
+        } else {
+            console.error(data.message);
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+}
+</script>
+
+</body>
+</html>