StroevVladimir/PIbd-22.-Stroev-V.M.-Internet-Programm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Правки

Browse Source
This commit is contained in:
DyCTaTOR 2023-11-29 11:26:33 +04:00
parent 983edb4fac
commit ef247b45be
9 changed files with 198 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Lab2/index.html
View File

@ -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
View File

Binary file not shown.

6
Lab3/admin.html
View File

@ -40,9 +40,9 @@
<span class = "mainSt">
<b>Новости</b>
</span>
<div class="btn-group" role="group">
<button id="items-add" class="btn btn-info">Добавить товар (диалог)</button>
</div>
<div class="btn-group" role="group">
<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">
<thead>

34
Lab3/data.json
View File

File diff suppressed because one or more lines are too long

60
Lab3/index.html
View File

@ -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>

2
Lab3/js/lines-modal.js
View File

@ -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();
}

22
Lab3/js/lines-ui.js
View File

@ -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;

77
Lab3/js/lines.js
View File

@ -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);
});
document.body.appendChild(div1);
}

24
Lab3/style.css
View File

@ -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;