final-3
This commit is contained in:
GokaPek
parent
ad67a856ae
commit
f6b0ab5c1b
File diff suppressed because it is too large
Load Diff
3336
Lab3/PIbd-22_Petrushin_E.A._Web_3.rtf
Normal file
3336
Lab3/PIbd-22_Petrushin_E.A._Web_3.rtf
Normal file
File diff suppressed because it is too large
Load Diff
@ -54,14 +54,15 @@
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="btn-group mt-2" role="group">
|
||||
<button id="items-add" class="btn btn-info">Add-Dialog</button>
|
||||
<a class="btn btn-success" href="/page-edit.html">Add-Page</a>
|
||||
<button id="items-add" class="btn btn-info">Add book</button>
|
||||
</div>
|
||||
<form class="form-inlinecustom-search mx-auto mt-2">
|
||||
<div class="scroll-panel-favour">
|
||||
<main class="container-fluid p-2">
|
||||
<div>
|
||||
<table id="items-table" class="table table-striped">
|
||||
|
||||
<main class="container-fluid">
|
||||
<div class="scroll-panel-favour">
|
||||
<table id="items-table" class="table table-striped">
|
||||
|
||||
<tbody>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
@ -70,85 +71,85 @@
|
||||
<th scope="col">Author</th>
|
||||
<th scope="col">ISBN</th>
|
||||
<th scope="col">Price</th>
|
||||
<th scope="col">Image</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
|
||||
<div class="modal-dialog ">
|
||||
<form id="items-form" class="needs-validation" novalidate>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="items-update-title"></h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body modal-dialog-scrollable">
|
||||
<div class="text-center">
|
||||
<img id="image-preview" src="https://via.placeholder.com/200"
|
||||
class="rounded rounded-square" alt="placeholder">
|
||||
</div>
|
||||
</main>
|
||||
<input id="items-line-id" type="number" hidden>
|
||||
<div class="mb-2">
|
||||
<label for="item" class="form-label">Category</label>
|
||||
<select id="item" class="form-select" name="selected" required>
|
||||
<option>Book</option>
|
||||
<option>Audio</option>
|
||||
<option>Comics</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input id="name_book" name="name_book" class="form-control" type="text"
|
||||
placeholder="Name" required />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input id="author" name="author" class="form-control" type="text" placeholder="Author"
|
||||
required />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="price">Price</label>
|
||||
<input id="price" name="price" class="form-control" type="number" value="0.00"
|
||||
min="100.00" step="0.50" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="count">ISBN</label>
|
||||
<input id="isbn" name="count" class="form-control" type="isbn" value="0" min="100"
|
||||
step="1" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="image">Image</label>
|
||||
<input id="image" type="file" name="image" class="form-control" accept="image/*">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="file">File</label>
|
||||
<input id="text" type="file" name="file" class="form-control" accept="file/*">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-primary but-cust">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
|
||||
<div class="modal-dialog">
|
||||
<form id="items-form" class="needs-validation" novalidate>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="items-update-title"></h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="text-center">
|
||||
<img id="image-preview" src="https://via.placeholder.com/200"
|
||||
class="rounded rounded-square" alt="placeholder">
|
||||
</div>
|
||||
<input id="items-line-id" type="number" hidden>
|
||||
<div class="mb-2">
|
||||
<label for="item" class="form-label">Category</label>
|
||||
<select id="item" class="form-select" name="selected" required>
|
||||
<option>Book</option>
|
||||
<option>Audio</option>
|
||||
<option>Comics</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input id="name_book" name="name_book" class="form-control" type="text"
|
||||
placeholder="Name" required />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input id="author" name="author" class="form-control" type="text"
|
||||
placeholder="Author" required />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="price">Price</label>
|
||||
<input id="price" name="price" class="form-control" type="number" value="0.00"
|
||||
min="100.00" step="0.50" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="count">ISBN</label>
|
||||
<input id="isbn" name="count" class="form-control" type="isbn" value="0" min="100"
|
||||
step="1" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="image">Image</label>
|
||||
<input id="image" type="file" name="image" class="form-control" accept="image/*">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="file">File</label>
|
||||
<input id="text" type="file" name="file" class="form-control" accept="file/*">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-primary but-cust">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<footer class="footer fixed-bottom w-100">
|
||||
<div class="container">
|
||||
<img class="logos ml-0" src="png/logos.png" alt="Логотип" />
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<footer class="footer fixed-bottom w-100">
|
||||
<div class="container">
|
||||
<img class="logos ml-0" src="png/logos.png" alt="Логотип" />
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module">
|
||||
import validation from "./js/validation";
|
||||
|
||||
@ -39,6 +39,10 @@ header{
|
||||
color: white;
|
||||
background-color: rgba(255, 0, 0, 0);
|
||||
}
|
||||
.modal-dialog-scrollable {
|
||||
max-height: calc(85vh - 60px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
#profile {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@ -51,6 +55,15 @@ header{
|
||||
height: 400px;
|
||||
border-radius: 17% / 60%;
|
||||
}
|
||||
.modal-dialog img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.small-image {
|
||||
max-width: 200px;
|
||||
max-height: 100px;
|
||||
}
|
||||
#small-car{
|
||||
width: 80%;
|
||||
background: #c03000;
|
||||
@ -103,7 +116,7 @@ header{
|
||||
max-width: 100px;
|
||||
}
|
||||
.scroll-panel-favour {
|
||||
height: 400px;
|
||||
height: 500px;
|
||||
background-color: white;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -66,7 +66,11 @@ function createTableColumn(value) {
|
||||
td.textContent = value;
|
||||
return td;
|
||||
}
|
||||
|
||||
function createTableColumnImg(value) {
|
||||
const td = document.createElement('td');
|
||||
td.appendChild(value);
|
||||
return td;
|
||||
}
|
||||
// функция создает строку таблицы
|
||||
// <tr>
|
||||
// <th scope="row">index + 1</th>
|
||||
@ -96,11 +100,20 @@ export function createTableRow(item, index, editCallback, editPageCallback, dele
|
||||
row.appendChild(createTableColumn(item.author));
|
||||
row.appendChild(createTableColumn(item.isbn));
|
||||
row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
|
||||
|
||||
// Добавляем картинку в таблицу
|
||||
const img = document.createElement('img');
|
||||
img.src = item.image;
|
||||
img.classList.add('small-image');
|
||||
row.appendChild(createTableColumnImg(img));
|
||||
|
||||
|
||||
// редактировать в модальном окне
|
||||
row.appendChild(createTableAnchor('fa-pencil', editCallback));
|
||||
// редактировать на странице page-edit
|
||||
row.appendChild(createTableAnchor('fa-pen-to-square', editPageCallback));
|
||||
//row.appendChild(createTableAnchor('fa-pen-to-square', editPageCallback));
|
||||
// удаление
|
||||
row.appendChild(createTableAnchor('fa-trash', deleteCallback));
|
||||
return row;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user