@DarkwingBuilds in database,m you are missing the function
getCheckedState(meal) and
updateCheckState(meal, checked)
also, the ‘protocol’ for modules says you should wait til all the modules are loaded before sending them messages
see https://docs.magicmirror.builders/development/notifications.html#system-notifications
here is the updated database
Module.register("MMM-MealDatabase", {
defaults: {
meals: {
chicken: ["Chicken Dish 1", "Chicken Dish 2"],
beef: ["Beef Dish 1", "Beef Dish 2"],
pork: ["Pork Dish 1", "Pork Dish 2"],
},
iconMapping: {
"Chicken Dish 1": "fa fa-drumstick-bite",
"Chicken Dish 2": "fa fa-drumstick-bite",
"Beef Dish 1": "fa fa-cloud-meatball",
"Beef Dish 2": "fa fa-cloud-meatball",
"Pork Dish 1": "fa fa-bacon",
"Pork Dish 2": "fa fa-bacon",
},
checkStates: {}, // Ensure that checkStates is initialized as an empty object
},
loaded: false,
getStyles: function () {
return ["MMM-MealDatabase.css"];
},
start: function () {
console.log("MMM-MealDatabase module started");
this.loaded = false;
//this.loadCheckStates(); // Load check states from local storage
// Send a socket notification to notify other modules about the current checked items
},
sendCheckedItems: function () {
console.log("Sending checked items");
const checkedItems = Object.keys(this.config.checkStates).filter(meal => this.config.checkStates[meal]);
this.sendNotification("MMM-MEALDATABASE-CHECKED_ITEMS", checkedItems);
},
getDom: function () {
var wrapper = document.createElement("div");
if(this.loaded){
wrapper.className = "MMM-MealDatabase";
wrapper.appendChild(this.createColumn("Chicken", "chicken"));
wrapper.appendChild(this.createColumn("Beef", "beef"));
wrapper.appendChild(this.createColumn("Pork", "pork"));
}
return wrapper;
},
notificationReceived(code, payload){
if(code ==="MMM-MEALLIST-UPDATE_REQUEST"){
this.sendCheckedItems()
} else if( code ==="ALL_MODULES_STARTED"){
//this.sendNotification("MMM-MEALDATABASE-INIT", this.config.meals);
this.sendCheckedItems();
this.loaded=true;
}
},
createColumn: function (category, mealType) {
var column = document.createElement("div");
column.className = "category";
var header = document.createElement("div");
header.className = "column-header";
header.appendChild(document.createTextNode(category));
column.appendChild(header);
this.config.meals[mealType].forEach((meal) => {
var item = document.createElement("div");
item.className = "item";
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = meal; // Use a unique identifier for each checkbox
checkbox.className = "checkbox";
// Set the checked state based on the stored state
checkbox.checked = this.getCheckState(meal);
this.updateCheckState(meal, checkbox.checked);
var label = document.createElement("label");
label.appendChild(checkbox);
label.appendChild(document.createTextNode(meal));
item.appendChild(label);
// Add change event to update the checked state
checkbox.addEventListener("change", () => {
this.updateCheckState(meal, checkbox.checked);
});
column.appendChild(item);
});
return column;
},
getCheckState(meal){
let checked=false
try {
checked = this.config.checkStates[meal].checked
}
catch(err){}
return checked
},
updateCheckState(meal, checked){
if(this.config.checkStates[meal] == undefined)
this.config.checkStates[meal]={}
this.config.checkStates[meal].checked=checked
}
})
still looking at list