This week I have started writing my code using javascript framework which is VueJs for attendance taker screen.  There are six screens that I need to build for this music competition, one of them is attendance taker screen which it is used to take the attendance of the participants. Since I’m still new in VueJs, I chose to start with attendance taker screen first because it is the easiest to build compared to others. As I have said in the previous blog, all screens will include the use of Vuejs, Axios js, and Vuetify js to make it work as I wanted. Thus, I need to make sure that I understand how this three elements linked to each other.

Let me tell you about the flow and role of the attendance taker in this music competition first. Attendance taker will call out the name of the participants and take the attendance by clicking the icon on the screen. State of the event is used to represent different states in the events table of the competition. There are three states in the event states which are 0,1 and 2.

0 – Registration

1-Running

2-Closed

The attendance role is responsible for changing the state of an event from 0 to 1 only.The emcee will call out the name of the participants based on the attendance taken.  For the attendance screen, it will contain the player name and the icon that helps attendance taker take the attendance by clicking it. For making my life easier in the future, I have added two extras information that can be used to other screens which are piece name and duration time of each performer.

By the end of the week, I managed to build attendance screen with the all the information that I needed for the screen and the icon that can help for attendance taking. Hoping for a great week ahead as I am expecting myself to complete attendance screen by next week.

 

 

Categories: Experiential

Leave a Reply