Initial commit: Project Tracker - Node.js + Express + SQLite backend, dark-themed frontend\n\n- Express REST API (GET/POST/PUT/DELETE /api/projects)\n- SQLite database with better-sqlite3\n- Dark-themed single-page UI with filter bar and drill-down panel\n- nginx reverse proxy config\n- Deployment script
This commit is contained in:
Ada
BIN
frontend/favicon.png
Normal file
BIN
frontend/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
684
frontend/index.html
Normal file
684
frontend/index.html
Normal file
@@ -0,0 +1,684 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Project Tracker</title>
|
||||
<link rel="icon" type="image/png" href="/favicon.png">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0d1117;
|
||||
--bg2: #161b22;
|
||||
--bg3: #21262d;
|
||||
--border: #30363d;
|
||||
--text: #e6edf3;
|
||||
--text2: #8b949e;
|
||||
--accent: #58a6ff;
|
||||
--green: #3fb950;
|
||||
--yellow: #d29922;
|
||||
--red: #f85149;
|
||||
--purple: #a371f7;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
header {
|
||||
background: var(--bg2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
header button {
|
||||
background: var(--accent);
|
||||
color: var(--bg);
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
header button:hover { opacity: 0.85; }
|
||||
|
||||
/* FILTER BAR */
|
||||
.filter-bar {
|
||||
padding: 0.75rem 1.5rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg2);
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-bar label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text2);
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
background: var(--bg3);
|
||||
color: var(--text2);
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.3rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background: var(--accent);
|
||||
color: var(--bg);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.filter-btn:hover:not(.active) { border-color: var(--text2); }
|
||||
|
||||
/* PROJECT LIST */
|
||||
.project-list {
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 0.875rem 1rem;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--bg3);
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.project-url {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text2);
|
||||
margin-top: 0.2rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.priority-badge {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.priority-High { background: #f851491a; color: var(--red); border: 1px solid #f8514930; }
|
||||
.priority-Med-High { background: #d299221a; color: var(--yellow); border: 1px solid #d2992230; }
|
||||
.priority-Medium { background: #a371f71a; color: var(--purple); border: 1px solid #a371f730; }
|
||||
.priority-Low { background: #3fb9501a; color: var(--green); border: 1px solid #3fb95030; }
|
||||
|
||||
.status-badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 12px;
|
||||
background: var(--bg3);
|
||||
color: var(--text2);
|
||||
border: 1px solid var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-Active { color: var(--green); border-color: #3fb95030; background: #3fb9501a; }
|
||||
.status-Backlog { color: var(--text2); }
|
||||
.status-On%20Hold { color: var(--yellow); border-color: #d2992230; background: #d299221a; }
|
||||
.status-Completed { color: var(--accent); border-color: #58a6ff30; background: #58a6ff1a; }
|
||||
|
||||
/* DETAIL PANEL (overlay) */
|
||||
.overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
z-index: 200;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.overlay.open { display: block; }
|
||||
|
||||
.detail-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 480px;
|
||||
max-width: 100vw;
|
||||
background: var(--bg2);
|
||||
border-left: 1px solid var(--border);
|
||||
z-index: 201;
|
||||
overflow-y: auto;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
.detail-panel.open { transform: translateX(0); }
|
||||
|
||||
.panel-header {
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--bg2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panel-header h2 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel-header .close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text2);
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.panel-header .close-btn:hover { color: var(--text); }
|
||||
|
||||
.panel-body {
|
||||
padding: 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.field { display: flex; flex-direction: column; gap: 0.35rem; }
|
||||
|
||||
.field label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.field .value {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.field .value.empty { color: var(--text2); font-style: italic; }
|
||||
|
||||
.field .value a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.field .value a:hover { text-decoration: underline; }
|
||||
|
||||
.field input, .field textarea, .field select {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
width: 100%;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.field input:focus, .field textarea:focus, .field select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.field textarea { resize: vertical; min-height: 80px; }
|
||||
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
border-top: 1px solid var(--border);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background: var(--bg2);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary { background: var(--accent); color: var(--bg); }
|
||||
.btn-danger { background: #f851491a; color: var(--red); border: 1px solid #f8514930; }
|
||||
.btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border); }
|
||||
.btn:hover { opacity: 0.85; }
|
||||
|
||||
/* NEW PROJECT MODAL */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
z-index: 300;
|
||||
backdrop-filter: blur(2px);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-overlay.open { display: flex; }
|
||||
|
||||
.modal {
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
width: 480px;
|
||||
max-width: 95vw;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header h2 { font-size: 1rem; font-weight: 600; }
|
||||
.modal-header .close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text2);
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.modal-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
|
||||
.modal-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); display: flex; gap: 0.5rem; justify-content: flex-end; }
|
||||
|
||||
/* REQUIRED ASTERISK */
|
||||
.required::after { content: ' *'; color: var(--red); }
|
||||
|
||||
/* TAGS */
|
||||
.tag {
|
||||
display: inline-block;
|
||||
background: var(--bg3);
|
||||
color: var(--text2);
|
||||
font-size: 0.7rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border);
|
||||
margin: 0.1rem;
|
||||
}
|
||||
|
||||
/* EMPTY STATE */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: var(--text2);
|
||||
}
|
||||
|
||||
.empty-state p { margin-top: 0.5rem; font-size: 0.9rem; }
|
||||
|
||||
/* META ROW */
|
||||
.meta-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.meta-row .field { flex: 1; }
|
||||
|
||||
/* LOADING */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--text2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Project Tracker</h1>
|
||||
<button onclick="openNewModal()">+ New Project</button>
|
||||
</header>
|
||||
|
||||
<div class="filter-bar">
|
||||
<label>Status:</label>
|
||||
<button class="filter-btn active" data-filter="all" onclick="setFilter('all')">All</button>
|
||||
<button class="filter-btn" data-filter="Active" onclick="setFilter('Active')">Active</button>
|
||||
<button class="filter-btn" data-filter="Backlog" onclick="setFilter('Backlog')">Backlog</button>
|
||||
<button class="filter-btn" data-filter="On Hold" onclick="setFilter('On Hold')">On Hold</button>
|
||||
<button class="filter-btn" data-filter="Completed" onclick="setFilter('Completed')">Completed</button>
|
||||
</div>
|
||||
|
||||
<div id="project-list" class="project-list">
|
||||
<div class="loading">Loading...</div>
|
||||
</div>
|
||||
|
||||
<!-- DETAIL PANEL -->
|
||||
<div class="overlay" id="detail-overlay" onclick="closeDetail()"></div>
|
||||
<div class="detail-panel" id="detail-panel">
|
||||
<div class="panel-header">
|
||||
<h2 id="panel-title">Project</h2>
|
||||
<button class="close-btn" onclick="closeDetail()">×</button>
|
||||
</div>
|
||||
<div class="panel-body" id="panel-body">
|
||||
<!-- fields injected by JS -->
|
||||
</div>
|
||||
<div class="panel-actions" id="panel-actions">
|
||||
<button class="btn btn-danger" onclick="deleteProject()">Delete</button>
|
||||
<button class="btn btn-primary" onclick="saveProject()">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NEW PROJECT MODAL -->
|
||||
<div class="modal-overlay" id="new-modal">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h2>New Project</h2>
|
||||
<button class="close-btn" onclick="closeNewModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="field">
|
||||
<label class="required">Name</label>
|
||||
<input type="text" id="new-name" placeholder="Project name">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="required">Priority</label>
|
||||
<select id="new-priority">
|
||||
<option value="">Select priority...</option>
|
||||
<option value="High">High</option>
|
||||
<option value="Med-High">Med-High</option>
|
||||
<option value="Medium">Medium</option>
|
||||
<option value="Low">Low</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>URL</label>
|
||||
<input type="url" id="new-url" placeholder="https://...">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Notes</label>
|
||||
<textarea id="new-notes" placeholder="Description, links, ideas..."></textarea>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<div class="field">
|
||||
<label>Status</label>
|
||||
<select id="new-status">
|
||||
<option value="Backlog">Backlog</option>
|
||||
<option value="Active">Active</option>
|
||||
<option value="On Hold">On Hold</option>
|
||||
<option value="Completed">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Owner</label>
|
||||
<input type="text" id="new-owner" placeholder="Ada">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Tags (comma-separated)</label>
|
||||
<input type="text" id="new-tags" placeholder="homelab, automation, ... ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" onclick="closeNewModal()">Cancel</button>
|
||||
<button class="btn btn-primary" onclick="createProject()">Create Project</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API = 'http://10.10.11.103/api';
|
||||
let projects = [];
|
||||
let currentFilter = 'all';
|
||||
let editingId = null;
|
||||
|
||||
async function loadProjects() {
|
||||
const el = document.getElementById('project-list');
|
||||
el.innerHTML = '<div class="loading">Loading...</div>';
|
||||
try {
|
||||
const res = await fetch(API + '/projects');
|
||||
projects = await res.json();
|
||||
render();
|
||||
} catch (e) {
|
||||
el.innerHTML = '<div class="empty-state"><strong>Cannot connect to API</strong><p>Is the backend running on 10.10.11.103:3000?</p></div>';
|
||||
}
|
||||
}
|
||||
|
||||
function setFilter(f) {
|
||||
currentFilter = f;
|
||||
document.querySelectorAll('.filter-btn').forEach(b => b.classList.toggle('active', b.dataset.filter === f));
|
||||
render();
|
||||
}
|
||||
|
||||
function render() {
|
||||
const el = document.getElementById('project-list');
|
||||
const filtered = currentFilter === 'all' ? projects : projects.filter(p => p.status === currentFilter);
|
||||
|
||||
if (filtered.length === 0) {
|
||||
el.innerHTML = `<div class="empty-state"><strong>No projects</strong><p>${currentFilter === 'all' ? 'Add your first project above.' : 'No projects with status "' + currentFilter + '".'}</p></div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
el.innerHTML = filtered.map(p => `
|
||||
<div class="project-card" onclick="openDetail(${p.id})">
|
||||
<div>
|
||||
<div class="project-name">${esc(p.name)}</div>
|
||||
${p.url ? `<div class="project-url">${esc(p.url)}</div>` : ''}
|
||||
</div>
|
||||
<span class="priority-badge priority-${esc(p.priority)}">${esc(p.priority)}</span>
|
||||
<span class="status-badge status-${encodeURIComponent(p.status)}">${esc(p.status)}</span>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function esc(s) {
|
||||
if (!s) return '';
|
||||
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||||
}
|
||||
|
||||
function getTagsHtml(tags) {
|
||||
if (!tags) return '';
|
||||
return tags.split(',').map(t => `<span class="tag">${esc(t.trim())}</span>`).join('');
|
||||
}
|
||||
|
||||
// DETAIL PANEL
|
||||
async function openDetail(id) {
|
||||
editingId = id;
|
||||
const p = projects.find(x => x.id === id);
|
||||
if (!p) return;
|
||||
|
||||
document.getElementById('panel-title').textContent = p.name;
|
||||
document.getElementById('panel-body').innerHTML = `
|
||||
<div class="field">
|
||||
<label class="required">Name</label>
|
||||
<input type="text" id="edit-name" value="${esc(p.name)}">
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<div class="field">
|
||||
<label class="required">Priority</label>
|
||||
<select id="edit-priority">
|
||||
${['High','Med-High','Medium','Low'].map(x => `<option value="${x}" ${p.priority===x?'selected':''}>${x}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Status</label>
|
||||
<select id="edit-status">
|
||||
${['Active','Backlog','On Hold','Completed'].map(x => `<option value="${x}" ${p.status===x?'selected':''}>${x}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>URL</label>
|
||||
<input type="url" id="edit-url" value="${esc(p.url || '')}" placeholder="https://...">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Notes</label>
|
||||
<textarea id="edit-notes">${esc(p.notes || '')}</textarea>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<div class="field">
|
||||
<label>Owner</label>
|
||||
<input type="text" id="edit-owner" value="${esc(p.owner || 'Ada')}">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Tags</label>
|
||||
<input type="text" id="edit-tags" value="${esc(p.tags || '')}" placeholder="comma-separated">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Created</label>
|
||||
<div class="value">${p.created_at ? new Date(p.created_at).toLocaleString() : '—'}</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Tags</label>
|
||||
<div class="value">${p.tags ? getTagsHtml(p.tags) : '<span class="empty">none</span>'}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('detail-overlay').classList.add('open');
|
||||
document.getElementById('detail-panel').classList.add('open');
|
||||
}
|
||||
|
||||
function closeDetail() {
|
||||
document.getElementById('detail-overlay').classList.remove('open');
|
||||
document.getElementById('detail-panel').classList.remove('open');
|
||||
editingId = null;
|
||||
}
|
||||
|
||||
async function saveProject() {
|
||||
const name = document.getElementById('edit-name').value.trim();
|
||||
const priority = document.getElementById('edit-priority').value;
|
||||
if (!name || !priority) { alert('Name and Priority are required.'); return; }
|
||||
|
||||
const body = {
|
||||
name,
|
||||
priority,
|
||||
url: document.getElementById('edit-url').value.trim(),
|
||||
notes: document.getElementById('edit-notes').value.trim(),
|
||||
status: document.getElementById('edit-status').value,
|
||||
owner: document.getElementById('edit-owner').value.trim() || 'Ada',
|
||||
tags: document.getElementById('edit-tags').value.trim()
|
||||
};
|
||||
|
||||
try {
|
||||
await fetch(API + '/projects/' + editingId, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
closeDetail();
|
||||
loadProjects();
|
||||
} catch (e) { alert('Error saving: ' + e.message); }
|
||||
}
|
||||
|
||||
async function deleteProject() {
|
||||
if (!confirm('Delete this project?')) return;
|
||||
try {
|
||||
await fetch(API + '/projects/' + editingId, { method: 'DELETE' });
|
||||
closeDetail();
|
||||
loadProjects();
|
||||
} catch (e) { alert('Error deleting: ' + e.message); }
|
||||
}
|
||||
|
||||
// NEW PROJECT MODAL
|
||||
function openNewModal() {
|
||||
document.getElementById('new-name').value = '';
|
||||
document.getElementById('new-priority').value = '';
|
||||
document.getElementById('new-url').value = '';
|
||||
document.getElementById('new-notes').value = '';
|
||||
document.getElementById('new-status').value = 'Backlog';
|
||||
document.getElementById('new-owner').value = 'Ada';
|
||||
document.getElementById('new-tags').value = '';
|
||||
document.getElementById('new-modal').classList.add('open');
|
||||
}
|
||||
|
||||
function closeNewModal() {
|
||||
document.getElementById('new-modal').classList.remove('open');
|
||||
}
|
||||
|
||||
async function createProject() {
|
||||
const name = document.getElementById('new-name').value.trim();
|
||||
const priority = document.getElementById('new-priority').value;
|
||||
if (!name || !priority) { alert('Name and Priority are required.'); return; }
|
||||
|
||||
const body = {
|
||||
name,
|
||||
priority,
|
||||
url: document.getElementById('new-url').value.trim(),
|
||||
notes: document.getElementById('new-notes').value.trim(),
|
||||
status: document.getElementById('new-status').value,
|
||||
owner: document.getElementById('new-owner').value.trim() || 'Ada',
|
||||
tags: document.getElementById('new-tags').value.trim()
|
||||
};
|
||||
|
||||
try {
|
||||
await fetch(API + '/projects', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
closeNewModal();
|
||||
loadProjects();
|
||||
} catch (e) { alert('Error creating: ' + e.message); }
|
||||
}
|
||||
|
||||
// Close modals on ESC
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.key === 'Escape') { closeDetail(); closeNewModal(); }
|
||||
});
|
||||
|
||||
loadProjects();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user