Files
foodplanner/templates/weeklymenu.html

594 lines
27 KiB
HTML

{% extends "base.html" %}
{% block content %}
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2><i class="bi bi-calendar-week"></i> Weekly Menus</h2>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createWeeklyMenuModal">
<i class="bi bi-plus-circle"></i> Create Weekly Menu
</button>
</div>
<div class="card">
<div class="card-header">
<h5 class="mb-0">Your Weekly Menus</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped" id="weeklyMenusTable">
<thead>
<tr>
<th>Weekly Menu Name</th>
<th>Templates Assigned</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- Weekly menus will be loaded here -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Create Weekly Menu Modal -->
<div class="modal fade" id="createWeeklyMenuModal" tabindex="-1" aria-labelledby="createWeeklyMenuModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="createWeeklyMenuModalLabel">Create New Weekly Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="createWeeklyMenuForm">
<div class="modal-body">
<div class="mb-3">
<label for="weeklyMenuName" class="form-label">Weekly Menu Name</label>
<input type="text" class="form-control" id="weeklyMenuName" name="name" required>
</div>
<h6 class="mb-3">Assign Templates to Days</h6>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="monday" class="form-label">Monday</label>
<select class="form-control template-select" id="monday" name="monday">
<option value="">Select template...</option>
{% for template in templates %}
<option value="{{ template.id }}">{{ template.name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="tuesday" class="form-label">Tuesday</label>
<select class="form-control template-select" id="tuesday" name="tuesday">
<option value="">Select template...</option>
{% for template in templates %}
<option value="{{ template.id }}">{{ template.name }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="wednesday" class="form-label">Wednesday</label>
<select class="form-control template-select" id="wednesday" name="wednesday">
<option value="">Select template...</option>
{% for template in templates %}
<option value="{{ template.id }}">{{ template.name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="thursday" class="form-label">Thursday</label>
<select class="form-control template-select" id="thursday" name="thursday">
<option value="">Select template...</option>
{% for template in templates %}
<option value="{{ template.id }}">{{ template.name }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="friday" class="form-label">Friday</label>
<select class="form-control template-select" id="friday" name="friday">
<option value="">Select template...</option>
{% for template in templates %}
<option value="{{ template.id }}">{{ template.name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="saturday" class="form-label">Saturday</label>
<select class="form-control template-select" id="saturday" name="saturday">
<option value="">Select template...</option>
{% for template in templates %}
<option value="{{ template.id }}">{{ template.name }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="sunday" class="form-label">Sunday</label>
<select class="form-control template-select" id="sunday" name="sunday">
<option value="">Select template...</option>
{% for template in templates %}
<option value="{{ template.id }}">{{ template.name }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Create Weekly Menu</button>
</div>
</form>
</div>
</div>
</div>
<!-- Apply Weekly Menu Modal -->
<div class="modal fade" id="applyWeeklyMenuModal" tabindex="-1" aria-labelledby="applyWeeklyMenuModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="applyWeeklyMenuModalLabel">Apply Weekly Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="applyWeeklyMenuForm">
<div class="modal-body">
<p>Apply this weekly menu to your plan starting from the selected week:</p>
<div class="mb-3">
<label for="weekStartDate" class="form-label">Select Week Start Date (Monday)</label>
<input type="date" class="form-control" id="weekStartDate" name="week_start_date" required>
</div>
<div class="mb-3">
<label for="applyPerson" class="form-label">Person</label>
<select class="form-control" id="applyPerson" name="person" required>
<option value="Sarah">Sarah</option>
<option value="Stuart">Stuart</option>
</select>
</div>
<div id="applyOverwriteWarning" class="alert alert-warning" style="display: none;">
<i class="bi bi-exclamation-triangle"></i>
<strong>Warning:</strong> There are already meals planned for this week.
Applying the weekly menu will overwrite them.
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Apply Weekly Menu</button>
</div>
</form>
</div>
</div>
</div>
<!-- Edit Weekly Menu Modal -->
<div class="modal fade" id="editWeeklyMenuModal" tabindex="-1" aria-labelledby="editWeeklyMenuModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editWeeklyMenuModalLabel">Edit Weekly Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="editWeeklyMenuForm">
<input type="hidden" id="editWeeklyMenuId" name="weekly_menu_id">
<div class="modal-body">
<div class="mb-3">
<label for="editWeeklyMenuName" class="form-label">Weekly Menu Name</label>
<input type="text" class="form-control" id="editWeeklyMenuName" name="name" required>
</div>
<h6 class="mb-3">Assign Templates to Days</h6>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="editMonday" class="form-label">Monday</label>
<select class="form-control template-select" id="editMonday" name="monday">
<option value="">Select template...</option>
{% for template in templates %}
<option value="{{ template.id }}">{{ template.name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="editTuesday" class="form-label">Tuesday</label>
<select class="form-control template-select" id="editTuesday" name="tuesday">
<option value="">Select template...</option>
{% for template in templates %}
<option value="{{ template.id }}">{{ template.name }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="editWednesday" class="form-label">Wednesday</label>
<select class="form-control template-select" id="editWednesday" name="wednesday">
<option value="">Select template...</option>
{% for template in templates %}
<option value="{{ template.id }}">{{ template.name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="editThursday" class="form-label">Thursday</label>
<select class="form-control template-select" id="editThursday" name="thursday">
<option value="">Select template...</option>
{% for template in templates %}
<option value="{{ template.id }}">{{ template.name }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="editFriday" class="form-label">Friday</label>
<select class="form-control template-select" id="editFriday" name="friday">
<option value="">Select template...</option>
{% for template in templates %}
<option value="{{ template.id }}">{{ template.name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="editSaturday" class="form-label">Saturday</label>
<select class="form-control template-select" id="editSaturday" name="saturday">
<option value="">Select template...</option>
{% for template in templates %}
<option value="{{ template.id }}">{{ template.name }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="editSunday" class="form-label">Sunday</label>
<select class="form-control template-select" id="editSunday" name="sunday">
<option value="">Select template...</option>
{% for template in templates %}
<option value="{{ template.id }}">{{ template.name }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
<script>
let currentWeeklyMenuId = null;
document.addEventListener('DOMContentLoaded', function() {
// Use the data that's already available in the template via the data attribute
const weeklyMenusData = JSON.parse(document.querySelector('script[data-weekly-menus]').textContent);
loadWeeklyMenus(weeklyMenusData);
// Handle weekly menu creation
document.getElementById('createWeeklyMenuForm').addEventListener('submit', function(e) {
e.preventDefault();
createWeeklyMenu();
});
// Handle weekly menu editing
document.getElementById('editWeeklyMenuForm').addEventListener('submit', function(e) {
e.preventDefault();
editWeeklyMenu();
});
// Handle weekly menu application
document.getElementById('applyWeeklyMenuForm').addEventListener('submit', function(e) {
e.preventDefault();
applyWeeklyMenu();
});
});
function loadWeeklyMenus(weeklyMenus) {
const tbody = document.querySelector('#weeklyMenusTable tbody');
tbody.innerHTML = '';
if (!weeklyMenus || weeklyMenus.length === 0) {
tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted">No weekly menus created yet. Click "Create Weekly Menu" to get started.</td></tr>';
return;
}
const dayNames = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
weeklyMenus.forEach(weeklyMenu => {
const row = document.createElement('tr');
let templateBadges = '';
if (weeklyMenu.weekly_menu_days && weeklyMenu.weekly_menu_days.length > 0) {
templateBadges = weeklyMenu.weekly_menu_days.map(wmd =>
'<span class="badge bg-secondary me-1">' + dayNames[wmd.day_of_week] + ': ' + wmd.template_name + '</span>'
).join('');
} else {
templateBadges = 'No templates assigned';
}
row.innerHTML =
'<td><strong>' + weeklyMenu.name + '</strong></td>' +
'<td>' + templateBadges + '</td>' +
'<td>' +
'<button class="btn btn-sm btn-outline-primary me-2" onclick="applyWeeklyMenuModal(' + weeklyMenu.id + ')">' +
'<i class="bi bi-play-circle"></i> Apply' +
'</button>' +
'<button class="btn btn-sm btn-outline-secondary me-2" onclick="editWeeklyMenuModal(' + weeklyMenu.id + ')">' +
'<i class="bi bi-pencil"></i> Edit' +
'</button>' +
'<button class="btn btn-sm btn-outline-danger" onclick="deleteWeeklyMenu(' + weeklyMenu.id + ')">' +
'<i class="bi bi-trash"></i> Delete' +
'</button>' +
'</td>';
tbody.appendChild(row);
});
}
function createWeeklyMenu() {
const form = document.getElementById('createWeeklyMenuForm');
const formData = new FormData(form);
// Build template assignments string
const days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
const assignments = [];
days.forEach((day, index) => {
const templateId = formData.get(day);
if (templateId) {
assignments.push(`${index}:${templateId}`);
}
});
const data = {
name: formData.get('name'),
template_assignments: assignments.join(',')
};
fetch('/weeklymenu/create', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams(data)
})
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
bootstrap.Modal.getInstance(document.getElementById('createWeeklyMenuModal')).hide();
form.reset();
// Reload the page to get updated data
location.reload();
} else {
alert('Error creating weekly menu: ' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('Error creating weekly menu');
});
}
function applyWeeklyMenuModal(weeklyMenuId) {
currentWeeklyMenuId = weeklyMenuId;
// Set default date to current week's Monday
const today = new Date();
const monday = new Date(today);
monday.setDate(today.getDate() - today.getDay() + 1); // Get Monday of current week
document.getElementById('weekStartDate').value = monday.toISOString().split('T')[0];
document.getElementById('applyOverwriteWarning').style.display = 'none';
new bootstrap.Modal(document.getElementById('applyWeeklyMenuModal')).show();
}
function applyWeeklyMenu() {
const form = document.getElementById('applyWeeklyMenuForm');
const formData = new FormData(form);
const data = {
person: formData.get('person'),
week_start_date: formData.get('week_start_date')
};
fetch(`/weeklymenu/${currentWeeklyMenuId}/apply`, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams(data)
})
.then(response => response.json())
.then(data => {
if (data.status === 'confirm_overwrite') {
// Show overwrite warning
document.getElementById('applyOverwriteWarning').style.display = 'block';
// Change button text to confirm overwrite
const submitBtn = document.querySelector('#applyWeeklyMenuForm button[type="submit"]');
submitBtn.textContent = 'Overwrite Existing Meals';
submitBtn.onclick = () => confirmApplyOverwrite(data);
} else if (data.status === 'success') {
bootstrap.Modal.getInstance(document.getElementById('applyWeeklyMenuModal')).hide();
alert('Weekly menu applied to your plan successfully!');
} else {
alert('Error applying weekly menu: ' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('Error applying weekly menu');
});
}
function confirmApplyOverwrite(overwriteData) {
const form = document.getElementById('applyWeeklyMenuForm');
const formData = new FormData(form);
const data = {
person: formData.get('person'),
week_start_date: formData.get('week_start_date'),
confirm_overwrite: 'true'
};
fetch(`/weeklymenu/${currentWeeklyMenuId}/apply`, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams(data)
})
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
bootstrap.Modal.getInstance(document.getElementById('applyWeeklyMenuModal')).hide();
alert('Weekly menu applied to your plan successfully!');
} else {
alert('Error applying weekly menu: ' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('Error applying weekly menu');
});
}
function deleteWeeklyMenu(weeklyMenuId) {
if (!confirm('Are you sure you want to delete this weekly menu?')) {
return;
}
fetch(`/weeklymenu/${weeklyMenuId}`, {
method: 'DELETE'
})
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
// Reload the page to get updated data
location.reload();
} else {
alert('Error deleting weekly menu: ' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('Error deleting weekly menu');
});
}
function editWeeklyMenuModal(weeklyMenuId) {
// Fetch weekly menu data
fetch(`/weeklymenu/${weeklyMenuId}`)
.then(response => response.json())
.then(data => {
// Populate the form
document.getElementById('editWeeklyMenuId').value = data.id;
document.getElementById('editWeeklyMenuName').value = data.name;
// Reset all selects
const selects = ['editMonday', 'editTuesday', 'editWednesday', 'editThursday', 'editFriday', 'editSaturday', 'editSunday'];
selects.forEach(selectId => {
document.getElementById(selectId).value = '';
});
// Set template assignments based on weekly menu days
data.weekly_menu_days.forEach(wmd => {
const dayIndex = wmd.day_of_week;
const templateId = wmd.template_id;
const selectId = `edit${['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'][dayIndex]}`;
document.getElementById(selectId).value = templateId;
});
// Show modal
new bootstrap.Modal(document.getElementById('editWeeklyMenuModal')).show();
})
.catch(error => {
console.error('Error:', error);
alert('Error loading weekly menu');
});
}
function editWeeklyMenu() {
const form = document.getElementById('editWeeklyMenuForm');
const formData = new FormData(form);
// Build template assignments string
const days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
const assignments = [];
days.forEach((day, index) => {
const selectId = `edit${day.charAt(0).toUpperCase() + day.slice(1)}`;
const templateId = document.getElementById(selectId).value;
if (templateId) {
assignments.push(`${index}:${templateId}`);
}
});
const weeklyMenuId = document.getElementById('editWeeklyMenuId').value;
const data = {
name: formData.get('name'),
template_assignments: assignments.join(',')
};
fetch(`/weeklymenu/${weeklyMenuId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams(data)
})
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
bootstrap.Modal.getInstance(document.getElementById('editWeeklyMenuModal')).hide();
form.reset();
// Reload the weekly menus using the same data that's already available in the template
const weeklyMenusData = JSON.parse(document.querySelector('script[data-weekly-menus]').textContent);
loadWeeklyMenus(weeklyMenusData);
} else {
alert('Error updating weekly menu: ' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('Error updating weekly menu');
});
}
</script>
<!-- Hidden script to pass weekly menus data -->
<script type="application/json" data-weekly-menus>
{{ weekly_menus|tojson }}
</script>
{% endblock %}