Skip to content

Commit c61da2d

Browse files
matowdevmatowdev
committed
[PW-11.6/ret] Move SD-CRM log to "Session storage"
Organiz ability app/test without del/correct server data (usability). Worth noting: - that after page/reloading everything is restored as it was (according the server data). core: B-3 / JS-BL
1 parent 3aa8ad2 commit c61da2d

File tree

1 file changed

+213
-60
lines changed
  • core-courses/3-js-basic-level/11-server-async-await/11-6-pw-11-server-async-await/students-db-client/js

1 file changed

+213
-60
lines changed

‎core-courses/3-js-basic-level/11-server-async-await/11-6-pw-11-server-async-await/students-db-client/js/index.js‎

Lines changed: 213 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -666,54 +666,153 @@
666666
}
667667

668668
// ** создание "пустой" строки для таблицы студентов (при/для фильтрации, пустом массиве)
669-
function createEmptyTableMessageRow() {
669+
function createEmptyTableMessageRow(
670+
message = 'Пусто.. измените фильтрацию, добавьте студента!?'
671+
) {
670672
const emptyTableTrRow = document.createElement('tr');
671673
const emptyTableTdCell = document.createElement('td');
672674

673675
emptyTableTdCell.colSpan = 5; // объединение всех колонок
674-
emptyTableTdCell.textContent =
675-
'Пусто.. измените фильтрацию, добавьте студента!';
676+
emptyTableTdCell.textContent = message;
676677
emptyTableTdCell.style.color = '#e10c22';
677678
emptyTableTdCell.style.textAlign = 'center';
678679
emptyTableTrRow.append(emptyTableTdCell);
679680

680681
return emptyTableTrRow;
681682
}
682683

684+
// TODO: что бы перейти на "полностью" [СЕРВЕРНУЮ] логику/обратно.. нужно пошагово просмотреть весь файл и раскомментировать закомментированный код, при этом комментируя/удаляя код/строки помеченные, как [FOR DEMO - sessionStorage] в полном объёме (т.е. некоторые инициализации переменных, доп. функций проводились каждой логике свои)
685+
683686
// ** [СЕРВЕР] организация запроса, получение данных/списка студентов с сервера (корректировка входящих данных)
687+
// ?? следует раскомментировать (полностью)
688+
// let studentsDataArrWithIds;
689+
690+
// async function getStudentsServerListData() {
691+
// try {
692+
// const response = await fetch('http://localhost:3000/api/students'); // запрос на сервер
693+
//
694+
// // проверка успешности/выполнения запроса
695+
// if (!response.ok) {
696+
// throw new Error(`Ошибка: ${response.status}!`);
697+
// }
698+
//
699+
// const data = await response.json(); // преобразование данных в JSON-формат
700+
// studentsDataArrWithIds = addLocalIdsToStudents(data); // добавление недостающего поля, как localId
701+
//
702+
// addStudentsToTable(studentsDataArrWithIds); // отрисовка данных, наполнение таблицы студентов
703+
// } catch (error) {
704+
// console.error('Не удалось загрузить список студентов..', error);
705+
// alert('Ошибка при загрузке данных с сервера!');
706+
// tableBody.append(
707+
// createEmptyTableMessageRow(
708+
// 'Нет данных! Запустите/перезапустите сервер!'
709+
// )
710+
// ); // если ошибка, вывод/добавление строки-сообщения
711+
// }
712+
// }
713+
//
714+
// // добавление недостающего поля в объекты студентов, т.е. поля localId (необходимого, для дальнейших отработок)
715+
// function addLocalIdsToStudents(studentsFromServer) {
716+
// return studentsFromServer.map((student, index) => ({
717+
// ...student, // сохранение приходящих/серверных полей
718+
// localId: index + 1, // добавление localId
719+
// }));
720+
// }
721+
//
722+
// getStudentsServerListData(); // получение данных
723+
724+
// !! [FOR DEMO - sessionStorage] фиксация исходных данных/серверных данных, для сохранения в sessionStorage
684725
let studentsDataArrWithIds;
726+
let updateStudentsDataArr;
727+
let studentsServerDataArr = []; // потом/будет использоваться для генерации storage ID
685728

686-
async function getStudentsServerListData() {
729+
async function addStudentsDataToStorage() {
687730
try {
731+
// ??
732+
// const tableBody = document.querySelector('.dboard__table-body');
733+
// const spinnerRow = createLoadingSpinnerRow(); // создание спиннера
734+
// tableBody.append(spinnerRow); // добавление в таблицу
735+
736+
// ??
737+
// console.log('Ждём ответ от Render-сервера..');
738+
739+
// ??
740+
// await new Promise((resolve) => setTimeout(resolve, 5000)); // искусственная задержка.. имитация "просыпания" Render-сервера
741+
688742
const response = await fetch('http://localhost:3000/api/students'); // запрос на сервер
689743

744+
// ??
745+
// ! Запрос на RENDER-сервер (а не на локальный, согласно маршрута.. ВНИМАНИЕ)
746+
// const response = await fetch(
747+
// 'https://students-dashboard-crm.onrender.com/api/students'
748+
// );
749+
750+
// ??
751+
// удаление спиннера после получения ответа/подгрузки студентов
752+
// spinnerRow.remove();
753+
754+
// ??
755+
// console.log('Ответ получен! Данные должны быть отображены!');
756+
690757
// проверка успешности/выполнения запроса
691758
if (!response.ok) {
692759
throw new Error(`Ошибка: ${response.status}!`);
693760
}
694761

695762
const data = await response.json(); // преобразование данных в JSON-формат
696-
studentsDataArrWithIds = addLocalIdsToStudents(data); // добавление недостающего поля, как localId
763+
sessionStorage.setItem('demoStudents', JSON.stringify(data)); // добавление/сохранение в Session storage
764+
765+
studentsServerDataArr = data; // "дополнительно" фиксируем входящий серверный массив
697766

698-
addStudentsToTable(studentsDataArrWithIds); // отрисовка данных, наполнение таблицы студентов
767+
return data; // возврат массива данных
699768
} catch (error) {
700-
console.error('Не удалось загрузить список студентов..', error);
701-
alert('Ошибка при загрузке данных с сервера!?');
769+
console.error('Ошибка загрузки списка студентов с сервера!', error);
770+
771+
// ??
772+
// удаление спиннера, если запрос завершился ошибкой
773+
// document.querySelector('.dboard__table-body-loading-row')?.remove();
774+
775+
return []; // если ошибка, возврат "пустого" массива
702776
}
703777
}
704778

705-
// добавление недостающего поля в объекты студентов, т.е. поля localId (необходимого, для дальнейших отработок)
779+
// !! [FOR DEMO - sessionStorage] получение данных/списка из Session storage (корректировка входящих данных)
780+
async function getStudentsListDataFromStorage() {
781+
let savedStudents = await addStudentsDataToStorage(); // получение данных из Session storage
782+
783+
// обновление Session storage
784+
sessionStorage.setItem('demoStudents', JSON.stringify(savedStudents));
785+
786+
// корректировка данных (добавление поля localId)
787+
studentsDataArrWithIds = savedStudents || [];
788+
updateStudentsDataArr = addLocalIdsToStudents(studentsDataArrWithIds);
789+
790+
if (updateStudentsDataArr.length > 0) {
791+
addStudentsToTable(updateStudentsDataArr); // отрисовка данных, наполнение таблицы студентов
792+
} else {
793+
alert('Ошибка при загрузке данных с сервера!');
794+
tableBody.append(
795+
createEmptyTableMessageRow(
796+
'Нет данных! Запустите/перезапустите сервер!'
797+
)
798+
); // если ошибка, вывод/добавление строки-сообщения
799+
}
800+
}
801+
802+
// !! [FOR DEMO - sessionStorage] добавление поля localId (необходимого/возможно, для дальнейших отработок)
706803
function addLocalIdsToStudents(studentsFromServer) {
707804
return studentsFromServer.map((student, index) => ({
708805
...student, // сохранение приходящих/серверных полей
709806
localId: index + 1, // добавление localId
710807
}));
711808
}
712809

713-
getStudentsServerListData(); // получение данных
810+
// !! [FOR DEMO - sessionStorage]
811+
getStudentsListDataFromStorage(); // получение данных о клиентах (из Session storage)
714812

715813
// ** наполнение таблицы данных о студентах (согласно откорректированного исходного, далее формирующегося массива)
716-
let updateStudentsDataArr;
814+
// ?? следует раскомментировать
815+
// let updateStudentsDataArr;
717816

718817
function addStudentsToTable(studentsServerData = []) {
719818
const selectedBodyRows = getSelectedBodyRows(); // сохранение выделенных body-строк (если такие есть)
@@ -916,25 +1015,26 @@
9161015
cancelBtn.addEventListener('click', deselectBodyRows); // отработка функции по нажатию
9171016

9181017
// ** [СЕРВЕР] организация удаления студентов с сервера (согласно серверных id)
919-
async function deleteStudentFromServer(serverId) {
920-
try {
921-
const response = await fetch(
922-
`http://localhost:3000/api/students/${serverId}`,
923-
{
924-
method: 'DELETE',
925-
}
926-
);
927-
928-
if (!response.ok) {
929-
throw new Error(`Ошибка при удалении студента: ${response.status}`);
930-
}
931-
932-
await getStudentsServerListData(); // обновление списка студентов после удаления
933-
} catch (error) {
934-
console.error('Ошибка при удалении студента с сервера..', error);
935-
alert('Не удалось удалить студента с сервера!');
936-
}
937-
}
1018+
// ?? следует раскомментировать (полностью)
1019+
// async function deleteStudentFromServer(serverId) {
1020+
// try {
1021+
// const response = await fetch(
1022+
// `http://localhost:3000/api/students/${serverId}`,
1023+
// {
1024+
// method: 'DELETE',
1025+
// }
1026+
// );
1027+
//
1028+
// if (!response.ok) {
1029+
// throw new Error(`Ошибка при удалении студента: ${response.status}`);
1030+
// }
1031+
//
1032+
// await getStudentsServerListData(); // обновление списка студентов после удаления
1033+
// } catch (error) {
1034+
// console.error('Ошибка при удалении студента с сервера..', error);
1035+
// alert('Не удалось удалить студента с сервера!');
1036+
// }
1037+
// }
9381038

9391039
// ** удаление выделенных элементов/строк таблицы данных о студентах (через "X" кнопку, не через "внешнюю")
9401040
function deleteBodyRowsByXBtn(event) {
@@ -990,9 +1090,10 @@
9901090
}
9911091
}
9921092

993-
studentServerIdsToDelete.forEach(async (serverId) => {
994-
await deleteStudentFromServer(serverId); // удаление студентов с сервера по серверным ID
995-
});
1093+
// ?? следует раскомментировать
1094+
// studentServerIdsToDelete.forEach(async (serverId) => {
1095+
// await deleteStudentFromServer(serverId); // удаление студентов с сервера по серверным ID
1096+
// });
9961097

9971098
studentServerIdsToDelete.forEach((serverId) => {
9981099
const studentIndex = updateStudentsDataArr.findIndex(
@@ -1009,6 +1110,12 @@
10091110
student.localId = index + 1;
10101111
});
10111112

1113+
// !! [FOR DEMO - sessionStorage] ..одна строчка
1114+
sessionStorage.setItem(
1115+
'demoStudents',
1116+
JSON.stringify(updateStudentsDataArr)
1117+
); // обновление данных в Session storage
1118+
10121119
addStudentsToTable(updateStudentsDataArr); // обновление таблицы студентов (пере-компоновка) после удаления
10131120
}
10141121

@@ -1126,35 +1233,65 @@
11261233
});
11271234
}
11281235

1129-
// ** [СЕРВЕР] отправка данных/добавление "новых" студентов на сервер, получение обратно (проверка статуса)
1130-
async function addStudentsToServer(studentData) {
1131-
try {
1132-
const response = await fetch('http://localhost:3000/api/students', {
1133-
method: 'POST',
1134-
headers: {
1135-
'Content-Type': 'application/json',
1136-
},
1137-
body: JSON.stringify(studentData),
1138-
});
1236+
// !! [FOR DEMO - sessionStorage] генерация custom ID номеров для "новых" студентов (продолжение порядка.. до 99 потом нужно/будет корректировать)
1237+
function generateStudentStorageId() {
1238+
const orderPrefix = studentsServerDataArr.length; // фиксация длинны серверного массива (ранее/выше приходящего)
11391239

1140-
if (!response.ok) {
1141-
if (response.status === 422) {
1142-
const errorData = await response.json();
1143-
throw new Error(
1144-
`Ошибка валидации: ${errorData.errors
1145-
.map((e) => e.message)
1146-
.join(', ')}`
1147-
);
1148-
} else {
1149-
throw new Error(`Ошибка: ${response.status}`);
1150-
}
1151-
}
1240+
// генерация случайных/дополнительных цифр для ID (т.е. генерация 5-ти цифр, если в массиве < 10 студентов, если больше.. то генерация 4-х цифр)
1241+
const randomDigits =
1242+
studentsServerDataArr.length < 10
1243+
? Math.floor(10000 + Math.random() * 90000) // 5 цифр
1244+
: Math.floor(1000 + Math.random() * 9000); // 4 цифры
11521245

1153-
await getStudentsServerListData(); // обновление списка студентов (в контексте.. перерисовка таблицы)
1154-
} catch (error) {
1155-
console.error('Ошибка при добавлении студента..', error);
1156-
alert('Ошибка при добавлении студента на сервер!');
1246+
return `${orderPrefix}${randomDigits}`; // возврат сформированного ID
1247+
}
1248+
1249+
// ** [СЕРВЕР] отправка данных/добавление "новых" студентов на сервер, получение обратно (проверка статуса)
1250+
// ?? следует раскомментировать (полностью)
1251+
// async function addStudentsToServer(studentData) {
1252+
// try {
1253+
// const response = await fetch('http://localhost:3000/api/students', {
1254+
// method: 'POST',
1255+
// headers: {
1256+
// 'Content-Type': 'application/json',
1257+
// },
1258+
// body: JSON.stringify(studentData),
1259+
// });
1260+
//
1261+
// if (!response.ok) {
1262+
// if (response.status === 422) {
1263+
// const errorData = await response.json();
1264+
// throw new Error(
1265+
// `Ошибка валидации: ${errorData.errors
1266+
// .map((e) => e.message)
1267+
// .join(', ')}`
1268+
// );
1269+
// } else {
1270+
// throw new Error(`Ошибка: ${response.status}`);
1271+
// }
1272+
// }
1273+
//
1274+
// await getStudentsServerListData(); // обновление списка студентов (в контексте.. перерисовка таблицы)
1275+
// } catch (error) {
1276+
// console.error('Ошибка при добавлении студента..', error);
1277+
// alert('Ошибка при добавлении студента на сервер!');
1278+
// }
1279+
// }
1280+
1281+
// !! [FOR DEMO - sessionStorage] добавление "новых" студентов/данных в Session storage (целая функция)
1282+
function addNewStudentToStorage(newStudent) {
1283+
if (!studentsDataArrWithIds) {
1284+
studentsDataArrWithIds = []; // если что-то не так с массивом — создаём пустой
11571285
}
1286+
1287+
// Добавление в массив, следом в Session storage
1288+
studentsDataArrWithIds.push(newStudent);
1289+
sessionStorage.setItem(
1290+
'demoStudents',
1291+
JSON.stringify(studentsDataArrWithIds)
1292+
);
1293+
1294+
addStudentsToTable(studentsDataArrWithIds); // перерисовка таблицы
11581295
}
11591296

11601297
// ** добавление "новых" студентов в массив/таблицу, через поля формы (после валидации, после проверки по ФИО)
@@ -1222,7 +1359,19 @@
12221359
}
12231360
}
12241361

1362+
// ?? следует раскомментировать
1363+
// const newStudent = {
1364+
// surname: formInSurname,
1365+
// name: formInName,
1366+
// patronymic: formInPatronymic,
1367+
// birthDate: formInBirthDate,
1368+
// startYear: formInStartYear,
1369+
// faculty: formInFaculty,
1370+
// };
1371+
1372+
// !! [FOR DEMO - sessionStorage] "расширенный" объект newStudent (т.к. нет серверных полей.. добавление самостоятельно)
12251373
const newStudent = {
1374+
id: generateStudentStorageId(), // генерация custom ID
12261375
surname: formInSurname,
12271376
name: formInName,
12281377
patronymic: formInPatronymic,
@@ -1231,7 +1380,11 @@
12311380
faculty: formInFaculty,
12321381
};
12331382

1234-
await addStudentsToServer(newStudent); // добавление студента на сервер
1383+
// ?? следует раскомментировать
1384+
// await addStudentsToServer(newStudent); // добавление студента на сервер
1385+
1386+
// !! [FOR DEMO - sessionStorage] временные изменения в/для Session storage (обновление/перерисовка таблицы ..ОДНА строчка)
1387+
addNewStudentToStorage(newStudent); // добавление студента в Session storage
12351388

12361389
allFormInInputs.forEach((input) => (input.value = '')); // очистка полей формы (после добавления)
12371390
formInputData.classList.remove('was-validated'); // отмена красной обводки у "чистых" полей формы (после добавления)

0 commit comments

Comments
 (0)