TV Programs Scheduler Webapp
We had a task to create a web application to schedule the TV programs that is easy to use and has many functional features.
The webapp consists of Circles page, Demographic, VB, Telecast pages and Promo Pie page.
On this page we show the Tree using D3 library’s Circle Packing chart. Users can have any depth of enclosure and any number of nodes. On the left side of the page we display the Tree as a list. Both Trees are synchronized. Users can click to zoom it up or click twice to zoom out. Users have the ability to edit, delete and exclude nodes of the general stream.
Demographic, VB, Telecast pages
On these pages we created Trees which are displayed in a consequence on Circles page. Users have two opportunities to add nodes to a Tree. They can use drag-and-drop and draw cards on a node or to create multiplel nodes in one level. It is also possible to open a modal window to choose a necessary set of elements and pass it to the Tree. The application shows progress spinner if too many of nodes are added. At each level there are search and filtration: to choose one, to choose everything, to exclude one or to exclude all. Events are saved and users have opportunity to cancel all used filters. In the bottom right corner, there is a button which completely cleans out Tree. Users can validate a Tree by the number of nodes in a Tree or depth of a Tree.
Promo Pie page
On this page the application shows D3 library’s Sunburst(Pie) chart. On the left side there are filters. If users interact with them, the changes will be displayed on a Pie immediately. Also there are two lists (with active and disabled cards) in which users can change an order with drag-and-drop, choosing sing element or multiple. These lists are fully synchronized with Pie. Number of the rings and pie pieces depends on the active list. When users hover the mouse over the piece of pie from above the application shows a way to it. Also application shows the information about all his children with enclosure to the last. Double-click on a piece changes display of pie, reflects information only about this piece in a ring. An opportunity to cancel these actions on a step backwards is provided before full return to original state.