function emotionLogger(database=testdb, dbHtml=null, {emotionsArray=[{value:"happy", emoji:"😀"}], eventIndex=0, emotionValue="", typeValue="current", notesValue=""}= {}) { // emotions options const emotionOptions = emotionsArray; // definition of an emotion Button function emotionButton(value, emoji) { return htl.html`

${value}

` } // definition of the emotion selector block function emotionBlock() { const emotionSelector = htl.html`

${emotionOptions.map(opt => emotionButton(opt.value, opt.emoji))}

` emotionSelector.value = emotionValue; emotionSelector.addEventListener("click", event => { const button = event.target.closest("button"); if (button) { emotionSelector.value = button.value; emotionSelector.dispatchEvent(new Event("input", { bubbles: true })); } }); return emotionSelector; } // selection box for the activities (activities from the database) function selectActivity() { const selections = database.map(record => record.activity); return Inputs.select(selections, {value: selections[eventIndex], label: "Select Related Activity:"}); } // components displayed const activitySelect = selectActivity(database); const emotionSelect = emotionBlock(); const selectType = Inputs.select(["past", "current", "future"], {value: typeValue, label: "Select Activity Type:"}); const inputNotes = Inputs.text({value: notesValue, label: "Notes:", placeholder: "Enter any notes (optional)..."}); const output = html`

`; const submitBtn = html``; const submitMsg = html`

`; // the html element const widget = htl.html`

🧡 Emotion Logger

(notes: you may log emotion for the same activity for multiple times)

${emotionSelect} ${activitySelect} ${selectType} ${inputNotes} ${output} ${submitBtn} ${submitMsg} `; // value of the html elemtn widget.value = { get activity() { return activitySelect.value; }, get type() { return selectType.value; }, get emotion() { return emotionSelect.value; }, get note() { return inputNotes.value; } }; // the function to display users selections function updateOutput() { output.innerHTML = ` Output:

Emotion: ${widget.value.emotion || "—"}
Activity: ${widget.value.activity || "—"}
Activity Type: ${widget.value.type || "—"}
Notes: ${widget.value.notes || "—"}

`; } updateOutput(); // initial display // the function to call when the submit button is clicked function submit() { const act = widget.value.activity; const newEmotion = [widget.value.emotion, widget.value.type, widget.value.notes, new Date()]; // if a required fill is missing, show the warning text if (!act || !newEmotion[0] || !newEmotion[1]) { submitMsg.textContent = `👉 Required field missing`; return; } // To update the testdb, for demo purpose if (database === testdb) { for (const item of testdb) { if (item.activity === act && Array.isArray(item.emotion)) { item.emotion.push(newEmotion); } } mutable testdb = testdb; } else { // To store in the PersistentTable const newRecords = database.map(item => { if (item.activity === act) { const currentEmotions = ("emotion" in item && Array.isArray(item.emotion)) ? item.emotion : []; return { ...item, emotion: [...currentEmotions, newEmotion] }; } else { return item; } }); if (dbHtml) { dbHtml.update(newRecords); } } // clear the selections emotionSelect.value=emotionValue; selectType.value=typeValue; inputNotes.value=notesValue; submitMsg.textContent = ``; } submitBtn.addEventListener("click", submit); // listner and event for the user input [activitySelect, emotionSelect, selectType, inputNotes].forEach(component => component.addEventListener("input", () => { widget.value = { activity: activitySelect.value, emotion: emotionSelect.value, type: selectType.value, notes: inputNotes.value }; updateOutput(); widget.dispatchEvent(new Event("input", { bubbles: true })); }) ); return widget; }