Skip to content

Components

Shen Yang edited this page Oct 25, 2023 · 17 revisions

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

Notifier

A frontend only component. It shows the user messages in the bottom right.
Notifier Screenshot Notifier Screenshot Minimized

The notifier can be used on a page by instantiating the javascript class on the notification element available on most pages in the app.
Example:

const notificationsElement = $('#notifications')
const notifier = notificationsElement.length ? new Notifier(notificationsElement) : null

Notifier Methods

notify (message, level, isDismissable)
message - The message to be displayed to the user
level - info for a green notification, warn for an orange notification, error for a red notification
isDismissable(optional) - true(default) provides a button for the user to delete the notification. false to not provide the button.
Returns a Notification object

totalNotificationCount ()
Returns the total number of notifications shown. Only notifications created by notify are counted.

waitForAsyncOperation () Adds one to the notifier's count of async operations waiting to be resolved. While the count is greater than 0, the below saving notification is shown
Notifier Screenshot Async Waiting

resolveAsyncOperation (errorMsg)
errorMsg(optional) - The error message explaining why an awaited async operation failed.
If no arguments are passed the saved success notification is shown instead.
Notifier Screenshot Async Complete

VVV UNDER CONSTRUCTION NOT READY FOR READING VVV

Notification

A frontend only component. A child component of the notifier. It represents a single notification generated by the notifier.

Local Time

A backend only component. Displays a time using the current request's timestamp.

Parameters

format - Either 12 or 24 hour
unix_timestamp - an integer representing the unix timestamp to be displayed

Example usage:

<%= render (LocalTimeComponent.new(format: 12, unix_timestamp: 1694349775))%>

image