# Midterm Project for MSTU 5013

Team:
Zexin Lyu: UNI: zl3066,
Siyu Duan: UNI: sd3485,
Yiran Wang: UNI: yw3713.

### Project Name: Online Study Room
Link to project: https://codepen.io/zl3066/collab/vYpNPjo?editors=0010
Debug Mode: https://cdpn.io/pen/debug/RwxRoxV?authentication_hash=XBAGRNJOEwNr

We designed an online study room, because it tends to be difficult to study when you are alone. So we wanted to create a virtual collaborative space for self studies. We want people to come to our website and study with other people. By watching others study, as you would see in a library, it would be easier for you to work harder!

When you enter an online study room, it would show the name of the room, total seats and available seats. The room name can change based on people's preferences, and when there are multiple study rooms, there would be multiple study room names. Each study room can have different number of seats, and in this example, we have 27 total seats. The available seats will change based on how many people there are in the room. We used `v-for` to print out all desks in the parent data desks, and we use `@change="changeNumber"` as emit to pass children's data to the parent data.

In the javascript part, we have data that indicate the name of the room, the number of the total seats and available seats, which are all subject to change. We also have an array of desks with a unique ID to indicate every single desk in the classroom. In the child component part, each child component has an orignial empty desk picture and a button saying "select". However, the image, the text and the color of the button would change when we trigger a handler, so we use` v-bind` or `{{}}` in the template. We have "statusText" to allow user to choose the seats or leave, and "imgSrc" to demonstrate the visual status. People entering the room can click the "select" button to take a seat if the desk is empty. After people click on "select" button, the empty desk image would turn to another image that is randomly generated with a person seating next to the desk to visually represent the seats has been taken. At the same time, the text would turns to "Leave", and the color of the button would change to red. Also, the available seats would minus one. We achieve this by passing the "statusText" to the parent using `emit`, so that we can use the information to change the number of available seats. In parent compoent part, We use "changeNumber" to make sure the values from the child component can get to the parent component. When we click "select" button, we want the value "available seats" to minus by one. If people want to leave the room they click "Leave", then the image would go back to empty desk image, also the button of the color would turns to green again and the text would appear "Select" so that other people can select this table. And the available seats would add one.