Правки
This commit is contained in:
DyCTaTOR
parent
983edb4fac
commit
ef247b45be
@ -90,7 +90,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class=" headStyleNavBar footer mt-5 d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||
<footer class="headStyleNavBar footer mt-5 d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||
Адреса: ул. Северный Венец, 32; ул. Андрея Блаженного, 3
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
BIN
Lab3(1).zip
Normal file
BIN
Lab3(1).zip
Normal file
Binary file not shown.
@ -41,7 +41,7 @@
|
||||
<b>Новости</b>
|
||||
</span>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="items-add" class="btn btn-info">Добавить товар (диалог)</button>
|
||||
<button id="items-add" class="btn btn-info">Добавить новость</button>
|
||||
</div>
|
||||
<div class="tbb1 p-3 table-responsive-md mt-4 row justify-content-start">
|
||||
<table id = "items-table" class="table col-lg2 w-75 table-striped">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -38,20 +38,72 @@
|
||||
</nav>
|
||||
<div class = "container col text-center">
|
||||
<span class = "mainSt">Новости</span>
|
||||
<div class="text-center">
|
||||
<div class="text-center d-flex justify-content-end">
|
||||
<button class="btn btn-primary w-auto" type="button" onclick ="location.href='admin.html';">
|
||||
Добавить новость</button>
|
||||
Админ Панель</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class = "container-fluid d-flex justify-content-center">
|
||||
<div class="btn-group text-center" role="group">
|
||||
<button id="items-add" class="btn btn-info">
|
||||
Добавить новость</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class = "row">
|
||||
<footer class="headStyleNavBar footer mt-5 d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||
<footer class="headStyleNavBar mt-5 d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||
Адреса: ул. Северный Венец, 32; ул. Андрея Блаженного, 3
|
||||
</footer>
|
||||
</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"
|
||||
alt="placeholder">
|
||||
</div>
|
||||
<input id="items-line-id" type="number" hidden>
|
||||
<div class="mb-2">
|
||||
<label for="date" class="form-label">Дата</label>
|
||||
<input id="date" class="form-control" name="date" type = "date" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="name">Название</label>
|
||||
<input id="name" name="name" class="form-control" type = "text"
|
||||
required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="description">Описание</label>
|
||||
<input id="description" name="description" class="form-control" type="text"
|
||||
required>
|
||||
</div>
|
||||
<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>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||||
<button type="submit" class="btn btn-primary">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script type = "module">
|
||||
import { UpdateNews } from "./js/lines";
|
||||
import validation from "./js/validation";
|
||||
import { UpdateNews, linesForm } from "./js/lines";
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
validation();
|
||||
linesForm();
|
||||
UpdateNews();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -29,6 +29,7 @@ function resetValues() {
|
||||
// перед показом происходит заполнение формы для редактирования
|
||||
// если объект item не пуст
|
||||
export function showUpdateModal(item) {
|
||||
console.info(item, modalTitle.innerHTML);
|
||||
modalTitle.innerHTML = item === null ? "Добавить" : "Изменить";
|
||||
console.info(item);
|
||||
|
||||
@ -45,7 +46,6 @@ export function showUpdateModal(item) {
|
||||
} else {
|
||||
resetValues();
|
||||
}
|
||||
|
||||
myModal.show();
|
||||
}
|
||||
|
||||
|
||||
@ -35,6 +35,8 @@ export function createItemsOption(name, value = "", isSelected = false) {
|
||||
// <td><a href="#" onclick="callback()"><i class="fa-solid icon"></i></a></td>
|
||||
function createTableAnchor(icon, callback) {
|
||||
const i = document.createElement("i");
|
||||
console.info("icon", icon);
|
||||
console.info("callback", callback);
|
||||
i.classList.add("fa-solid", icon);
|
||||
|
||||
const a = document.createElement("a");
|
||||
@ -51,7 +53,25 @@ function createTableAnchor(icon, callback) {
|
||||
td.appendChild(a);
|
||||
return td;
|
||||
}
|
||||
export function createAnchor(icon, callback) {
|
||||
const i = document.createElement("i");
|
||||
console.info("icon", icon);
|
||||
console.info("callback", callback);
|
||||
i.classList.add("fa-solid", icon);
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = "#";
|
||||
a.appendChild(i);
|
||||
a.onclick = (event) => {
|
||||
// чтобы в URL не добавлялась решетка
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
callback(icon);
|
||||
};
|
||||
const div = document.createElement("div");
|
||||
div.appendChild(a);
|
||||
return a;
|
||||
}
|
||||
// функция создает колонку таблицы с текстом value
|
||||
// <td>value</td>
|
||||
function createTableColumn(value) {
|
||||
@ -71,7 +91,7 @@ function createTableColumn(value) {
|
||||
// <td><a href="#" onclick="editPageCallback()"><i class="fa-solid fa-pen-to-square"></i></a></td>
|
||||
// <td><a href="#" onclick="deleteCallback()"><i class="fa-solid fa-trash"></i></a></td>
|
||||
// </tr>
|
||||
export function createTableRow(item, index, editCallback, editPageCallback, deleteCallback) {
|
||||
export function createTableRow(item, index, editCallback, deleteCallback) {
|
||||
const rowNumber = document.createElement("th");
|
||||
rowNumber.scope = "row";
|
||||
rowNumber.textContent = index + 1;
|
||||
|
||||
@ -7,7 +7,7 @@ import {
|
||||
} from "./lines-rest-api";
|
||||
import {
|
||||
// createItemsOption,
|
||||
cntrls, createTableRow, imagePlaceholder,
|
||||
cntrls, createTableRow, createAnchor, imagePlaceholder,
|
||||
} from "./lines-ui";
|
||||
|
||||
// async function drawItemsSelect() {
|
||||
@ -64,6 +64,7 @@ async function addLine(item, itemName, description, image) {
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
UpdateNews();
|
||||
}
|
||||
|
||||
async function editLine(id, item, itemName, description, image) {
|
||||
@ -74,6 +75,7 @@ async function editLine(id, item, itemName, description, image) {
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
UpdateNews();
|
||||
}
|
||||
|
||||
async function removeLine(id) {
|
||||
@ -87,6 +89,7 @@ async function removeLine(id) {
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
UpdateNews();
|
||||
}
|
||||
|
||||
// функция для получения содержимого файла в виде base64 строки
|
||||
@ -254,12 +257,17 @@ export function linesForm() {
|
||||
<span class = "d-flex"><p></p></span>
|
||||
</div>
|
||||
</div> */
|
||||
|
||||
function clearNews() {
|
||||
const newsElements = document.querySelectorAll(".mainDiv");
|
||||
newsElements.forEach((element) => element.remove());
|
||||
}
|
||||
async function UpdateNew(div1, item) {
|
||||
const div2 = document.createElement("div");
|
||||
div2.setAttribute("class", "col mt-4");
|
||||
const div3 = document.createElement("div");
|
||||
div3.setAttribute("class", "rectNews d-flex flex-column");
|
||||
const image = document.createElement("image");
|
||||
const image = document.createElement("img");
|
||||
image.setAttribute("src", item.image);
|
||||
image.setAttribute("width", "100%");
|
||||
image.setAttribute("alt", item.name);
|
||||
@ -269,21 +277,76 @@ async function UpdateNew(div1, item) {
|
||||
span1.setAttribute("class", "rectNewsText");
|
||||
span1.textContent = item.description;
|
||||
div1.appendChild(div2);
|
||||
div4.appendChild(createAnchor("fa-pencil", () => showUpdateModal(item)));
|
||||
div4.appendChild(createAnchor("fa-trash", () => removeLine(item.id)));
|
||||
div2.appendChild(div3);
|
||||
div3.appendChild(image);
|
||||
div3.appendChild(div4);
|
||||
div4.appendChild(span1);
|
||||
}
|
||||
export async function UpdateNews() {
|
||||
clearNews();
|
||||
console.info("linesForm");
|
||||
|
||||
const data = await getAllLines();
|
||||
const div1 = document.createElement("div");
|
||||
div1.setAttribute("class", "row");
|
||||
div1.setAttribute("class", "mainDiv row");
|
||||
|
||||
data.forEach((item, index) => {
|
||||
console.info(index);
|
||||
cntrls.form.addEventListener("submit", async (event) => {
|
||||
console.info("Form on Submit231");
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
// drawLinesTable();
|
||||
// if (!cntrls.form.checkValidity()) {
|
||||
// return;
|
||||
// }
|
||||
// linesForm();
|
||||
// let imageBase64 = "";
|
||||
// // Получение выбранного пользователем изображения в виде base64 строки
|
||||
// // Если пользователь ничего не выбрал, то не нужно сохранять в БД
|
||||
// // дефолтное изображение
|
||||
// if (cntrls.imagePreview.src !== imagePlaceholder) {
|
||||
// // Загрузка содержимого атрибута src тэга img с id image-preview
|
||||
// // Здесь выполняется HTTP запрос с типом GET
|
||||
// console.info("imagePreview.src");
|
||||
// console.info(cntrls.imagePreview.src);
|
||||
// const result = await fetch(cntrls.imagePreview.src);
|
||||
// // Получение из HTTP-ответа бинарного содержимого
|
||||
// const blob = await result.blob();
|
||||
// // Получение base64 строки для файла
|
||||
// // Здесь выполняется Promise из функции readFile
|
||||
// // Promise позволяет писать линейный код для работы с асинхронными методами
|
||||
// // без использования обработчиков (callback) с помощью await
|
||||
// imageBase64 = await readFile(blob);
|
||||
// }
|
||||
// // получение id строки для редактирования
|
||||
// // это значение содержится в скрытом input
|
||||
// const currentId = cntrls.lineId.value;
|
||||
// // если значение id не задано,
|
||||
// // то необходимо выполнить добавление записи
|
||||
// // иначе обновление записи
|
||||
// if (!currentId) {
|
||||
// await addLine(
|
||||
// cntrls.itemDate.value,
|
||||
// cntrls.itemName.value,
|
||||
// cntrls.itemDescription.value,
|
||||
// imageBase64,
|
||||
// );
|
||||
// } else {
|
||||
// await editLine(
|
||||
// currentId,
|
||||
// cntrls.itemDate.value,
|
||||
// cntrls.itemName.value,
|
||||
// cntrls.itemDescription.value,
|
||||
// imageBase64,
|
||||
// );
|
||||
// }
|
||||
// // после выполнения добавления/обновления модальное окно скрывается
|
||||
// hideUpdateModal();
|
||||
});
|
||||
UpdateNew(div1, item);
|
||||
if (index % 2 !== 0) {
|
||||
document.body.appendChild(div1);
|
||||
}
|
||||
});
|
||||
document.body.appendChild(div1);
|
||||
}
|
||||
|
||||
@ -37,6 +37,11 @@ header nav {
|
||||
height : 500px !important;
|
||||
}
|
||||
}
|
||||
@media(min-height: 740px){
|
||||
body{
|
||||
min-height: 1070px;
|
||||
}
|
||||
}
|
||||
.headStyle{
|
||||
color: #FFFFFF
|
||||
}
|
||||
@ -46,6 +51,11 @@ header nav {
|
||||
.headStyleNavBar2{
|
||||
background-color: #575757
|
||||
}
|
||||
.body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100hv;
|
||||
}
|
||||
.stsp{
|
||||
font-size: 30px;
|
||||
color: #333333;
|
||||
@ -97,6 +107,16 @@ header nav {
|
||||
margin-top: 9px;
|
||||
margin-bottom:25px;
|
||||
}
|
||||
.rectNewsInvisible{
|
||||
width: 5px;
|
||||
height: 50px;
|
||||
border : 2px solid #2582A3;
|
||||
}
|
||||
.modal-dialog img{
|
||||
max-width: 310px;
|
||||
max-height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.stylePage2{
|
||||
float : center;
|
||||
margin-right: 7;
|
||||
@ -136,11 +156,11 @@ header nav a:hover {
|
||||
}
|
||||
|
||||
footer {
|
||||
position : fixed;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
z-index: 1;
|
||||
background-color: #9c9c9c;
|
||||
height: 32px;
|
||||
color: #ffffff;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user