04/29/2017

Major Changes made on "http://mason.gmu.edu/~jgero/publications/progress.html" are,

1. Data is loaded dynamically. To do this, data is stored in a JSON file (data.json) and everything in the progress page is retrieved from the JSON file
2. Angular JS framework is used to retrieve data and present it on the HTML file.

Changes are made on the following files,

1. progress.html ( Modified )
2. data.json ( New )
3. loader.js ( New )

1. Changes in Progress.html

• In line 17,18,19 javascript framework and files need are loaded into the html file. Angular JS min file and lodash library are loaded from cdn
which can improved by using package managers like bower.
• Next and Prev buttons are loaded dynamically based on which page the user is on.
• Search this Page, and Search All Pages functionality is added where user can search content from all the papers, books etc. or from a single year.


2. Explaining data.json

• The structure of data is in JSON format. It is in the form 
    [
        {
            conference: [
                {
                    year: ***,
                    data: [
                        {
                            title: ***,
                            pdf: ***
                        },
                        .
                        .
                        .
                    ]
                }
            ]
        },
        {
            books: [
                .
                .
                .
            ]
        },
        {
            bookchapters: [
                .
                .
                .
            ]
        },
        {
            journals: [
                .
                .
                .
            ]
        }
    ]

• When adding a new item to the data, we can go the spectific category(books, conference etc.) and go into the year where the item has to be added
  and item is given with title and pdf link data in object format(see other data for reference)


3. Explaining loader.js

• loader.js is angular module which defines variables which can be used in html file
• module 'pubApp' is loaded into html in div at line 26
• variables and functions:
    • query: to search for data in current page
    • crawler: to search for all the data available in data.json file
    • totalData: is the total json data from data.json
    • papersData: is the conferernce/papers data derived from totalData
    • booksData: is the book data derived from totalData
    • bookChaptersData: is the book chapters data derived from totalData
    • journalData: is the journal data derived from totalData
    • papers: year-wise allocation of papers data
    • books: year-wise allocation of books data
    • bookChapters: year-wise allocation of book chapter data
    • journals: year-wise allocation of journal data
    • year: used to record the current year to display in html page
    • arrayLength: used to find the total number of years to display the year list in html page
    • searchData: collects the data from papers, books, book chapters, journals for the searched term
    • flag: used to toggle between search items to and fro
    • changeData(index): this the year index as the index to display the specified year's data
    • changeYear: takes index and calls changeData() 
    • nextYear(): increments the index and calls changeData()
    • prevYear(): decrements the index and calls changeData()
    • searchTerm(): is called when "go" button is click in html page. First, we clear all the data in searchData variable and using lodash library we search for the term (*includes) in total data for each category
    • clearSearch(): is called when "clear" button is click in htmlpage. This will clear the searchData and crawler variable which clear the input field in html page