new YearlyLog()
Constructs a blank yearly log HTML element using the defined HTML template
- Source:
Example
Yearly Log class
// Example of a yearly JSON object used to generate a yearly-log element
const exampleYearlyJSON = {
sections: [
{
id: '00',
name: 'Yearly Goals',
type: 'log',
bulletIDs: [
'B 21 00 00',
'B 21 00 01'
],
nextBulNum: 2
},
{
id: '01',
name: 'Yearly Notes',
type: 'log',
bulletIDs: [
'B 21 01 00',
'B 21 01 01',
'B 21 01 02'
],
nextBulNum: 3
}
]
}
// Create a new yearly log HTML element using the object
let yearly = document.createElement('yearly-log');
yearly.data = exampleYearlyJSON;
Members
data
This function returns the data stored in this yearly element as a JSON object.
- Source:
data
This function constructs the yearly log HTML element using the given ID and yearly log
object data. It starts by constructing and setting the header text for the element, then
goes through each attribute of the yearly 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 yearly JSON
object to remove the ID of the bullet being deleted from the appropriate section, and then
stores the updated yearly 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 yearly 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 yearly 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 yearly JSON object in
the appropriate section, and stores the updated yearly 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 yearly 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 |