Ember Controller for Badge Generation In Badgeyay
Badgeyay is an open source project developed by FOSSASIA Community. This project aims towards giving a platform for badge generation using several customizations options. Current structure of project is in two parts to maintain modularity, which are namely backend, developed in flask, and frontend, developed in ember. After refactoring the frontend and backend API we need to create a controller for the badge generation in frontend. Controller will help the components to send and receive data from them and prepare the logic for sending request to API so that badges can be generated and can receive the result as response from the server. Particularly we need to create the controller for badge generation route, create-badges. As there are many customizations option presented to user, we need to chain the requests so that they sync with each other and the logic should not break for the badge generation. Procedure Creating the controller from the ember-cli ember g controller create-badge After the component generation, we need to create actions that can be passed to components. Let’s build action to submit form and then chain the different actions together for the badge generation. submitForm() { const _this = this; const user = _this.get('store').peekAll('user'); let uid; user.forEach(user_ => { uid = user_.get('id'); }); if (uid !== undefined && uid !== '') { _this.set('uid', uid); } let badgeData = { uid : _this.uid, badge_size : 'A3' }; if (_this.csvEnable) { badgeData.csv = _this.csvFile; } if (_this.defFontColor !== '' && _this.defFontColor !== undefined) { badgeData.font_color = '#' + _this.defFontColor; } if (_this.defFontSize !== '' && _this.defFontSize !== undefined) { badgeData.font_size = _this.defFontSize.toString(); } if (_this.defFont !== '' && _this.defFont !== undefined) { badgeData.font_type = _this.defFont; } _this.send('sendManualData', badgeData); }, As we can see in the above code snippet that _this.send(action_name, arguments) is calling another action sendManualData. This action then sends a network request to the backend if the Manual data is selected as input source otherwise will go with the CSV upload. If no option is chosen then it will show an error on the user screen, notifying him to select one input source. sendManualData(badgeData) { const _this = this; if (_this.manualEnable) { let textEntry = _this.get('store').createRecord('text-data', { uid : _this.uid, manual_data : _this.get('textData'), time : new Date() }); textEntry.save().then(record => { _this.set('csvFile', record.filename); badgeData.csv = _this.csvFile; _this.send('sendDefaultImg', badgeData); _this.get('notify').success('Text saved Successfully'); }).catch(err => { let userErrors = textEntry.get('errors.user'); if (userErrors !== undefined) { _this.set('userError', userErrors); } }); } else if (_this.csvEnable) { if (_this.csvFile !== undefined && _this.csvFile !== '') { badgeData.csv = _this.csvFile; _this.send('sendDefaultImg', badgeData); } } else { // No Input Source specified Error } }, The above code will choose the manual data if the manual data boolean flag is set else not, and then does a network request and wait for the promise to be resolved. As soon as the promise…