From 3d7580637501b20ee25794db577fa7dbb2935e56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Runden?= <br@runden.net>
Date: Tue, 3 Jan 2023 17:47:53 +0100
Subject: [PATCH] =?UTF-8?q?index=20r=C3=BCber?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.php    | 56 ++-----------------------------
 overview.php | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 95 insertions(+), 54 deletions(-)
 create mode 100644 overview.php

diff --git a/index.php b/index.php
index 0bfa21f..5f36d7d 100644
--- a/index.php
+++ b/index.php
@@ -29,62 +29,10 @@
             <div class="row">
                 <div class="col-md-12">
                     <div class="mt-5 mb-3 clearfix">
-                        <h2 class="pull-left">Vokabel Übersicht</h2>
-                        <a href="create.php" class="btn btn-success pull-right"><i class="fa fa-plus"></i> Neue Vokabel</a>
+                        <h2 class="pull-left">Vokabel Trainer</h2>
+                        <a href="overview.php" class="btn btn-success"><i class="fa fa-plus"></i> Übersicht </a>
                     </div>
-                    <?php
-                    // Include config file
-                    require_once "config.php";
                     
-                    // Attempt select query execution
-                    $sql = "SELECT * FROM vokabeln LIMIT 30";
-                    if($result = mysqli_query($link, $sql)){
-                        if(mysqli_num_rows($result) > 0){
-                            echo '<table class="table table-bordered table-striped">';
-                                echo "<thead>";
-                                    echo "<tr>";
-                                        echo "<th>#</th>";
-                                        echo "<th>Vokabel</th>";
-                                        echo "<th>Stammform</th>";
-                                        echo "<th>Art (Wortart)</th>";
-                                        echo "<th>Flexion (Konj./Delk.)</th>";
-                                        echo "<th>Übersetzung</th>";
-                                        echo "<th>Lektion</th>";
-                                        echo "<th>Kommentar / nützl. Hinweis</th>";
-                                    echo "</tr>";
-                                echo "</thead>";
-                                echo "<tbody>";
-                                while($row = mysqli_fetch_array($result)){
-                                    echo "<tr>";
-                                        echo "<td>" . $row['id'] . "</td>";
-                                        echo "<td>" . $row['vokabel'] . "</td>";
-                                        echo "<td>" . $row['stammform'] . "</td>";
-                                        echo "<td>" . $row['art'] . "</td>";
-                                        echo "<td>" . $row['flexion'] . "</td>";
-                                        echo "<td>" . $row['uebersetzung'] . "</td>";
-                                        echo "<td>" . $row['lektion'] . "</td>";
-                                        echo "<td>" . $row['kommentar'] . "</td>";
-                                        echo "<td>";
-                                            echo '<a href="read.php?id='. $row['id'] .'" class="mr-3" title="Ansehen" data-toggle="tooltip"><span class="fa fa-eye"></span></a>';
-                                            echo '<a href="update.php?id='. $row['id'] .'" class="mr-3" title="Bearbeiten" data-toggle="tooltip"><span class="fa fa-pencil"></span></a>';
-                                            echo '<a href="delete.php?id='. $row['id'] .'" title="Löschen" data-toggle="tooltip"><span class="fa fa-trash"></span></a>';
-                                        echo "</td>";
-                                    echo "</tr>";
-                                }
-                                echo "</tbody>";                            
-                            echo "</table>";
-                            // Free result set
-                            mysqli_free_result($result);
-                        } else{
-                            echo '<div class="alert alert-danger"><em>Keine Einträge gefunden.</em></div>';
-                        }
-                    } else{
-                        echo "Oha! DB Verbindung klappt nicht. Bitte später versuchen.";
-                    }
- 
-                    // Close connection
-                    mysqli_close($link);
-                    ?>
                 </div>
             </div>        
         </div>
diff --git a/overview.php b/overview.php
new file mode 100644
index 0000000..0bfa21f
--- /dev/null
+++ b/overview.php
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>VocTrain Übersicht</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <style>
+        .wrapper{
+            width: 600px;
+            margin: 0 auto;
+        }
+        table tr td:last-child{
+            width: 120px;
+        }
+    </style>
+    <script>
+        $(document).ready(function(){
+            $('[data-toggle="tooltip"]').tooltip();   
+        });
+    </script>
+</head>
+<body>
+    <div class="wrapper">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="mt-5 mb-3 clearfix">
+                        <h2 class="pull-left">Vokabel Übersicht</h2>
+                        <a href="create.php" class="btn btn-success pull-right"><i class="fa fa-plus"></i> Neue Vokabel</a>
+                    </div>
+                    <?php
+                    // Include config file
+                    require_once "config.php";
+                    
+                    // Attempt select query execution
+                    $sql = "SELECT * FROM vokabeln LIMIT 30";
+                    if($result = mysqli_query($link, $sql)){
+                        if(mysqli_num_rows($result) > 0){
+                            echo '<table class="table table-bordered table-striped">';
+                                echo "<thead>";
+                                    echo "<tr>";
+                                        echo "<th>#</th>";
+                                        echo "<th>Vokabel</th>";
+                                        echo "<th>Stammform</th>";
+                                        echo "<th>Art (Wortart)</th>";
+                                        echo "<th>Flexion (Konj./Delk.)</th>";
+                                        echo "<th>Übersetzung</th>";
+                                        echo "<th>Lektion</th>";
+                                        echo "<th>Kommentar / nützl. Hinweis</th>";
+                                    echo "</tr>";
+                                echo "</thead>";
+                                echo "<tbody>";
+                                while($row = mysqli_fetch_array($result)){
+                                    echo "<tr>";
+                                        echo "<td>" . $row['id'] . "</td>";
+                                        echo "<td>" . $row['vokabel'] . "</td>";
+                                        echo "<td>" . $row['stammform'] . "</td>";
+                                        echo "<td>" . $row['art'] . "</td>";
+                                        echo "<td>" . $row['flexion'] . "</td>";
+                                        echo "<td>" . $row['uebersetzung'] . "</td>";
+                                        echo "<td>" . $row['lektion'] . "</td>";
+                                        echo "<td>" . $row['kommentar'] . "</td>";
+                                        echo "<td>";
+                                            echo '<a href="read.php?id='. $row['id'] .'" class="mr-3" title="Ansehen" data-toggle="tooltip"><span class="fa fa-eye"></span></a>';
+                                            echo '<a href="update.php?id='. $row['id'] .'" class="mr-3" title="Bearbeiten" data-toggle="tooltip"><span class="fa fa-pencil"></span></a>';
+                                            echo '<a href="delete.php?id='. $row['id'] .'" title="Löschen" data-toggle="tooltip"><span class="fa fa-trash"></span></a>';
+                                        echo "</td>";
+                                    echo "</tr>";
+                                }
+                                echo "</tbody>";                            
+                            echo "</table>";
+                            // Free result set
+                            mysqli_free_result($result);
+                        } else{
+                            echo '<div class="alert alert-danger"><em>Keine Einträge gefunden.</em></div>';
+                        }
+                    } else{
+                        echo "Oha! DB Verbindung klappt nicht. Bitte später versuchen.";
+                    }
+ 
+                    // Close connection
+                    mysqli_close($link);
+                    ?>
+                </div>
+            </div>        
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file