Web Code
Introduction
On this page the Web Code is discussed. To create a working webpage that will be inline with the requirements we need to combine multiple coding languages. The languages that are used are HTML, CSS, Javascript and PHP. The code is separated and further explained in detail.
HTML & CSS
For the styling and elements of our website we have obviously made use of HTML/CSS. To make this easier we have made use of Bootstrap to make the elements within our website. The main elements of our website are:
- Question table
- Question input form
- Pie chart of total answers on selected question
- Bar chart of daily answers on selected question
Javascript
answerData.js
This is used to display the selected question and the amount of answers for each answer. It fetches both question data and answer data from the back-end. This data is then inserted into the various HTML components to display the data on the front-end. This includes the code for the pie-chart on the webpage
fetchDataAnswer()
This method fetches data from both the question table and the answer table. This then converts it to JSON and returns both the questions and answers as an array.
Parameters
None
Returns
Array with selected question and corresponding answers.
updateAnswerHTML()
This method updates the HTML code, by inserting the selected question and answer data into their respective div elements. First it will take the returned data from reworkData(). These values are then used to create a pie chart using ChartJS. The labels are reverse in order to keep the right label above its component in the pie chart.
Next the values are inserted into the HTML. The entire question is inserted into the selected question section in the page. Next the data for the total yes and no votes is inserted into their respective sections below the graph. This also includes a total of votes on this specific question. It also has an event listener for changes in the selected question.
Parameters
None
Returns
None
reworkData()
First it will call the fetchData() method in order to get the question and answer data as an array. Both the questions and answers are then separated into two variables. From the questions, the currently selected question is taken and stored in a variable.
All answers belonging to the selected question are taken and stored in a new variable. These are then also filtered to get both all answers with a yes vote and all answers with a no vote. After this, the length is taken and inserted into new variables. At the end the amount of yes answers, no answers and the selected question will be returned.
Parameters
None
Returns
Array with separated yes-/no answers and selected question
initializeGraph()
Initializes the pie chart graph with the data. If no data is available it will also enable a message indicating no data.
Parameters
None
Returns
None
updateGraph()
This function is called to update the data within the graph. It is set at an 5000ms interval. It is also triggered when a new question is selected.
Parameters
None
Returns
None
formhandle.js
This is used to handle the form submission to the backend. In this a couple of checks are included that check if the input is valid. This is done through JavaScript to make the frontend experience more pleasant.
questionList.js
This is used to create a table with all questions. It makes use of Bootstrap to make the table. It fetches all the question data from the back-end and parses the data. It also includes functions for deleting & updating questions.
initializeTable()
Initializes the table which displays all the questions It includes the options which are used to make the table
Parameters
None
Returns
None
deleteClickAction()
Houses the delete question action. This needs to be called with a question which should be deleted. How does I know what to delete? Call it with the question object to delete from the list.
Parameters
| Name | Description |
|---|---|
| questionData | The question object to be updated. |
Returns
None
updateClickAction()
Houses the update question action. When called it will give the question id to the backend This will update the given question to be 'selected' (=1).
Parameters
| Name | Description |
|---|---|
| questionData | The question object to be updated. |
Returns
None
actionsFormatter()
Is called in the table initialization. It will add a 'select' & 'delete' button to the row. This is used to fill the 'Actions' columns in the table.
Parameters
None
Returns
None
weeklyGraph.js
initializeWeeklyGraph()
This method initializes the weekly graph. Using chartJS a chart or graph can be displayed this way. The graph is a bar graph with the following options and plugins:
- options.responsive = true. This makes the graph responsive.
- options.maintainAspectRatio = false. This makes the graph able to change height and width when needed, also prevents certain scaling bugs.
- plugins.legend.reverse = false. Changes the position of the legend labels.
- plugins.title.display = false. Makes it so the title is not displayed.
Initializing the graph is an important part, if you try to change the graph or remove it if it wasn't initialized for whatever reason, you will get errors in the console.log.
Parameters
None
Returns
None
fetchWeekSummary()
Uses a special GET query in the /answers endpoint file to get specific information about how many times yes and no were votes for a specific date. This is essential in order to feed the graph, the correct data.
Parameters
None
Returns
| Description |
|---|
| Backend data for weekly summary |
populateGraph()
This method feeds the data from the fetchWeekSummary method to the weekly graph that was initialized in the initializeWeeklyGraph method. It first grabs the data that was fetch. Next all unique dates are given to a variable. This will also be used in order to create the right x-axis labels. After this the vote data is separated into two sections. One for yes votes and one for no votes. Finally we have an if else statement. If no labels were provided, the graph will be empty, and a message will get displayed to indicate no data. This is because if no labels were provided, no data was provided either. If this is not the case and the labels were actually provided do the following. Change the labels, change the graph data and then update the graph using the built-in update function. This method also gets called at an internal of 5000 milliseconds.
Parameters
None
Returns
None
Note
Below is some documentation for old JavaScript files, which did not end up in the final product. Nonetheless we have included the documentation for future expansion.
graph.js
This is used to display a graph with all the cup interactions on the webpage. It includes functions for fetching, processing and displaying the cup interaction data. Below is a description of each function
getInteractions()
This function fetches all cup interaction in the database. It also converts the timestamp to the local timezone.
processInteractions()
This function takes the fetched cup interactions and processes these to be displayed in the chart. Here it only selects interactions from the current day. It also splits each different cup id into separate datasets, so each cup can be displayed separately.
createChart()
Creates a chart object with the given cup interactions dataset
fillChartContent()
Called to fill the chart with the data from the database, this updates the values of the chart
cuptotal.js
To make the javascript usable and interactive for the webpage, we make use of AJAX. AJAX allows us to update the elements shown on the webpage live without having to refresh the webpage. This allows us to show the most accurate data possible. To make the collected data visible for the HTML code and to add styling in CSS we place the element into a placeholder to use. In this case the placeholder is called: 'cupstotalplaceholder'. The code that combines these elements is as the following:
availablecup.js
For this script we again make use of AJAX to make the values update automatically on the webpage.The script takes the data collected from the PHP file called getavailability.php. The data it collects is the amount of cups that are not taken and are available to grab for the user. The element is than placed into the variable 'availablecupsPlaceholder'. This allows us to show the data on the webpage. The code to achieve this looks like the following:
timeupdate.js
This is an easy javasscript that places the collected time from the PHP file = availablecuptime.php, and stores it in a variable called 'timeOfAvailability'. This allows us to use it in the index.html file to make it visible on the webpage. The file looks like the following: