percoandClaude Sonnet 4.6
7790375c01
Deploy HouseHub / deploy (push) Successful in 2s
- Rewrite todo.php with correct element IDs matching todo.js - Fix sidebar: fully dynamic rendering (no more static nav items) - Fix quick-add: list selector added, Enter key works correctly - Fix modals: todo-form-*, list-form-name, list-icon-opts IDs - Fix overdue filter missing from API (list_id=overdue) - Add settings modal (⚙️) with Discord webhook URL field - Add settings action in API (GET/PUT via pf_notes table) - Discord webhook: notify on task create and task done Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
366 lines
17 KiB
JavaScript
366 lines
17 KiB
JavaScript
// HouseHub — Todo module
|
|
const API = '/modules/todo/api.php';
|
|
|
|
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
|
function escHtml(s){const d=document.createElement('div');d.textContent=String(s??'');return d.innerHTML;}
|
|
function fmtDate(d){if(!d)return null;const dt=new Date(d+'T00:00:00');return dt.toLocaleDateString('fr-FR',{day:'2-digit',month:'2-digit'});}
|
|
function isToday(d){if(!d)return false;return d===new Date().toISOString().slice(0,10);}
|
|
function isOverdue(d){if(!d)return false;return d<new Date().toISOString().slice(0,10);}
|
|
function toast(msg,type='success'){
|
|
const c=document.getElementById('todo-toasts');
|
|
const t=document.createElement('div');t.className='todo-toast'+(type==='error'?' error':'');
|
|
t.textContent=msg;c.appendChild(t);setTimeout(()=>t.remove(),3000);
|
|
}
|
|
async function api(action,method='GET',data=null,extra=''){
|
|
const opts={method,headers:{}};
|
|
if(data){opts.headers['Content-Type']='application/json';opts.body=JSON.stringify(data);}
|
|
const r=await fetch(API+'?action='+action+extra,opts);
|
|
const j=await r.json();
|
|
if(!j.ok)throw new Error(j.error||'Erreur');
|
|
return j.data;
|
|
}
|
|
|
|
// ─── State ───────────────────────────────────────────────────────────────────
|
|
let currentFilter='all';
|
|
let showDone=false;
|
|
let lists=[];
|
|
let editTodoId=null;
|
|
let editListId=null;
|
|
let selectedPriority='none';
|
|
let selectedColor='#3b82f6';
|
|
let selectedIcon='📋';
|
|
|
|
const COLORS=['#3b82f6','#10b981','#f59e0b','#ef4444','#8b5cf6','#ec4899','#06b6d4','#84cc16','#f97316','#64748b'];
|
|
const ICONS=['📋','🏠','🛒','💼','💪','🎯','📚','✈️','🎮','❤️','⭐','🔧'];
|
|
|
|
// ─── Sidebar ─────────────────────────────────────────────────────────────────
|
|
async function loadSidebar(){
|
|
try{
|
|
const[data,stats]=await Promise.all([api('lists'),api('stats')]);
|
|
lists=data;
|
|
const el=document.getElementById('todo-sidebar-lists');
|
|
|
|
let html=`
|
|
<div class="todo-nav-section">Vues</div>
|
|
<div class="todo-nav-item${currentFilter==='all'?' active':''}" onclick="setFilter('all')">
|
|
<span>📋</span> Toutes
|
|
<span class="todo-nav-badge">${stats.pending||0}</span>
|
|
</div>
|
|
<div class="todo-nav-item${currentFilter==='today'?' active':''}" onclick="setFilter('today')">
|
|
<span>☀️</span> Aujourd'hui
|
|
<span class="todo-nav-badge${parseInt(stats.today)>0?' urgent':''}">${stats.today||0}</span>
|
|
</div>
|
|
<div class="todo-nav-item${currentFilter==='upcoming'?' active':''}" onclick="setFilter('upcoming')">
|
|
<span>📅</span> À venir
|
|
</div>`;
|
|
if(parseInt(stats.overdue)>0){
|
|
html+=`<div class="todo-nav-item${currentFilter==='overdue'?' active':''}" onclick="setFilter('overdue')">
|
|
<span>⚠️</span> En retard
|
|
<span class="todo-nav-badge urgent">${stats.overdue}</span>
|
|
</div>`;
|
|
}
|
|
html+=`<div class="todo-nav-item${currentFilter==='done'?' active':''}" onclick="setFilter('done')">
|
|
<span>✅</span> Terminées
|
|
<span class="todo-nav-badge">${stats.done||0}</span>
|
|
</div>`;
|
|
|
|
html+=`<div class="todo-nav-section" style="display:flex;align-items:center;justify-content:space-between;padding-right:.75rem">
|
|
Listes <button class="btn btn-ghost btn-icon btn-sm" onclick="openListModal()" title="Nouvelle liste" style="padding:.1rem .3rem;font-size:.85rem">+</button>
|
|
</div>`;
|
|
lists.forEach(l=>{
|
|
const act=currentFilter==='list_'+l.id?' active':'';
|
|
html+=`<div class="todo-nav-item${act}" onclick="setFilter('list_${l.id}')">
|
|
<span class="todo-list-dot" style="background:${escHtml(l.color)}"></span>
|
|
<span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escHtml(l.icon)} ${escHtml(l.name)}</span>
|
|
<span class="todo-nav-badge">${l.pending||0}</span>
|
|
<button class="btn btn-ghost btn-icon" onclick="event.stopPropagation();openListModal(${l.id})" title="Modifier" style="opacity:.5;padding:.1rem .2rem;font-size:.8rem">✏️</button>
|
|
</div>`;
|
|
});
|
|
|
|
el.innerHTML=html;
|
|
}catch(e){console.error(e);}
|
|
}
|
|
|
|
function setFilter(f){
|
|
currentFilter=f;showDone=f==='done';
|
|
loadSidebar();loadTodos();
|
|
}
|
|
|
|
// ─── Todo list ────────────────────────────────────────────────────────────────
|
|
async function loadTodos(){
|
|
try{
|
|
let extra='';
|
|
if(currentFilter==='all')extra='';
|
|
else if(currentFilter==='done')extra='&list_id=done&show_done=1';
|
|
else if(currentFilter==='today')extra='&list_id=today';
|
|
else if(currentFilter==='upcoming')extra='&list_id=upcoming';
|
|
else if(currentFilter==='overdue')extra='&list_id=overdue';
|
|
else if(currentFilter.startsWith('list_'))extra='&list_id='+currentFilter.slice(5);
|
|
if(showDone&¤tFilter!=='done')extra+='&show_done=1';
|
|
|
|
const todos=await api('todos','GET',null,extra);
|
|
renderTodos(todos);
|
|
updateQuickAddList();
|
|
updateHeader();
|
|
}catch(e){toast(e.message,'error');}
|
|
}
|
|
|
|
function updateHeader(){
|
|
const el=document.getElementById('todo-header-title');
|
|
if(!el)return;
|
|
const map={all:'Toutes les tâches',today:"Aujourd'hui",upcoming:'À venir',done:'Tâches terminées',overdue:'En retard'};
|
|
if(map[currentFilter]){el.textContent=map[currentFilter];return;}
|
|
if(currentFilter.startsWith('list_')){
|
|
const l=lists.find(x=>x.id==currentFilter.slice(5));
|
|
el.textContent=l?(l.icon+' '+l.name):'Liste';
|
|
}
|
|
}
|
|
|
|
function updateQuickAddList(){
|
|
const sel=document.getElementById('quick-add-list');
|
|
if(!sel)return;
|
|
sel.innerHTML='<option value="">Sans liste</option>'+
|
|
lists.map(l=>`<option value="${l.id}">${escHtml(l.icon)} ${escHtml(l.name)}</option>`).join('');
|
|
if(currentFilter.startsWith('list_'))sel.value=currentFilter.slice(5);
|
|
}
|
|
|
|
function toggleShowDone(){
|
|
showDone=!showDone;
|
|
const btn=document.getElementById('show-done-btn');
|
|
if(btn)btn.innerHTML=showDone?'🙈 Masquer terminées':'👁 Afficher terminées';
|
|
loadTodos();
|
|
}
|
|
|
|
function renderTodos(todos){
|
|
const el=document.getElementById('todo-list');
|
|
if(!todos.length){
|
|
el.innerHTML=`<div class="todo-empty"><div class="icon">${currentFilter==='done'?'✅':'📋'}</div>
|
|
<p>${currentFilter==='done'?'Aucune tâche terminée.':'Aucune tâche pour le moment.'}</p></div>`;
|
|
return;
|
|
}
|
|
const pending=todos.filter(t=>!parseInt(t.done));
|
|
const done=todos.filter(t=>parseInt(t.done));
|
|
let html='';
|
|
pending.forEach(t=>{html+=todoItemHtml(t);});
|
|
if(done.length&&showDone){
|
|
html+=`<div class="todo-group-label">Terminées (${done.length})</div>`;
|
|
done.forEach(t=>{html+=todoItemHtml(t);});
|
|
}else if(done.length&&!showDone&¤tFilter!=='done'){
|
|
html+=`<div style="padding:.5rem 0"><button class="show-done-btn" onclick="showDone=true;loadTodos()">
|
|
✅ Afficher ${done.length} tâche${done.length>1?'s':''} terminée${done.length>1?'s':''}</button></div>`;
|
|
}
|
|
el.innerHTML=html;
|
|
}
|
|
|
|
function todoItemHtml(t){
|
|
const isDone=parseInt(t.done);
|
|
const checkClass='todo-check'+(isDone?' checked':'');
|
|
const itemClass='todo-item'+(isDone?' done':'');
|
|
const dueCls=isOverdue(t.due_date)&&!isDone?' overdue':isToday(t.due_date)&&!isDone?' today':'';
|
|
const dueLabel=t.due_date?(isToday(t.due_date)?'Aujourd\'hui':isOverdue(t.due_date)?'En retard '+fmtDate(t.due_date):fmtDate(t.due_date)):null;
|
|
const priBadge=t.priority&&t.priority!=='none'?
|
|
`<span class="todo-priority-badge pri-${t.priority}">${t.priority==='high'?'Urgent':t.priority==='medium'?'Normal':'Bas'}</span>`:'';
|
|
const listBadge=t.list_name?
|
|
`<span class="todo-list-badge" style="background:${escHtml(t.list_color||'#3b82f6')}22;color:${escHtml(t.list_color||'#3b82f6')}">${escHtml(t.list_icon||'')} ${escHtml(t.list_name)}</span>`:'';
|
|
return `<div class="${itemClass}" data-id="${t.id}" data-priority="${escHtml(t.priority||'none')}">
|
|
<div class="${checkClass}" onclick="toggleDone(event,${t.id},${isDone?0:1})"></div>
|
|
<div class="todo-content" onclick="openEditTodo(${t.id})">
|
|
<div class="todo-title">${escHtml(t.title)}</div>
|
|
${t.notes?`<div class="todo-notes-preview">${escHtml(t.notes)}</div>`:''}
|
|
<div class="todo-meta">
|
|
${dueLabel?`<span class="todo-due${dueCls}">📅 ${escHtml(dueLabel)}</span>`:''}
|
|
${priBadge}${listBadge}
|
|
</div>
|
|
</div>
|
|
<div class="todo-item-actions">
|
|
<button class="btn btn-ghost btn-icon" onclick="openEditTodo(${t.id})" title="Modifier">✏️</button>
|
|
<button class="btn btn-ghost btn-icon" onclick="deleteTodo(event,${t.id})" title="Supprimer">🗑️</button>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
async function toggleDone(e,id,done){
|
|
e.stopPropagation();
|
|
try{
|
|
await api('todos','PUT',{done:done===1},'&id='+id);
|
|
const item=document.querySelector(`.todo-item[data-id="${id}"]`);
|
|
if(item){
|
|
const check=item.querySelector('.todo-check');
|
|
check.classList.add('just-done');
|
|
setTimeout(()=>{check.classList.remove('just-done');loadTodos();loadSidebar();},300);
|
|
}
|
|
}catch(e){toast(e.message,'error');}
|
|
}
|
|
|
|
async function deleteTodo(e,id){
|
|
e.stopPropagation();
|
|
if(!confirm('Supprimer cette tâche ?'))return;
|
|
try{await api('todos','DELETE',null,'&id='+id);toast('Supprimée');loadTodos();loadSidebar();}
|
|
catch(e){toast(e.message,'error');}
|
|
}
|
|
|
|
// ─── Quick add ────────────────────────────────────────────────────────────────
|
|
async function quickAdd(e){
|
|
if(e.key!=='Enter')return;
|
|
const inp=document.getElementById('quick-add-input');
|
|
const title=inp.value.trim();
|
|
if(!title)return;
|
|
const listSel=document.getElementById('quick-add-list');
|
|
try{
|
|
await api('todos','POST',{title,list_id:listSel?.value||null,priority:'none'});
|
|
inp.value='';toast('Tâche ajoutée ✓');loadTodos();loadSidebar();
|
|
}catch(e){toast(e.message,'error');}
|
|
}
|
|
|
|
// ─── Todo modal ───────────────────────────────────────────────────────────────
|
|
function openAddTodo(){
|
|
editTodoId=null;
|
|
document.getElementById('todo-modal-title').textContent='Nouvelle tâche';
|
|
document.getElementById('todo-form-title').value='';
|
|
document.getElementById('todo-form-notes').value='';
|
|
document.getElementById('todo-form-due').value='';
|
|
document.getElementById('todo-delete-btn').style.display='none';
|
|
const sel=document.getElementById('todo-form-list');
|
|
sel.innerHTML='<option value="">— Aucune —</option>'+lists.map(l=>`<option value="${l.id}">${escHtml(l.icon)} ${escHtml(l.name)}</option>`).join('');
|
|
if(currentFilter.startsWith('list_'))sel.value=currentFilter.slice(5);
|
|
setPriority('none');
|
|
openModal('todo-modal');
|
|
setTimeout(()=>document.getElementById('todo-form-title').focus(),50);
|
|
}
|
|
|
|
async function openEditTodo(id){
|
|
editTodoId=id;
|
|
try{
|
|
const all=await api('todos','GET',null,'&show_done=1');
|
|
const t=all.find(x=>x.id==id);
|
|
if(!t)return;
|
|
document.getElementById('todo-modal-title').textContent='Modifier la tâche';
|
|
document.getElementById('todo-form-title').value=t.title;
|
|
document.getElementById('todo-form-notes').value=t.notes||'';
|
|
document.getElementById('todo-form-due').value=t.due_date||'';
|
|
document.getElementById('todo-delete-btn').style.display='';
|
|
const sel=document.getElementById('todo-form-list');
|
|
sel.innerHTML='<option value="">— Aucune —</option>'+lists.map(l=>`<option value="${l.id}">${escHtml(l.icon)} ${escHtml(l.name)}</option>`).join('');
|
|
sel.value=t.list_id||'';
|
|
setPriority(t.priority||'none');
|
|
openModal('todo-modal');
|
|
}catch(e){toast(e.message,'error');}
|
|
}
|
|
|
|
function setPriority(p){
|
|
selectedPriority=p;
|
|
document.querySelectorAll('.priority-opt').forEach(el=>{
|
|
el.className='priority-opt';
|
|
if(el.dataset.p===p)el.classList.add('sel-'+p);
|
|
});
|
|
}
|
|
|
|
async function saveTodo(){
|
|
const title=document.getElementById('todo-form-title').value.trim();
|
|
if(!title){toast('Titre requis','error');return;}
|
|
const data={
|
|
title,
|
|
notes:document.getElementById('todo-form-notes').value||null,
|
|
due_date:document.getElementById('todo-form-due').value||null,
|
|
list_id:document.getElementById('todo-form-list').value||null,
|
|
priority:selectedPriority
|
|
};
|
|
try{
|
|
if(editTodoId){await api('todos','PUT',data,'&id='+editTodoId);toast('Tâche mise à jour');}
|
|
else{await api('todos','POST',data);toast('Tâche ajoutée ✓');}
|
|
closeModal('todo-modal');loadTodos();loadSidebar();
|
|
}catch(e){toast(e.message,'error');}
|
|
}
|
|
|
|
async function deleteTodoFromModal(){
|
|
if(!editTodoId||!confirm('Supprimer cette tâche ?'))return;
|
|
try{await api('todos','DELETE',null,'&id='+editTodoId);closeModal('todo-modal');toast('Supprimée');loadTodos();loadSidebar();}
|
|
catch(e){toast(e.message,'error');}
|
|
}
|
|
|
|
// ─── List modal ───────────────────────────────────────────────────────────────
|
|
function openListModal(id=null){
|
|
editListId=id;
|
|
let list=id?lists.find(l=>l.id==id):null;
|
|
document.getElementById('list-modal-title').textContent=id?'Modifier la liste':'Nouvelle liste';
|
|
document.getElementById('list-form-name').value=list?.name||'';
|
|
document.getElementById('list-delete-btn').style.display=id?'':'none';
|
|
selectedColor=list?.color||'#3b82f6';
|
|
selectedIcon=list?.icon||'📋';
|
|
|
|
document.getElementById('list-color-swatches').innerHTML=COLORS.map(c=>
|
|
`<div class="color-swatch${c===selectedColor?' selected':''}" style="background:${c}" onclick="selectColor('${c}')"></div>`).join('');
|
|
|
|
document.getElementById('list-icon-opts').innerHTML=ICONS.map(i=>
|
|
`<button type="button" class="btn btn-sm btn-secondary${i===selectedIcon?' ':''}" onclick="selectIcon(this,'${i}')"
|
|
style="${i===selectedIcon?'background:#eff6ff;border-color:var(--primary)':''}">${i}</button>`).join('');
|
|
|
|
openModal('list-modal');
|
|
}
|
|
|
|
function selectColor(c){
|
|
selectedColor=c;
|
|
document.querySelectorAll('.color-swatch').forEach(s=>{
|
|
const hex=rgbToHex(s.style.background);
|
|
s.classList.toggle('selected',hex===c||s.style.background===c);
|
|
});
|
|
}
|
|
|
|
function rgbToHex(rgb){
|
|
const m=rgb.match(/\d+/g);if(!m||m.length<3)return rgb;
|
|
return '#'+m.slice(0,3).map(x=>parseInt(x).toString(16).padStart(2,'0')).join('');
|
|
}
|
|
|
|
function selectIcon(btn,icon){
|
|
selectedIcon=icon;
|
|
document.querySelectorAll('#list-icon-opts button').forEach(b=>{b.style.background='';b.style.borderColor='';});
|
|
btn.style.background='#eff6ff';btn.style.borderColor='var(--primary)';
|
|
}
|
|
|
|
async function saveList(){
|
|
const name=document.getElementById('list-form-name').value.trim();
|
|
if(!name){toast('Nom requis','error');return;}
|
|
const data={name,color:selectedColor,icon:selectedIcon};
|
|
try{
|
|
if(editListId){await api('lists','PUT',data,'&id='+editListId);}
|
|
else{await api('lists','POST',data);}
|
|
closeModal('list-modal');toast(editListId?'Liste mise à jour':'Liste créée ✓');
|
|
loadSidebar();
|
|
}catch(e){toast(e.message,'error');}
|
|
}
|
|
|
|
async function deleteList(){
|
|
if(!editListId||!confirm('Supprimer la liste et toutes ses tâches ?'))return;
|
|
try{await api('lists','DELETE',null,'&id='+editListId);closeModal('list-modal');toast('Liste supprimée');setFilter('all');}
|
|
catch(e){toast(e.message,'error');}
|
|
}
|
|
|
|
// ─── Settings modal ───────────────────────────────────────────────────────────
|
|
async function openSettings(){
|
|
try{
|
|
const s=await api('settings');
|
|
document.getElementById('settings-webhook').value=s.webhook_discord||'';
|
|
openModal('settings-modal');
|
|
}catch(e){openModal('settings-modal');}
|
|
}
|
|
|
|
async function saveSettings(){
|
|
const webhook=document.getElementById('settings-webhook').value.trim();
|
|
try{
|
|
await api('settings','PUT',{webhook_discord:webhook});
|
|
toast('Paramètres enregistrés ✓');closeModal('settings-modal');
|
|
}catch(e){toast(e.message,'error');}
|
|
}
|
|
|
|
// ─── Modal helpers ────────────────────────────────────────────────────────────
|
|
function openModal(id){document.getElementById(id)?.classList.add('show');}
|
|
function closeModal(id){document.getElementById(id)?.classList.remove('show');}
|
|
|
|
// ─── Init ─────────────────────────────────────────────────────────────────────
|
|
document.addEventListener('DOMContentLoaded',()=>{
|
|
loadSidebar();
|
|
loadTodos();
|
|
document.getElementById('quick-add-input')?.addEventListener('keydown',quickAdd);
|
|
document.querySelectorAll('.todo-modal-backdrop').forEach(m=>m.addEventListener('click',e=>{if(e.target===m)m.classList.remove('show');}));
|
|
});
|