feat: 8.0 - Frontend - Create habit form modal
This commit is contained in:
Echo
@@ -83,6 +83,121 @@
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-overlay.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--bg-base);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
margin-bottom: var(--space-1);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
/* Radio group */
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.radio-option {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.radio-option input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-3);
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.radio-option input[type="radio"]:checked + .radio-label {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.radio-label:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: var(--space-5);
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(100px);
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
padding: var(--space-3) var(--space-5);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--text-sm);
|
||||
opacity: 0;
|
||||
transition: all var(--transition-base);
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -143,6 +258,36 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Add Habit Modal -->
|
||||
<div class="modal-overlay" id="habitModal">
|
||||
<div class="modal">
|
||||
<h2 class="modal-title">Obișnuință nouă</h2>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Nume *</label>
|
||||
<input type="text" class="input" id="habitName" placeholder="ex: Bazin, Sală, Meditație...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Frecvență</label>
|
||||
<div class="radio-group">
|
||||
<div class="radio-option">
|
||||
<input type="radio" name="frequency" id="freqDaily" value="daily" checked>
|
||||
<label for="freqDaily" class="radio-label">Zilnic</label>
|
||||
</div>
|
||||
<div class="radio-option">
|
||||
<input type="radio" name="frequency" id="freqWeekly" value="weekly">
|
||||
<label for="freqWeekly" class="radio-label">Săptămânal</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-secondary" onclick="hideHabitModal()">Anulează</button>
|
||||
<button class="btn btn-primary" id="habitCreateBtn" onclick="createHabit()" disabled>Creează</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
// Theme management
|
||||
function initTheme() {
|
||||
@@ -171,14 +316,90 @@
|
||||
initTheme();
|
||||
lucide.createIcons();
|
||||
|
||||
// Placeholder function for add habit modal (to be implemented in future stories)
|
||||
// Modal functions
|
||||
function showAddHabitModal() {
|
||||
alert('Funcționalitatea de adăugare obișnuință va fi implementată în următoarea fază!');
|
||||
const modal = document.getElementById('habitModal');
|
||||
const nameInput = document.getElementById('habitName');
|
||||
const createBtn = document.getElementById('habitCreateBtn');
|
||||
|
||||
// Reset form
|
||||
nameInput.value = '';
|
||||
document.getElementById('freqDaily').checked = true;
|
||||
createBtn.disabled = true;
|
||||
|
||||
// Show modal
|
||||
modal.classList.add('active');
|
||||
nameInput.focus();
|
||||
}
|
||||
|
||||
function hideHabitModal() {
|
||||
const modal = document.getElementById('habitModal');
|
||||
modal.classList.remove('active');
|
||||
}
|
||||
|
||||
// Form validation - enable/disable Create button based on name input
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const nameInput = document.getElementById('habitName');
|
||||
const createBtn = document.getElementById('habitCreateBtn');
|
||||
|
||||
nameInput.addEventListener('input', () => {
|
||||
const name = nameInput.value.trim();
|
||||
createBtn.disabled = name.length === 0;
|
||||
});
|
||||
|
||||
// Allow Enter key to submit if button is enabled
|
||||
nameInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter' && !createBtn.disabled) {
|
||||
createHabit();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Create habit
|
||||
async function createHabit() {
|
||||
const nameInput = document.getElementById('habitName');
|
||||
const name = nameInput.value.trim();
|
||||
const frequency = document.querySelector('input[name="frequency"]:checked').value;
|
||||
|
||||
if (!name) {
|
||||
showToast('Te rog introdu un nume pentru obișnuință');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/habits', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, frequency })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
hideHabitModal();
|
||||
showToast('Obișnuință creată cu succes!');
|
||||
loadHabits();
|
||||
} else {
|
||||
const error = await response.text();
|
||||
showToast('Eroare la crearea obișnuinței: ' + error);
|
||||
}
|
||||
} catch (error) {
|
||||
showToast('Eroare la conectarea cu serverul');
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
// Toast notification
|
||||
function showToast(message) {
|
||||
const toast = document.getElementById('toast');
|
||||
toast.textContent = message;
|
||||
toast.classList.add('show');
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Load habits (placeholder for future API integration)
|
||||
async function loadHabits() {
|
||||
// Will be implemented when API is integrated
|
||||
// Will be implemented in next story
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user