Spaces:

Wathuta
/

taskflow-calendar-commander

Running

Using the description below and the attached file create a site.

0ba5d77 verified about 1 year ago

11.1 kB

// Global variables
let currentDateRange = 'this-week';
let selectedCells = new Set();
let isCommandPanelOpen = false;
let teamMembers = [
    { 
        id: 'alice', 
        name: 'Alice Smith', 
        avatar: 'http://static.photos/people/200x200/1', 
        capacity: 8,
        role: 'Frontend Developer',
        status: 'available'
    },
    { 
        id: 'bob', 
        name: 'Bob Wilson', 
        avatar: 'http://static.photos/people/200x200/2', 
        capacity: 6,
        role: 'Backend Developer',
        status: 'available'
    },
    { 
        id: 'charlie', 
        name: 'Charlie Brown', 
        avatar: 'http://static.photos/people/200x200/3', 
        capacity: 8,
        role: 'QA Engineer',
        status: 'available'
    },
    { 
        id: 'diana', 
        name: 'Diana Prince', 
        avatar: 'http://static.photos/people/200x200/4', 
        capacity: 7,
        role: 'Product Manager',
        status: 'available'
    }
];

// Column management
let columnOrder = teamMembers.map(member => member.id);
let columnWidths = {};
teamMembers.forEach(member => {
    columnWidths[member.id] = 200; // Default width
});
let tasks = [
    { id: 1, title: 'API Integration', assignee: 'alice', date: getDateString(new Date()), status: 'in-progress', priority: 'high', timeEstimate: 4, links: 2 },
    { id: 2, title: 'Database Migration', assignee: 'bob', date: getDateString(new Date()), status: 'not-started', priority: 'medium', timeEstimate: 6, links: 0 },
    { id: 3, title: 'Frontend Refactor', assignee: 'charlie', date: getDateString(new Date()), status: 'complete', priority: 'low', timeEstimate: 8, links: 1 },
    { id: 4, title: 'Security Audit', assignee: 'diana', date: getDateString(new Date()), status: 'blocked', priority: 'high', timeEstimate: 3, links: 3 }
];

// Sprint boundaries
let sprintBoundaries = [
    { name: 'Sprint 1', start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 14)) }
];
// Utility functions
function getDateString(date) {
    return date.toISOString().split('T')[0];
}

function formatDateDisplay(date) {
    const options = { weekday: 'short', month: 'numeric', day: 'numeric' };
    return date.toLocaleDateString('en-US', options);
}

function getDateRange(rangeType) {
    const today = new Date();
    const start = new Date(today);
    const end = new Date(today);
    
    switch(rangeType) {
        case 'this-week':
            start.setDate(today.getDate() - today.getDay() + 1);
            end.setDate(start.getDate() + 4);
            break;
        case 'next-2-weeks':
            start.setDate(today.getDate() - today.getDay() + 1);
            end.setDate(start.getDate() + 9);
            break;
        case 'this-quarter':
            const quarter = Math.floor(today.getMonth() / 3);
            start.setMonth(quarter * 3, 1);
            end.setMonth((quarter + 1) * 3, 0);
            break;
        default:
            start.setDate(today.getDate() - today.getDay() + 1);
            end.setDate(start.getDate() + 4);
    }
    
    return { start, end };
}

function generateDates(startDate, endDate) {
    const dates = [];
    const current = new Date(startDate);
    
    while (current <= endDate) {
        dates.push(new Date(current));
        current.setDate(current.getDate() + 1);
    }
    
    return dates;
}

// Calendar initialization
function initializeCalendar() {
    const calendarGrid = document.getElementById('calendar-grid');
    const { start, end } = getDateRange(currentDateRange);
    const dates = generateDates(start, end);
    // Create calendar structure
    let calendarHTML = `
        <div class="calendar-grid grid" style="
            grid-template-columns: 120px repeat(${teamMembers.length}, 200px) 180px;
            min-width: ${120 + (teamMembers.length * 200) + 180}px;
        ">
            <!-- Date Column Header -->
            <div class="sticky left-0 z-20 bg-gray-50 border-r border-gray-200 p-3 font-semibold text-gray-700">
                Date
            </div>
    `;
    // Team Member Column Headers
    teamMembers.forEach(member => {
        calendarHTML += `
            <div class="team-member-header bg-white border-r border-gray-200 p-3 flex items-center justify-between sticky top-0 z-10">
                <div class="flex items-center space-x-3">
                    <img src="${member.avatar}" alt="${member.name}" class="w-8 h-8 rounded-full">
                    <span class="font-semibold text-gray-800">${member.id}</span>
                </div>
                <button class="text-gray-400 hover:text-gray-600 transition-colors">
                    <i data-feather="x" class="w-4 h-4"></i>
                </button>
            </div>
        `;
    });
    // Milestone Column Header
    calendarHTML += `
        <div class="sticky right-0 z-20 bg-blue-50 border-l border-blue-200 p-3 font-semibold text-blue-800">
                Milestones
            </div>
        </div>
    `;
    // Date Rows
    dates.forEach((date, index) => {
        const dateStr = getDateString(date);
        const isWeekend = date.getDay() === 0 || date.getDay() === 6;
        const isSprintBoundary = sprintBoundaries.some(sprint => 
            getDateString(sprint.start) === dateStr || getDateString(sprint.end) === dateStr
        );
        
        // Add sprint boundary class if needed
        const rowClasses = isSprintBoundary ? 'sprint-boundary' : '';
        
        calendarHTML += `
            <!-- Date Cell -->
            <div class="sticky left-0 z-10 bg-gray-50 border-r border-gray-200 p-2 text-sm text-gray-600 ${isWeekend ? 'bg-gray-100' : ''} ${rowClasses}">
                ${formatDateDisplay(date)}
            </div>
        `;
        // Team Member Cells
        teamMembers.forEach(member => {
            const cellTasks = tasks.filter(task => 
                task.assignee === member.id && task.date === dateStr
            );
            
            calendarHTML += `
                <div class="cell bg-white border-r border-gray-200 p-1 min-h-16 relative ${isWeekend ? 'bg-gray-50' : ''} ${rowClasses}" 
                    data-date="${dateStr}" 
                    data-assignee="${member.id}"
                    onclick="handleCellClick(event, '${dateStr}', '${member.id}')"
                    ondragover="handleDragOver(event)"
                    ondrop="handleDrop(event, '${dateStr}', '${member.id}')"
                >
                    ${renderCellContent(cellTasks)}
                </div>
            `;
        });
        // Milestone Cell
        calendarHTML += `
            <div class="sticky right-0 z-10 bg-blue-50 border-l border-blue-200 p-2 ${isWeekend ? 'bg-blue-100' : ''} ${rowClasses}">
                    <!-- Milestone content -->
                </div>
            `;
    });
calendarGrid.innerHTML = calendarHTML;
    feather.replace();
}
function renderCellContent(cellTasks) {
    if (cellTasks.length === 0) return '';
    
    let content = '';
    const visibleTasks = cellTasks.slice(0, 3);
    const hiddenCount = cellTasks.length - 3;
    
    visibleTasks.forEach(task => {
        content += `
            <div class="task-item bg-white border border-gray-200 rounded p-1 mb-1 text-xs cursor-pointer" draggable="true"
                ondragstart="handleDragStart(event, ${task.id})"
            >
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-1">
                        <div class="status-indicator w-2 h-2 rounded-full status-${task.status}"></div>
                        <span class="task-title flex-1 truncate">${task.title}</span>
                    </div>
                </div>
                <div class="flex items-center justify-between mt-1">
                    <span class="time-estimate text-gray-500">${task.timeEstimate}h</span>
                    ${task.links > 0 ? `<span class="link-count text-blue-500">🔗 ${task.links}</span>` : ''}
                </div>
            </div>
        `;
    });
    if (hiddenCount > 0) {
        content += `
            <div class="more-indicator text-center text-gray-400 text-xs py-1">
                +${hiddenCount} more
            </div>
        `;
    }
return content;
}

// Event Handlers
function handleCellClick(event, date, assignee) {
    event.stopPropagation();
    
    const cell = event.currentTarget;
    const cellKey = `${date}-${assignee}`;
    
    if (event.ctrlKey || event.metaKey) {
        // Multi-select
        if (selectedCells.has(cellKey)) {
            selectedCells.delete(cellKey);
            cell.classList.remove('cell-selected');
        } else {
            selectedCells.add(cellKey);
            cell.classList.add('cell-selected');
        }
    } else if (event.shiftKey && selectedCells.size > 0) {
        // Range select
        // Implementation for range selection
    } else {
        // Single select
        clearCellSelection();
        selectedCells.add(cellKey);
        cell.classList.add('cell-selected');
    }
}

function clearCellSelection() {
    document.querySelectorAll('.cell').forEach(cell => {
        cell.classList.remove('cell-selected');
    });
    selectedCells.clear();
}

function handleDragStart(event, taskId) {
    event.dataTransfer.setData('text/plain', taskId.toString());
    event.currentTarget.classList.add('dragging');
}

function handleDragOver(event) {
    event.preventDefault();
    event.currentTarget.classList.add('drag-over-valid');
}

function handleDrop(event, date, assignee) {
    event.preventDefault();
    event.currentTarget.classList.remove('drag-over-valid', 'dragging');
    
    const taskId = parseInt(event.dataTransfer.getData('text/plain'));
    const task = tasks.find(t => t.id === taskId);
    
    if (task) {
        // Update task assignment and date
        task.assignee = assignee;
        task.date = date;
        initializeCalendar(); // Refresh calendar
    }
}

// Quick Add Button
document.getElementById('quick-add-btn')?.addEventListener('click', function() {
    // Open command panel with task creation template
    const commandPanel = document.querySelector('custom-command-panel');
    if (commandPanel && commandPanel.openPanel) {
        commandPanel.openPanel('task-create');
    }
});

// Keyboard shortcuts
document.addEventListener('keydown', function(event) {
    // Ctrl+K or Cmd+K to open command panel
    if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
        event.preventDefault();
        const commandPanel = document.querySelector('custom-command-panel');
        if (commandPanel && commandPanel.togglePanel) {
            commandPanel.togglePanel();
        }
    }
    
    // Escape to clear selection
    if (event.key === 'Escape') {
        clearCellSelection();
    }
});

// Export functions for web components
window.CalendarUtils = {
    getDateString,
    formatDateDisplay,
    getDateRange,
    generateDates,
    teamMembers,
    tasks,
    selectedCells,
    clearCellSelection
};


	// Global variables
	let currentDateRange = 'this-week';
	let selectedCells = new Set();
	let isCommandPanelOpen = false;
	let teamMembers = [
	{
	id: 'alice',
	name: 'Alice Smith',
	avatar: 'http://static.photos/people/200x200/1',
	capacity: 8,
	role: 'Frontend Developer',
	status: 'available'
	},
	{
	id: 'bob',
	name: 'Bob Wilson',
	avatar: 'http://static.photos/people/200x200/2',
	capacity: 6,
	role: 'Backend Developer',
	status: 'available'
	},
	{
	id: 'charlie',
	name: 'Charlie Brown',
	avatar: 'http://static.photos/people/200x200/3',
	capacity: 8,
	role: 'QA Engineer',
	status: 'available'
	},
	{
	id: 'diana',
	name: 'Diana Prince',
	avatar: 'http://static.photos/people/200x200/4',
	capacity: 7,
	role: 'Product Manager',
	status: 'available'
	}
	];

	// Column management
	let columnOrder = teamMembers.map(member => member.id);
	let columnWidths = {};
	teamMembers.forEach(member => {
	columnWidths[member.id] = 200; // Default width
	});
	let tasks = [
	{ id: 1, title: 'API Integration', assignee: 'alice', date: getDateString(new Date()), status: 'in-progress', priority: 'high', timeEstimate: 4, links: 2 },
	{ id: 2, title: 'Database Migration', assignee: 'bob', date: getDateString(new Date()), status: 'not-started', priority: 'medium', timeEstimate: 6, links: 0 },
	{ id: 3, title: 'Frontend Refactor', assignee: 'charlie', date: getDateString(new Date()), status: 'complete', priority: 'low', timeEstimate: 8, links: 1 },
	{ id: 4, title: 'Security Audit', assignee: 'diana', date: getDateString(new Date()), status: 'blocked', priority: 'high', timeEstimate: 3, links: 3 }
	];

	// Sprint boundaries
	let sprintBoundaries = [
	{ name: 'Sprint 1', start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 14)) }
	];
	// Utility functions
	function getDateString(date) {
	return date.toISOString().split('T')[0];
	}

	function formatDateDisplay(date) {
	const options = { weekday: 'short', month: 'numeric', day: 'numeric' };
	return date.toLocaleDateString('en-US', options);
	}

	function getDateRange(rangeType) {
	const today = new Date();
	const start = new Date(today);
	const end = new Date(today);

	switch(rangeType) {
	case 'this-week':
	start.setDate(today.getDate() - today.getDay() + 1);
	end.setDate(start.getDate() + 4);
	break;
	case 'next-2-weeks':
	start.setDate(today.getDate() - today.getDay() + 1);
	end.setDate(start.getDate() + 9);
	break;
	case 'this-quarter':
	const quarter = Math.floor(today.getMonth() / 3);
	start.setMonth(quarter * 3, 1);
	end.setMonth((quarter + 1) * 3, 0);
	break;
	default:
	start.setDate(today.getDate() - today.getDay() + 1);
	end.setDate(start.getDate() + 4);
	}

	return { start, end };
	}

	function generateDates(startDate, endDate) {
	const dates = [];
	const current = new Date(startDate);

	while (current <= endDate) {
	dates.push(new Date(current));
	current.setDate(current.getDate() + 1);
	}

	return dates;
	}

	// Calendar initialization
	function initializeCalendar() {
	const calendarGrid = document.getElementById('calendar-grid');
	const { start, end } = getDateRange(currentDateRange);
	const dates = generateDates(start, end);
	// Create calendar structure
	let calendarHTML = `
	<div class="calendar-grid grid" style="
	grid-template-columns: 120px repeat(${teamMembers.length}, 200px) 180px;
	min-width: ${120 + (teamMembers.length * 200) + 180}px;
	">
	<!-- Date Column Header -->
	<div class="sticky left-0 z-20 bg-gray-50 border-r border-gray-200 p-3 font-semibold text-gray-700">
	Date
	</div>
	`;
	// Team Member Column Headers
	teamMembers.forEach(member => {
	calendarHTML += `
	<div class="team-member-header bg-white border-r border-gray-200 p-3 flex items-center justify-between sticky top-0 z-10">
	<div class="flex items-center space-x-3">
	<img src="${member.avatar}" alt="${member.name}" class="w-8 h-8 rounded-full">
	<span class="font-semibold text-gray-800">${member.id}</span>
	</div>
	<button class="text-gray-400 hover:text-gray-600 transition-colors">
	<i data-feather="x" class="w-4 h-4"></i>
	</button>
	</div>
	`;
	});
	// Milestone Column Header
	calendarHTML += `
	<div class="sticky right-0 z-20 bg-blue-50 border-l border-blue-200 p-3 font-semibold text-blue-800">
	Milestones
	</div>
	</div>
	`;
	// Date Rows
	dates.forEach((date, index) => {
	const dateStr = getDateString(date);
	const isWeekend = date.getDay() === 0 \|\| date.getDay() === 6;
	const isSprintBoundary = sprintBoundaries.some(sprint =>
	getDateString(sprint.start) === dateStr \|\| getDateString(sprint.end) === dateStr
	);

	// Add sprint boundary class if needed
	const rowClasses = isSprintBoundary ? 'sprint-boundary' : '';

	calendarHTML += `
	<!-- Date Cell -->
	<div class="sticky left-0 z-10 bg-gray-50 border-r border-gray-200 p-2 text-sm text-gray-600 ${isWeekend ? 'bg-gray-100' : ''} ${rowClasses}">
	${formatDateDisplay(date)}
	</div>
	`;
	// Team Member Cells
	teamMembers.forEach(member => {
	const cellTasks = tasks.filter(task =>
	task.assignee === member.id && task.date === dateStr
	);

	calendarHTML += `
	<div class="cell bg-white border-r border-gray-200 p-1 min-h-16 relative ${isWeekend ? 'bg-gray-50' : ''} ${rowClasses}"
	data-date="${dateStr}"
	data-assignee="${member.id}"
	onclick="handleCellClick(event, '${dateStr}', '${member.id}')"
	ondragover="handleDragOver(event)"
	ondrop="handleDrop(event, '${dateStr}', '${member.id}')"
	>
	${renderCellContent(cellTasks)}
	</div>
	`;
	});
	// Milestone Cell
	calendarHTML += `
	<div class="sticky right-0 z-10 bg-blue-50 border-l border-blue-200 p-2 ${isWeekend ? 'bg-blue-100' : ''} ${rowClasses}">
	<!-- Milestone content -->
	</div>
	`;
	});
	calendarGrid.innerHTML = calendarHTML;
	feather.replace();
	}
	function renderCellContent(cellTasks) {
	if (cellTasks.length === 0) return '';

	let content = '';
	const visibleTasks = cellTasks.slice(0, 3);
	const hiddenCount = cellTasks.length - 3;

	visibleTasks.forEach(task => {
	content += `
	<div class="task-item bg-white border border-gray-200 rounded p-1 mb-1 text-xs cursor-pointer" draggable="true"
	ondragstart="handleDragStart(event, ${task.id})"
	>
	<div class="flex items-center justify-between">
	<div class="flex items-center space-x-1">
	<div class="status-indicator w-2 h-2 rounded-full status-${task.status}"></div>
	<span class="task-title flex-1 truncate">${task.title}</span>
	</div>
	</div>
	<div class="flex items-center justify-between mt-1">
	<span class="time-estimate text-gray-500">${task.timeEstimate}h</span>
	${task.links > 0 ? `<span class="link-count text-blue-500">🔗 ${task.links}</span>` : ''}
	</div>
	</div>
	`;
	});
	if (hiddenCount > 0) {
	content += `
	<div class="more-indicator text-center text-gray-400 text-xs py-1">
	+${hiddenCount} more
	</div>
	`;
	}
	return content;
	}

	// Event Handlers
	function handleCellClick(event, date, assignee) {
	event.stopPropagation();

	const cell = event.currentTarget;
	const cellKey = `${date}-${assignee}`;

	if (event.ctrlKey \|\| event.metaKey) {
	// Multi-select
	if (selectedCells.has(cellKey)) {
	selectedCells.delete(cellKey);
	cell.classList.remove('cell-selected');
	} else {
	selectedCells.add(cellKey);
	cell.classList.add('cell-selected');
	}
	} else if (event.shiftKey && selectedCells.size > 0) {
	// Range select
	// Implementation for range selection
	} else {
	// Single select
	clearCellSelection();
	selectedCells.add(cellKey);
	cell.classList.add('cell-selected');
	}
	}

	function clearCellSelection() {
	document.querySelectorAll('.cell').forEach(cell => {
	cell.classList.remove('cell-selected');
	});
	selectedCells.clear();
	}

	function handleDragStart(event, taskId) {
	event.dataTransfer.setData('text/plain', taskId.toString());
	event.currentTarget.classList.add('dragging');
	}

	function handleDragOver(event) {
	event.preventDefault();
	event.currentTarget.classList.add('drag-over-valid');
	}

	function handleDrop(event, date, assignee) {
	event.preventDefault();
	event.currentTarget.classList.remove('drag-over-valid', 'dragging');

	const taskId = parseInt(event.dataTransfer.getData('text/plain'));
	const task = tasks.find(t => t.id === taskId);

	if (task) {
	// Update task assignment and date
	task.assignee = assignee;
	task.date = date;
	initializeCalendar(); // Refresh calendar
	}
	}

	// Quick Add Button
	document.getElementById('quick-add-btn')?.addEventListener('click', function() {
	// Open command panel with task creation template
	const commandPanel = document.querySelector('custom-command-panel');
	if (commandPanel && commandPanel.openPanel) {
	commandPanel.openPanel('task-create');
	}
	});

	// Keyboard shortcuts
	document.addEventListener('keydown', function(event) {
	// Ctrl+K or Cmd+K to open command panel
	if ((event.ctrlKey \|\| event.metaKey) && event.key === 'k') {
	event.preventDefault();
	const commandPanel = document.querySelector('custom-command-panel');
	if (commandPanel && commandPanel.togglePanel) {
	commandPanel.togglePanel();
	}
	}

	// Escape to clear selection
	if (event.key === 'Escape') {
	clearCellSelection();
	}
	});

	// Export functions for web components
	window.CalendarUtils = {
	getDateString,
	formatDateDisplay,
	getDateRange,
	generateDates,
	teamMembers,
	tasks,
	selectedCells,
	clearCellSelection
	};