Add API and webapp
This commit is contained in:
commit
257b4312e5
|
|
@ -0,0 +1,2 @@
|
|||
FLASK_SECRET_KEY=your_secret_key
|
||||
DATABASE=sqlite:///endpoints.db
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
.env
|
||||
.venv
|
||||
__pycache__/
|
||||
*.py[cod]
|
||||
*$py.class
|
||||
|
||||
|
|
@ -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)
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@echo off
|
||||
|
||||
python -m venv .venv
|
||||
call .venv\Scripts\activate
|
||||
pip install -r requirements.txt
|
||||
python app.py
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
#!/bin/bash
|
||||
|
||||
python -m venv .venv
|
||||
source .venv/bin/activate
|
||||
pip install -r requirements.txt
|
||||
python app.py
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue