diff --git a/public/index.html b/public/index.html
index 9d47748..c188d18 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,41 +3,46 @@
-Priority Horizon
+CLAWRIZON
@@ -171,10 +222,20 @@ async function api(path, opts = {}) {
function createNoteEl(note, colKey) {
const el = document.createElement('div');
- el.className = 'note';
+ el.className = 'note' + (note.done ? ' done' : '');
el.draggable = true;
el.dataset.id = note.id;
+ const check = document.createElement('input');
+ check.type = 'checkbox';
+ check.className = 'note-check';
+ check.checked = !!note.done;
+ check.addEventListener('change', async () => {
+ const done = check.checked;
+ el.classList.toggle('done', done);
+ await api('/notes/' + note.id, { method: 'PATCH', body: { done } });
+ });
+
const text = document.createElement('div');
text.className = 'note-text';
text.contentEditable = true;
@@ -203,6 +264,7 @@ function createNoteEl(note, colKey) {
await api('/notes/' + note.id, { method: 'DELETE' });
};
+ el.appendChild(check);
el.appendChild(text);
el.appendChild(del);
@@ -254,7 +316,6 @@ async function render() {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
list.classList.add('drag-over');
- // Position indicator
const afterEl = getDragAfterElement(list, e.clientY);
const dragging = document.querySelector('.dragging');
if (dragging) {
@@ -267,7 +328,6 @@ async function render() {
e.preventDefault();
list.classList.remove('drag-over');
if (!dragItem) return;
- // Save new order
const items = [];
document.querySelectorAll('.notes-list').forEach(nl => {
const colKey = nl.dataset.column;
@@ -302,7 +362,7 @@ function getDragAfterElement(container, y) {
let touchDragEl = null, touchClone = null, touchStartY = 0, touchStartX = 0;
document.addEventListener('touchstart', e => {
const note = e.target.closest('.note');
- if (!note || e.target.closest('.note-text:focus') || e.target.closest('.note-delete')) return;
+ if (!note || e.target.closest('.note-text:focus') || e.target.closest('.note-delete') || e.target.closest('.note-check')) return;
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
touchDragEl = note;
@@ -314,7 +374,7 @@ document.addEventListener('touchmove', e => {
const dy = e.touches[0].clientY - touchStartY;
if (!touchClone && (Math.abs(dx) > 10 || Math.abs(dy) > 10)) {
touchClone = touchDragEl.cloneNode(true);
- touchClone.style.cssText = 'position:fixed;pointer-events:none;z-index:1000;opacity:0.8;width:' + touchDragEl.offsetWidth + 'px;transform:rotate(2deg);';
+ touchClone.style.cssText = 'position:fixed;pointer-events:none;z-index:1000;opacity:0.8;width:' + touchDragEl.offsetWidth + 'px;transform:rotate(1deg);';
document.body.appendChild(touchClone);
touchDragEl.style.opacity = '0.3';
}
@@ -330,8 +390,6 @@ document.addEventListener('touchend', async e => {
const x = e.changedTouches[0].clientX, y = e.changedTouches[0].clientY;
touchClone.remove(); touchClone = null;
touchDragEl.style.opacity = '1';
-
- // Find target column
const lists = document.querySelectorAll('.notes-list');
let targetList = null;
lists.forEach(l => {
@@ -342,7 +400,6 @@ document.addEventListener('touchend', async e => {
const afterEl = getDragAfterElement(targetList, y);
if (afterEl) targetList.insertBefore(touchDragEl, afterEl);
else targetList.appendChild(touchDragEl);
- // Save
const items = [];
document.querySelectorAll('.notes-list').forEach(nl => {
nl.querySelectorAll('.note').forEach((n, i) => {