Home and Games V1 views
Added an Image for the Grid Thumbnail There is plenty to fix but that's trivial shall polish it at the end of v1 Signed-off-by: Pratyush Desai <pratyush.desai@liberta.casa>
This commit is contained in:
parent
0f042f78ea
commit
2725e6fb05
GPG Key ID:
DBA5BB7505946FAD
18
webpanel/migrations/0006_game_image_url.py
Normal file
18
webpanel/migrations/0006_game_image_url.py
Normal file
@ -0,0 +1,18 @@
|
||||
# Generated by Django 5.1.5 on 2025-02-07 05:14
|
||||
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
("webpanel", "0005_server_command_args_server_docker_run_command"),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name="game",
|
||||
name="image_url",
|
||||
field=models.URLField(blank=True, null=True),
|
||||
),
|
||||
]
|
||||
@ -3,6 +3,7 @@ import podman
|
||||
|
||||
class Game(models.Model):
|
||||
name = models.CharField(max_length=100)
|
||||
image_url = models.URLField(blank=True, null=True)
|
||||
genre = models.CharField(max_length=50, blank=True, null=True)
|
||||
|
||||
def __str__(self):
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Active Servers</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
.server-box {
|
||||
border: 2px solid #007BFF;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
legend {
|
||||
font-weight: bold;
|
||||
color: #007BFF;
|
||||
}
|
||||
.server-details {
|
||||
margin-left: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Active Servers</h1>
|
||||
{% if servers %}
|
||||
{% for server in servers %}
|
||||
<fieldset class="server-box">
|
||||
<legend>Server: {{ server.game.name }}</legend>
|
||||
<div class="server-details">
|
||||
<p><strong>Genre:</strong> {{ server.game.genre }}</p>
|
||||
<p><strong>IP Address:</strong> {{ server.ip_address }}</p>
|
||||
<p><strong>Port:</strong> {{ server.port }}</p>
|
||||
<p><strong>Status:</strong> Online</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p>No active servers found.</p>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
205
webpanel/templates/webpanel/base.html
Normal file
205
webpanel/templates/webpanel/base.html
Normal file
@ -0,0 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Game Server Supervisor{% endblock %}</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #111;
|
||||
color: #ccc;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #222;
|
||||
padding: 1em 2em;
|
||||
border-bottom: 1px solid #444;
|
||||
}
|
||||
|
||||
.navbar .left,
|
||||
.navbar .right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin-right: 1.5em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: limegreen;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
padding: 5px;
|
||||
background: #333;
|
||||
border: 1px solid #555;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.profile {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: #444;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 80%;
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-top: 1px solid #444;
|
||||
padding: 1em;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: limegreen;
|
||||
}
|
||||
|
||||
.sub-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #444;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sub-nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.sub-nav a.active {
|
||||
color: limegreen;
|
||||
}
|
||||
|
||||
.right-links a {
|
||||
color: #a36eff;
|
||||
text-decoration: none;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.box {
|
||||
background: #222;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
color: #ff5500;
|
||||
}
|
||||
|
||||
.upcoming {
|
||||
color: #ffcc00;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.stats {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.game-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.game-box {
|
||||
width: 200px;
|
||||
height: 270px;
|
||||
border: 1px solid #888;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #111;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.game-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="left">
|
||||
<a href="{% url 'home' %}">Home</a>
|
||||
<a href="{% url 'games' %}">Games</a>
|
||||
<a href="#">Mods</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="search-box">
|
||||
<input type="text" placeholder="Search...">
|
||||
</div>
|
||||
<a href="#">Auth / Settings</a>
|
||||
<div class="profile">Dp</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<a href="#">More Communities</a>
|
||||
<a href="#">Terms of Service</a>
|
||||
<a href="#">License: AGPL</a>
|
||||
<a href="#">Donate</a>
|
||||
<a href="#">Support</a>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,15 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><title>{{ game.name }}</title></head>
|
||||
<body>
|
||||
<h1>{{ game.name }}</h1>
|
||||
<p>{{ game.description }}</p>
|
||||
<h2>Servers</h2>
|
||||
<ul>
|
||||
{% for server in game.servers.all %}
|
||||
<li>{{ server.ip_address }}:{{ server.port }} - {{ server.status }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<a href="/">Back to Games</a>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,49 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Active Servers for {{ game.name }}</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
h1 {
|
||||
color: #007BFF;
|
||||
}
|
||||
.server-box {
|
||||
border: 2px solid #007BFF;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
legend {
|
||||
font-weight: bold;
|
||||
color: #007BFF;
|
||||
}
|
||||
.server-details {
|
||||
margin-left: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Active Servers for {{ game.name }}</h1>
|
||||
<h3>Genre: {{ game.genre }}</h3>
|
||||
{% if servers %}
|
||||
{% for server in servers %}
|
||||
<fieldset class="server-box">
|
||||
<legend>Server: {{ game.name }}</legend>
|
||||
<div class="server-details">
|
||||
<p><strong>IP Address:</strong> {{ server.ip_address }}</p>
|
||||
<p><strong>Port:</strong> {{ server.port }}</p>
|
||||
<p><strong>Status:</strong> Online</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p>No active servers found for this game.</p>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
26
webpanel/templates/webpanel/games.html
Normal file
26
webpanel/templates/webpanel/games.html
Normal file
@ -0,0 +1,26 @@
|
||||
{% extends 'webpanel/base.html' %}
|
||||
|
||||
{% block title %}Games - Game Servers{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h2>Public Game Servers</h2>
|
||||
|
||||
<nav class="sub-nav">
|
||||
<a href="{% url 'home' %}">Home</a>
|
||||
<a href="#" class="active">Games</a>
|
||||
<a href="#">Mods</a>
|
||||
<div class="right-links">
|
||||
<a href="#">Show All Active Servers</a>
|
||||
<a href="#">Request A Server</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="game-grid">
|
||||
<div class="game-box"></div>
|
||||
<div class="game-box"><img src="https://upload.wikimedia.org/wikipedia/en/9/92/Quake2box.jpg" alt="Quake II"></div>
|
||||
<div class="game-box"><img src="https://upload.wikimedia.org/wikipedia/en/2/24/Unreal_Tournament_cover.jpg" alt="Unreal Tournament"></div>
|
||||
<div class="game-box"><img src="https://upload.wikimedia.org/wikipedia/en/0/02/QuakeIIIbox.jpg" alt="Quake III Arena"></div>
|
||||
<div class="game-box"></div>
|
||||
<div class="game-box"></div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@ -1,53 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GibCasa GSM</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
h1 {
|
||||
color: #007BFF;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #007BFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Game Hosting Panel</h1>
|
||||
<h2>Quick Links</h2>
|
||||
<ul>
|
||||
<li><a href="{% url 'active-servers' %}">View All Active Servers</a></li>
|
||||
</ul>
|
||||
<h2>Games</h2>
|
||||
<ul>
|
||||
{% for game in games %}
|
||||
<li>
|
||||
<a href="{% url 'game-servers' game.name %}">
|
||||
View Active Servers for {{ game.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% empty %}
|
||||
<li>No games available.</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
{% extends 'webpanel/base.html' %}
|
||||
|
||||
|
||||
{% block title %}Home - Game Servers{% endblock %}
|
||||
<style>
|
||||
.sub-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #444;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sub-nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.sub-nav a.active {
|
||||
color: limegreen;
|
||||
}
|
||||
|
||||
.right-links a {
|
||||
color: #a36eff;
|
||||
text-decoration: none;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.box {
|
||||
background: #222;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
color: #ff5500;
|
||||
}
|
||||
|
||||
.upcoming {
|
||||
color: #ffcc00;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.stats {
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
{% block content %}
|
||||
<h2>Public Game Servers</h2>
|
||||
|
||||
<nav class="sub-nav">
|
||||
<a href="#" class="active">Home</a>
|
||||
<a href="#">Games</a>
|
||||
<a href="#">Mods</a>
|
||||
<div class="right-links">
|
||||
<a href="#">Show All Active Servers</a>
|
||||
<a href="#">Request A Server</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="grid-container">
|
||||
<div class="box highlight">
|
||||
<p>Concise yet extreme 3D RGB features and services list</p>
|
||||
</div>
|
||||
<div class="box upcoming">
|
||||
<p>Upcoming shit</p>
|
||||
</div>
|
||||
<div class="box stats">
|
||||
<ol>
|
||||
<li>Server Uptime & reliability</li>
|
||||
<li>Craziest Player Stats</li>
|
||||
<li>??</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -2,8 +2,9 @@ from django.urls import path
|
||||
from . import views
|
||||
|
||||
urlpatterns = [
|
||||
path('', views.home_view, name='home'),
|
||||
path('<int:pk>/', views.game_detail, name='game_detail'),
|
||||
path('active-servers/', views.active_servers_view, name='active-servers'),
|
||||
path('games/<str:game_name>/', views.game_servers_view, name='game-servers'),
|
||||
path('', views.home, name='home'),
|
||||
path('games/', views.games, name='games')
|
||||
# path('<int:pk>/', views.game_detail, name='game_detail'),
|
||||
# path('active-servers/', views.active_servers_view, name='active-servers'),
|
||||
# path('games/<str:game_name>/', views.game_servers_view, name='game-servers'),
|
||||
]
|
||||
@ -1,41 +1,41 @@
|
||||
from django.shortcuts import render, get_object_or_404
|
||||
from .models import Game, Server
|
||||
|
||||
def home_view(request):
|
||||
def home(request):
|
||||
"""Display the home page with links to other views."""
|
||||
games = Game.objects.all() # Fetch all games
|
||||
return render(request, 'webpanel/home.html', {'games': games})
|
||||
|
||||
# def game_list(request):
|
||||
# games = Game.objects.all()
|
||||
# return render(request, 'webpanel/game_list.html', {'games': games})
|
||||
def games(request):
|
||||
games = Game.objects.all()
|
||||
return render(request, 'webpanel/games.html', {'games': games})
|
||||
|
||||
def game_detail(request, pk):
|
||||
game = get_object_or_404(Game, pk=pk)
|
||||
return render(request, 'webpanel/game_detail.html', {'game': game})
|
||||
# def game_detail(request, pk):
|
||||
# game = get_object_or_404(Game, pk=pk)
|
||||
# return render(request, 'webpanel/game_detail.html', {'game': game})
|
||||
|
||||
def active_servers_view(request):
|
||||
"""Fetch and display all active servers."""
|
||||
# Sync server status before fetching
|
||||
servers = Server.objects.all()
|
||||
for server in servers:
|
||||
server.sync_status()
|
||||
# def active_servers_view(request):
|
||||
# """Fetch and display all active servers."""
|
||||
# # Sync server status before fetching
|
||||
# servers = Server.objects.all()
|
||||
# for server in servers:
|
||||
# server.sync_status()
|
||||
|
||||
# Fetch only servers with status 'online'
|
||||
active_servers = Server.objects.filter(status='online')
|
||||
# # Fetch only servers with status 'online'
|
||||
# active_servers = Server.objects.filter(status='online')
|
||||
|
||||
return render(request, 'webpanel/active_servers.html', {'servers': active_servers})
|
||||
# return render(request, 'webpanel/active_servers.html', {'servers': active_servers})
|
||||
|
||||
def game_servers_view(request, game_name):
|
||||
"""Fetch and display active servers for a specific game."""
|
||||
game = get_object_or_404(Game, name=game_name)
|
||||
# def game_servers_view(request, game_name):
|
||||
# """Fetch and display active servers for a specific game."""
|
||||
# game = get_object_or_404(Game, name=game_name)
|
||||
|
||||
# Sync server status before fetching
|
||||
servers = Server.objects.filter(game=game)
|
||||
for server in servers:
|
||||
server.sync_status()
|
||||
# # Sync server status before fetching
|
||||
# servers = Server.objects.filter(game=game)
|
||||
# for server in servers:
|
||||
# server.sync_status()
|
||||
|
||||
# Fetch only active servers for the game
|
||||
active_servers = servers.filter(status='online')
|
||||
# # Fetch only active servers for the game
|
||||
# active_servers = servers.filter(status='online')
|
||||
|
||||
return render(request, 'webpanel/game_servers.html', {'game': game, 'servers': active_servers})
|
||||
# return render(request, 'webpanel/game_servers.html', {'game': game, 'servers': active_servers})
|
||||
Loading…
x
Reference in New Issue
Block a user