From dad9e69186def0628a68ccd0ea5ef4ae1e46ee8b Mon Sep 17 00:00:00 2001
From: b4-sharp <Bradley2.Sharp@live.uwe.ac.uk>
Date: Sun, 16 Apr 2023 04:33:52 +0100
Subject: [PATCH] Bootstrap database management
---
store/templates/_formhelpers.html | 2 +-
store/templates/base.html | 4 +-
store/templates/items.html | 2 +-
.../userContent/database_management.html | 111 +++++++++---------
.../userContent/database_management_add.html | 33 ++----
5 files changed, 67 insertions(+), 85 deletions(-)
diff --git a/store/templates/_formhelpers.html b/store/templates/_formhelpers.html
index d7e4e4e..ed7aeb6 100644
--- a/store/templates/_formhelpers.html
+++ b/store/templates/_formhelpers.html
@@ -4,7 +4,7 @@ https://flask.palletsprojects.com/en/2.2.x/patterns/wtforms/#forms-in-templates
-->
{% macro render_field(field) %}
-<div class="mb-3">
+<div id="{{field.name}}_field" class="mb-3">
{{ field.label(class="form-label") }}
{{ field(**kwargs)|safe }}
{% if field.errors %}
diff --git a/store/templates/base.html b/store/templates/base.html
index 7da443f..6a9177e 100644
--- a/store/templates/base.html
+++ b/store/templates/base.html
@@ -8,7 +8,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='_main.css') }}">
-
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body class="d-flex flex-column min-vh-100">
@@ -96,11 +96,9 @@
<li class="px-2 text-muted">Phone Number: 0000 000 0000</li>
</ul>
</footer>
-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
-
</body>
</html>
\ No newline at end of file
diff --git a/store/templates/items.html b/store/templates/items.html
index 14c1a23..c67c840 100644
--- a/store/templates/items.html
+++ b/store/templates/items.html
@@ -2,7 +2,7 @@
{% block title %} Items | Antiques Online {% endblock %}
{% block content %}
<!-- https://getbootstrap.com/docs/4.0/layout/grid/ -->
-<div class="container">
+<div class="container pb-3">
<div class="row">
{% if items %}
{% for item in items %}
diff --git a/store/templates/userContent/database_management.html b/store/templates/userContent/database_management.html
index 1c73113..3b86735 100644
--- a/store/templates/userContent/database_management.html
+++ b/store/templates/userContent/database_management.html
@@ -2,66 +2,63 @@
{%extends 'base.html' %}
{% block title %} Database Management | Antiques Online {% endblock %}
{% block content %}
-<form method="POST">
- {{access_data_form.hidden_tag()}}
- <dl>
- <table>
- <tr>
- <td>{{ render_field(access_data_form.table) }} </td>
- </tr>
- <tr>
- <td>{{ render_field(access_data_form.id) }} </td>
- </tr>
- </table>
- </dl>
- <br>
- {{access_data_form.submit()}}
- <br>
-</form>
-
-{% if main_item %}
-<div>
- <img src='..\static\image_placeholder.png' alt="Image Placeholder" width="200" height="170">
- <br />
- Item price: £{{main_item.price}}
- <br />
- Item description: {{main_item.description}}
- <br />
- {% if is_item %}
- <button onclick="deleteItem({{main_item.id}})">Delete</button>
- {%else%}
- <button onclick="deleteItemSet({{main_item.id}})">Delete</button>
- {% endif %}
-
- {% if not is_item %}
+<div class="container my-2 d-flex align-items-center justify-content-center">
<div>
- <h1>Items contained in set: </h1>
- <table>
- <thead>
- <tr>
- <th>Item description</th>
- <th>Item price</th>
- <th></th>
- </tr>
- </thead>
- <tbody>
- {% for item in main_item.items %}
- <tr>
- <td>{{ item['description'] }}</td>
- <td>£{{ item['price'] }}</td>
- <button onclick="deleteItemFromSet({{item.id}}, {{main_item.id}})">Delete</button>
- </tr>
- {% endfor %}
- </tbody>
- </table>
- <label for="itemID">Item ID:</label><br>
- <input type="number" id="itemID" name="itemID"><br>
- <button onclick="addItemToSet({{main_item.id}})">Add</button>
+ <form method="POST">
+ {{access_data_form.hidden_tag()}}
+ {{ render_field(access_data_form.table, class="form-control") }}
+ {{ render_field(access_data_form.id, class="form-control") }}
+ {{access_data_form.submit(class="btn btn-primary")}}
+ </form>
+ <hr>
+ {% if main_item %}
+ <div class="text-center">
+ <img src='..\static\image_placeholder.png' alt="Image Placeholder" width="200" height="200">
+ <br />
+ Item price: £{{main_item.price}}
+ <br />
+ Item description: {{main_item.description}}
+ <br />
+ {% if is_item %}
+ <button class="btn btn-danger mt-2" onclick="deleteItem({{main_item.id}})">Delete</button>
+ {%else%}
+ <button class="btn btn-danger mt-2" onclick="deleteItemSet({{main_item.id}})">Delete</button>
+ {% endif %}
+ {% if not is_item %}
+ <hr>
+ <div class="text-center">
+ <h1>Items contained in set: </h1>
+ <table class="table">
+ <thead>
+ <tr>
+ <th>Item description</th>
+ <th>Item price</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for item in main_item.items %}
+ <tr>
+ <td>{{ item['description'] }}</td>
+ <td>£{{ item['price'] }}</td>
+ <td><button class="btn btn-danger"
+ onclick="deleteItemFromSet({{item.id}}, {{main_item.id}})">Delete</button></td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ <tfoot clas style="background-color: #f2f2f2">
+ <td><label class="form-label" for="itemID">Item ID</label></td>
+ <td><input class="form-control" type="number" id="itemID" name="itemID"></td>
+ <td><button class="btn btn-primary" onclick="addItemToSet({{main_item.id}})">Add</button>
+ </td>
+ </tfoot>
+ </table>
+ </div>
+ {% endif %}
+ </div>
+ {% endif %}
</div>
- {% endif %}
</div>
-{% endif %}
-
<script>
function addItemToSet(set_id) {
console.log(set_id);
diff --git a/store/templates/userContent/database_management_add.html b/store/templates/userContent/database_management_add.html
index 1ebfc8a..241ad0d 100644
--- a/store/templates/userContent/database_management_add.html
+++ b/store/templates/userContent/database_management_add.html
@@ -2,33 +2,20 @@
{%extends 'base.html' %}
{% block title %} Database Management | Antiques Online {% endblock %}
{% block content %}
-<form method="POST">
- {{form.hidden_tag()}}
- <dl>
- <table>
- <tr>
- <td>{{ render_field(form.table) }} </td>
- </tr>
- <tr>
- <td>{{ render_field(form.description) }} </td>
- </tr>
- <tr id="price_optional">
- <td>{{ render_field(form.price) }} </td>
- </tr>
- </div>
- </table>
- </dl>
- <br>
- {{form.submit()}}
- <br>
-</form>
-
+<div class="container d-flex align-items-center justify-content-center my-2">
+ <form method="POST">
+ {{form.hidden_tag()}}
+ {{ render_field(form.table, class="form-control") }}
+ {{ render_field(form.description, class="form-control") }}
+ {{ render_field(form.price, class="form-control") }}
+ {{form.submit(class="btn btn-primary")}}
+ </form>
+</div>
<script>
$(document).ready(function () {
$('#table').change(function () {
- $('#price_optional').toggle();
+ $('#price_field').toggle();
});
});
</script>
-
{% endblock %}
\ No newline at end of file
--
GitLab