commit 257b4312e526dbe2828940d00e3888203f348a62
Author: Santiago Lo Coco <se23m504@technikum-wien.at>
Date:   Sun Oct 20 15:46:47 2024 +0200

    Add API and webapp

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>