feat: add date selector & improve kanban initialization
- Added a date input and an "Update Date" button in the header to allow users to select and update the current date for the Kanban board. - Modified CSS to support new header layout with flexbox for better alignment and distribution. - Enhanced JavaScript to initialize the Kanban board with the selected date and to allow dynamic updates based on the chosen date. - Improved user experience with button hover state and default date setting to today's date. - Ensured the Kanban state is retained across date changes, enhancing data persistence and usability.
This commit is contained in:
parent
d4c8581966
commit
1ddae1b7d3
GPG key ID:
ECBCC9082395383F
3 changed files with 83 additions and 29 deletions
24
example.css
24
example.css
|
|
@ -11,23 +11,39 @@ header {
|
|||
position: relative;
|
||||
text-align: center;
|
||||
padding: 1em 2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
header input[type="date"] {
|
||||
margin: 0 1em;
|
||||
padding: 0.5em;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
header button {
|
||||
position: absolute;
|
||||
right: 2em;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
padding: 0.5em 1em;
|
||||
background-color: #fff;
|
||||
border: 1px solid #4CAF50;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin-left: 0.5em;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
header button:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
|
|||
36
example.html
36
example.html
|
|
@ -1,34 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Kanblendar</title>
|
||||
<link rel="stylesheet" href="kanblendar.css">
|
||||
<link rel="stylesheet" href="example.css">
|
||||
</head>
|
||||
<body>
|
||||
<link rel="stylesheet" href="kanblendar.css" />
|
||||
<link rel="stylesheet" href="example.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Kanblendar</h1>
|
||||
<input type="date" id="kanblendarDate" />
|
||||
<button id="updateDateBtn">Update Date</button>
|
||||
<button id="createTaskBtn">Create Task</button>
|
||||
</header>
|
||||
<main>
|
||||
<section class="kanblendar" id="kanblendar"
|
||||
<section
|
||||
class="kanblendar"
|
||||
id="kanblendar"
|
||||
data-columns="Backlog,In Progress,Done"
|
||||
data-start-time="08:00"
|
||||
data-end-time="18:00"
|
||||
data-interval="60">
|
||||
data-interval="60"
|
||||
>
|
||||
<!-- Kanban columns will be dynamically generated here -->
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-left"><a href="#" onclick="javascript:clearState(); return false;">Delete all entries</a></div>
|
||||
<div class="footer-right">Brought to you by <a href="https://git.private.coffee/kumi/kanblendar">Kumi</a></div>
|
||||
<div class="footer-left">
|
||||
<a href="#" onclick="javascript:clearState(); return false;"
|
||||
>Delete all entries</a
|
||||
>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
Brought to you by
|
||||
<a href="https://git.private.coffee/kumi/kanblendar">Kumi</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Optional: Developers can define their own modal here -->
|
||||
|
||||
<script src="kanblendar.js"></script>
|
||||
<script src="example.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
30
example.js
30
example.js
|
|
@ -1,8 +1,35 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.kanblendar = new Kanblendar();
|
||||
const dateInput = document.getElementById('kanblendarDate');
|
||||
const kanbanSection = document.getElementById('kanblendar');
|
||||
|
||||
// Set default date to today
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
dateInput.value = today;
|
||||
|
||||
// Initialize Kanblendar with today's date
|
||||
window.kanblendar = new Kanblendar({
|
||||
currentDate: today
|
||||
});
|
||||
|
||||
const createTaskBtn = document.getElementById('createTaskBtn');
|
||||
createTaskBtn.addEventListener('click', () => window.kanblendar.openModal());
|
||||
|
||||
const updateDateBtn = document.getElementById('updateDateBtn');
|
||||
updateDateBtn.addEventListener('click', updateKanblendarDate);
|
||||
|
||||
function updateKanblendarDate() {
|
||||
const selectedDate = dateInput.value;
|
||||
kanbanSection.innerHTML = ''; // Clear existing tasks and columns
|
||||
window.kanblendar = new Kanblendar({
|
||||
currentDate: selectedDate
|
||||
});
|
||||
|
||||
const serializedState = localStorage.getItem('kanblendarState');
|
||||
if (serializedState) {
|
||||
window.kanblendar.deserialize(serializedState);
|
||||
}
|
||||
}
|
||||
|
||||
function saveState() {
|
||||
const serializedState = kanblendar.serialize();
|
||||
localStorage.setItem('kanblendarState', serializedState);
|
||||
|
|
@ -16,7 +43,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
kanblendar.deserialize(serializedState);
|
||||
console.log('State loaded on page load!');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function clearState() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue