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
26
example.css
26
example.css
|
|
@ -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 {
|
||||||
|
|
@ -59,4 +75,4 @@ footer a {
|
||||||
.footer-right {
|
.footer-right {
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
52
example.html
52
example.html
|
|
@ -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>
|
||||||
|
|
|
||||||
34
example.js
34
example.js
|
|
@ -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,15 +43,14 @@ 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() {
|
||||||
if (!confirm('Are you sure you want to clear the state?')) {
|
if (!confirm('Are you sure you want to clear the state?')) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
localStorage.removeItem('kanblendarState');
|
localStorage.removeItem('kanblendarState');
|
||||||
console.log('State cleared!');
|
console.log('State cleared!');
|
||||||
document.location.reload();
|
document.location.reload();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue