DailyLog

DailyLog

new DailyLog()

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

Daily Log class

// Example of a daily JSON object used to generate a daily-log element
const exampleDailyJSON = {
  trackers: [
    {
      type: 'slider',
      name: 'Mood',
      value: 3
    },
    {
      type: 'slider',
      name: 'Sleep Quality',
      value: 5
    },
    {
      type: 'numInput',
      name: 'Calorie Intake',
      value: 2500
    },
    {
      type: 'numInput',
      name: 'Money Spent',
      value: 25
    },
    {
      type: 'checkbox',
      name: 'Exercise',
      value: 0
    }
  ],
  sections: [
    {
      id: '00',
      name: 'Reminders',
      type: 'log',
      bulletIDs: [
        'B 210515 00 00',
        'B 210515 00 01'
      ],
      nextBulNum: 2
    },
    {
      id: '01',
      name: 'Daily Notes',
      type: 'log',
      bulletIDs: [
        'B 210515 01 00',
        'B 210515 01 01',
        'B 210515 01 02'
      ],
      nextBulNum: 3
    },
    {
      id: '02',
      name: 'Shopping List',
      type: 'log',
      bulletIDs: [
        'B 210515 02 00',
        'B 210515 02 01'
      ],
      nextBulNum: 2
    },
    {
      id: '03',
      name: 'Daily Goals',
      type: 'log',
      bulletIDs: [
        'B 210515 03 00',
        'B 210515 03 01'
      ],
      nextBulNum: 2
    }
  ]
}
// Create a new daily log HTML element using the object
let daily = document.createElement('daily-log');
daily.data = exampleDailyJSON;

Members

data

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

data

This function constructs the daily log HTML element using the given ID and daily log object data. It starts by constructing and setting the header text for the element, then goes through each attribute of the daily log object to construct the trackers and 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

createCheckbox(tracker) → {HTMLElement}

This function is a helper function to create a checkbox for trackers that are to be presented in the checkbox format. The function first creates the html input element with the type 'checkbox', and sets its checked attribute based on the value in the tracker object. Then, the function adds an event listener to the checkbox so that the JSON object data gets updated for the daily log object and in the database when the checkbox gets checked or unchecked. Finally, the checkbox element is returned so that it can be appended to the trackers section.
Source:
Parameters:
Name Type Description
tracker Object The JSON object of the tracker being created
Returns:
Type:
HTMLElement
The checkbox input element to be displayed as the tracker

createNumInput(tracker) → {HTMLElement}

This function is a helper function to create a number input for trackers that are to be presented in the number input format. The function first creates the html input element with the type 'number', and sets its value based on the value in the tracker object. Then, the function adds an event listener to the input element so that the JSON object data gets updated for the daily log object and in the database when the number input gets changed (note that if the inputted number is negative, the data is not updated because a negative input does not make sense in the context of these trackers). Finally, the number input element is returned so that it can be appended to the trackers section.
Source:
Parameters:
Name Type Description
tracker Object The JSON object of the tracker being created
Returns:
Type:
HTMLElement
The number input element to be displayed as the tracker

createSlider(tracker) → {HTMLElement}

This function is a helper function to create a slider for trackers that are to be presented in the slider format. The function first creates a div element to hold the 3 pieces of the slider element. The first two elements in the slider div are the frown and smile icons that are there to help the user see what each extreme of the slider means. The function then creates the html input element with the type 'range', and sets its value based on the value in the tracker object. Then, the function adds an event listener to the slider so that the JSON object data gets updated for the daily log object and in the database when the slider value gets changed. Finally, the slider div is returned so that it can be appended to the trackers section.
Source:
Parameters:
Name Type Description
tracker Object The JSON object of the tracker being created
Returns:
Type:
HTMLElement
A div element containing the slider and the icons to show what each extreme of the slider signifies

deleteNoteHandler(bulletElement)

This function handles the deletion of a bullet. The function looks through the daily JSON object to remove the ID of the bullet being deleted from the appropriate section, and then stores the updated daily 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

deleteSectionHandler(sectionElement)

This function handles the deletion of a section. The function looks through the daily JSON object to remove the section object that is being deleted, and then stores the updated daily JSON object in the database and removes the section HTML element from the daily log div.
Source:
Parameters:
Name Type Description
sectionElement HTMLElement The section 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 daily 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

getLastChild(currElem)

Recursive function to determine the previous bullet to focus on when moving up (and also after deletion)

If previous sibling has children, will recursively call function on the last child of previous sibling's children

This continues until previous sibling doesn't have children, then returning the currentElement

Base case of previous sibling never having children will return the element pased in

Source:
Parameters:
Name Type Description
currElem HTMLElement current element in the recursion, will check to make sure prevChildren don't exist before turning self in

keyCodeListener(event, bulletElement, bulletID, sectionElement, sectionID)

This function handles the keyboard input and looks for special keycodes:

Enter - creates a new sibling bullet below current bullet

Up - moves the focus up the onscreen bullets

Down - moves the focus down the onscreen bullets

Tab - indents the bullet, essentially making the current bullet a child of it's previuos sibling

Backspace - deletes the bullet and moves the focus up on teh onscreen bullets

Source:
Parameters:
Name Type Description
event keydownEvent provides access to the keyCode input
bulletElement HTMLElement current bullet element, mainly used for display related logic
bulletID String current bullet's ID, mainly used for data related logic
sectionElement HTMLElement current section element, mainly used for display related logic
sectionID String current section ID, mainly used for data related logic

newNoteHandler(sectionElement, index, siblingElem)

This function creates a new bullet. It first generates a bullet ID by combining the date of the daily 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 daily JSON object in the appropriate section, and stores the updated daily 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
index Number optional (on Enter) target index in bulletIDs to place the generated newNote (data)
siblingElem HTMLElement optional (on Enter) sibling bullet to place the generated newNote after (display) was clicked to trigger the listener

newSectionHandler(divElement)

This function creates a new section. It first creates a section ID by looking at how many sections are currently in the daily log and adding 1. It then creates the new section object for storage and adds it to the daily JSON object, then updates the daily JSON object in the database. Lastly, it creates a new section HTML element, and adds the appropriate buttons for note addition and section deletion, adds event listeners to those buttons, and appends the section to the daily-log element.
Source:
Parameters:
Name Type Description
divElement HTMLElement The daily-log div element in which the new section is being created 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 daily 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