Skip to content

HW4&5 #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zmknnn wants to merge 1 commit into
base: main
Choose a base branch
from
Open

HW4&5 #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 103 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Page</title>
<title>To-Do List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="./style/style.css">
<script src="./src/main.js" defer></script>
</head>
<body>
<div class="container">
<h1>To-Do List</h1>

<div class="add-task">
<button class="btn btn-large" id="addTaskBtn">
<i class="fas fa-plus"></i> Додати нове завдання
</button>
</div>

<div class="controls">
<div class="sort-filter">
<div>
<label for="sortSelect"></label>
<select class="select-box" id="sortSelect">
<option value="date">Сортувати за: Дата</option>
<option value="priority">Сортувати за: Пріоритет</option>
<option value="name">Сортувати за: Назва</option>
</select>
</div>

<button id="openDateFilter" class="filter-button">Фільтр по даті</button>
</div>
</div>

<ul class="task-list" id="taskList">
</ul>

<!-- Посилання на сторінку звіту -->
<div class="report-link-container">
<a href="report.html" class="report-link">
<i class="fas fa-chart-bar"></i> Перейти до аналітики завдань
</a>
</div>
</div>

<!-- Модальне вікно для додавання/редагування завдань -->
<div class="modal" id="taskModal">
<div class="modal-content">
<span class="close" id="closeModal">&times;</span>
<h2 class="modal-title" id="modalTitle">Додати завдання</h2>
<form id="taskForm">
<div class="form-group">
<label class="form-label" for="taskTitle">Назва завдання</label>
<input type="text" class="form-input" id="taskTitle" placeholder="Наприклад: Завдання 1" required>
</div>

<div class="form-group">
<label class="form-label" for="taskDate">Дата виконання</label>
<input type="date" class="form-input" id="taskDate">
</div>

<div class="form-group">
<label class="form-label">Пріоритет</label>
<div class="priority-options">
<label class="priority-radio">
<input type="radio" name="priority" value="high">
Високий
</label>
<label class="priority-radio">
<input type="radio" name="priority" value="medium" checked>
Середній
</label>
<label class="priority-radio">
<input type="radio" name="priority" value="low">
Низький
</label>
</div>
</div>

<div class="modal-actions">
<button type="submit" class="btn" id="saveTaskBtn">Додати завдання</button>
<button type="button" class="btn btn-secondary" id="cancelTaskBtn">Скасувати</button>
</div>
</form>
</div>
</div>

<!-- Попап для фільтрації по даті -->
<div id="dateFilterPopup" class="date-popup hidden">
<div class="popup-inner">
<div class="form-group">
<label for="dateFilterMode">Тип фільтра:</label>
<select id="dateFilterMode" class="form-input">
<option value="current">Поточні</option>
<option value="past">Минулі</option>
<option value="upcoming">Майбутні</option>
</select>
</div>

<div class="form-group">
<label for="dateInput">Оберіть дату:</label>
<input type="date" id="dateInput" class="form-input">
</div>

<div class="popup-actions">
<button id="applyDateFilter" class="btn">Застосувати</button>
</div>
</div>
</div>

<script src="./src/main.js"></script>
</body>
</html>
23 changes: 23 additions & 0 deletions report.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Аналітика завдань</title>
<link rel="stylesheet" href="./style/style.css">
<link rel="stylesheet" href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css">
</head>
<body>
<div class="container">
<h1>Аналітика завдань</h1>
<a href="index.html" class="back-link"><i class="fas fa-arrow-left"></i> Назад до списку</a>

<div id="wdr-component"></div>
</div>

<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

<script src="report.js"></script>
</body>
</html>
54 changes: 54 additions & 0 deletions report.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
document.addEventListener('DOMContentLoaded', function() {
fetch('task.json')
.then(response => {
if (!response.ok) throw new Error('Помилка завантаження даних');
return response.json();
})
.then(tasks => {
if (!tasks || tasks.length === 0) throw new Error('Немає даних для аналітики');

const report = {
dataSource: {
data: tasks.map(task => ({
"Завдання": task.title,
"Дата": task.date,
"Пріоритет": task.priority,
"Статус": task.completed ? "Виконано" : "Не виконано"
}))
},
slice: {
rows: [
{ uniqueName: "Статус" },
{ uniqueName: "Пріоритет" }
],
columns: [
{ uniqueName: "Measures" }
],
measures: [
{ uniqueName: "Завдання", aggregation: "count" }
]
},
options: {
grid: {
type: "flat",
showTotals: "off"
}
}
};

new WebDataRocks({
container: "#wdr-component",
toolbar: true,
report: report
});
})
.catch(error => {
console.error(error);
document.getElementById('wdr-component').innerHTML = `
<div class="error">
<p>${error.message}</p>
<p>Перевірте вміст файлу task.json</p>
</div>
`;
});
});
Loading