07092026

movie-db/templates/add_movie.html

@@ -1,50 +1,20 @@
 {% extends "base.html" %}
 {% block body %}
-  <form action="{{ url }}" method="POST">
-    <input type="text"
-           placeholder="Movie" 
-           name="{{ select_movie }}"
-           id="{{ select_movie }}">
-    &nbsp;
-    <select name="{{ select_genre }}" id="{{ select_genre }}"> 
-      {% for name in data %}  
-          <option value="{{ name }}">{{ name }}</option>
-      {% endfor %}
-    </select>
-      &nbsp;
-    <select name="{{ select_medium }}" id="{{ select_medium }}"> 
-      {% for name in data_medium %}  
-          <option value="{{ name }}">{{ name }}</option>
-      {% endfor %}
-    </select>
-      &nbsp;
-    <select name="{{ select_regie }}" id="{{ select_regie }}"> 
-      {% for name in data_regie %}  
-          <option value="{{ name }}">{{ name }}</option>
-      {% endfor %}
-    </select>
-      &nbsp;
-    <button type="submit"> Eingabe </button> 
+  <form action="{{ url }}" method="POST" class="mb-3">
+    <div class="mb-3">
+      <input type="text"
+             class="form-control"
+             placeholder="Movie"
+             name="{{ select_movie }}"
+             id="{{ select_movie }}">
+    </div>
+    <div class="mb-3">
+      <select name="{{ select_medium }}" id="{{ select_medium }}" class="form-select">
+        {% for name in data_medium %}
+            <option value="{{ name }}">{{ name }}</option>
+        {% endfor %}
+      </select>
+    </div>
+    <button type="submit" class="btn btn-primary">Eingabe</button>
   </form>
-  <br>
-
- <table border="1" width="50%">
-      <tr>
-        <th>Id</th>
-        <th>Name</th>
-        <th>Genre</th>
-        <th>Regie</th>
-        <th>Medium</th>
-      </tr>
-      {% for list_all in data_all %}
-        <tr>
-          <td>{{list_all.get("id")}}</td>
-          <td>{{list_all.get("titel")}}</td>
-          <td>{{list_all.get("genre")}}</td>
-          <td>{{list_all.get("regie")}}</td>
-          <td>{{list_all.get("medium")}}</td>
-        </tr>
-      {% endfor %}
-</table>
-
-{% endblock %}
+{% endblock %}

movie-db/templates/add_movie_manually.html

@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+{% block body %}
+  <h3 class="mb-3">Film nicht gefunden. Bitte manuell eingeben:</h3>
+  <form action="/save_manual" method="POST">
+    <input type="hidden" name="movie_name" value="{{ movie_name }}">
+    <input type="hidden" name="medium_id" value="{{ medium_id }}">
+    
+    <div class="mb-3">
+      <label for="genre_name" class="form-label">Genre:</label>
+      <input type="text" class="form-control" id="genre_name" name="genre_name" required>
+    </div>
+    <div class="mb-3">
+      <label for="director_name" class="form-label">Regisseur:</label>
+      <input type="text" class="form-control" id="director_name" name="director_name" required>
+    </div>
+    <div class="mb-3">
+      <label for="release_year" class="form-label">Erscheinungsjahr:</label>
+      <input type="number" class="form-control" id="release_year" name="release_year" required>
+    </div>
+    <button type="submit" class="btn btn-primary">Speichern</button>
+  </form>
+{% endblock %}

movie-db/templates/base.html

@@ -1,12 +1,36 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title> {{ sitename }} </title>
-    </head>
-    <body>
-        <h2> {{ sitename }} </h2>
-        <p> Es werden alle Filmtitel in einer Liste angezeigt. 
-            {% block body %}
-            {% endblock %}
-    </body>
-</html>
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ sitename }}</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="{{ url_for('index') }}">{{ sitename }}</a>
+            <div class="collapse navbar-collapse">
+                <ul class="navbar-nav ms-auto">
+                    {% if current_user.is_authenticated %}
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
+                        </li>
+                    {% else %}
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ url_for('login') }}">Login</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ url_for('register') }}">Registrieren</a>
+                        </li>
+                    {% endif %}
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <div class="container mt-4">
+        {% block body %}{% endblock %}
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+  </body>
+</html>

movie-db/templates/index.html

@@ -0,0 +1,60 @@
+{% extends "base.html" %}
+{% block body %}
+  <a href="/add_movie" class="btn btn-primary mb-3">Film hinzufügen</a>
+
+  <form method="post" action="{{ url_for('index') }}">
+    <div class="row mb-3">
+      <div class="col">
+        <label for="search" class="form-label">Suche</label>
+        <input type="text" name="search" id="search" class="form-control" value="{{ search_query }}">
+      </div>
+    </div>
+    <button type="submit" class="btn btn-primary">Suchen</button>
+  </form>
+
+  <table class="table table-striped table-bordered mt-3">
+      <thead class="table-dark">
+        <tr>
+          <th>Id</th>
+          <th>Name</th>
+          <th>Genre</th>
+          <th>Regie</th>
+          <th>Medium</th>
+          <th>Erscheinungsjahr</th>
+        </tr>
+      </thead>
+      <tbody>
+      {% for list_all in data_all %}
+        <tr>
+          <td>{{list_all.get("id")}}</td>
+          <td>{{list_all.get("titel")}}</td>
+          <td>{{list_all.get("genre")}}</td>
+          <td>{{list_all.get("regie")}}</td>
+          <td>{{list_all.get("medium")}}</td>
+          <td>{{list_all.get("release_year")}}</td>
+        </tr>
+      {% endfor %}
+      </tbody>
+</table>
+
+<nav aria-label="Page navigation">
+  <ul class="pagination">
+    <li class="page-item {% if current_page == 1 %}disabled{% endif %}">
+      <a class="page-link" href="{{ url_for('index', page=1, search=search_query) }}">Erste</a>
+    </li>
+    <li class="page-item {% if current_page == 1 %}disabled{% endif %}">
+      <a class="page-link" href="{{ url_for('index', page=current_page - 1, search=search_query) }}">Zurück</a>
+    </li>
+    <li class="page-item disabled">
+      <a class="page-link" href="#">Seite {{ current_page }} von {{ total_pages }}</a>
+    </li>
+    <li class="page-item {% if current_page == total_pages %}disabled{% endif %}">
+      <a class="page-link" href="{{ url_for('index', page=current_page + 1, search=search_query) }}">Weiter</a>
+    </li>
+    <li class="page-item {% if current_page == total_pages %}disabled{% endif %}">
+      <a class="page-link" href="{{ url_for('index', page=total_pages, search=search_query) }}">Letzte</a>
+    </li>
+  </ul>
+</nav>
+
+{% endblock %}

movie-db/templates/login.html

@@ -0,0 +1,25 @@
+{% extends "base.html" %}
+{% block body %}
+<div class="container">
+    <h2>Login</h2>
+    {% with messages = get_flashed_messages() %}
+      {% if messages %}
+        <div class="alert alert-danger">
+          {{ messages[0] }}
+        </div>
+      {% endif %}
+    {% endwith %}
+    <form method="post">
+        <div class="mb-3">
+            <label for="username" class="form-label">Benutzername</label>
+            <input type="text" class="form-control" id="username" name="username" required>
+        </div>
+        <div class="mb-3">
+            <label for="password" class="form-label">Passwort</label>
+            <input type="password" class="form-control" id="password" name="password" required>
+        </div>
+        <button type="submit" class="btn btn-primary">Login</button>
+    </form>
+    <p class="mt-3">Noch keinen Account? <a href="{{ url_for('register') }}">Hier registrieren</a>.</p>
+</div>
+{% endblock %}

movie-db/templates/output.html

@@ -1,10 +0,0 @@
-{% extends "base.html" %}
-
-        {% block body %}
-        <p>
-        Film = {{ add_movie }} <br> 
-        Genre = {{ add_genre }} <span>&nbsp genre_id = {{ add_genre_id }} <br>
-        Medium = {{ add_medium }} <span>&nbsp medium_id = {{add_medium_id }} <br>
-        Regie = {{ add_regie }}  <span>&nbsp reg_id = {{ add_regie_id }}         <br>
-        </p>
-        {% endblock %}

movie-db/templates/register.html

@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+{% block body %}
+<div class="container">
+    <h2>Registrieren</h2>
+    <form method="post">
+        <div class="mb-3">
+            <label for="username" class="form-label">Benutzername</label>
+            <input type="text" class="form-control" id="username" name="username" required>
+        </div>
+        <div class="mb-3">
+            <label for="password" class="form-label">Passwort</label>
+            <input type="password" class="form-control" id="password" name="password" required>
+        </div>
+        <button type="submit" class="btn btn-primary">Registrieren</button>
+    </form>
+    <p class="mt-3">Schon einen Account? <a href="{{ url_for('login') }}">Hier einloggen</a>.</p>
+</div>
+{% endblock %}