kumi/kanblendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add date selector & improve kanban initialization

Browse source 
- 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:
Kumi 2024-09-09 08:11:36 +02:00
parent d4c8581966
commit 1ddae1b7d3
Signed by: kumi
GPG key ID: ECBCC9082395383F
3 changed files with 83 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
example.css
View file

@ -11,23 +11,39 @@ header {
position: relative; position: relative;
text-align: center; text-align: center;
padding: 1em 2em; padding: 1em 2em;
display: flex;
align-items: center;
justify-content: space-between;
} }
header h1 { header h1 {
margin: 0; margin: 0;
display: inline-block; 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 { header button {
position: absolute;
right: 2em;
top: 50%;
transform: translateY(-50%);
padding: 0.5em 1em; padding: 0.5em 1em;
background-color: #fff; background-color: #fff;
border: 1px solid #4CAF50; border: 1px solid #4CAF50;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
margin-left: 0.5em;
transition: background-color 0.3s;
}
header button:hover {
background-color: #f0f0f0;
} }
main { main {

50
example.html
View file

@ -1,34 +1,46 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kanblendar</title> <title>Kanblendar</title>
<link rel="stylesheet" href="kanblendar.css"> <link rel="stylesheet" href="kanblendar.css" />
<link rel="stylesheet" href="example.css"> <link rel="stylesheet" href="example.css" />
</head> </head>
<body> <body>
<header> <header>
<h1>Kanblendar</h1> <h1>Kanblendar</h1>
<button id="createTaskBtn">Create Task</button> <input type="date" id="kanblendarDate" />
<button id="updateDateBtn">Update Date</button>
<button id="createTaskBtn">Create Task</button>
</header> </header>
<main> <main>
<section class="kanblendar" id="kanblendar" <section
data-columns="Backlog,In Progress,Done" class="kanblendar"
data-start-time="08:00" id="kanblendar"
data-end-time="18:00" data-columns="Backlog,In Progress,Done"
data-interval="60"> data-start-time="08:00"
<!-- Kanban columns will be dynamically generated here --> data-end-time="18:00"
</section> data-interval="60"
>
<!-- Kanban columns will be dynamically generated here -->
</section>
</main> </main>
<footer> <footer>
<div class="footer-left"><a href="#" onclick="javascript:clearState(); return false;">Delete all entries</a></div> <div class="footer-left">
<div class="footer-right">Brought to you by <a href="https://git.private.coffee/kumi/kanblendar">Kumi</a></div> <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> </footer>
<!-- Optional: Developers can define their own modal here --> <!-- Optional: Developers can define their own modal here -->
<script src="kanblendar.js"></script> <script src="kanblendar.js"></script>
<script src="example.js"></script> <script src="example.js"></script>
</body> </body>
</html> </html>

30
example.js
View file

@ -1,8 +1,35 @@
document.addEventListener('DOMContentLoaded', () => { 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'); const createTaskBtn = document.getElementById('createTaskBtn');
createTaskBtn.addEventListener('click', () => window.kanblendar.openModal()); 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() { function saveState() {
const serializedState = kanblendar.serialize(); const serializedState = kanblendar.serialize();
localStorage.setItem('kanblendarState', serializedState); localStorage.setItem('kanblendarState', serializedState);
@ -16,7 +43,6 @@ document.addEventListener('DOMContentLoaded', () => {
kanblendar.deserialize(serializedState); kanblendar.deserialize(serializedState);
console.log('State loaded on page load!'); console.log('State loaded on page load!');
} }
}); });
function clearState() { function clearState() {