Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay has many features related to enhancement in the generation of badges. It gives the choice of uploading data entries i.e by CSV or manually. There are options available for choosing Badge Background and font specifications. But there is an important feature missing which will make the service more user-friendly in terms of creation of badges for different types of events i.e, Badge Size.
Badge Size feature is implemented in Backend. I need to send the data in the backend in the desired format for creation of Badges with different sizes.
In this Blog, I will be discussing how I implemented Badge Size feature in Badgeyay Frontend in my Pull Request.
Let’s get started and understand it step by step.
Step 1:
Create Badge Size component with Ember CLI.
$ ember g component badge-component/badge-size
Step 2:
Write the HTML required in the badge-size component:
// templates/components/badge-component/badge-size.hbs
class="inline fields">
class="field">
class="ui radio checkbox" {{ action 'mutateBadgeSize' 'A3' }}>
name="size" value="A3" type="radio">
A3
</div>
class="field">
class="ui radio checkbox" {{ action 'mutateBadgeSize' 'A4' }}>
name="size" value="A4" type="radio">
A4
</div>
class="field">
class="ui radio checkbox" {{ action 'mutateBadgeSize' 'A5' }}>
name="size" value="A5" type="radio">
A5
</div>
class="field">
class="ui radio checkbox" {{ action 'mutateBadgeSize' 'A6' }}>
name="size" value="A6" type="radio">
A6
</div>
</div>
Step 3:
Integrate the Badge Size component with creating badges component.
// templates/create-badges.hbs
…………………………….
class="ui raised segment">
class="ui form width-container">
Select from one of the Badge Sizes
{{#ui-accordion class="styled fluid"}}
class="title">
class="plus icon">
Badge Size
class="content">
class="center aligned">
{{ badge-component/badge-size sendBadgeSize=(action 'mutateBadgeSize') }} // Injecting Action
</div>
{{/ui-accordion}}
</div>
</div>
………………………….
Step 4: Define the actions that are injected into the component.
// badge-component/badge-size.js
import Component from '@ember/component';
export default Component.extend({
init() {
this._super(...arguments); // Initialize
},
actions: {
mutateBadgeSize(value) {
this.get('sendBadgeSize')(value); // Get values
}
}
});
// controllers/create-badges.js
...............
let badgeData = {
uid : _this.uid,
badge_size : 'A3' // Default Badge Size
};
if (_this.defBadgeSize !== '' && _this.defBadgeSize !== undefined) {
badgeData.badge_size = _this.defBadgeSize;
}
...................
mutateBadgeSize(value) {
this.set('defBadgeSize', value);
},
................
I have implemented the Feature to choose Badge Size in the frontend. Now, the user can choose Badge size also for Badge customization.
Step 5::
Now run the server to see the implemented changes by the following command.
$ ember serve
- Badge Size Component
- Payload when A5 Size Chosen for Badge Generation
Now, we are done with the implementation of Badge Size feature in Badgeyay Frontend.
Resources: