buksy90 / ksl Goto Github PK

Update table list page ( http://localhost:3000/tabulka ) to show teams standings by default when page is loaded.

AC: When Im on "Uvod" page and I click on "Tabuľky" in menu then I want to teams table to be shown by default so I dont have to click on "Poradie timov" button

Create some 404 page:

AC:

• create new component NotFound in pages/ directory
• register it in router in app.js

Set floating of last item in menu to the right using bootstrap v4 classes.

AC:

• use only existing bootstrap classes
• do not write custom css

When user logs in, display his name and link for logging out. Take a look at new.ksl.sk, logging functionality should work similarly.

AC:

• When user is logged in, display new dropdown in menu on last position that would replace "Log in" option. Use user name as dropdown text.
• When user is logged in, new dropdown in menu should have one option, "Log out" (Odhlásiť) that will point to http://new.ksl.sk/logout.php
• When user is logged out, display "Log in" link as last item in menu (same functionality as now)
• Use new dataProvider's function getUser. It returns name of user that is logged in, if user isnt logged in, function returns null as username

Display list of news on index page

• use dataProvider getNewsList function to get list of news
• display list of news (use some bootstrap component, probably panel but can try other)

Create a page with team details similar to http://new.ksl.sk/teams/TYD

AC:

• should contain table with team name, shortname, captain, number of players (top left table)
• should contain table with team statistics, played games, wins, losts, standing, made points, made points avg, allowed points, allowed points avg, success rate (second left table)
• should contain table with list of matches (right table)
• should contain table with list of players (right table)
• there should be buttons to switch between tables of matches and players
• should contain header with name of team
• must be accessible under link /teams/<SHORT_NAME> (i.e. /teams/FUN)
• create own data provider function, use graphQlRequest function from data provider

Note:
new fields have been added to existing graphQl queries, but if any data cannot be requested using existing graphQl schema, let me know. I recommend following extension https://chrome.google.com/webstore/detail/chromeiql/fkkiamalmpiidkljmicmjfbieiclmeij to be installed into chrome to explore existing schema. Use http://new.ksl.sk/api.php as endpoint.

Create new component that will display table with data

AC:

• create component src/components/KslTable.js
• component has to have two props, data and header
• prop data will be an array of arrays with data
• prop header will be an array of strings with column names
• use table-striped and table-hover bootstrap classes

Example of table usage (pseudo code):

class Test extends Component {
  render() {
      var data = [
        [1, "Bratislava", 429564],
        [2, "Košice", 239095],
        [3, "Prešov", 89138]
      ];

      var header = ["Poradie", "Mesto", "Počet obyvateľov"];

      return <KslTable header={header} data={data}/>
  }
}

When on mobile screen, last item of menu is aligned on right. Fix it to be aligned on left just like other items.

AC:

• last item of menu should be aligned to the left on mobile screen (bootstraps xs & sm sizes)
• last item of menu should be aligned to the left on desktop
• use only bootstraps classes, no custom css

setup php slim as backend

setup react

Schedule (Rozpis) page should display list of all dates that any match is played on. Similar to http://new.ksl.sk/rozpis

• Display h1 with text Rozpis
• Get list of dates by dataProvider getListOfPlayingDates function
• Transform dates by applying Date.parse() on "date" property of returned data
• Display select with list of dates
• Dont display any matches yet

Update standings (Tabuľka) page to have same structure as http://new.ksl.sk/tabulka but without tables.

AC:

• set h1 to the "Tabuľky"
• implement 3 buttons for switching tabs ("Poradie tímov", "Strelci", "3 bodoví strelci"), use bootstrap's pills component ( https://getbootstrap.com/docs/3.4/components/#nav-pills ), by default first button should be active
• create 3 tabs that will hold the tables with data. use bootstrap's panel component ( https://getbootstrap.com/docs/3.4/components/#panels-heading )
• display or hide the tabs depending on which button (pill) has been pressed or is active
• copy same informative messages from new.ksl.sk/tabulka that is under tables to the new tabs.
• dont implement tables nor any data fetching

write basic readme with example how to run project

test

Continue work on schedule page to display list of matches on given day.

AC:

• when user selects any date in date select, appropriate matches should show
• inspire from http://new.ksl.sk/rozpis page, for every match show names of teams, date and time of match
• if match has been played already, display score, you can highlight winning team (i.e. using bold)
• you can also display team records (wins:loses ratio)
• dont forget about mobile devices, make it responsive for smaller screens (you can use different layout for smartphones if needed)
• when page loads, date of next matches should be preselected

Bonus points:

• you could also implement another select element with list of teams and also "all teams" option, when any team is selected only matches of that team should be filtered. This filter must work with date filter too. If I select 28 may in first select and Team A in second select, I must see only matches of Team A on may 28th. Date select could also have "all dates" option

Update component NewsList.js and its render function to produce following output:

Html structure can be copied from new.ksl.sk

AC:

• news list must have title with text "Novinky",
• there must be an border bottom under title
• (optional) include some element with text "Žiadne novinky" and style it as alert warning using bootstrap classes
• no custom css is allowed, use only existing bootstrap classes for styling

on playgrounds page there should be list of playgrounds similarly to the list on http://new.ksl.sk/playground

Update Fines (pokuty) page look same as http://new.ksl.sk/liga/pokuty-poplatky

AC:

• Create header with text "Pokuty a poplatky"
• Create table with list of fines, use KslTable component (you can find an example of how to use this component in TableList.js)

Git hints:
first, download latest changes on project, so open git bash and enter git checkout master to switch to master first and then git pull to download latest changes.
Then create new branch with git branch finesPage and switch to new branch with git checkout finesPage . Now you can do changes required in Fines.js file, remember, you can run project with npm run start . When you are done and want to post your changes, first add changed files to index git add . then commit changes with *git commit -m "Fines page texts" and then upload your branch using git push -u origin finesPage.

When I click on any item in mobile menu, the menu keeps opened therefore I dont see if I got redirected to new page or not.

AC:

• close main menu on mobiles when router is redirecting user
• dont attach any custom click listeners

Note: Following link may be helpful https://stackoverflow.com/a/44410281/619616

Update component UpcomingMatches.js and its render function to produce following output:

Html structure can be copied from new.ksl.sk

AC:

• upcoming matches must have title with text "Najbližšie zápasy",
• upcoming matches must have text "Žiadne ďalšie zápasy nie sú naplánované."
• upcoming matches must have light gray background color
• there must be an border bottom under title
• put text in alert bootstrap component
• no custom css is allowed, use only existing bootstrap classes for styling

AC:

• add new dropdown item in menu on 4th position with text "Tímy"
• use dataProvider's getMenuTeamsList function to get list of teams
• display each team name in dropdown

Setup docker

• php
• apache
• mysql
• redis/memcache
• consider graphQl