jojonocode's picture
Crée pour moi le frontend complet d’une application web appelée BucketMaster.
0c45221 verified
```javascript
import store from './store.js';
import router from './router.js';
document.addEventListener('DOMContentLoaded', () => {
// Initialize Feather Icons
if (window.feather) {
feather.replace();
}
// Check auth state
if (!store.state.user) {
window.location.hash = '#/login';
document.getElementById('app-container').classList.add('hidden');
document.getElementById('auth-container').classList.remove('hidden');
} else {
document.getElementById('app-container').classList.remove('hidden');
document.getElementById('auth-container').classList.add('hidden');
}
// Set up event listeners
document.addEventListener('click', (e) => {
// Handle project clicks
if (e.target.closest('[data-project-id]')) {
const projectId = e.target.closest('[data-project-id]').getAttribute('data-project-id');
window.location.hash = `#/projects/${projectId}`;
}
// Handle bucket clicks
if (e.target.closest('[data-bucket-id]')) {
const bucketId = e.target.closest('[data-bucket-id]').getAttribute('data-bucket-id');
window.location.hash = `#/buckets/${bucketId}`;
}
// Handle file actions
if (e.target.closest('[data-file-id]')) {
const fileId = e.target.closest('[data-file-id]').getAttribute('data-file-id');
const action = e.target.closest('[data-file-id]').getAttribute('data-action');
if (action === 'download') {
store.addNotification({
id: Date.now(),
type: 'success',
message: 'Download started'
});
} else if (action === 'delete') {
store.removeFile(fileId);
store.addNotification({
id: Date.now(),
type: 'success',
message: 'File deleted'
});
}
}
// Handle API key deletion
if (e.target.closest('[data-key-id]')) {
const keyId = e.target.closest('[data-key-id]').getAttribute('data-key-id');
store.removeApiKey(keyId);
store.addNotification({
id: Date.now(),
type: 'success',
message: 'API key deleted'
});
}
// Handle create project button
if (e.target.closest('#create-project-btn')) {
const modal = document.createElement('bucketmaster-modal');
modal.setAttribute('title', 'Create Project');
modal.innerHTML = `
<form id="create-project-form" class="space-y-4">
<div>
<label class="block text-metal mb-1">Project Name</label>
<input type="text" required class="w-full px-3 py-2 border border-metal-200 rounded">
</div>
<div class="pt-2">
<bucketmaster-button type="submit">Create Project</bucketmaster-button>
</div>
</form>
`;
document.body.appendChild(modal);
}
// Handle create bucket button
if (e.target.closest('#create-bucket-btn')) {
const modal = document.createElement('bucketmaster-modal');
modal.setAttribute('title', 'Create Bucket');
modal.innerHTML = `
<form id="create-bucket-form" class="space-y-4">
<div>
<label class="block text-metal mb-1">Bucket Name</label>
<