import { SYNC_LOG_ID , ERROR_LOG_ID , DEBUG_LOG_ID } from './const' ; import { id , getOperationDisplayName } from './Util' ; type NullableElement = HTMLElement | null ; const getCountLog = ( operation , type ) : NullableElement => document . querySelector ( id ( `douki-${ operation }-${ type }-items` ) ) ; export interface ILog { clear ( type ) : void ; error ( msg ) : void ; info ( msg ) : void ; debug ( msg ) : void ; addCountLog ( operation , type , max ) : void ; updateCountLog ( operation , type , count ) : void ; } export class Log implements ILog { errorLogElement : NullableElement = null ; syncLogElement : NullableElement = null ; debugLogElement : NullableElement = null ; get errorLog ( ) { if ( ! this . errorLogElement ) { this . errorLogElement = document . querySelector ( id ( ERROR_LOG_ID ) ) ; } return this . errorLogElement ; } get syncLog ( ) { if ( ! this . syncLogElement ) { this . syncLogElement = document . querySelector ( id ( SYNC_LOG_ID ) ) ; } return this . syncLogElement ; } get debugLog ( ) { if ( ! this . debugLogElement ) { this . debugLogElement = document . querySelector ( id ( DEBUG_LOG_ID ) ) ; } return this . debugLogElement ; } private clearErrorLog ( ) { if ( this . errorLog ) { this . errorLog . innerHTML = '' ; } } private clearSyncLog ( ) { if ( this . syncLog ) { this . syncLog . innerHTML = '' ; } } private clearDebugLog ( ) { if ( this . debugLog ) { this . debugLog . innerHTML = '' ; } } clear ( type = '' ) { console . clear ( ) ; if ( type !== 'error' ) this . clearSyncLog ( ) ; if ( type !== 'sync' ) this . clearErrorLog ( ) ; this . clearDebugLog ( ) ; } error ( msg ) { if ( this . errorLog ) { this . errorLog . innerHTML += `<li>${ msg }</li>` ; } else { console . error ( msg ) ; } } info ( msg ) { if ( this . syncLog ) { this . syncLog . innerHTML += `<li>${ msg }</li>` ; } else { console . info ( msg ) ; } } debug ( msg ) { if ( this . debugLog ) { this . debugLog . innerHTML += `<li>${ msg }</li>` ; } else { console . debug ( msg ) ; } } addCountLog ( operation , type , max ) { const opName = getOperationDisplayName ( operation ) ; const logId = `douki-${ operation }-${ type }-items` ; this . info ( `${ opName } <span id="${ logId }">0</span> of ${ max } ${ type } items.` ) ; } updateCountLog ( operation , type , count ) { const countLog = getCountLog ( operation , type ) as HTMLSpanElement ; if ( ! countLog ) return ; countLog . innerHTML = `${ count }` ; } } export default new Log ( ) ;