OkunElya/uni-web-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

filters done

Browse Source
This commit is contained in:
OkunElya
2026-02-26 22:56:12 +10:00
parent 4f1c66e838
commit c3996ec6c6
5 changed files with 105 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
labs/lab1/JavaScript/filter.js
View File

@@ -19,66 +19,73 @@ const dataFilter = (dataForm) => {
// перебираем все элементы формы с фильтрами // перебираем все элементы формы с фильтрами
for (const item of dataForm.elements) { for (const item of dataForm.elements) {
// получаем значение элемента // получаем значение элемента
let valInput = item.value; let valInput = item.value;
// если поле типа text - приводим его значение к нижнему регистру // если поле типа text - приводим его значение к нижнему регистру
if (item.type === "text") { if (item.type === "text") {
valInput = valInput.toLowerCase(); valInput = valInput.toLowerCase();
} }
if (item.type === "number"){ if (item.type === "number") {
if (valInput.value === ""){ if (valInput === "") {
if(valInput.name.includes("From")){ if (item.id.includes("From")) {
valInput = -Infinity; valInput = -Infinity;
} }
else{ else {
valInput = Infinity; valInput = Infinity;
} }
} }
valInput = Number(valInput); else {
valInput = Number(valInput);
}
} }
// формируем очередной элемент ассоциативного массива // формируем очередной элемент ассоциативного массива
dictFilter[item.id] = valInput; dictFilter[item.id] = valInput;
} }
return dictFilter; return dictFilter;
} }
// фильтрация таблицы // фильтрация таблицы
const filterTable = (data, idTable, dataForm) =>{ const filterTable = (data, idTable, dataForm) => {
// получаем данные из полей формы // получаем данные из полей формы
const datafilter = dataFilter(dataForm); const datafilter = dataFilter(dataForm);
// выбираем данные соответствующие фильтру и формируем таблицу из них // выбираем данные соответствующие фильтру и формируем таблицу из них
let tableFilter = data.filter(item => { let tableFilter = data.filter(item => {
/* в этой переменной будут "накапливаться" результаты сравнения данных /* в этой переменной будут "накапливаться" результаты сравнения данных
с параметрами фильтра */ с параметрами фильтра */
let result = true; let result = true;
// строка соответствует фильтру, если сравнение всех значения из input // строка соответствует фильтру, если сравнение всех значения из input
// со значением ячейки очередной строки - истина // со значением ячейки очередной строки - истина
Object.entries(item).map(([key, val]) => { Object.entries(item).map(([key, val]) => {
// текстовые поля проверяем на вхождение // текстовые поля проверяем на вхождение
if (typeof val == 'string') { if (typeof val == 'string') {
result &&= val.toLowerCase().includes(datafilter[correspond[key]]) result &&= val.toLowerCase().includes(datafilter[correspond[key]])
} }
if (typeof val == 'number') {
result &&= datafilter[correspond[key]+"From"]<=Number(val)&& datafilter[correspond[key]+"To"]>=Number(val)
}
// САМОСТОЯТЕЛЬНО проверить числовые поля на принадлежность интервалу
});
return result; // САМОСТОЯТЕЛЬНО проверить числовые поля на принадлежность интервалу
}); if (typeof val == 'number') {
result &&= datafilter[correspond[key][0]] <= Number(val) && datafilter[correspond[key][1]] >= Number(val)
}
});
return result;
});
// САМОСТОЯТЕЛЬНО вызвать функцию, которая удаляет все строки таблицы с id=idTable // САМОСТОЯТЕЛЬНО вызвать функцию, которая удаляет все строки таблицы с id=idTable
clearTable(); clearTable(idTable);
// показать на странице таблицу с отфильтрованными строками // показать на странице таблицу с отфильтрованными строками
createTable(tableFilter, idTable); createTable(tableFilter, idTable);
}
const clearFilters = (form) => {
form.querySelectorAll(`& input[type="text"],& input[type="number"]`).forEach((elem) => elem.value = null)
} }

14
labs/lab1/JavaScript/main.js
View File

@@ -4,20 +4,16 @@ document.addEventListener("DOMContentLoaded", function () {
function doInit() { function doInit() {
createTable(buildings, 'list'); createTable(buildings, 'list');
const clearFiltersButton = document.getElementById("clearFiltersButton") const clearFiltersButton = document.getElementById("clearFiltersButton");
clearFiltersButton.addEventListener("click", (event) => { clearFiltersButton.addEventListener("click", (event) => {
clearTable("list") clearFilters(filter);
filterTable(buildings,'list',filter)
}) })
const applyFiltersButton = document.getElementById("applyFiltersButton") const applyFiltersButton = document.getElementById("applyFiltersButton");
applyFiltersButton.addEventListener("click", (event) => { applyFiltersButton.addEventListener("click", (event) => {
filterTable() filterTable(buildings,'list',filter)
}) })
} }

23
labs/lab1/JavaScript/table.js
View File

@@ -1,19 +1,26 @@
const createTable = (data, idTable) => { const createTable = (data, idTable) => {
const table = document.getElementById(idTable); const table = document.getElementById(idTable);
if (data.length == 0) {
return;
}
const header = Object.keys(data[0]); const header = Object.keys(data[0]);
/* создание шапки таблицы */ /* создание шапки таблицы */
const headerRow = createHeaderRow(header); if (!table.firstElementChild) {
table.append(headerRow); const headerRow = createHeaderRow(header);
table.append(headerRow);
}
/* создание тела таблицы */ /* создание тела таблицы */
const bodyRows = createBodyRows(data); const bodyRows = createBodyRows(data);
table.append(bodyRows); table.append(bodyRows);
}; };
const clearTable = (idTable) => { const clearTable = (idTable) => {
const table = document.getElementById(idTable); const table = document.getElementById(idTable);
table.removeChild(table.children[1]); if (table.children.length > 1) {
table.removeChild(table.children[1]);
}
} }
const createHeaderRow = (headers) => { const createHeaderRow = (headers) => {
@@ -26,9 +33,9 @@ const createHeaderRow = (headers) => {
return tr; return tr;
}; };
const createBodyRows = (rows) =>{ const createBodyRows = (rows) => {
const body = document.createElement('tbody'); const body = document.createElement('tbody');
rows.forEach(row =>{ rows.forEach(row => {
const rowElement = document.createElement('tr'); const rowElement = document.createElement('tr');
for (let key in row) { for (let key in row) {
const td = document.createElement('td'); const td = document.createElement('td');

83
labs/lab1/index.html
View File

@@ -12,39 +12,60 @@
</head> </head>
<body> <body>
<div>
<h3>Фильтр</h3>
<form id="filter" name="filter">
<p>
<label for="structure">Название:</label>
<input type="text" id="structure">
</p>
<p>
<label for="category">Тип:</label>
<input type="text" id="category">
</p>
<p>
<label for="country">Страна:</label>
<input type="text" id="country">
</p>
<p>
<label for="city">Город:</label>
<input type="text" id="city">
</p>
<p>
<label for="yearFrom">Год: </label>
от <input type="number" id="yearFrom">
до <input type="number" id="yearTo">
</p>
<p>
<label for="heightFrom">Высота:</label>
от <input type="number" id="heightFrom">
до <input type="number" id="heightTo">
</p>
<input id="applyFiltersButton" type="button" value="Найти">
<input id="clearFiltersButton" type="button" value="Очистить фильтры">
</form>
</div>
<div>
<h3>Сортировка</h3>
<form id="filter">
<p>
<label for="structure">Название:</label>
<input type="text" id="structure">
</p>
<p>
<label for="category">Тип:</label>
<input type="text" id="category">
</p>
<p>
<label for="country">Страна:</label>
<input type="text" id="country">
</p>
<p>
<label for="city">Город:</label>
<input type="text" id="city">
</p>
<p>
<label for="yearFrom">Год: </label>
от <input type="number" id="yearFrom">
до <input type="number" id="yearTo">
</p>
<p>
<label for="heightFrom">Высота:</label>
от <input type="number" id="heightFrom">
до <input type="number" id="heightTo">
</p>
<input id="applyFiltersButton" type="button" value="Найти">
<input id="clearFiltersButton" type="button" value="Очистить фильтры">
</form>
<br> <form id="sort">
<p> Сортировать по</p>
<p>
<select id="fieldsFirst">
</select>
по убыванию? <input type="checkbox" id="fieldsFirstDesc">
</p>
<p>
<select id="fieldsSecond">
</select>
по убыванию? <input type="checkbox" id="fieldsSecondDesc">
</p>
<input type="button" value="Сортировать">
<input type="button" value="Сбросить сортировку">
</form>
<br>
</div>
<table id="list"> <table id="list">
</table> </table>

32
labs/lab1/temp.js
View File

@@ -1,32 +0,0 @@
// const arr = [1, 2, 3, 4, 5];
// const replaced = arr
// replaced.splice(2,1,100)
// const removed = [...replaced];
// removed.splice(3,1);
// const updated = [...removed];
// updated.splice(3,0,200);
// console.log(updated);
const arr = [2, 2, 4, 1, 6, 12]
// const ret = arr.map((val, i, array) => {
// return array.slice(Math.max(0, i - 1), Math.min(array.length - 1, i + 2)) /
// (Math.max(0, i - 1)-Math.min(array.length - 1, i + 1))
// })
// console.log(ret)
// let min = arr.reduce((acc,x)=>x<acc?x:acc);
// console.log(min)
function groupArr(func,...args){
return args.reduce(func)
}
const users =