| @@ -4,8 +4,9 @@ | ||
| 4 | 4 | import API from './classes/api'; |
| 5 | 5 | import ControlSync from './classes/control/control-sync'; |
| 6 | 6 | import ControlStates from './classes/control/control-states'; |
| 7 | 7 | import ControlMeta from './classes/control/control-meta'; |
| 8 | +import OptimizationDetails from './classes/optimization-details'; | |
| 8 | 9 | |
| 9 | 10 | class OptimizationControl { |
| 10 | 11 | constructor() { |
| 11 | 12 | this.controlSyncRequestInProgress = false; |
| @@ -36,8 +37,10 @@ | ||
| 36 | 37 | initEventListeners() { |
| 37 | 38 | document.addEventListener( 'click', ( e ) => this.handleOptimizeButtonClick( e ) ); |
| 38 | 39 | document.addEventListener( 'click', ( e ) => this.handleReoptimizeButtonClick( e ) ); |
| 39 | 40 | document.addEventListener( 'click', ( e ) => this.handleRestoreButtonClick( e ) ); |
| 41 | + document.addEventListener( 'click', ( e ) => this.handleOptimizationDetailsOpen( e ) ); | |
| 42 | + document.addEventListener( 'click', ( e ) => this.handleOptimizationDetailsClick( e ) ); | |
| 40 | 43 | } |
| 41 | 44 | |
| 42 | 45 | async handleOptimizeButtonClick( e ) { |
| 43 | 46 | if ( ! e.target.closest( `${ SELECTORS.optimizeButtonSelector }, ${ SELECTORS.tryAgainOptimizeButtonSelector }` ) ) { |
| @@ -105,8 +108,48 @@ | ||
| 105 | 108 | await API.restoreSingleImage( new ControlMeta( controlWrapper ).getImageId() ); |
| 106 | 109 | } catch ( error ) { |
| 107 | 110 | states.renderError( error ); |
| 108 | 111 | } |
| 112 | + } | |
| 113 | + | |
| 114 | + async handleOptimizationDetailsOpen( e ) { | |
| 115 | + if ( ! e.target.closest( `${ SELECTORS.optimizationDetailsButtonSelector }` ) ) { | |
| 116 | + return; | |
| 117 | + } | |
| 118 | + | |
| 119 | + const controlWrapper = e.target.closest( SELECTORS.controlWrapperSelector ); | |
| 120 | + const imageId = new ControlMeta( controlWrapper ).getImageId(); | |
| 121 | + | |
| 122 | + try { | |
| 123 | + OptimizationDetails.initModal(); | |
| 124 | + OptimizationDetails.renderLoading(); | |
| 125 | + | |
| 126 | + const details = await API.getOptimizationDetails( imageId ); | |
| 127 | + | |
| 128 | + OptimizationDetails.openModal(); | |
| 129 | + OptimizationDetails.renderData( imageId, details ); | |
| 130 | + } catch ( error ) { | |
| 131 | + OptimizationDetails.openModal(); | |
| 132 | + OptimizationDetails.renderError( error.message ); | |
| 133 | + } | |
| 134 | + } | |
| 135 | + | |
| 136 | + async handleOptimizationDetailsClick( e ) { | |
| 137 | + if ( ! e.target.closest( `${ SELECTORS.optimizationDetailsOptimizeButtonSelector }` ) ) { | |
| 138 | + return; | |
| 139 | + } | |
| 140 | + | |
| 141 | + const imageId = parseInt( e.target.dataset?.imageId, 10 ); | |
| 142 | + | |
| 143 | + await API.optimizeSingleImage( { imageId } ); | |
| 144 | + | |
| 145 | + const controlWrapper = document.querySelector( `.image-optimization-control[data-image-optimization-image-id="${ imageId }"]` ); | |
| 146 | + | |
| 147 | + if ( controlWrapper ) { | |
| 148 | + new ControlStates( controlWrapper ).renderLoading( 'optimize' ); | |
| 149 | + } | |
| 150 | + | |
| 151 | + OptimizationDetails.closeModal(); | |
| 109 | 152 | } |
| 110 | 153 | } |
| 111 | 154 | |
| 112 | 155 | export default OptimizationControl; |