View Code - 20260722

« Back to History

tasks.php | 20260722_120325.php Initial Domain Snapshot

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

require_once __DIR__ . '/modules/auth/page_acl.php';
$ctx = page_require_access('tasks');

$pdo        = $ctx['pdo'];
$company_id = (int)$ctx['company_id'];
$user_id    = (int)($ctx['user']['id'] ?? 0);

require_once __DIR__ . '/partials/header.php';

function h($s){ return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'); }
?>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0">Tasks</h2>
  </div>

<div class="row g-2 mb-3">
        <div class="col-md-8">
          <input id="task-input" type="text"
                 class="form-control"
                 placeholder="Add new task...">
        </div>
        <div class="col-md-2 d-grid">
          <button id="task-add" class="btn btn-primary">
            Add
          </button>
        </div>
        <div class="col-md-2 d-grid">
          <button id="task-clear" class="btn btn-danger">
            Clear Done
          </button>
        </div>
      </div>

<ul id="task-list" class="list-group list-group-flush"></ul>

</div>
  </div>

</div>

const input   = document.getElementById('task-input');
const addBtn  = document.getElementById('task-add');
const listEl  = document.getElementById('task-list');
const clearBtn= document.getElementById('task-clear');

function fetchTasks(){
  fetch(API)
    .then(r=>r.json())
    .then(render);
}

function render(tasks){
  listEl.innerHTML='';

if(!tasks.length){
    listEl.innerHTML =
      '<li class="list-group-item text-muted text-center">No tasks yet.</li>';
    return;
  }

tasks.forEach(t=>{
    const li=document.createElement('li');
    li.className='list-group-item d-flex align-items-center justify-content-between';

const left=document.createElement('div');
    left.className='d-flex align-items-center gap-3 flex-grow-1';

const cb=document.createElement('input');
    cb.type='checkbox';
    cb.className='form-check-input';
    cb.checked=!!t.is_done;
    cb.onchange=()=>updateTask(t.id,cb.checked);

const span=document.createElement('span');
    span.textContent=t.task_text;
    span.className='flex-grow-1';
    if(t.is_done){
      span.classList.add('text-decoration-line-through','text-muted');
    }

span.ondblclick=()=>{
      const v=prompt('Edit task',t.task_text);
      if(v) editTask(t.id,v);
    };

left.append(cb,span);

const del=document.createElement('button');
    del.className='btn btn-sm btn-outline-danger';
    del.textContent='Delete';
    del.onclick=()=>deleteTask(t.id);

li.append(left,del);
    listEl.appendChild(li);
  });
}

function addTask(){
  const v=input.value.trim();
  if(!v) return;

fetch(API,{
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify({action:'add',text:v})
  }).then(fetchTasks);

input.value='';
}

function updateTask(id,done){
  fetch(API,{
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify({action:'toggle',id,done})
  }).then(fetchTasks);
}

function editTask(id,text){
  fetch(API,{
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify({action:'edit',id,text})
  }).then(fetchTasks);
}

function deleteTask(id){
  if(!confirm('Delete task?')) return;

fetch(API,{
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify({action:'delete',id})
  }).then(fetchTasks);
}

clearBtn.onclick=()=>{
  fetch(API,{
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify({action:'clear_done'})
  }).then(fetchTasks);
};

addBtn.onclick=addTask;
input.onkeydown=e=>{ if(e.key==='Enter') addTask(); };

fetchTasks();
</script>

<?php require_once __DIR__ . '/partials/footer.php'; ?>