@@ -400,6 +423,7 @@ noteInput.addEventListener("keydown", function (event) {
document.addEventListener("DOMContentLoaded", function () {
loadUserInfo();
loadNotes();
+ updateFilterIndicator();
});
// Функция для загрузки информации о пользователе
@@ -440,3 +464,224 @@ async function loadUserInfo() {
console.error("Ошибка загрузки информации о пользователе:", error);
}
}
+
+// Календарь
+let currentDate = new Date();
+
+// Функция для отображения календаря
+function renderCalendar() {
+ const calendarDays = document.getElementById("calendarDays");
+ const monthYear = document.getElementById("monthYear");
+
+ // Проверяем, существуют ли элементы календаря
+ if (!calendarDays || !monthYear) return;
+
+ const year = currentDate.getFullYear();
+ const month = currentDate.getMonth();
+
+ // Массив названий месяцев
+ const monthNames = [
+ "Январь",
+ "Февраль",
+ "Март",
+ "Апрель",
+ "Май",
+ "Июнь",
+ "Июль",
+ "Август",
+ "Сентябрь",
+ "Октябрь",
+ "Ноябрь",
+ "Декабрь",
+ ];
+
+ // Устанавливаем заголовок месяца и года
+ monthYear.textContent = `${monthNames[month]} ${year}`;
+
+ // Получаем первый день месяца
+ const firstDay = new Date(year, month, 1);
+ // Получаем последний день месяца
+ const lastDay = new Date(year, month + 1, 0);
+ // Получаем день недели первого дня (0 - воскресенье, 1 - понедельник и т.д.)
+ let firstDayOfWeek = firstDay.getDay();
+ // Преобразуем так, чтобы понедельник был первым днем (0)
+ firstDayOfWeek = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1;
+
+ // Очищаем календарь
+ calendarDays.innerHTML = "";
+
+ // Создаём Set дат, когда были созданы заметки
+ const noteDates = new Set();
+ allNotes.forEach((note) => {
+ noteDates.add(note.date);
+ });
+
+ // Получаем последний день предыдущего месяца
+ const prevMonthLastDay = new Date(year, month, 0).getDate();
+ const prevMonth = month === 0 ? 11 : month - 1;
+ const prevYear = month === 0 ? year - 1 : year;
+
+ // Добавляем дни предыдущего месяца
+ for (let i = firstDayOfWeek - 1; i >= 0; i--) {
+ const day = prevMonthLastDay - i;
+ const dateStr = `${String(day).padStart(2, "0")}.${String(
+ prevMonth + 1
+ ).padStart(2, "0")}.${prevYear}`;
+
+ const dayDiv = document.createElement("div");
+ dayDiv.classList.add("calendar-day", "other-month");
+ dayDiv.textContent = day;
+ dayDiv.dataset.date = dateStr;
+
+ // Проверяем, есть ли заметки на этот день
+ if (noteDates.has(dateStr)) {
+ dayDiv.classList.add("has-notes");
+ }
+
+ // Проверяем, выбран ли этот день
+ if (selectedDateFilter === dateStr) {
+ dayDiv.classList.add("selected");
+ }
+
+ // Добавляем обработчик клика
+ dayDiv.addEventListener("click", handleDayClick);
+
+ calendarDays.appendChild(dayDiv);
+ }
+
+ // Добавляем дни текущего месяца
+ const today = new Date();
+ for (let day = 1; day <= lastDay.getDate(); day++) {
+ const dateStr = `${String(day).padStart(2, "0")}.${String(
+ month + 1
+ ).padStart(2, "0")}.${year}`;
+
+ const dayDiv = document.createElement("div");
+ dayDiv.classList.add("calendar-day");
+ dayDiv.textContent = day;
+ dayDiv.dataset.date = dateStr;
+
+ // Проверяем, является ли день сегодняшним
+ if (
+ day === today.getDate() &&
+ month === today.getMonth() &&
+ year === today.getFullYear()
+ ) {
+ dayDiv.classList.add("today");
+ }
+
+ // Проверяем, есть ли заметки на этот день
+ if (noteDates.has(dateStr)) {
+ dayDiv.classList.add("has-notes");
+ }
+
+ // Проверяем, выбран ли этот день
+ if (selectedDateFilter === dateStr) {
+ dayDiv.classList.add("selected");
+ }
+
+ // Добавляем обработчик клика
+ dayDiv.addEventListener("click", handleDayClick);
+
+ calendarDays.appendChild(dayDiv);
+ }
+
+ // Добавляем дни следующего месяца
+ const totalCells = calendarDays.children.length;
+ const remainingCells = 42 - totalCells; // 6 недель по 7 дней
+ const nextMonth = month === 11 ? 0 : month + 1;
+ const nextYear = month === 11 ? year + 1 : year;
+
+ for (let day = 1; day <= remainingCells; day++) {
+ const dateStr = `${String(day).padStart(2, "0")}.${String(
+ nextMonth + 1
+ ).padStart(2, "0")}.${nextYear}`;
+
+ const dayDiv = document.createElement("div");
+ dayDiv.classList.add("calendar-day", "other-month");
+ dayDiv.textContent = day;
+ dayDiv.dataset.date = dateStr;
+
+ // Проверяем, есть ли заметки на этот день
+ if (noteDates.has(dateStr)) {
+ dayDiv.classList.add("has-notes");
+ }
+
+ // Проверяем, выбран ли этот день
+ if (selectedDateFilter === dateStr) {
+ dayDiv.classList.add("selected");
+ }
+
+ // Добавляем обработчик клика
+ dayDiv.addEventListener("click", handleDayClick);
+
+ calendarDays.appendChild(dayDiv);
+ }
+}
+
+// Обработчик клика на день в календаре
+function handleDayClick(event) {
+ const clickedDate = event.target.dataset.date;
+
+ // Если кликнули на тот же день, снимаем фильтр
+ if (selectedDateFilter === clickedDate) {
+ selectedDateFilter = null;
+ } else {
+ selectedDateFilter = clickedDate;
+ }
+
+ // Перерисовываем заметки и календарь
+ renderNotes(allNotes);
+ renderCalendar();
+ updateFilterIndicator();
+}
+
+// Функция для обновления индикатора фильтра
+function updateFilterIndicator() {
+ const filterIndicator = document.getElementById("filter-indicator");
+ if (!filterIndicator) return;
+
+ if (selectedDateFilter) {
+ filterIndicator.style.display = "inline-block";
+ filterIndicator.innerHTML = `Фильтр: ${selectedDateFilter} `;
+
+ // Добавляем обработчик клика для кнопки сброса
+ const clearBtn = document.getElementById("clear-filter-btn");
+ if (clearBtn) {
+ clearBtn.addEventListener("click", clearFilter);
+ }
+ } else {
+ filterIndicator.style.display = "none";
+ }
+}
+
+// Функция для сброса фильтра (глобальная)
+window.clearFilter = function () {
+ selectedDateFilter = null;
+ renderNotes(allNotes);
+ renderCalendar();
+ updateFilterIndicator();
+};
+
+// Обработчики для кнопок навигации календаря
+const prevMonthBtn = document.getElementById("prevMonth");
+const nextMonthBtn = document.getElementById("nextMonth");
+
+if (prevMonthBtn) {
+ prevMonthBtn.addEventListener("click", function () {
+ currentDate.setMonth(currentDate.getMonth() - 1);
+ renderCalendar();
+ });
+}
+
+if (nextMonthBtn) {
+ nextMonthBtn.addEventListener("click", function () {
+ currentDate.setMonth(currentDate.getMonth() + 1);
+ renderCalendar();
+ });
+}
+
+// Инициализируем календарь при загрузке страницы
+document.addEventListener("DOMContentLoaded", function () {
+ renderCalendar();
+});
diff --git a/public/notes.html b/public/notes.html
index b97f309..6f08bcd 100644
--- a/public/notes.html
+++ b/public/notes.html
@@ -11,75 +11,100 @@
/>
-
-
- 📝 Мои заметки
-
-