Now that the basic frontend infrastructure has been set up and the backend route is functioning properly, we can finally build out the actual frontend view for displaying the periods data.
The nature of this frontend view makes it so that it would definitely be best to split this into various Vue files. You've already created the Periods.vue file. I would also create a PeriodYear.vue and a PeriodMonth.vue file so that the various pieces can be reused.
The view is a bit complex and can be difficult to describe well in words. Dr. Stratford has created a mockup and given some good descriptions in Issue #1069 that you should reference.
Here are some basic guidelines:
1. Periods.vue
In this view, you will make the server call to the new GET /periods route using the function you created in the last step in the serverProxy file, displaying an error snackbar in the case that it fails. Then, you will simply use a v-for to display a PeriodYear.vue for each of the years in the PeriodResponse object received by the server call. At a later point, we will add other things to this view like a filter and clickable elements, but for now, all we need it to do is display PeriodYear views for each year in the data.
2. PeriodYear.vue
The PeriodYear view should display a page-wide box that represents a year. At the top, you will display a string that labels the year. It will be formed as such: ${year.number} - ${year.name} (${year.occurrences}).
Within the box, you will then display 12 PeriodMonth.vue views for each of the months that belong to that year. They should be ordered by the abbreviation which is in Roman Numerals. In some cases, there will be more than 12 months that belong to a year. Dr. Stratford described the historical reasoning for that in the overview issue. In this case, there will be a year with an abbreviation that is either zib or xiib. In the case that one of those exists, it should be displayed to the right of the other 12 months and should be slightly offset. The mockup in the overview issue displays this properly.
Make sure to get this configured well so that it appears correct regardless of the width of the window. This might be a bit tricky so feel free to ask for help as needed.
3. PeriodMonth.vue
The PeriodMonth view should display a box with with a month label at the top. That month label is created by displaying: ${month.abbreviation}. ${month.name}.
Then, under the month label, there should be an alphabetical list of week names. No special formatting is necessary.
Conclusion
In all, while this issue serves as a basic guide for setting up these various views, the mockup and other information provided in the overview issue (Issue #1069) will probably be most useful for seeing how to display the relevant data.
Now that the basic frontend infrastructure has been set up and the backend route is functioning properly, we can finally build out the actual frontend view for displaying the periods data.
The nature of this frontend view makes it so that it would definitely be best to split this into various Vue files. You've already created the
Periods.vuefile. I would also create aPeriodYear.vueand aPeriodMonth.vuefile so that the various pieces can be reused.The view is a bit complex and can be difficult to describe well in words. Dr. Stratford has created a mockup and given some good descriptions in Issue #1069 that you should reference.
Here are some basic guidelines:
1.
Periods.vueIn this view, you will make the server call to the new
GET /periodsroute using the function you created in the last step in theserverProxyfile, displaying an error snackbar in the case that it fails. Then, you will simply use av-forto display aPeriodYear.vuefor each of the years in thePeriodResponseobject received by the server call. At a later point, we will add other things to this view like a filter and clickable elements, but for now, all we need it to do is display PeriodYear views for each year in the data.2.
PeriodYear.vueThe PeriodYear view should display a page-wide box that represents a year. At the top, you will display a string that labels the year. It will be formed as such:
${year.number} - ${year.name} (${year.occurrences}).Within the box, you will then display 12
PeriodMonth.vueviews for each of the months that belong to that year. They should be ordered by the abbreviation which is in Roman Numerals. In some cases, there will be more than 12 months that belong to a year. Dr. Stratford described the historical reasoning for that in the overview issue. In this case, there will be a year with an abbreviation that is eitherziborxiib. In the case that one of those exists, it should be displayed to the right of the other 12 months and should be slightly offset. The mockup in the overview issue displays this properly.Make sure to get this configured well so that it appears correct regardless of the width of the window. This might be a bit tricky so feel free to ask for help as needed.
3.
PeriodMonth.vueThe PeriodMonth view should display a box with with a month label at the top. That month label is created by displaying:
${month.abbreviation}. ${month.name}.Then, under the month label, there should be an alphabetical list of week names. No special formatting is necessary.
Conclusion
In all, while this issue serves as a basic guide for setting up these various views, the mockup and other information provided in the overview issue (Issue #1069) will probably be most useful for seeing how to display the relevant data.
Please let me know if you have any questions.