Cleaned double navbar

Signed-off-by: Pratyush Desai <pratyush.desai@liberta.casa>
Home and Games V1 views
2025-02-08 08:10:13 +05:30 · 2025-02-07 11:13:17 +05:30
15 changed files with 368 additions and 297 deletions
--- a/README.md
+++ b/README.md
@ -1,65 +1,15 @@
 # GibCasa GameServerSupervisor

-## Table of Contents
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)
+# Setup 

-## Prerequisites
-
-Python 3.10 or above
-
-## Installation 
-
-1. Clone the repository:
-```bash
-  git clone https://git.com.de/GibCasa/GameServerSupervisor
-```
-2. Create a virtual environment in Python:
-```bash
-  python -m venv venv
-```
-3. Activate the virtual environment:
-```bash
-  source venv/bin/activate
-```
-4. Install dependencies:
-```bash
-  pip install -r requirements.txt
-```
-5. Run tests:
-```bash
-  ./manage.py test
-```
-6. Run migrations:
-```bash
-  ./manage.py migrate
-```
-7. Create admin user:
-```bash
-  ./manage.py createsuperuser
-```
-8. Run server:
-```bash
-  ./manage.py runserver
-```
-
-## Usage
-
-* Visit http://localhost:8000 for /public and 
-  http://localhost:8000/admin/ to login via the superuser credentials
-
-## Contributing
-
-1. Fork the repository.
-2. Create a new branch: `git checkout -b feature-name`.
-3. Make your changes.
-4. Push your branch: `git push origin feature-name`.
-5. Create a pull request.
-
-## License
-
-This project is licensed under the [AGPL](https://www.gnu.org/licenses/agpl-3.0.html).

+* clone the repo
+* create venv `python3 -m venv venv`
+* activate `source venv/bin/activate`
+* `pip install -r requirements.txt`
+* will need docker running 
+* `python manage.py migrate`
+* Create admin user: `python manage.py createsuperuser` 
+* `python manage.py runserver`
+* visit http://localhost:8000 for /public and 
+  http://localhost:8000/admin/ to login via the superuser credentials
--- a/webpanel/admin.py
+++ b/webpanel/admin.py
@ -16,9 +16,9 @@ def launch_container(modeladmin, request, queryset):
        container_name = f"{server.game.name}_{server.ip_address}_{server.port}"
        try:
            # Ensure the command is passed as a list of strings
-            command = server.get_podman_run_command().split() if server.run_command else []
+            command = server.get_docker_run_command().split() if server.docker_run_command else []
            container = client.containers.run(
-                server.image,
+                server.docker_image,
                detach=True,
                name=container_name,
                command=command,
@ -48,7 +48,7 @@ def remove_container(modeladmin, request, queryset):

@admin.register(Server)
 class ServerAdmin(admin.ModelAdmin):
-    list_display = ('game', 'name', 'ip_address', 'port', 'status', 'image', 'run_command', 'command_args')
+    list_display = ('game', 'name', 'ip_address', 'port', 'status', 'docker_image', 'docker_run_command', 'command_args')
    search_fields = ('game__name', 'ip_address', 'port')

    def save_model(self, request, obj, form, change):
@ -62,6 +62,6 @@ class ServerAdmin(admin.ModelAdmin):
        return queryset

    list_filter = ('status', 'game')
-    search_fields = ('ip_address', 'game__name', 'image')
+    search_fields = ('ip_address', 'game__name', 'docker_image')
    ordering = ('game', 'ip_address')
    actions = [launch_container, stop_container, remove_container]
--- a/webpanel/migrations/0006_game_image_url.py
+++ b/webpanel/migrations/0006_game_image_url.py
@ -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),
+        ),
+    ]
--- a/webpanel/migrations/0006_rename_docker_image_server_image_and_more.py
+++ b/webpanel/migrations/0006_rename_docker_image_server_image_and_more.py
@ -1,23 +0,0 @@
-# Generated by Django 5.1.5 on 2025-02-09 17:03
-
-from django.db import migrations
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ("webpanel", "0005_server_command_args_server_docker_run_command"),
-    ]
-
-    operations = [
-        migrations.RenameField(
-            model_name="server",
-            old_name="docker_image",
-            new_name="image",
-        ),
-        migrations.RenameField(
-            model_name="server",
-            old_name="docker_run_command",
-            new_name="run_command",
-        ),
-    ]
--- a/webpanel/models.py
+++ b/webpanel/models.py
@ -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):
@ -18,8 +19,8 @@ class Server(models.Model):
    name = models.CharField(max_length=100)
    ip_address = models.GenericIPAddressField(null=True)
    port = models.PositiveIntegerField(null=True)
-    image = models.CharField(max_length=200, null=True)
-    run_command = models.CharField(max_length=500, blank=True, null=True) 
+    docker_image = models.CharField(max_length=200, null=True)
+    docker_run_command = models.CharField(max_length=500, blank=True, null=True) 
    command_args = models.TextField(blank=True, null=True)
    status = models.CharField(max_length=10, choices=STATUS_CHOICES, default='offline')

@ -27,7 +28,7 @@ class Server(models.Model):
        return f"{self.game.name} Server at {self.ip_address}:{self.port}"

    def sync_status(self):
-        """Check the real-time status of the container and update the field."""
+        """Check the real-time status of the Docker container and update the field."""
        client = podman.PodmanClient(base_url="unix:///run/user/1000/podman/podman.sock")
        container_name = f"{self.game.name}_{self.ip_address}_{self.port}"
        try:
@ -42,11 +43,11 @@ class Server(models.Model):
            self.status = "offline"  # Fallback in case of unexpected errors
        self.save()

-    def get_podman_run_command(self):
+    def get_docker_run_command(self):
        """Returns the Podman run command, falling back to default image if not set."""
-        if self.run_command:
+        if self.docker_run_command:
            # Return command as a string to be split later
-            return self.run_command
+            return self.docker_run_command
        else:
            # Default command with image and arguments
            base_command = f"{self.image}"
--- a/webpanel/templates/webpanel/active_servers.html
+++ b/webpanel/templates/webpanel/active_servers.html
@ -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>
--- a/webpanel/templates/webpanel/base.html
+++ b/webpanel/templates/webpanel/base.html
@ -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>
--- a/webpanel/templates/webpanel/game_detail.html
+++ b/webpanel/templates/webpanel/game_detail.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>
--- a/webpanel/templates/webpanel/game_servers.html
+++ b/webpanel/templates/webpanel/game_servers.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>
--- a/webpanel/templates/webpanel/games.html
+++ b/webpanel/templates/webpanel/games.html
@ -0,0 +1,16 @@
+{% extends 'webpanel/base.html' %}
+
+{% block title %}Games - Game Servers{% endblock %}
+
+{% block content %}
+    <h2>Public Game Servers</h2>
+
+    <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 %}
--- a/webpanel/templates/webpanel/home.html
+++ b/webpanel/templates/webpanel/home.html
@ -1,53 +1,74 @@
-<!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>
+
+    <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 %}
--- a/webpanel/test_models.py
+++ b/webpanel/test_models.py
@ -1,11 +0,0 @@
-from django.test import TestCase
-from webpanel.models import Game
-
-class GameTestCase(TestCase):
-    def setUp(self):
-        Game.objects.create(name="Assassin's Creed")
-
-    def test_game_creation(self):
-        assassins = Game.objects.get(name="Assassin's Creed")
-        assert str(assassins) == "Assassin's Creed"
-
--- a/webpanel/tests.py
+++ b/webpanel/tests.py
@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
--- a/webpanel/urls.py
+++ b/webpanel/urls.py
@ -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'),
 ]
--- a/webpanel/views.py
+++ b/webpanel/views.py
@ -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})