MonthlyLog

MonthlyLog

new MonthlyLog()

Constructs a blank monthly log HTML element using the defined HTML template
Source:
Example

Monthly Log class

// Example of a monthly JSON object used to generate a monthly-log element
const exampleMonthlyJSON = {
  sections: [
    {
      id: '00',
      name: 'Monthly Goals',
      type: 'log',
      bulletIDs: [
        'B 2105 00 00',
        'B 2105 00 01'
      ],
      nextBulNum: 2
    },
    {
      id: '01',
      name: 'Monthly Notes',
      type: 'log',
      bulletIDs: [
        'B 2105 01 00',
        'B 2105 01 01'
      ],
      nextBulNum: 2
    }
  ]
}
// Create a new monthly log HTML element using the object
let monthly = document.createElement('monthly-log');
monthly.data = exampleMonthlyJSON;

Members

data

This function returns the data stored in this monthly element as a JSON object.
Source:

data

This function constructs the monthly log HTML element using the given ID and monthly log object data. It starts by constructing and setting the header text for the element. It then creates the buttons for the monthly calendar, and constructs the charts for the different trackers (mood, sleep, etc). Next it goes through each attribute of the monthly log object to construct the notes sections of the element. Each notes section is constructed by fetching the data of each bullet in the section from the database, and creating a custom bullet-entry HTML element that is appended to the section. Finally, the setAttribute function is called on this element to set the 'data' attribute of the element to be the given JSON data, so that the data can be retrieved from the element later if needed.
Source:

Methods

deleteNoteHandler(bulletElement)

This function handles the deletion of a bullet. The function looks through the monthly JSON object to remove the ID of the bullet being deleted from the appropriate section, and then stores the updated monthly JSON object in the database and removes the bullet-entry HTML element from the section.
Source:
Parameters:
Name Type Description
bulletElement HTMLElement The bullet-entry element that is being deleted

generateBulletID(sectionID) → {string}

This function is a helper function that is used to create a new bullet ID. The given section ID determines which section the bullet is being created in. The function then combines the bullet count for that section, the section ID, and the date of the monthly object in which the bullet is being added in order to create a new bullet ID, which is then returned.
Source:
Parameters:
Name Type Description
sectionID string The string ID of the section in which the bullet is being created
Returns:
Type:
string
The string ID to be used for the new bullet

newNoteHandler(sectionElement)

This function creates a new bullet. It first generates a bullet ID by combining the date of the monthly log to which the bullet will belong, the ID of the section to which the bullet is being added, and the ID of the new bullet, which is determined based on the number of bullets currently in the section. It then adds the bullet ID to the monthly JSON object in the appropriate section, and stores the updated monthly JSON object in the database. Lastly, it creates a new bullet-entry HTML element, and adds the appropriate event listener to it to allow for future deletion of the bullet element.
Source:
Parameters:
Name Type Description
sectionElement HTMLElement The section element in which the new note button was clicked to trigger the listener

setBulletData(bulletData, bulletID, bulletElement, sectionID)

This function is a helper function that is used as the callback for when we fetch bullet data from the database or when we are creating a new bullet. The function first creates a function that will be used by the created bullet object to update the bullet count in the appropriate section of the monthly log and generate a bullet ID for sub-bullets (nested bullets that are children of this created bullet). The function then checks if the data is not null or undefined. If the data isn't null/undefined, the bullet element's data is set to the given data. If the data is null/undefined, the bullet element's data is set to an empty JSON object, which creates a blank bullet.
Source:
Parameters:
Name Type Description
bulletData Object The JSON object data that will be stored in the bullet
bulletID string The string ID of the bullet object
bulletElement HTMLElement The bullet-entry element whose data will be set
sectionID string The string ID of the section in which the bullet is being created