|
| 1 | +import { Widget } from './Widget'; |
| 2 | +import { Ubidots as UJL } from '@ubidots/ubidots-javascript-library'; |
| 3 | + |
| 4 | +const logger = (...args) => console.log('[HTMLCanvas]', ...args); |
| 5 | + |
| 6 | +enum EventTypes { |
| 7 | + DASHBOARD_REFRESHED = 'dashboardRefreshed', |
| 8 | + IS_REAL_TIME_ACTIVE = 'isRealTimeActive', |
| 9 | + READY = 'ready', |
| 10 | + RECEIVED_HEADERS = 'receivedHeaders', |
| 11 | + RECEIVED_JWT_TOKEN = 'receivedJWTToken', |
| 12 | + RECEIVED_TOKEN = 'receivedToken', |
| 13 | + SELECTED_DATE_RANGE = 'selectedDashboardDateRange', |
| 14 | + SELECTED_DASHBOARD_OBJECT = 'selectedDashboardObject', |
| 15 | + SELECTED_DEVICE = 'selectedDevice', |
| 16 | + SELECTED_DEVICE_OBJECT = 'selectedDeviceObject', |
| 17 | + SELECTED_DEVICES = 'selectedDevices', |
| 18 | + SELECTED_DEVICE_OBJECTS = 'selectedDeviceObjects', |
| 19 | + SELECTED_FILTERS = 'selectedFilters', |
| 20 | + SET_FULL_SCREEN = 'setFullScreen', |
| 21 | + OPEN_DRAWER = 'openDrawer', |
| 22 | +} |
| 23 | + |
| 24 | +type DashboardDateRange = { |
| 25 | + start: number; |
| 26 | + end: number; |
| 27 | +}; |
| 28 | + |
| 29 | +type DrawerInfo = { |
| 30 | + url: string; |
| 31 | + width: number; |
| 32 | +}; |
| 33 | + |
| 34 | +class MessageHandler { |
| 35 | + static sendMessage(event: EventTypes, payload?: unknown, targetOrigin: string = window.location.origin): void { |
| 36 | + logger('Sending message', { event, payload }); |
| 37 | + window.parent.postMessage({ event, payload }, targetOrigin); |
| 38 | + } |
| 39 | +} |
| 40 | + |
| 41 | +class EventManager { |
| 42 | + private callbacks: Record<EventTypes, Function | null>; |
| 43 | + |
| 44 | + register(eventName: EventTypes, callback: Function): void { |
| 45 | + logger('Registering event', { eventName, callback }); |
| 46 | + if (!Object.values(EventTypes).includes(eventName)) { |
| 47 | + throw new Error(`Invalid event name: ${eventName}`); |
| 48 | + } |
| 49 | + this.callbacks[eventName] = callback; |
| 50 | + } |
| 51 | + |
| 52 | + trigger(eventName: EventTypes, payload: unknown): void { |
| 53 | + logger('Triggering event', { eventName, payload }); |
| 54 | + const callback = this.callbacks[eventName]; |
| 55 | + if (typeof callback === 'function') { |
| 56 | + callback(payload); |
| 57 | + } |
| 58 | + } |
| 59 | +} |
| 60 | + |
| 61 | +class Ubidots { |
| 62 | + private eventManager = new EventManager(); |
| 63 | + private headers: Record<string, string> = {}; |
| 64 | + private token?: string; |
| 65 | + private jwtToken?: string; |
| 66 | + private selectedDevice?: string; |
| 67 | + private selectedDevices: string[] = []; |
| 68 | + private dashboardDateRange?: DashboardDateRange; |
| 69 | + private dashboardObject?: object; |
| 70 | + private realTime = false; |
| 71 | + |
| 72 | + widget: Widget; |
| 73 | + api: typeof UJL; |
| 74 | + |
| 75 | + constructor() { |
| 76 | + this.widget = new Widget(window.widgetId); |
| 77 | + this.api = UJL; |
| 78 | + window.addEventListener('message', this.listenMessage.bind(this)); |
| 79 | + } |
| 80 | + |
| 81 | + initialize(): void { |
| 82 | + console.log('Ubidots initialized.'); |
| 83 | + } |
| 84 | + |
| 85 | + // Public API Methods |
| 86 | + setDashboardDevice(deviceId: string): void { |
| 87 | + MessageHandler.sendMessage(EventTypes.SELECTED_DEVICE, deviceId); |
| 88 | + } |
| 89 | + |
| 90 | + setDashboardMultipleDevices(deviceIds: string[]): void { |
| 91 | + MessageHandler.sendMessage(EventTypes.SELECTED_DEVICES, deviceIds); |
| 92 | + } |
| 93 | + |
| 94 | + setDashboardDateRange(range: DashboardDateRange): void { |
| 95 | + MessageHandler.sendMessage(EventTypes.SELECTED_DATE_RANGE, range); |
| 96 | + } |
| 97 | + |
| 98 | + setRealTime(enableRealTime: boolean): void { |
| 99 | + MessageHandler.sendMessage(EventTypes.IS_REAL_TIME_ACTIVE, enableRealTime); |
| 100 | + } |
| 101 | + |
| 102 | + refreshDashboard(): void { |
| 103 | + MessageHandler.sendMessage(EventTypes.DASHBOARD_REFRESHED); |
| 104 | + } |
| 105 | + |
| 106 | + setFullScreen(fullScreenAction: string): void { |
| 107 | + MessageHandler.sendMessage(EventTypes.SET_FULL_SCREEN, fullScreenAction); |
| 108 | + } |
| 109 | + |
| 110 | + openDrawer(drawerInfo: DrawerInfo): void { |
| 111 | + MessageHandler.sendMessage(EventTypes.OPEN_DRAWER, { |
| 112 | + drawerInfo, |
| 113 | + id: this.widget.getId(), |
| 114 | + }); |
| 115 | + } |
| 116 | + |
| 117 | + get tokenValue(): string | undefined { |
| 118 | + return this.token; |
| 119 | + } |
| 120 | + |
| 121 | + get headersValue(): Record<string, string> { |
| 122 | + const baseHeaders: Record<string, string> = { |
| 123 | + 'Content-Type': 'application/json', |
| 124 | + }; |
| 125 | + |
| 126 | + if (this.jwtToken) { |
| 127 | + baseHeaders['Authorization'] = `Bearer ${this.jwtToken}`; |
| 128 | + } else if (this.token) { |
| 129 | + baseHeaders['X-Auth-Token'] = this.token; |
| 130 | + } |
| 131 | + |
| 132 | + return { ...baseHeaders, ...this.headers }; |
| 133 | + } |
| 134 | + |
| 135 | + // Private Methods |
| 136 | + private listenMessage(event: MessageEvent): void { |
| 137 | + if (event.origin !== window.location.origin) return; |
| 138 | + |
| 139 | + const { event: eventName, payload } = event.data; |
| 140 | + |
| 141 | + const EVENT_HANDLERS: Record<string, (payload: unknown) => void> = { |
| 142 | + [EventTypes.IS_REAL_TIME_ACTIVE]: this.setRealTimeValue.bind(this), |
| 143 | + [EventTypes.RECEIVED_HEADERS]: this.setHeaders.bind(this), |
| 144 | + [EventTypes.RECEIVED_JWT_TOKEN]: this.setJWTToken.bind(this), |
| 145 | + [EventTypes.RECEIVED_TOKEN]: this.setToken.bind(this), |
| 146 | + [EventTypes.SELECTED_DATE_RANGE]: this.setDashboardDateRangeValue.bind(this), |
| 147 | + [EventTypes.SELECTED_DASHBOARD_OBJECT]: this.setDashboardObject.bind(this), |
| 148 | + [EventTypes.SELECTED_DEVICE]: this.setSelectedDevice.bind(this), |
| 149 | + [EventTypes.SELECTED_DEVICES]: this.setSelectedDevices.bind(this), |
| 150 | + }; |
| 151 | + |
| 152 | + const handler = EVENT_HANDLERS[eventName]; |
| 153 | + if (handler) handler(payload); |
| 154 | + |
| 155 | + this.eventManager.trigger(eventName as EventTypes, payload); |
| 156 | + this.triggerReadyIfNecessary(); |
| 157 | + } |
| 158 | + |
| 159 | + private setToken(token: string): void { |
| 160 | + this.token = token; |
| 161 | + } |
| 162 | + |
| 163 | + private setJWTToken(jwt: string): void { |
| 164 | + this.jwtToken = jwt; |
| 165 | + } |
| 166 | + |
| 167 | + private setHeaders(headers: Record<string, string> = {}): void { |
| 168 | + this.headers = headers; |
| 169 | + } |
| 170 | + |
| 171 | + private setSelectedDevice(deviceId: string): void { |
| 172 | + this.selectedDevice = deviceId; |
| 173 | + } |
| 174 | + |
| 175 | + private setSelectedDevices(deviceIds: string[]): void { |
| 176 | + this.selectedDevices = deviceIds; |
| 177 | + } |
| 178 | + |
| 179 | + private setDashboardDateRangeValue(range: DashboardDateRange): void { |
| 180 | + this.dashboardDateRange = range; |
| 181 | + } |
| 182 | + |
| 183 | + private setDashboardObject(dashboardObject: object): void { |
| 184 | + this.dashboardObject = dashboardObject; |
| 185 | + } |
| 186 | + |
| 187 | + private setRealTimeValue(realTime: boolean): void { |
| 188 | + this.realTime = realTime; |
| 189 | + } |
| 190 | + |
| 191 | + private isReady(): boolean { |
| 192 | + return ( |
| 193 | + (this.token || this.jwtToken) !== undefined && |
| 194 | + this.selectedDevice !== undefined && |
| 195 | + this.dashboardDateRange !== undefined && |
| 196 | + this.dashboardObject !== undefined |
| 197 | + ); |
| 198 | + } |
| 199 | + |
| 200 | + private triggerReadyIfNecessary(): void { |
| 201 | + if (this.isReady()) { |
| 202 | + this.eventManager.trigger(EventTypes.READY, null); |
| 203 | + } |
| 204 | + } |
| 205 | + |
| 206 | + // Event API |
| 207 | + on(eventName: EventTypes, callback: Function): void { |
| 208 | + this.eventManager.register(eventName, callback); |
| 209 | + } |
| 210 | +} |
| 211 | + |
| 212 | +export default Ubidots; |
0 commit comments