fluzzi32/traefik-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Federico Luzzi
2024-07-22 18:14:12 -03:00
commit 172bbaa824
3 changed files with 210 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app.py Normal file
View File

@ -0,0 +1,39 @@
from flask import Flask, render_template
import requests
import re
app = Flask(__name__)
TRAEFIK_API_URL = "https://norman.lan/api/http/routers"
REGEX_PATTERNS = [r".*\.gederico\.dynu\.net"]
def get_routers():
response = requests.get(TRAEFIK_API_URL, verify=False) # Ignore SSL certificate verification
if response.status_code == 200:
routers = response.json()
filtered_routers = filter_routers(routers)
return filtered_routers
return []
def filter_routers(routers):
filtered_routers = []
for router in routers:
for pattern in REGEX_PATTERNS:
if re.match(pattern, router['rule'].split('`')[1]):
filtered_routers.append(router)
break
return filtered_routers
def truncate_and_uppercase_name(name):
return name.split('@')[0].upper()
@app.route('/')
def index():
routers = get_routers()
for router in routers:
router['truncated_name'] = truncate_and_uppercase_name(router['name'])
return render_template('index.html', routers=routers)
if __name__ == '__main__':
app.run(debug=True)

131
static/styles.css Normal file
View File

@ -0,0 +1,131 @@
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f9f9f9;
color: #333;
transition: background-color 0.3s, color 0.3s;
}
.header {
background-color: #3f51b5;
color: white;
padding: 20px;
text-align: center;
}
.header button {
background: none;
border: 2px solid white;
color: white;
padding: 10px 20px;
cursor: pointer;
margin-top: 10px;
border-radius: 5px;
}
.header button:hover {
background-color: white;
color: #3f51b5;
}
.content {
padding: 20px;
}
.applications {
max-width: 1200px;
margin: 0 auto;
}
.applications h2 {
color: #3f51b5;
}
.router-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.router {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 10px;
flex: 1 1 calc(33.333% - 20px);
max-width: calc(33.333% - 20px);
text-align: center;
cursor: pointer;
transition: box-shadow 0.3s ease;
box-sizing: border-box;
}
.router:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.router h2 {
margin: 0;
color: #3f51b5;
text-transform: uppercase;
}
/* Dark Mode */
.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
.dark-mode .header {
background-color: #1e1e1e;
}
.dark-mode .header button {
border-color: #e0e0e0;
}
.dark-mode .header button:hover {
background-color: #e0e0e0;
color: #1e1e1e;
}
.dark-mode .applications h2 {
color: #bb86fc;
}
.dark-mode .router {
background-color: #1e1e1e;
color: #e0e0e0;
}
.dark-mode .router h2 {
color: #bb86fc;
}
.dark-mode .router:hover {
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
}
/* Responsive Design */
@media (max-width: 1024px) {
.router {
flex: 1 1 calc(50% - 20px);
max-width: calc(50% - 20px);
}
}
@media (max-width: 768px) {
.router {
flex: 1 1 calc(50% - 20px);
max-width: calc(50% - 20px);
}
}
@media (max-width: 480px) {
.router {
flex: 1 1 100%;
max-width: 100%;
}
}

40
templates/index.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traefik Routers</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<script>
document.addEventListener("DOMContentLoaded", function() {
if (localStorage.getItem("dark-mode") === "true") {
document.body.classList.add("dark-mode");
}
});
function toggleDarkMode() {
document.body.classList.toggle("dark-mode");
localStorage.setItem("dark-mode", document.body.classList.contains("dark-mode"));
}
</script>
</head>
<body>
<div class="header">
<h1>Traefik Routers</h1>
<button onclick="toggleDarkMode()">Toggle Dark Mode</button>
</div>
<div class="content">
<div class="applications">
<h2>Applications</h2>
<div class="router-container">
{% for router in routers %}
<div class="router" onclick="location.href='http://{{ router['rule'].split('`')[1] }}'">
<h2>{{ router['truncated_name'] }}</h2>
</div>
{% endfor %}
</div>
</div>
</div>
</body>
</html>