New stuff

Aberwyn/wwwroot/css/budget.css

@@ -0,0 +1,81 @@
+/* Budget Container */
+.budget-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px; /* Reduced gap for tighter layout */
+    padding: 0; /* Removed padding */
+    margin: 0; /* Removed margin */
+}
+
+/* Category Block */
+.category-block {
+    flex: 1 1 300px;
+    max-width: 230px;
+    min-width: 180px;
+    margin: 0; /* Removed margin */
+}
+
+.category-header {
+    display: flex;
+    justify-content: space-between; /* Aligns the category name and total */
+    align-items: center; /* Center vertically */
+    padding: 5px; /* Retain padding */
+    background-color: #4A6572; /* Muted blue-gray */
+    color: #ffffff;
+    border-radius: 8px;
+    margin-bottom: 10px;
+    font-weight: bold;
+    max-width: 100%; /* Ensures the header doesn't exceed the width of its container */
+    box-sizing: border-box; /* Include padding in width calculation */
+}
+
+.total {
+    font-weight: bold;
+    color: #ffffff; /* White for visibility */
+    background-color: rgba(74, 101, 114, 0.7); /* Semi-transparent muted blue-gray */
+    padding: 5px 10px; /* Add some padding for spacing */
+    border-radius: 5px; /* Rounded corners */
+}
+
+/* Items Layout */
+.items-wrapper {
+    display: flex;
+    min-width: 200px;
+    flex-direction: column;
+    padding: 0; /* Removed padding */
+    margin: 0; /* Removed margin */
+}
+
+/* Item Styles */
+.item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px; /* Space between items */
+    gap: 5px; /* Reduced gap between item components */
+}
+
+/* Input Styles */
+.item-name input {
+    flex: 1; /* Compact size for amount field */
+    max-width: 20ch; /* Allow up to 7 characters */
+    padding: 6px; /* Slightly reduced padding */
+    border: none;
+    border-radius: 5px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    background-color: #f9f9f9;
+    transition: background-color 0.3s;
+}
+
+.item-amount input {
+    flex: 1; /* Compact size for amount field */
+    max-width: 7ch; /* Allow up to 7 characters */
+    padding: 6px; /* Slightly reduced padding */
+    border: none;
+    border-radius: 5px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    background-color: #f9f9f9;
+    transition: background-color 0.3s;
+}
+
+/* Focus Effect */
+.item-name input:focus

Aberwyn/wwwroot/css/meal-menu.css

@@ -0,0 +1,210 @@
+/* Meal Menu Page Styles */
+.meal-menu-page {
+    background-color: #2A3A48; /* Dark background to match theme */
+    padding: 30px 60px; /* Add more padding to the sides */
+    border-radius: 12px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    max-width: 900px; /* Adjust width to provide more space */
+    margin: 0 auto;
+    color: #B0BEC5; /* Light gray text */
+}
+
+    .meal-menu-page h1 {
+        font-size: 2rem;
+        text-align: center;
+        color: #FFFFFF;
+        margin-bottom: 20px;
+    }
+
+/* Date Picker */
+.date-picker {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 30px;
+    gap: 20px;
+}
+
+    .date-picker span {
+        font-size: 1.2rem;
+        color: #B0BEC5;
+    }
+
+    .date-picker button {
+        background-color: #4A6572;
+        color: #ffffff;
+        padding: 12px 25px;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        font-size: 1rem;
+        transition: background-color 0.3s;
+    }
+
+        .date-picker button:hover {
+            background-color: #3A4E62;
+        }
+
+/* Mode Toggle */
+.mode-toggle {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+    .mode-toggle button {
+        background-color: #4CAF50;
+        color: #ffffff;
+        padding: 12px 20px;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        font-size: 1rem;
+        transition: background-color 0.3s;
+    }
+
+        .mode-toggle button:hover {
+            background-color: #45a049;
+        }
+
+/* Meal Menu Container - Vertical Layout */
+.meal-menu-container {
+    display: flex;
+    flex-direction: column; /* Align the days vertically */
+    gap: 20px;
+    justify-content: flex-start;
+}
+
+/* Day Block Styling */
+.day-block {
+    background-color: #1F2C3C; /* Darker background for day blocks */
+    padding: 20px;
+    border-radius: 10px;
+    width: 100%;
+    text-align: center;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Day Header with Line */
+.day-header {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 15px;
+    color: #FFEB3B; /* Brighter yellow for the text */
+    position: relative; /* Allows absolute positioning for the line */
+}
+
+    .day-header::after {
+        content: "";
+        position: absolute;
+        bottom: 0; /* Place it at the bottom of the header */
+        left: 0;
+        width: 100%; /* Make the line span across the header */
+        height: 2px; /* Thickness of the line */
+        background-color: #FFEB3B; /* Yellow line for contrast */
+        border-radius: 2px; /* Rounded corners for the line */
+    }
+
+/* Meal Selection */
+.meal-selection {
+    font-size: 1rem;
+    color: #B0BEC5;
+    margin-bottom: 10px;
+}
+
+    .meal-selection strong {
+        color: #FFFFFF;
+    }
+
+    .meal-selection span {
+        color: #FFEB3B; /* Highlight the meal names */
+    }
+
+/* Edit Mode Styling */
+.edit-mode select {
+    background-color: #444;
+    color: #fff;
+    border: none;
+    padding: 10px;
+    border-radius: 6px;
+    width: 100%;
+    font-size: 1rem;
+    margin-top: 5px;
+    cursor: pointer;
+}
+
+    .edit-mode select:focus {
+        outline: none;
+        box-shadow: 0 0 8px rgba(66, 133, 244, 0.8);
+    }
+
+/* Save Button */
+.save-menu-button {
+    display: block;
+    background-color: #FF9800;
+    color: #fff;
+    padding: 12px 25px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1rem;
+    width: 200px;
+    margin: 30px auto;
+    text-align: center;
+    transition: background-color 0.3s;
+}
+
+    .save-menu-button:hover {
+        background-color: #F57C00;
+    }
+
+/* New Meal Form Styling */
+.new-meal-form {
+    display: flex;
+    flex-direction: column; /* Stack input fields vertically */
+    gap: 15px; /* Space between fields */
+    padding: 20px;
+    background-color: #1F2C3C; /* Dark background to match theme */
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    max-width: 400px; /* Control the width of the form */
+    margin: 0 auto;
+}
+
+    /* Input Fields */
+    .new-meal-form input,
+    .new-meal-form select,
+    .new-meal-form textarea {
+        background-color: #444; /* Dark background for inputs */
+        color: #fff; /* White text */
+        border: none;
+        padding: 12px 15px;
+        border-radius: 6px;
+        font-size: 1rem;
+        width: 100%; /* Ensure inputs take full width */
+    }
+
+        /* Focused Input Fields */
+        .new-meal-form input:focus,
+        .new-meal-form select:focus,
+        .new-meal-form textarea:focus {
+            outline: none;
+            box-shadow: 0 0 8px rgba(66, 133, 244, 0.8); /* Blue focus highlight */
+        }
+
+    /* Submit Button */
+    .new-meal-form button {
+        background-color: #FF9800; /* Button color */
+        color: #fff;
+        padding: 12px 20px;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        font-size: 1rem;
+        transition: background-color 0.3s;
+        width: 100%; /* Button takes full width */
+    }
+
+        /* Button Hover */
+        .new-meal-form button:hover {
+            background-color: #F57C00;
+        }

Aberwyn/wwwroot/css/site.css

@@ -1,7 +1,7 @@
 /* Base Styles */
 body {
-    background-color: #1F2C3C;
-    color: #4b004b;
+    background-color: #1F2C3C; /* Dark background */
+    color: #B0BEC5; /* Light Gray text for better readability */
     font-family: 'Roboto', sans-serif;
     margin: 0;
     padding: 20px; /* Keep padding for general layout */
@@ -10,7 +10,7 @@ body {
 /* Container for Centering and Max Width */
 .budget-page {
     width: 100%; /* Make the page full width */
-    max-width: 1900px; /* You can adjust or remove this */
+    max-width: 1900px; /* Adjust or remove this */
     margin: 0 auto; /* Centering */
     padding: 0; /* Removed extra padding for budget page */
 }
@@ -25,7 +25,7 @@ body {
 }
 
 .left-sidebar, .sidebar-budget-right {
-    background-color: #f4f4f4;
+    background-color: #f9f9f9; /* Softer background */
     border-radius: 12px;
     padding: 10px; /* Adjusted padding for sidebars */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -33,13 +33,13 @@ body {
 
 .main-content {
     padding: 10px;
-    background-color: #f4f4f4; /* Light gray instead of white */
+    background-color: #f4f4f4; /* Light gray */
     border-radius: 12px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 .nav-link {
-    color: #4b004b;
+    color: #3A4E62; /* Muted blue-gray for consistency */
 }
 
     .nav-link:hover {
@@ -52,114 +52,6 @@ body {
     }
 }
 
-
-/* Budget Container */
-.budget-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px; /* Reduced gap for tighter layout */
-    padding: 0; /* Removed padding */
-    margin: 0; /* Removed margin */
-}
-
-/* Category Block */
-.category-block {
-    flex: 1 1 300px;
-    max-width: 230px;
-    min-width: 180px;
-    margin: 0; /* Removed margin */
-}
-
-.category-header {
-    display: flex;
-    justify-content: space-between; /* Aligns the category name and total */
-    align-items: center; /* Center vertically */
-    padding: 5px; /* Retain padding */
-    background-color: #6a0dad; /* Adjust color as needed */
-    color: #ffffff;
-    border-radius: 8px;
-    margin-bottom: 10px;
-    font-weight: bold;
-    max-width: 100%; /* Ensures the header doesn't exceed the width of its container */
-    box-sizing: border-box; /* Include padding in width calculation */
-}
-
-.total {
-    font-weight: bold;
-    color: #ffffff; /* Keep white for visibility */
-    background-color: rgba(106, 13, 173, 0.7); /* Add a semi-transparent background for contrast */
-    padding: 5px 10px; /* Add some padding for spacing */
-    border-radius: 5px; /* Rounded corners */
-}
-
-/* Items Layout */
-.items-wrapper {
-    display: flex;
-    min-width: 200px;
-    flex-direction: column;
-    padding: 0; /* Removed padding */
-    margin: 0; /* Removed margin */
-}
-
-/* Item Styles */
-.item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 5px; /* Space between items */
-    gap: 5px; /* Reduced gap between item components */
-}
-
-/* Input Styles */
-.item-name input {
-    flex: 1; /* Compact size for amount field */
-    max-width: 20ch; /* Allow up to 7 characters */
-    padding: 6px; /* Slightly reduced padding */
-    border: none;
-    border-radius: 5px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    background-color: #f9f9f9;
-    transition: background-color 0.3s;
-}
-
-.item-amount input {
-    flex: 1; /* Compact size for amount field */
-    max-width: 7ch; /* Allow up to 7 characters */
-    padding: 6px; /* Slightly reduced padding */
-    border: none;
-    border-radius: 5px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    background-color: #f9f9f9;
-    transition: background-color 0.3s;
-}
-
-    /* Focus Effect */
-    .item-name input:focus,
-    .item-amount input:focus {
-        background-color: #e6e6e6;
-    }
-
-/* Add Item Button */
-.add-item {
-    display: flex; /* Use flex to center the "+" */
-    align-items: center; /* Center the "+" vertically */
-    justify-content: center; /* Center the "+" horizontally */
-    height: 25px; /* Adjusted height to match input fields */
-    cursor: pointer;
-    color: #ffffff; /* White text color for contrast */
-    background-color: #6a0dad; /* Use the same color as the header for consistency */
-    margin-top: 5px; /* Reduced space above the button */
-    border: none; /* No border */
-    border-radius: 5px; /* Rounded corners */
-    font-size: 15px; /* Adjusted font size for better fit */
-    transition: background-color 0.3s, transform 0.3s; /* Transition for hover effect */
-}
-
-    /* Hover Effect for Add Item Button */
-    .add-item:hover {
-        background-color: #5a0c9a; /* Darker shade on hover */
-        transform: scale(1.05); /* Slightly enlarge on hover for emphasis */
-    }
-
 .header-container {
     display: flex;
     justify-content: flex-start; /* Aligns the header to the left */
@@ -178,7 +70,7 @@ body {
 }
 
 .name {
-    color: #FFFFFF; /* White for names */
+    color: #ffffff; /* White for names */
     font-size: 0.4em; /* Adjust size as needed */
 }
 
@@ -214,7 +106,7 @@ body {
 
 .nav-link {
     text-decoration: none; /* Remove underline */
-    color: #000; /* Link color */
+    color: #3A4E62; /* Muted blue-gray for consistency */
     display: flex; /* Use flexbox to align icon and text */
     align-items: center; /* Center items vertically */
 }
@@ -224,34 +116,111 @@ body {
         font-size: 1.2em; /* Adjust icon size */
     }
 
-
 /* Sidebar Right Styles */
-.right-sidebar {
-    background-color: #f8f9fa; /* Use your existing background color */
-    padding: 10px; /* Reduce padding for compactness */
-    margin: 0; /* Remove any margins */
-    border-radius: 8px; /* Optional: Add rounded corners */
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for depth */
+.sidebar-section {
+    margin-bottom: 5px;
 }
 
-.sidebar-budget-header {
-    cursor: pointer; /* Indicate clickable header */
-    font-weight: bold; /* Make header bold */
-    margin: 0; /* Remove default margin */
-    padding-bottom: 5px; /* Space below header */
-}
-
-.sidebar-budget-container {
-    margin-top: 10px; /* Space above budget items */
-}
-
-.sidebar-budget-item {
+.sidebar-header {
+    cursor: pointer;
+    background-color: #4CAF50; /* Green */
+    color: white;
+    padding: 8px; /* Slightly more padding */
+    border-radius: 5px;
     display: flex;
-    justify-content: space-between; /* Space out name and amount */
-    padding: 5px 0; /* Reduced padding for compactness */
-    border-bottom: 1px solid #e0e0e0; /* Optional: Divider line */
+    justify-content: space-between;
+    align-items: center; /* Center items vertically */
+    font-size: 14px;
+    transition: background-color 0.3s; /* Smooth hover transition */
 }
 
-    .sidebar-budget-item:last-child {
-        border-bottom: none; /* Remove border from last item */
-    }
+    .sidebar-header:hover {
+        background-color: #45a049; /* Darker green on hover */
+    }
+
+.accordion-item {
+    border-top: 1px solid #ddd; /* Separator between items */
+}
+
+.accordion-header {
+    display: flex; /* Flexbox for header */
+    justify-content: space-between;
+    align-items: center; /* Center vertically */
+    padding: 8px; /* Padding for accordion header */
+    cursor: pointer;
+    background-color: #f1f1f1; /* Light background for header */
+    border-radius: 4px;
+    transition: background-color 0.3s; /* Smooth hover transition */
+}
+
+    .accordion-header:hover {
+        background-color: #e0e0e0; /* Slightly darker background on hover */
+    }
+
+.accordion-content {
+    display: none; /* Hidden by default */
+    background-color: #fff; /* White background for content */
+    padding: 5px; /* Padding for content */
+    border-radius: 4px; /* Rounded corners */
+}
+
+.item-name {
+    font-weight: normal; /* Normal weight for item names */
+    font-size: 12px; /* Smaller font size */
+}
+
+.item-amount {
+    color: #333;
+    font-size: 12px; /* Smaller font size for amounts */
+}
+
+.date-picker {
+    position: relative;
+}
+
+.date-picker-toggle {
+    background-color: #4A6572; /* Muted blue-gray */
+    color: #ffffff;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s;
+}
+
+    .date-picker-toggle:hover {
+        background-color: #3A4E62; /* Darker blue-gray on hover */
+    }
+
+.date-picker-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background-color: #333;
+    color: #ffffff;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    margin-top: 8px;
+    z-index: 1000;
+    display: flex;
+    gap: 10px;
+    width: max-content;
+}
+
+    .date-picker-dropdown select {
+        background-color: #444;
+        color: #ffffff;
+        border: none;
+        padding: 8px;
+        border-radius: 4px;
+        font-size: 14px;
+        appearance: none;
+        cursor: pointer;
+        transition: background-color 0.3s;
+    }
+
+        .date-picker-dropdown select:hover {
+            background-color: #555;
+        }

Aberwyn/wwwroot/js/menu.js

@@ -0,0 +1,117 @@
+angular.module('mealMenuApp', [])
+    .controller('MealMenuController', function ($scope, $http) {
+        $scope.isEditing = false;
+        $scope.toggleEditMode = function () {
+            $scope.isEditing = !$scope.isEditing;
+        };
+
+        $scope.meals = [];
+        $scope.menu = {};
+        $scope.showNewMealForm = false;
+        $scope.newMeal = {};
+        $scope.selectedMealDay = null;
+        $scope.selectedMealType = null;
+
+        const today = new Date();
+        $scope.selectedWeek = getWeek(today);
+        $scope.selectedYear = today.getFullYear();
+        $scope.daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+
+        $scope.loadMeals = function () {
+            $http.get('/api/mealMenuApi/getMeals')
+                .then(response => {
+                    $scope.meals = response.data;
+                })
+                .catch(error => console.error("Error fetching meals:", error));
+        };
+
+        $scope.loadMenu = function () {
+            $http.get('/api/mealMenuApi/menu', {
+                params: { weekNumber: $scope.selectedWeek, year: $scope.selectedYear }
+            }).then(response => {
+                $scope.menu = {};
+                response.data.forEach(item => {
+                    const dayOfWeek = $scope.daysOfWeek[item.dayOfWeek - 1];
+                    if (!$scope.menu[dayOfWeek]) $scope.menu[dayOfWeek] = {};
+
+                    if (item.breakfastMealId) {
+                        $scope.menu[dayOfWeek].breakfastMealId = item.breakfastMealId;
+                        $scope.menu[dayOfWeek].breakfastMealName = getMealNameById(item.breakfastMealId);
+                    }
+                    if (item.lunchMealId) {
+                        $scope.menu[dayOfWeek].lunchMealId = item.lunchMealId;
+                        $scope.menu[dayOfWeek].lunchMealName = getMealNameById(item.lunchMealId);
+                    }
+                    if (item.dinnerMealId) {
+                        $scope.menu[dayOfWeek].dinnerMealId = item.dinnerMealId;
+                        $scope.menu[dayOfWeek].dinnerMealName = getMealNameById(item.dinnerMealId);
+                    }
+                });
+            }).catch(error => console.error("Error fetching weekly menu:", error));
+        };
+
+        function getMealNameById(mealId) {
+            const meal = $scope.meals.find(m => m.id === mealId);
+            return meal ? meal.name : "Unknown Meal";
+        }
+
+        $scope.handleMealSelection = function (day, mealType) {
+            if ($scope.menu[day][mealType + "MealId"] === "new") {
+                $scope.showNewMealForm = true;
+                $scope.newMeal = { name: "", description: "", proteinType: "", carbType: "", recipeUrl: "" };
+                $scope.selectedMealDay = day;
+                $scope.selectedMealType = mealType;
+            }
+        };
+
+        $scope.saveNewMeal = function () {
+            if (!$scope.newMeal.name) {
+                alert("Meal name is required");
+                return;
+            }
+            $http.post('/api/mealMenuApi/addMeal', $scope.newMeal)
+                .then(response => {
+                    const addedMeal = response.data;
+                    $scope.meals.push(addedMeal);
+                    $scope.menu[$scope.selectedMealDay][$scope.selectedMealType + "MealId"] = addedMeal.id;
+                    $scope.showNewMealForm = false;
+                    $scope.newMeal = {}; // Reset new meal data after save
+                })
+                .catch(error => console.error("Error saving new meal:", error));
+        };
+
+        $scope.cancelNewMeal = function () {
+            $scope.showNewMealForm = false;
+            $scope.newMeal = {}; // Reset new meal data when canceled
+        };
+
+        function getWeek(date) {
+            const day = date.getDay() || 7;
+            date.setDate(date.getDate() + 4 - day);
+            const yearStart = new Date(date.getFullYear(), 0, 1);
+            return Math.ceil(((date - yearStart) / 86400000 + 1) / 7);
+        }
+
+        $scope.goToPreviousWeek = function () {
+            if ($scope.selectedWeek === 1) {
+                $scope.selectedYear--;
+                $scope.selectedWeek = 52;
+            } else {
+                $scope.selectedWeek--;
+            }
+            $scope.loadMenu();
+        };
+
+        $scope.goToNextWeek = function () {
+            if ($scope.selectedWeek === 52) {
+                $scope.selectedYear++;
+                $scope.selectedWeek = 1;
+            } else {
+                $scope.selectedWeek++;
+            }
+            $scope.loadMenu();
+        };
+
+        $scope.loadMeals();
+        $scope.loadMenu();
+    });