Merge pull request #20 from Blueblazer172/release-fixes

fixed categories
Blueblazer172 · Jun 8, 2021 · 5bd3abc · 5bd3abc
2 parents 8e61413 + c2e7a0f
commit 5bd3abc
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 22 deletions.
diff --git a/db.sqlite b/db.sqlite
diff --git a/public/style.css b/public/style.css
@@ -9,7 +9,7 @@
     box-shadow: none !important;
 }
 
-body{
+body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
@@ -18,3 +18,10 @@ body{
 main {
     flex: 1 0 auto;
 }
+
+.row-eq-height {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+}
diff --git a/server.js b/server.js
@@ -433,8 +433,12 @@ app.get('/books/cat/:category', (req, res, next) => {
 });
 
 app.route('/books/add')
-    .get((req, res) => {
-        res.render('components/book/add');
+    .get(tokenChecker, (req, res) => {
+        axios.get('http://localhost:4000/api/categories').then((categories) => {
+            res.render('components/book/add', {
+                categories: categories.data.data
+            });
+        });
     })
     .post(upload.single('cover'), (req, res, next) => {
         const file = req.file;
@@ -468,7 +472,12 @@ app.get('/book/edit/:id', (req, res, next) => {
         if (!book) {
             res.redirect('/');
         } else {
-            res.render('components/book/edit', {book: book.dataValues});
+            axios.get('http://localhost:4000/api/categories').then((categories) => {
+                res.render('components/book/edit', {
+                    categories: categories.data.data,
+                    book: book.dataValues
+                });
+            });
         }
     });
 });

diff --git a/views/components/book.ejs b/views/components/book.ejs
@@ -15,7 +15,7 @@
 <main class="container">
     <div class="row mt-4 mb-3">
         <div class="col col-sm-12">
-            <a href="/" style="text-decoration: none">
+            <a id="goBack" style="text-decoration: none; cursor: pointer">
                 <i class="fa fa-arrow-left fa-2x" aria-hidden="true"><span style="font-family: Arial">&nbsp;Zurück</span></i>
             </a>
         </div>
@@ -60,6 +60,10 @@
         $(function () {
             $('[data-toggle="tooltip"]').tooltip();
         });
+
+        document.getElementById('goBack').addEventListener('click', () => {
+            history.back();
+        });
     }
 
     function borrowBook(e, element) {

diff --git a/views/components/book/add.ejs b/views/components/book/add.ejs
@@ -42,10 +42,23 @@
                     </div>
                 </div>
                 <div class="col-md-6">
-                    <label for="category" class="form-label">Kategorie</label>
-                    <input type="text" class="form-control" name="category" id="category" required>
-                    <div class="invalid-feedback">
-                        Bitte Kategorie eingeben.
+                    <label for="author" class="form-label">Kategorie</label>
+                    <div class="input-group mb-3">
+                        <input id="newCategory" type="text" class="form-control" aria-label="Text input with dropdown button">
+                        <button class="btn btn-outline-secondary dropdown-toggle" type="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">Wählen...
+                        </button>
+                        <ul class="dropdown-menu dropdown-menu-end">
+                            <% if (typeof categories !== 'undefined') { %>
+                                <% categories.forEach(function(category) { %>
+                                    <li>
+                                        <a class="dropdown-item" onclick="categories(this)">
+                                            <%= category.category.toUpperCase() %>
+                                        </a>
+                                    </li>
+                                <% }) %>
+                            <% } %>
+                        </ul>
                     </div>
                 </div>
             </div>
@@ -119,6 +132,10 @@
                 }, false)
             })
     }
+
+    function categories(el) {
+        document.getElementById('newCategory').value = el.innerText.toUpperCase()
+    }
 </script>
 </body>
 </html>
diff --git a/views/components/book/edit.ejs b/views/components/book/edit.ejs
@@ -33,8 +33,25 @@
                     <input type="text" class="form-control" name="author" value="<%= book.author %>" id="author">
                 </div>
                 <div class="col-md-6">
-                    <label for="category" class="form-label">Kategorie</label>
-                    <input type="text" class="form-control" name="category" value="<%= book.category %>" id="category">
+                    <label for="author" class="form-label">Kategorie</label>
+                    <div class="input-group mb-3">
+                        <input id="newCategory" type="text" name="category" class="form-control" value="<%= book.category.toUpperCase() %>"
+                               aria-label="Text input with dropdown button">
+                        <button class="btn btn-outline-secondary dropdown-toggle" type="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">Wählen...
+                        </button>
+                        <ul class="dropdown-menu dropdown-menu-end">
+                            <% if (typeof categories !== 'undefined') { %>
+                                <% categories.forEach(function(category) { %>
+                                    <li>
+                                        <a class="dropdown-item" onclick="categories(this)">
+                                            <%= category.category.toUpperCase() %>
+                                        </a>
+                                    </li>
+                                <% }) %>
+                            <% } %>
+                        </ul>
+                    </div>
                 </div>
             </div>
             <div class="row mt-3">
@@ -93,6 +110,10 @@
                 }, false)
             });
     }
+
+    function categories(el) {
+        document.getElementById('newCategory').value = el.innerText.toUpperCase()
+    }
 </script>
 </body>
 </html>
diff --git a/views/components/profile.ejs b/views/components/profile.ejs
@@ -305,7 +305,7 @@
                 <br>
                 <!--                Book History-->
                 <% if (typeof booksHistory.message === 'undefined') { %>
-                    <h1 class="display-4">Vergange Ausleihen:</h1>
+                    <h1 class="display-4">Vergangene Ausleihen:</h1>
                     <hr>
                     <div class="mt-4">
                         <div id="books" class="container">

diff --git a/views/pages/admin.ejs b/views/pages/admin.ejs
@@ -30,9 +30,6 @@
                     <div class="input-group col-md-4">
                         <input class="form-control py-2 border-right-0 border" type="search" placeholder="Search..."
                                id="search">
-                        <button class="btn btn-outline-secondary border-left-0 border" type="button">
-                            <i class="fa fa-search"></i>
-                        </button>
                     </div>
                 </form>
             </div>

diff --git a/views/pages/index.ejs b/views/pages/index.ejs
@@ -18,11 +18,7 @@
         <p class="display-5">auf der Homepage der Bücherei AlbsigBay</p>
         <form autocomplete="off" action="">
             <div class="input-group col-md-4">
-                <input class="form-control py-2 border-right-0 border" type="search" placeholder="Search..."
-                       id="search">
-                <button class="btn btn-outline-secondary border-left-0 border" type="button">
-                    <i class="fa fa-search"></i>
-                </button>
+                <input class="form-control py-2 border-right-0 border" type="search" placeholder="Search..." id="search">
             </div>
         </form>
     </div>
@@ -53,7 +49,7 @@
                 <div id="books" class="container">
                     <div class="row">
                         <% books.forEach(function(book) { %>
-                            <div class="col col-lg-4">
+                            <div class="col col-lg-4 row-eq-height">
                                 <div class="card mb-3 p-3">
                                     <div class="row mt-2">
                                         <div class="col col-lg-12">
@@ -75,7 +71,7 @@
                                                 <a href="/book/<%= book.id %>" id="<%= book.id %>" class="btn btn-primary">Mehr...</a>
                                             </div>
                                             <div class="col-4"></div>
-                                            <div class="col col-lg-4">
+                                            <div class="col col-lg-4 col-sm-12 col-md-12">
                                                 <% if (!isAdmin) {%>
                                                     <% if (book.borrowedBooks.length === 1) { %>
                                                         <span class="btn btn-danger"