302 lines
14 KiB
HTML
302 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Страница администратора</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
|
||
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
|
||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||
<script src="/js/bootstrap.js"></script>
|
||
<script src="/js/lines-rest-api.js"></script>
|
||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
|
||
<link rel="stylesheet" href="/fontello.css" type="text/css" />
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body class="d-flex flex-column min-vh-100">
|
||
<header>
|
||
<nav class="navbar navbar-expand-md navbar-dark">
|
||
<div class="container-fluid">
|
||
<a class="navbar-brand" href="/index.html">
|
||
<img src="/src/logoOfLibrary.png" alt="" width="80" class="d-inline-block align-text-top" border-radius="20%">
|
||
|
||
</a>
|
||
<a class="about-us-link nav-link link-light fs-5" href="/pageAboutUs.html">О нас</a>
|
||
|
||
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="navbar-collapse collapse justify-content-end p-3" id="navbarNav">
|
||
<div class="navbar-nav p-3">
|
||
|
||
<a class="nav-link fs-5 text-light " href="./pageCatalog.html">Каталог</a>
|
||
<a class="nav-link fs-5 text-light " href="./pageBasket.html">Корзина</a>
|
||
|
||
</div>
|
||
<section class="menu align-self-center">
|
||
<a class="nav-link text-end fs-5 lh-2 text-light" href="./pageSignUp.html">Зарегистрироваться</a>
|
||
<a class="nav-link text-end fs-6 text-light" href="./pageSignIn.html">Уже есть аккаунт?</a>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
|
||
<main class="container-fluid p-2">
|
||
<div class="row">
|
||
<!-- <div class="col-sm-4">
|
||
<div id="items-update" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
|
||
<div >
|
||
<form id="items-form" class="needs-validation" novalidate>
|
||
<h2>Добавить книгу в базу</h2>
|
||
|
||
<label class="mt-3">Фото обложки</label>
|
||
<input type="file" name="image" class="form-control mb-4" accept="image/*"
|
||
onchange="updatePreview(this, 'image-preview')">
|
||
|
||
<div class="d-none">
|
||
<h2 class="border-bottom pb-3 mb-4 ">Avatar Preview</h2>
|
||
<div class="text-center">
|
||
<img id="image-preview" src="./src/covers/default.png" style="width:400px"
|
||
class="rounded rounded-circle" alt="placeholder">
|
||
</div>
|
||
</div>
|
||
|
||
<label>Название книги</label>
|
||
<div class="input-group mb-5 border-bottom">
|
||
<span class="input-group-text border-0 bg-white" id="basic-addon1"></span>
|
||
<input id="name-book" type="text" class="form-control border-0 placeholder-class" aria-label="Email" aria-describedby="basic-addon1" required>
|
||
</div>
|
||
|
||
<label>Автор</label>
|
||
<div class="input-group mb-3 border-bottom mb-5">
|
||
<span class="input-group-text border-0 bg-white" id="basic-addon1"></span>
|
||
<input id="autor" type="text" class="form-control border-0 placeholder-class" aria-label="Email" aria-describedby="basic-addon1" >
|
||
</div>
|
||
|
||
<label>ID</label>
|
||
<div class="input-group border-bottom">
|
||
<span class="input-group-text border-0 bg-white" id="basic-addon1"></span>
|
||
<input id="id" type="text" class="form-control border-0 placeholder-class" aria-label="ID" aria-describedby="basic-addon1">
|
||
</div>
|
||
<div id="emailHelp" class="form-text mb-3">Для редактирования данных введите существующий ID</div>
|
||
|
||
<label>Количество книг</label>
|
||
<div class="input-group mb-3 border-bottom mb-5">
|
||
<span class="input-group-text border-0 bg-white" id="basic-addon1"></span>
|
||
<input id="number" type="text" class="form-control border-0 placeholder-class" aria-label="Email" aria-describedby="basic-addon1">
|
||
</div>
|
||
|
||
<label>Аннотация к книге</label>
|
||
<div class="input-group mb-3 border-bottom mb-5">
|
||
<span class="input-group-text border-0 bg-white" id="basic-addon1"></span>
|
||
<input id="annotation" type="text" class="form-control border-0 placeholder-class" aria-label="Email" aria-describedby="basic-addon1">
|
||
</div>
|
||
|
||
<label>Храктеристики книги</label>
|
||
<div class="input-group mb-3 border-bottom mb-5" max-width="100px">
|
||
<span class="input-group-text border-0 bg-white" id="basic-addon1"></span>
|
||
<input id="info" type="text" class="form-control border-0 placeholder-class" aria-label="Email" aria-describedby="basic-addon1">
|
||
</div>
|
||
|
||
<button class="btn-rectangle" type="submit" id="items-add" onclick="upload()">Добавить книгу</button>
|
||
|
||
</form> -->
|
||
|
||
</div>
|
||
<button class="btn-rectangle mb-3" id="items-add">Добавить книгу</button>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-8">
|
||
<h2>В наличии</h2>
|
||
|
||
<table class="table table-borderless table-hover align-middle" id="items-table">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">ID</th >
|
||
<th scope="col" style="width:7px">Обложка</th >
|
||
<th scope="col">Название и автор</th>
|
||
<th scope="col">Количество</th>
|
||
<th scope="col" style="width:7px"></th>
|
||
<th scope="col" style="width:7px"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="body">
|
||
<!-- <tr>
|
||
<td><p class="mb-0 font-basket">Ведьмак. Меч предназначения</p>
|
||
<p class="mb-0 font-basket">Анджей Сапковский</p>
|
||
|
||
<div class="input-group quantity-goods mt-1">
|
||
<input type="button" value="-" id="button_minus" class="minus">
|
||
<input class="input-number" type="number" step="1" min="1" max="10" id="num_count" name="quantity" value="1" title="Qty">
|
||
<input type="button" value="+" id="button_plus" class="plus">
|
||
</div>
|
||
</td>
|
||
<td class="align-bottom">
|
||
<div class="btn btn-delete"> <img src="/src/icons/icons_sigh/trash.svg" alt=""></div>
|
||
</td>
|
||
|
||
</tr>
|
||
<tr>
|
||
<th scope="row"><img src="/src/covers/image2book.png" alt="" width="80px"></th></th>
|
||
<td><p class="mb-0 font-basket">Ведьмак. Последнее желание</p>
|
||
<p class="mb-0 font-basket">Анджей Сапковский</p>
|
||
|
||
<div class="input-group quantity_goods mt-1 ">
|
||
<input type="button" value="-" id="button_minus" class="minus">
|
||
<input class="input-number" type="number" step="1" min="1" max="10" id="num_count" name="quantity" value="1" title="Qty">
|
||
<input type="button" value="+" id="button_plus" class="plus">
|
||
</div>
|
||
</td>
|
||
<td class="align-bottom">
|
||
<div class="btn btn-delete"> <img src="/src/icons/icons_sigh/trash.svg" alt=""></div>
|
||
</td>
|
||
|
||
</tr> -->
|
||
</tbody>
|
||
</table>
|
||
|
||
<hr>
|
||
|
||
<div class="row">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div></div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</main>
|
||
<footer class="footer mt-auto d-flex flex-shrink-0 align-items-center">
|
||
<h3 class="ps-0">Наши соцсети</h3>
|
||
<div class="group-sites" role="group">
|
||
|
||
<a href="https://vk.com/valannn" ><img src="src/social_media/logo-facebook.png" class="button-sm m-auto " alt="" width="35" ></a>
|
||
<a href="https://vk.com/valannn" ><img src="src/social_media/logo-viber.png" class="button-sm m-auto" alt="" width="35" ></a>
|
||
<a href="https://vk.com/valannn" ><img src="src/social_media/logo-tg.png" class="button-sm m-auto" alt="" width="35" ></a>
|
||
<a href="https://vk.com/valannn" ><img src="src/social_media/logo-whats-up.png" class="button-sm m-auto" alt="" width="35" ></a>
|
||
</div>
|
||
|
||
</footer>
|
||
|
||
|
||
<div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
|
||
<div class="modal-dialog modal-dialog-scrollable">
|
||
<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="mb-2">
|
||
<label class="form-label" for="image">Изображение</label>
|
||
<input id="image" type="file" name="image" class="form-control" accept="image/*">
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-circle"
|
||
alt="placeholder">
|
||
</div>
|
||
|
||
|
||
<label class="mt-3">Название книги</label>
|
||
<input id="name" class="form-control" type="text" required>
|
||
|
||
<label class="mt-3">Автор</label>
|
||
<input id="autor" class="form-control" type="text" required>
|
||
|
||
<label class="mt-3">ID</label>
|
||
<input id="id" class="form-control" type="text">
|
||
|
||
<label class="mt-3">Количество</label>
|
||
<input id="num" class="form-control" type="number" required>
|
||
|
||
|
||
<label class="mt-3">Аннотация к книге</label>
|
||
<input id="annotation" name="price" class="form-control" type="text" required>
|
||
|
||
<label class="mt-3">Храктеристики книги</label>
|
||
<input id="info" name="price" class="form-control" type="text" required>
|
||
|
||
</div>
|
||
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||
<button type="submitModal" class="btn btn-primary">Сохранить</button>
|
||
</div>
|
||
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<script type="module">
|
||
import {getLine} from "./js/lines-rest-api";
|
||
function notUndefind(item){
|
||
if (item === undefined || item === ""){
|
||
return "-"
|
||
} return item
|
||
}
|
||
async function getRow(id, modal){
|
||
const row = await getLine(id);
|
||
|
||
const img = document.createElement("img");
|
||
img.src = row.cover
|
||
img.alt = "no cover"
|
||
img.style.width = "100%"
|
||
// img.style.width = "90px"
|
||
console.log(img)
|
||
document.getElementById("coverModal").innerHTML = ""
|
||
document.getElementById("coverModal").appendChild(img)
|
||
console.log(document.getElementById("coverModal"))
|
||
document.getElementById("nameModal").innerHTML = notUndefind(row.name)
|
||
|
||
document.getElementById("autorModal").innerHTML = notUndefind(row.autor)
|
||
document.getElementById("idModal").innerHTML = notUndefind(row.id)
|
||
document.getElementById("annotationModal").innerHTML = notUndefind(row.annotation)
|
||
document.getElementById("infoModal").innerHTML = notUndefind(row.info)
|
||
|
||
return row
|
||
}
|
||
|
||
$('#items-table').on('click', 'tr', function(){
|
||
|
||
|
||
const id = event.target.parentNode.id
|
||
|
||
|
||
getRow(id,document.getElementById("items-show"))
|
||
$("#items-show").modal('show');
|
||
});
|
||
</script>
|
||
|
||
|
||
|
||
|
||
<script type="module">
|
||
import validation from "./js/validation";
|
||
import { linesForm } from "./js/lines";
|
||
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
validation();
|
||
linesForm();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |