Revert "Using different font and created gradient markup"

This reverts commit f7d128440cde0fafce2d4db18c41c844da09682c.

1 files changed, 207 insertions, 257 deletions

diff --git a/assets/js/main.js b/assets/js/main.js
index d88cda1..ecee955 100755
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -4,282 +4,232 @@
  * @copyright Marvin Borner 2018
  */
 
-$(function () {
-    const CookieInput = $(".CookieInput");
-    let NetflixJson;
+const CookieInput = $(".CookieInput");
+let NetflixJson;
 
-    CookieInput.keyup(function (e) {
-        if (e.keyCode === 13) {
-            $.ajax({
-                url: "assets/php/getNetflixJson.php",
-                data: {
-                    "Cookie": CookieInput.val()
-                },
-                type: "POST",
-            }).done(function (response) {
-                CookieInput.val("");
-                CookieInput.hide();
-                $(".Main").fadeIn();
-                AnalyzeData(response);
-            });
-        }
-    });
+CookieInput.keyup(function (e) {
+    if (e.keyCode === 13) {
+        $.ajax({
+            url: "assets/php/getNetflixJson.php",
+            data: {
+                "Cookie": CookieInput.val()
+            },
+            type: "POST",
+        }).done(function (response) {
+            CookieInput.val("");
+            AnalyzeData(response);
+        });
+    }
+});
 
+function AnalyzeData(JsonResponse) {
     /**
-     * Analyzes the Netflix data JSON response
-     * @param {JSON} JsonResponse 
+     * @example response of a series:
+     *  bookmark: 0
+     *  country: "DE"
+     *  date: 1529338765489
+     *  dateStr: "18.06.18"
+     *  deviceType: 1481
+     *  duration: 3302
+     *  episodeTitle: "Folge 13"
+     *  estRating: "50"
+     *  index: 0
+     *  movieID: 80205354
+     *  seasonDescriptor: "Teil 1"
+     *  series: 80192098
+     *  seriesTitle: "Haus des Geldes"
+     *  title: "Teil 1: \"Folge 13\""
+     *  topNodeId: "80192098"
+     *  videoTitle: "Folge 13"
+     * 
+     *  @example response of a movie:
+     *  bookmark: 7771
+     *  country: "DE"
+     *  date: 1476477258019
+     *  dateStr: "14.10.16"
+     *  deviceType: 1193
+     *  duration: 8160
+     *  estRating: "30"
+     *  index: 916
+     *  movieID: 20557937
+     *  title: "Matrix"
+     *  topNodeId: "20557937"
+     *  videoTitle: "Matrix"
      */
-    function AnalyzeData(JsonResponse) {
-        /**
-         * @example response of a series:
-         *  bookmark: 0
-         *  country: "DE"
-         *  date: 1529338765489
-         *  dateStr: "18.06.18"
-         *  deviceType: 1481
-         *  duration: 3302
-         *  episodeTitle: "Folge 13"
-         *  estRating: "50"
-         *  index: 0
-         *  movieID: 80205354
-         *  seasonDescriptor: "Teil 1"
-         *  series: 80192098
-         *  seriesTitle: "Haus des Geldes"
-         *  title: "Teil 1: \"Folge 13\""
-         *  topNodeId: "80192098"
-         *  videoTitle: "Folge 13"
-         * 
-         *  @example response of a movie:
-         *  bookmark: 7771
-         *  country: "DE"
-         *  date: 1476477258019
-         *  dateStr: "14.10.16"
-         *  deviceType: 1193
-         *  duration: 8160
-         *  estRating: "30"
-         *  index: 916
-         *  movieID: 20557937
-         *  title: "Matrix"
-         *  topNodeId: "20557937"
-         *  videoTitle: "Matrix"
-         */
-        NetflixJson = JSON.parse(JsonResponse);
-        console.log(NetflixJson);
-        let EveryWatched = [];
-        let IndividualTitles = [];
-        let IndividualSeries = [];
-        let IndividualMovies = [];
-        let AverageWatchTimes = [];
-
-        NetflixJson.forEach(function (item, pageKey) {
-            item.forEach(function (eachItem, ItemNumber) {
-                if ("seriesTitle" in eachItem) { // is series
-                    const CurrentTitle = NetflixJson[pageKey][ItemNumber].seriesTitle;
-                    EveryWatched.push(CurrentTitle);
-                    if (IndividualSeries.indexOf(CurrentTitle) === -1 && CurrentTitle !== undefined) { // only if not already crawled -> individualism
-                        IndividualSeries.push(CurrentTitle);
-                        IndividualTitles.push(CurrentTitle);
-                    }
-                } else { // is movie
-                    const CurrentTitle = NetflixJson[pageKey][ItemNumber].videoTitle;
-                    EveryWatched.push(CurrentTitle);
-                    if (IndividualMovies.indexOf(CurrentTitle) === -1 && CurrentTitle !== undefined) { // only if not already crawled -> individualism
-                        IndividualMovies.push(CurrentTitle);
-                        IndividualTitles.push(CurrentTitle);
-                    }
+    NetflixJson = JSON.parse(JsonResponse);
+    console.log(NetflixJson);
+    let EveryWatched = [];
+    let IndividualTitles = [];
+    let IndividualSeries = [];
+    let IndividualMovies = [];
+    let AverageWatchTimes = [];
+
+    NetflixJson.forEach(function (item, pageKey) {
+        item.forEach(function (eachItem, ItemNumber) {
+            if ("seriesTitle" in eachItem) { // is series
+                const CurrentTitle = NetflixJson[pageKey][ItemNumber].seriesTitle;
+                EveryWatched.push(CurrentTitle);
+                if (IndividualSeries.indexOf(CurrentTitle) === -1 && CurrentTitle !== undefined) { // only if not already crawled -> individualism
+                    IndividualSeries.push(CurrentTitle);
+                    IndividualTitles.push(CurrentTitle);
+                }
+            } else { // is movie
+                const CurrentTitle = NetflixJson[pageKey][ItemNumber].videoTitle;
+                EveryWatched.push(CurrentTitle);
+                if (IndividualMovies.indexOf(CurrentTitle) === -1 && CurrentTitle !== undefined) { // only if not already crawled -> individualism
+                    IndividualMovies.push(CurrentTitle);
+                    IndividualTitles.push(CurrentTitle);
                 }
+            }
 
-                // get watch time
-                const DayTimeInSeconds = new Date(NetflixJson[pageKey][ItemNumber].date * 1000);
-                const DayTimeInHours = DayTimeInSeconds.getHours();
-                AverageWatchTimes.push(DayTimeInHours);
-            });
+            // get watch time
+            const DayTimeInSeconds = new Date(NetflixJson[pageKey][ItemNumber].date * 1000);
+            const DayTimeInHours = DayTimeInSeconds.getHours();
+            AverageWatchTimes.push(DayTimeInHours);
         });
+    });
 
-        const TotalSeriesWatched = IndividualSeries.length;
-
-        // Calculate watch time occurrence (average times in which the user watches sth.)
-        let AverageWatchTimeOccurrence = [];
-        const WatchTimeOccurrenceCounter = new Map([...new Set(AverageWatchTimes)].map(
-            x => [x, AverageWatchTimes.filter(y => y === x).length]
-        ));
-        for (let i = 0; i < 24; i++) {
-            AverageWatchTimeOccurrence.push(WatchTimeOccurrenceCounter.get(i));
-        }
-
-        // Calculate the most watched series/movies
-        let TitleCount = [];
-        const UnsortedTitleOccurrenceCounter = EveryWatched.reduce((prev, curr) => (prev[curr] = ++prev[curr] || 1, prev), {});
-        const SortedTitleOccurrenceCounter = sortObject(UnsortedTitleOccurrenceCounter);
-        const TopSeries = Object.keys(SortedTitleOccurrenceCounter)[Object.keys(SortedTitleOccurrenceCounter).length - 1];
-        RenderTopSeries(TopSeries);
-
-        // log
-        console.table(IndividualTitles);
-        console.table(IndividualSeries);
-        console.table(IndividualMovies);
-        console.table(AverageWatchTimeOccurrence);
-        console.table(SortedTitleOccurrenceCounter);
+    const TotalSeriesWatched = IndividualSeries.length;
 
-        RenderDayTimeChart(AverageWatchTimeOccurrence);
-        RenderMostWatchedChart(SortedTitleOccurrenceCounter);
+    // Calculate watch time occurrence (average times in which the user watches sth.)
+    let AverageWatchTimeOccurrence = [];
+    const WatchTimeOccurrenceCounter = new Map([...new Set(AverageWatchTimes)].map(
+        x => [x, AverageWatchTimes.filter(y => y === x).length]
+    ));
+    for (let i = 0; i < 24; i++) {
+        AverageWatchTimeOccurrence.push(WatchTimeOccurrenceCounter.get(i));
     }
 
-    /**
-     * Renders the day time chart
-     * @param {Array} AverageWatchTimeOccurrenceArray 
-     */
-    function RenderDayTimeChart(AverageWatchTimeOccurrenceArray) {
-        var randomColorGenerator = function () {
-            return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
-        };
-
-        // Render day time chart
-        const WatchTimeChartElement = document.getElementById("WatchTimeChart").getContext("2d");
-        const WatchTimeChart = new Chart(WatchTimeChartElement, {
-            type: 'line',
-            data: {
-                labels: ["12am", "1am", "2am", "3am", "4am", "5am", "6am", "7am", "8am", "9am", "10am", "11am", "12pm", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm", "7pm", "8pm", "9pm", "10pm", "11pm"],
-                datasets: [{
-                    label: "Watches at daytime",
-                    borderColor: "rgb(255, 99, 132)",
-                    cubicInterpolationMode: "monotone",
-                    pointRadius: 0,
-                    pointHitRadius: 15,
-                    data: AverageWatchTimeOccurrenceArray
+    // Calculate the most watched series/movie
+    let TitleCount = [];
+    const UnsortedTitleOccurrenceCounter = EveryWatched.reduce((prev, curr) => (prev[curr] = ++prev[curr] || 1, prev), {});
+    const SortedTitleOccurrenceCounter = sortObject(UnsortedTitleOccurrenceCounter);
+
+    // log
+    console.table(IndividualTitles);
+    console.table(IndividualSeries);
+    console.table(IndividualMovies);
+    console.table(AverageWatchTimeOccurrence);
+    console.table(SortedTitleOccurrenceCounter);
+
+    RenderDayTimeChart(AverageWatchTimeOccurrence);
+    RenderMostWatchedChart(SortedTitleOccurrenceCounter);
+}
+
+function RenderDayTimeChart(AverageWatchTimeOccurrenceArray) {
+    var randomColorGenerator = function () {
+        return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
+    };
+
+    // Render day time chart
+    const WatchTimeChartElement = document.getElementById("WatchTimeChart").getContext("2d");
+    const WatchTimeChart = new Chart(WatchTimeChartElement, {
+        type: 'line',
+        data: {
+            labels: ["12am", "1am", "2am", "3am", "4am", "5am", "6am", "7am", "8am", "9am", "10am", "11am", "12pm", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm", "7pm", "8pm", "9pm", "10pm", "11pm"],
+            datasets: [{
+                label: "Watches at daytime",
+                borderColor: "rgb(255, 99, 132)",
+                cubicInterpolationMode: "monotone",
+                pointRadius: 0,
+                pointHitRadius: 15,
+                data: AverageWatchTimeOccurrenceArray
+            }]
+        },
+        options: {
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        display: false
+                    },
+                    gridLines: {
+                        zeroLineColor: 'transparent',
+                        zeroLineWidth: 2,
+                        drawTicks: false,
+                        drawBorder: false,
+                        color: 'transparent'
+                    }
+                }],
+                xAxes: [{
+                    gridLines: {
+                        zeroLineColor: 'rgba(255, 255, 255, 0.25)',
+                        display: true,
+                        drawBorder: false,
+                        color: 'rgba(255, 255, 255, 0.25)'
+                    }
                 }]
             },
-            options: {
-                scales: {
-                    yAxes: [{
-                        ticks: {
-                            display: false
-                        },
-                        gridLines: {
-                            zeroLineColor: 'transparent',
-                            zeroLineWidth: 2,
-                            drawTicks: false,
-                            drawBorder: false,
-                            color: 'transparent'
-                        }
-                    }],
-                    xAxes: [{
-                        gridLines: {
-                            zeroLineColor: 'rgba(255, 255, 255, 0.25)',
-                            display: true,
-                            drawBorder: false,
-                            color: 'rgba(255, 255, 255, 0.25)'
-                        }
-                    }]
-                },
-                tension: 1
-            }
-        });
-    }
-
-    /**
-     * Renders the "most watched series" doughnut chart
-     * @param {Object} TitleOccurrenceCounterObject 
-     */
-    function RenderMostWatchedChart(TitleOccurrenceCounterObject) {
-        // Render and calculate most watched chart
-
-        const GenerateRandomColorArray = function () {
-            let RandomColorArray = [];
-            const Generate = function () {
-                var letters = '0123456789ABCDEF'.split('');
-                var color = '#';
-                for (var i = 0; i < 6; i++) {
-                    color += letters[Math.floor(Math.random() * 16)];
-                }
-                return color;
-            };
-            for (var key in TitleOccurrenceCounterObject) {
-                RandomColorArray.push(Generate());
+            tension: 1
+        }
+    });
+}
+
+function RenderMostWatchedChart(TitleOccurrenceCounterObject) {
+    // Render and calculate most watched chart
+
+    const GenerateRandomColorArray = function () {
+        let RandomColorArray = [];
+        const Generate = function () {
+            var letters = '0123456789ABCDEF'.split('');
+            var color = '#';
+            for (var i = 0; i < 6; i++) {
+                color += letters[Math.floor(Math.random() * 16)];
             }
-            return RandomColorArray;
-        };
-
-        const MostWatchedChartElement = document.getElementById("MostWatchedChart").getContext("2d");
-        var MostWatchedChartData = {
-            labels: [],
-            datasets: [{
-                label: "Most watched",
-                backgroundColor: GenerateRandomColorArray(),
-                data: []
-            }]
+            return color;
         };
-        Chart.pluginService.register({
-            beforeInit: function (chart) {
-                var data = chart.config.data;
-                for (var key in TitleOccurrenceCounterObject) {
-                    if (TitleOccurrenceCounterObject.hasOwnProperty(key)) {
-                        if (TitleOccurrenceCounterObject[key] > 2) {
-                            data.labels.push(key);
-                            data.datasets[0].data.push(TitleOccurrenceCounterObject[key]);
-                        }
+        for (var key in TitleOccurrenceCounterObject) {
+            RandomColorArray.push(Generate());
+        }
+        return RandomColorArray;
+    };
+
+    const MostWatchedChartElement = document.getElementById("MostWatchedChart").getContext("2d");
+    var MostWatchedChartData = {
+        labels: [],
+        datasets: [{
+            label: "Most watched",
+            backgroundColor: GenerateRandomColorArray(),
+            data: []
+        }]
+    };
+    Chart.pluginService.register({
+        beforeInit: function (chart) {
+            var data = chart.config.data;
+            for (var key in TitleOccurrenceCounterObject) {
+                if (TitleOccurrenceCounterObject.hasOwnProperty(key)) {
+                    if (TitleOccurrenceCounterObject[key] > 2) {
+                        data.labels.push(key);
+                        data.datasets[0].data.push(TitleOccurrenceCounterObject[key]);
                     }
                 }
             }
-        });
-        var MostWatchedChart = new Chart(MostWatchedChartElement, {
-            type: 'doughnut',
-            data: MostWatchedChartData,
-            options: {
-                animation: {
-                    animateScale: true
-                },
-                legend: {
-                    display: false
-                }
+        }
+    });
+    var MostWatchedChart = new Chart(MostWatchedChartElement, {
+        type: 'doughnut',
+        data: MostWatchedChartData,
+        options: {
+            animation: {
+                animateScale: true
+            },
+            legend: {
+                display: false
             }
-        });
-    }
-
-    /**
-     * Renders the top series in the DOM
-     * @param {String} Title 
-     */
-    function RenderTopSeries(Title) {
-        const InformationJSON = getTitleInformation(Title, output => {
-            return output;
-        });
-        console.table(InformationJSON);
-        // TODO: Write to site/DOM + logging output
-    }
+        }
+    });
+}
 
-    /**
-     * Gets an JSON information object of the requested series/movie
-     * @param {String} Title 
-     */
-    function getTitleInformation(Title, handleFunction) {
-        $.ajax({
-            url: "assets/php/getInformation.php",
-            data: {
-                "Title": Title
-            },
-            type: "POST",
-        }).done(function (response) {
-            handleFunction(JSON.parse(response));
-        });
+function sortObject(list) {
+    var sortable = [];
+    for (var key in list) {
+        sortable.push([key, list[key]]);
     }
-
-    /**
-     * Sorts an js object by value {int}
-     * @param {Object} list 
-     */
-    function sortObject(list) {
-        var sortable = [];
-        for (var key in list) {
-            sortable.push([key, list[key]]);
-        }
-        sortable.sort(function (a, b) {
-            return (a[1] < b[1] ? -1 : (a[1] > b[1] ? 1 : 0));
-        });
-        var orderedList = {};
-        for (var i = 0; i < sortable.length; i++) {
-            orderedList[sortable[i][0]] = sortable[i][1];
-        }
-        return orderedList;
+    sortable.sort(function (a, b) {
+        return (a[1] < b[1] ? -1 : (a[1] > b[1] ? 1 : 0));
+    });
+    var orderedList = {};
+    for (var i = 0; i < sortable.length; i++) {
+        orderedList[sortable[i][0]] = sortable[i][1];
     }
-});
\ No newline at end of file
+    return orderedList;
+}
\ No newline at end of file