From 895c7c9ff5a6d0401e5416a24e36f9f9727c0aff Mon Sep 17 00:00:00 2001 From: Jordy van Zeeland Date: Wed, 24 Apr 2024 16:10:45 +0200 Subject: [PATCH] changes to genres en languages --- ras/frontend/src/components/Charts.js | 99 +++++++++++++++++++ ras/frontend/src/components/Genres.js | 37 ++++++- ras/frontend/src/components/Languages.js | 16 ++- ras/frontend/src/views/dashboard.js | 4 +- .../static/js/src_components_Charts_js.js | 2 +- .../static/js/src_views_dashboard_js.js | 2 +- 6 files changed, 152 insertions(+), 8 deletions(-) diff --git a/ras/frontend/src/components/Charts.js b/ras/frontend/src/components/Charts.js index c6e771b..ea75982 100644 --- a/ras/frontend/src/components/Charts.js +++ b/ras/frontend/src/components/Charts.js @@ -207,6 +207,105 @@ export const initDoughnut = (data) => { plugins: { legend: { position: 'top', + display: false, + labels: { + padding: 20, + usePointStyle: true, + // This more specific font property overrides the global property + color: "#333", + font: { + size: 11, + } + } + } + } + }, + plugins: [{ + id: 'legendMargin', + beforeInit(chart, legend, options) { + const fitValue = chart.legend.fit; + + chart.legend.fit = function fit() { + fitValue.bind(chart.legend)(); + return this.height += 30; + } + } + }], + }); +} + +export const initDoughnut2 = (data) => { + console.log(data); + var labels = []; + var counts = []; + + data.forEach((count) => { + if (!labels.includes(count.name)) { + labels.push(count.name) + } + + counts.push(count.count) + }) + + const legendMargin = { + id: 'legendMargin', + beforeInit(chart, legend, options) { + const fitValue = chart.legend.fit; + + chart.legend.fit = function fit() { + fitValue.bind(chart.legend)(); + return this.height += 30; + } + } + }; + + $("canvas#chartLangs").remove(); + data && data.length > 0 ? $(".no-data-msg").remove() : $("canvas#chartLangs").remove(); + data && data.length > 0 ? $("div.languages").append('') : $("div.languages").append('
Geen data beschikbaar
'); + + var ctx = document.getElementById("chartLangs"); + var myChart = new Chart(ctx, { + type: 'pie', + data: { + labels: labels, + datasets: [{ + label: '# of Tomatoes', + data: counts, + backgroundColor: [ + '#405181', '#01a9ac', '#64c5b1', '#1ABB9C' + ], + borderWidth: 0, + borderColor: '#1f2940', + tooltip: { + callbacks: { + label: function (context) { + let label = context.label; + let value = context.formattedValue; + + if (!label) + label = 'Unknown' + + let sum = 0; + let dataArr = context.chart.data.datasets[0].data; + dataArr.map(data => { + sum += Number(data); + }); + + let percentage = (value * 100 / sum).toFixed(1) + '%'; + return label + ": " + percentage; + } + } + } + }] + }, + options: { + showAllTooltips: true, + cutout: '80%', + responsive: true, + plugins: { + legend: { + position: 'top', + display: false, labels: { padding: 20, usePointStyle: true, diff --git a/ras/frontend/src/components/Genres.js b/ras/frontend/src/components/Genres.js index 883371f..9983b03 100644 --- a/ras/frontend/src/components/Genres.js +++ b/ras/frontend/src/components/Genres.js @@ -1,6 +1,8 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; const Genres = (props) => { + const [genresbooks, setGenresBooks] = useState([]) + const getData = async () => { const [data, charts] = await Promise.all([ await import("./Data.js"), @@ -11,6 +13,7 @@ const Genres = (props) => { if(yeargenres){ charts.initDoughnut(yeargenres, props.year); + setGenresBooks(yeargenres); } } @@ -22,6 +25,38 @@ const Genres = (props) => {
Genres + + + + + + + + + + {genresbooks.map(genre => { + + var dotcolor = ''; + + if(genre.genre === "Thriller"){ + dotcolor = '#405181'; + }else if (genre.genre === "Roman"){ + dotcolor = '#01a9ac'; + }else if(genre.genre === 'Non-fictie'){ + dotcolor = '#64c5b1'; + }else{ + dotcolor = '#1ABB9C'; + } + + return ( + + + + ) + })} + +
genrecount
{genre.genre}		{genre.count}
+
diff --git a/ras/frontend/src/components/Languages.js b/ras/frontend/src/components/Languages.js index 4e2d934..ee1013c 100644 --- a/ras/frontend/src/components/Languages.js +++ b/ras/frontend/src/components/Languages.js @@ -4,9 +4,17 @@ const Languages = (props) => { const [languageBooks, setLanguageBooks] = useState([]) const getData = async () => { - const data = await import("./Data.js") + const [data, charts] = await Promise.all([ + await import("./Data.js"), + await import("./Charts.js") + ]); + const languagebooks = await data.getLanguagesBooks(props.year) - setLanguageBooks(languagebooks); + + if(languagebooks){ + charts.initDoughnut2(languagebooks, props.year); + setLanguageBooks(languagebooks); + } } useEffect(() => { @@ -15,7 +23,7 @@ const Languages = (props) => { return ( -
+
Talen @@ -34,6 +42,8 @@ const Languages = (props) => { })}
+ +
) diff --git a/ras/frontend/src/views/dashboard.js b/ras/frontend/src/views/dashboard.js index 91a4f52..f361a55 100644 --- a/ras/frontend/src/views/dashboard.js +++ b/ras/frontend/src/views/dashboard.js @@ -48,7 +48,7 @@ const Dashboard = (props) => {
-
+
@@ -70,7 +70,7 @@ const Dashboard = (props) => {
-
+
diff --git a/ras/frontend/static/js/src_components_Charts_js.js b/ras/frontend/static/js/src_components_Charts_js.js index 6398a13..8e3afcc 100644 --- a/ras/frontend/static/js/src_components_Charts_js.js +++ b/ras/frontend/static/js/src_components_Charts_js.js @@ -1,2 +1,2 @@ /*! For license information please see src_components_Charts_js.js.LICENSE.txt */ -"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([["src_components_Charts_js"],{"./src/components/Charts.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "initChart": () => (/* binding */ initChart),\n/* harmony export */ "initDoughnut": () => (/* binding */ initDoughnut),\n/* harmony export */ "initHorBar": () => (/* binding */ initHorBar)\n/* harmony export */ });\nconst initChart = (data, year) => {\n /*\n ----------------------------------\n Books per month per genre\n ----------------------------------\n */\n\n var genres = [];\n var colors = [\'#405181\', \'#01a9ac\', \'#64c5b1\', \'#1ABB9C\'];\n var dataSet = [];\n data.forEach(book => {\n if (!genres.includes(book.genre)) {\n genres.push(book.genre);\n }\n });\n if (genres && genres.length > 0) {\n genres.forEach((genre, index) => {\n var genreData = [];\n for (var i = 0; i < 12; i++) {\n genreData[i] = 0;\n if (i + 1 < 10) {\n var month = "0" + (i + 1);\n } else {\n month = i + 1;\n }\n for (var j = 0; j < data.length; j++) {\n if (data && data[j] && data[j].readed == month + \'-\' + year) {\n if (data[j].genre == genre) {\n genreData[i] = data[j].count;\n }\n }\n }\n }\n dataSet.push({\n label: genre,\n data: genreData,\n backgroundColor: colors[index],\n order: 2\n });\n });\n }\n\n /*\n ----------------------------------\n Stacked bar chart\n ----------------------------------\n */\n\n $("canvas#chart").remove();\n data && data.length > 0 ? $(".no-data-msg").remove() : $("canvas#chartGenres").remove();\n data && data.length > 0 ? $("div.books-per-month").append(\'\') : $("div.books-per-month").append(\'
Geen data beschikbaar
\');\n const legendMargin = {\n id: \'legendMargin\',\n beforeInit(chart, legend, options) {\n const fitValue = chart.legend.fit;\n chart.legend.fit = function fit() {\n fitValue.bind(chart.legend)();\n return this.height += 30;\n };\n }\n };\n new Chart(document.getElementById(\'chart\'), {\n type: \'bar\',\n data: {\n labels: ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],\n datasets: dataSet\n },\n options: {\n maintainAspectRatio: false,\n responsive: true,\n showTooltips: true,\n legend: {\n display: true,\n labels: {\n usePointStyle: true\n }\n },\n interaction: {\n mode: \'index\'\n },\n scales: {\n x: {\n grid: {\n display: false\n },\n ticks: {\n beginAtZero: true,\n color: "#333",\n size: 11\n },\n stacked: true\n },\n y: {\n grid: {\n display: false\n },\n ticks: {\n beginAtZero: true,\n stepSize: 1,\n color: "#333",\n size: 11\n },\n stacked: true\n }\n },\n plugins: {\n legend: {\n position: \'top\',\n labels: {\n usePointStyle: true,\n color: "#333",\n padding: 20,\n font: {\n size: 11\n }\n }\n }\n }\n },\n plugins: [legendMargin]\n });\n};\nconst initDoughnut = data => {\n var labels = [];\n var counts = [];\n data.forEach(count => {\n if (!labels.includes(count.genre)) {\n labels.push(count.genre);\n }\n counts.push(count.count);\n });\n const legendMargin = {\n id: \'legendMargin\',\n beforeInit(chart, legend, options) {\n const fitValue = chart.legend.fit;\n chart.legend.fit = function fit() {\n fitValue.bind(chart.legend)();\n return this.height += 30;\n };\n }\n };\n $("canvas#chartGenres").remove();\n data && data.length > 0 ? $(".no-data-msg").remove() : $("canvas#chartGenres").remove();\n data && data.length > 0 ? $("div.genresPercent").append(\'\') : $("div.genresPercent").append(\'
Geen data beschikbaar
\');\n var ctx = document.getElementById("chartGenres");\n var myChart = new Chart(ctx, {\n type: \'pie\',\n data: {\n labels: labels,\n datasets: [{\n label: \'# of Tomatoes\',\n data: counts,\n backgroundColor: [\'#405181\', \'#01a9ac\', \'#64c5b1\', \'#1ABB9C\'],\n borderWidth: 0,\n borderColor: \'#1f2940\',\n tooltip: {\n callbacks: {\n label: function (context) {\n let label = context.label;\n let value = context.formattedValue;\n if (!label) label = \'Unknown\';\n let sum = 0;\n let dataArr = context.chart.data.datasets[0].data;\n dataArr.map(data => {\n sum += Number(data);\n });\n let percentage = (value * 100 / sum).toFixed(1) + \'%\';\n return label + ": " + percentage;\n }\n }\n }\n }]\n },\n options: {\n showAllTooltips: true,\n cutout: \'80%\',\n responsive: true,\n plugins: {\n legend: {\n position: \'top\',\n labels: {\n padding: 20,\n usePointStyle: true,\n // This more specific font property overrides the global property\n color: "#333",\n font: {\n size: 11\n }\n }\n }\n }\n },\n plugins: [{\n id: \'legendMargin\',\n beforeInit(chart, legend, options) {\n const fitValue = chart.legend.fit;\n chart.legend.fit = function fit() {\n fitValue.bind(chart.legend)();\n return this.height += 30;\n };\n }\n }]\n });\n};\nconst initHorBar = data => {\n var countries = [];\n var counts = [];\n data.forEach(count => {\n if (!countries.includes(count.country)) {\n countries.push(count.country);\n }\n counts.push(count.count);\n });\n $("canvas#countryChart").remove();\n $("div.books-per-country").append(\'\');\n var ctx = document.getElementById("countryChart");\n new Chart(ctx, {\n type: \'bar\',\n options: {\n indexAxis: \'y\',\n plugins: {\n legend: {\n display: false\n }\n },\n scales: {\n x: {\n ticks: {\n beginAtZero: true,\n color: "white"\n },\n stacked: true\n },\n y: {\n ticks: {\n beginAtZero: true,\n stepSize: 1,\n color: "white"\n },\n stacked: true\n }\n }\n },\n data: {\n labels: countries,\n datasets: [{\n label: "Boeken",\n data: counts,\n backgroundColor: \'#696ffc\'\n }]\n }\n });\n};\n\n//# sourceURL=webpack://frontend/./src/components/Charts.js?')}}]); \ No newline at end of file +"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([["src_components_Charts_js"],{"./src/components/Charts.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "initChart": () => (/* binding */ initChart),\n/* harmony export */ "initDoughnut": () => (/* binding */ initDoughnut),\n/* harmony export */ "initDoughnut2": () => (/* binding */ initDoughnut2),\n/* harmony export */ "initHorBar": () => (/* binding */ initHorBar)\n/* harmony export */ });\nconst initChart = (data, year) => {\n /*\n ----------------------------------\n Books per month per genre\n ----------------------------------\n */\n\n var genres = [];\n var colors = [\'#405181\', \'#01a9ac\', \'#64c5b1\', \'#1ABB9C\'];\n var dataSet = [];\n data.forEach(book => {\n if (!genres.includes(book.genre)) {\n genres.push(book.genre);\n }\n });\n if (genres && genres.length > 0) {\n genres.forEach((genre, index) => {\n var genreData = [];\n for (var i = 0; i < 12; i++) {\n genreData[i] = 0;\n if (i + 1 < 10) {\n var month = "0" + (i + 1);\n } else {\n month = i + 1;\n }\n for (var j = 0; j < data.length; j++) {\n if (data && data[j] && data[j].readed == month + \'-\' + year) {\n if (data[j].genre == genre) {\n genreData[i] = data[j].count;\n }\n }\n }\n }\n dataSet.push({\n label: genre,\n data: genreData,\n backgroundColor: colors[index],\n order: 2\n });\n });\n }\n\n /*\n ----------------------------------\n Stacked bar chart\n ----------------------------------\n */\n\n $("canvas#chart").remove();\n data && data.length > 0 ? $(".no-data-msg").remove() : $("canvas#chartGenres").remove();\n data && data.length > 0 ? $("div.books-per-month").append(\'\') : $("div.books-per-month").append(\'
Geen data beschikbaar
\');\n const legendMargin = {\n id: \'legendMargin\',\n beforeInit(chart, legend, options) {\n const fitValue = chart.legend.fit;\n chart.legend.fit = function fit() {\n fitValue.bind(chart.legend)();\n return this.height += 30;\n };\n }\n };\n new Chart(document.getElementById(\'chart\'), {\n type: \'bar\',\n data: {\n labels: ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],\n datasets: dataSet\n },\n options: {\n maintainAspectRatio: false,\n responsive: true,\n showTooltips: true,\n legend: {\n display: true,\n labels: {\n usePointStyle: true\n }\n },\n interaction: {\n mode: \'index\'\n },\n scales: {\n x: {\n grid: {\n display: false\n },\n ticks: {\n beginAtZero: true,\n color: "#333",\n size: 11\n },\n stacked: true\n },\n y: {\n grid: {\n display: false\n },\n ticks: {\n beginAtZero: true,\n stepSize: 1,\n color: "#333",\n size: 11\n },\n stacked: true\n }\n },\n plugins: {\n legend: {\n position: \'top\',\n labels: {\n usePointStyle: true,\n color: "#333",\n padding: 20,\n font: {\n size: 11\n }\n }\n }\n }\n },\n plugins: [legendMargin]\n });\n};\nconst initDoughnut = data => {\n var labels = [];\n var counts = [];\n data.forEach(count => {\n if (!labels.includes(count.genre)) {\n labels.push(count.genre);\n }\n counts.push(count.count);\n });\n const legendMargin = {\n id: \'legendMargin\',\n beforeInit(chart, legend, options) {\n const fitValue = chart.legend.fit;\n chart.legend.fit = function fit() {\n fitValue.bind(chart.legend)();\n return this.height += 30;\n };\n }\n };\n $("canvas#chartGenres").remove();\n data && data.length > 0 ? $(".no-data-msg").remove() : $("canvas#chartGenres").remove();\n data && data.length > 0 ? $("div.genresPercent").append(\'\') : $("div.genresPercent").append(\'
Geen data beschikbaar
\');\n var ctx = document.getElementById("chartGenres");\n var myChart = new Chart(ctx, {\n type: \'pie\',\n data: {\n labels: labels,\n datasets: [{\n label: \'# of Tomatoes\',\n data: counts,\n backgroundColor: [\'#405181\', \'#01a9ac\', \'#64c5b1\', \'#1ABB9C\'],\n borderWidth: 0,\n borderColor: \'#1f2940\',\n tooltip: {\n callbacks: {\n label: function (context) {\n let label = context.label;\n let value = context.formattedValue;\n if (!label) label = \'Unknown\';\n let sum = 0;\n let dataArr = context.chart.data.datasets[0].data;\n dataArr.map(data => {\n sum += Number(data);\n });\n let percentage = (value * 100 / sum).toFixed(1) + \'%\';\n return label + ": " + percentage;\n }\n }\n }\n }]\n },\n options: {\n showAllTooltips: true,\n cutout: \'80%\',\n responsive: true,\n plugins: {\n legend: {\n position: \'top\',\n display: false,\n labels: {\n padding: 20,\n usePointStyle: true,\n // This more specific font property overrides the global property\n color: "#333",\n font: {\n size: 11\n }\n }\n }\n }\n },\n plugins: [{\n id: \'legendMargin\',\n beforeInit(chart, legend, options) {\n const fitValue = chart.legend.fit;\n chart.legend.fit = function fit() {\n fitValue.bind(chart.legend)();\n return this.height += 30;\n };\n }\n }]\n });\n};\nconst initDoughnut2 = data => {\n console.log(data);\n var labels = [];\n var counts = [];\n data.forEach(count => {\n if (!labels.includes(count.name)) {\n labels.push(count.name);\n }\n counts.push(count.count);\n });\n const legendMargin = {\n id: \'legendMargin\',\n beforeInit(chart, legend, options) {\n const fitValue = chart.legend.fit;\n chart.legend.fit = function fit() {\n fitValue.bind(chart.legend)();\n return this.height += 30;\n };\n }\n };\n $("canvas#chartLangs").remove();\n data && data.length > 0 ? $(".no-data-msg").remove() : $("canvas#chartLangs").remove();\n data && data.length > 0 ? $("div.languages").append(\'\') : $("div.languages").append(\'
Geen data beschikbaar
\');\n var ctx = document.getElementById("chartLangs");\n var myChart = new Chart(ctx, {\n type: \'pie\',\n data: {\n labels: labels,\n datasets: [{\n label: \'# of Tomatoes\',\n data: counts,\n backgroundColor: [\'#405181\', \'#01a9ac\', \'#64c5b1\', \'#1ABB9C\'],\n borderWidth: 0,\n borderColor: \'#1f2940\',\n tooltip: {\n callbacks: {\n label: function (context) {\n let label = context.label;\n let value = context.formattedValue;\n if (!label) label = \'Unknown\';\n let sum = 0;\n let dataArr = context.chart.data.datasets[0].data;\n dataArr.map(data => {\n sum += Number(data);\n });\n let percentage = (value * 100 / sum).toFixed(1) + \'%\';\n return label + ": " + percentage;\n }\n }\n }\n }]\n },\n options: {\n showAllTooltips: true,\n cutout: \'80%\',\n responsive: true,\n plugins: {\n legend: {\n position: \'top\',\n display: false,\n labels: {\n padding: 20,\n usePointStyle: true,\n // This more specific font property overrides the global property\n color: "#333",\n font: {\n size: 11\n }\n }\n }\n }\n },\n plugins: [{\n id: \'legendMargin\',\n beforeInit(chart, legend, options) {\n const fitValue = chart.legend.fit;\n chart.legend.fit = function fit() {\n fitValue.bind(chart.legend)();\n return this.height += 30;\n };\n }\n }]\n });\n};\nconst initHorBar = data => {\n var countries = [];\n var counts = [];\n data.forEach(count => {\n if (!countries.includes(count.country)) {\n countries.push(count.country);\n }\n counts.push(count.count);\n });\n $("canvas#countryChart").remove();\n $("div.books-per-country").append(\'\');\n var ctx = document.getElementById("countryChart");\n new Chart(ctx, {\n type: \'bar\',\n options: {\n indexAxis: \'y\',\n plugins: {\n legend: {\n display: false\n }\n },\n scales: {\n x: {\n ticks: {\n beginAtZero: true,\n color: "white"\n },\n stacked: true\n },\n y: {\n ticks: {\n beginAtZero: true,\n stepSize: 1,\n color: "white"\n },\n stacked: true\n }\n }\n },\n data: {\n labels: countries,\n datasets: [{\n label: "Boeken",\n data: counts,\n backgroundColor: \'#696ffc\'\n }]\n }\n });\n};\n\n//# sourceURL=webpack://frontend/./src/components/Charts.js?')}}]); \ No newline at end of file diff --git a/ras/frontend/static/js/src_views_dashboard_js.js b/ras/frontend/static/js/src_views_dashboard_js.js index 92b3603..75b981c 100644 --- a/ras/frontend/static/js/src_views_dashboard_js.js +++ b/ras/frontend/static/js/src_views_dashboard_js.js @@ -1,2 +1,2 @@ /*! For license information please see src_views_dashboard_js.js.LICENSE.txt */ -"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([["src_views_dashboard_js"],{"./src/components/Books.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nconst Books = props => {\n const getData = async () => {\n const [data, charts] = await Promise.all([Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_components_Data_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ./Data.js */ "./src/components/Data.js")), __webpack_require__.e(/*! import() */ "src_components_Charts_js").then(__webpack_require__.bind(__webpack_require__, /*! ./Charts.js */ "./src/components/Charts.js"))]);\n const yearbooks = await data.getBooksPerYearPerGenres(props.year);\n if (yearbooks) {\n charts.initChart(yearbooks, props.year);\n }\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n getData();\n }, [props.year]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "books-per-month"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "block_name"\n }, "Boeken per maand per genre"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("canvas", {\n id: "chart"\n })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Books);\n\n//# sourceURL=webpack://frontend/./src/components/Books.js?')},"./src/components/Genres.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nconst Genres = props => {\n const getData = async () => {\n const [data, charts] = await Promise.all([await Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_components_Data_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ./Data.js */ "./src/components/Data.js")), await __webpack_require__.e(/*! import() */ "src_components_Charts_js").then(__webpack_require__.bind(__webpack_require__, /*! ./Charts.js */ "./src/components/Charts.js"))]);\n const yeargenres = await data.getGenresCount(props.year);\n if (yeargenres) {\n charts.initDoughnut(yeargenres, props.year);\n }\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n getData();\n }, [props.year]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "genresPercent"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "block_name"\n }, "Genres"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("canvas", {\n id: "chartGenres"\n })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Genres);\n\n//# sourceURL=webpack://frontend/./src/components/Genres.js?')},"./src/components/Languages.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nconst Languages = props => {\n const [languageBooks, setLanguageBooks] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const getData = async () => {\n const data = await Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_components_Data_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ./Data.js */ "./src/components/Data.js"));\n const languagebooks = await data.getLanguagesBooks(props.year);\n setLanguageBooks(languagebooks);\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n getData();\n }, [props.year]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "ratings"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "block_name"\n }, "Talen"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("table", {\n className: "ratingstable responsive nowrap",\n width: "100%"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("thead", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "language"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "count"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tbody", null, languageBooks.map(language => {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: `flag-icon flag-icon-${language.lang == \'en\' ? \'gb\' : language.lang} mx3`\n }), " ", language.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {\n style: {\n textAlign: \'right\'\n }\n }, language.count));\n })))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Languages);\n\n//# sourceURL=webpack://frontend/./src/components/Languages.js?')},"./src/components/Ratings.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nconst Ratings = props => {\n const [ratings, setRatings] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [totalRatings, setTotalRatings] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);\n const getData = async () => {\n const data = await Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_components_Data_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ./Data.js */ "./src/components/Data.js"));\n const yearratings = await data.getRatingsCount(props.year);\n if (yearratings) {\n var total = 0;\n yearratings.forEach(rating => {\n total += rating.count;\n });\n var ratingsArray = {\n 5: 0,\n 4: 0,\n 3: 0,\n 2: 0,\n 1: 0\n };\n for (var i = 5; i > 0; i--) {\n yearratings.forEach(rating => {\n if (rating.rating === i) {\n ratingsArray[i] = rating.count;\n }\n });\n }\n setRatings(Object.entries(ratingsArray));\n setTotalRatings(total);\n }\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n getData();\n }, [props.year]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "ratings"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "block_name"\n }, "Ratings"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("table", {\n className: "ratingstable responsive nowrap",\n width: "100%"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("thead", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "#"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "percentage"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "aantal"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tbody", null, ratings.map((rating, i) => {\n var ratingstars = \'\';\n var rating_percentage = rating[1] / totalRatings * 100;\n if (rating[0]) {\n for (var i = 0; i < rating[0]; i++) {\n ratingstars += "";\n }\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", {\n key: i\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {\n style: {\n width: \'200px\'\n },\n className: "book_rating",\n dangerouslySetInnerHTML: {\n __html: ratingstars\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {\n style: {\n width: \'257px\'\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "progress"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "progress-bar",\n role: "progressbar",\n style: {\n width: rating_percentage ? rating_percentage : 0 + \'%\'\n },\n "aria-valuenow": rating_percentage ? rating_percentage : 0,\n "aria-valuemin": "0",\n "aria-valuemax": "100"\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, rating[1]));\n })))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Ratings);\n\n//# sourceURL=webpack://frontend/./src/components/Ratings.js?')},"./src/components/Readed.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _DataTables_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./DataTables.css */ "./src/components/DataTables.css");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! moment */ "./node_modules/moment/moment.js");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_2__);\n\n\n\nmoment__WEBPACK_IMPORTED_MODULE_2__.locale(\'nl\');\nconst Readed = props => {\n const [books, setBooks] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const getData = async () => {\n const [data, functions] = await Promise.all([Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_components_Data_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ../components/Data.js */ "./src/components/Data.js")), Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_Functions_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ../Functions.js */ "./src/Functions.js"))]);\n const yearbooks = await data.getBooksByYear(props.year);\n var months = [];\n for (var i = 1; i < 13; i++) {\n months[i] = [];\n yearbooks.forEach(book => {\n console.log(moment__WEBPACK_IMPORTED_MODULE_2__(book.readed).format("M"), i);\n if (moment__WEBPACK_IMPORTED_MODULE_2__(book.readed).format("M") == i) {\n months[i].push(book);\n }\n });\n }\n setBooks(yearbooks);\n functions.initDataTable();\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n getData();\n }, [props.year]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n style: {\n display: \'block\'\n },\n className: "modal modal-books",\n tabIndex: "-1",\n role: "dialog"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "modal-dialog",\n role: "document"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "modal-content"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {\n type: "button",\n onClick: () => {\n setShowModal(false);\n },\n className: "close",\n "data-dismiss": "modal",\n "aria-label": "Close"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fas fa-times-circle"\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "DataTable_Container"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("table", {\n id: "DataTable",\n className: "showHead table responsive nowrap",\n width: "100%"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("thead", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "Gelezen boeken"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tbody", null, books.map((book, i) => {\n var dotcolor = \'\';\n if (book.genre === "Thriller") {\n dotcolor = \'#404e67\';\n } else if (book.genre === "Roman") {\n dotcolor = \'#01a9ac\';\n } else if (book.genre === \'Non-fictie\') {\n dotcolor = \'#64c5b1\';\n } else {\n dotcolor = \'#1ABB9C\';\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", {\n key: book.id\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "dotgenre",\n style: {\n display: \'inline-block\',\n verticalAlign: \'top\',\n marginTop: \'5px\',\n marginRight: \'10px\',\n width: \'10px\',\n height: \'10px\',\n borderRadius: \'100%\',\n background: dotcolor\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "book-info",\n style: {\n display: \'inline-block\',\n verticalAlign: \'top\'\n }\n }, book.name, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n style: {\n color: \'#777\'\n },\n className: "book-author"\n }, book.author))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fas fa-star"\n }), " ", book.rating), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, moment__WEBPACK_IMPORTED_MODULE_2__(book.readed).format("MMMM")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {\n style: {\n textAlign: \'right\'\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {\n onClick: () => delBook(book.id),\n type: "button",\n className: "btn btn-danger"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fa fa-trash"\n }))));\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "legenda",\n style: {\n textAlign: \'center\'\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "dotgenre",\n style: {\n display: \'inline-block\',\n verticalAlign: \'top\',\n marginTop: \'3px\',\n marginRight: \'5px\',\n width: \'10px\',\n height: \'10px\',\n borderRadius: \'100%\',\n background: "#404e67"\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n style: {\n marginRight: \'10px\'\n }\n }, "Thriller"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "dotgenre",\n style: {\n display: \'inline-block\',\n verticalAlign: \'top\',\n marginTop: \'3px\',\n marginRight: \'5px\',\n width: \'10px\',\n height: \'10px\',\n borderRadius: \'100%\',\n background: "#01a9ac"\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n style: {\n marginRight: \'10px\'\n }\n }, "Roman"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "dotgenre",\n style: {\n display: \'inline-block\',\n verticalAlign: \'top\',\n marginTop: \'3px\',\n marginRight: \'5px\',\n width: \'10px\',\n height: \'10px\',\n borderRadius: \'100%\',\n background: "#64c5b1"\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n style: {\n marginRight: \'10px\'\n }\n }, "Non-fictie"))))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Readed);\n\n//# sourceURL=webpack://frontend/./src/components/Readed.js?')},"./src/components/Stats.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nconst BookStats = props => {\n const [totalbooks, setTotalbooks] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);\n const [totalgenres, setTotalgenres] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);\n const [yearrating, setYearrating] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);\n const getData = async () => {\n const data = await Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_components_Data_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ./Data.js */ "./src/components/Data.js"));\n const stats = await data.getStats(props.year);\n setTotalbooks(stats.totalbooks);\n setTotalgenres(stats.totalgenres);\n setYearrating(stats.avgyearrating);\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n getData();\n }, [props.year]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-4 col-sm-4"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "stat-block"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fas fa-book-open"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-label"\n }, "Gelezen boeken:"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-number"\n }, totalbooks ? totalbooks : 0))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-4 col-sm-4"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "stat-block"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fas fa-book-open"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-label"\n }, "Genres:"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-number"\n }, totalgenres ? totalgenres : 0))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (BookStats);\n\n//# sourceURL=webpack://frontend/./src/components/Stats.js?')},"./src/views/dashboard.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _components_Genres__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/Genres */ "./src/components/Genres.js");\n/* harmony import */ var _components_Books__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/Books */ "./src/components/Books.js");\n/* harmony import */ var _components_Ratings__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components/Ratings */ "./src/components/Ratings.js");\n/* harmony import */ var _components_Stats__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/Stats */ "./src/components/Stats.js");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! moment */ "./node_modules/moment/moment.js");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _components_DataTables_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../components/DataTables.css */ "./src/components/DataTables.css");\n/* harmony import */ var _components_Readed_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../components/Readed.js */ "./src/components/Readed.js");\n/* harmony import */ var _components_Sidebar_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../components/Sidebar.js */ "./src/components/Sidebar.js");\n/* harmony import */ var flag_icon_css_css_flag_icons_min_css__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! flag-icon-css/css/flag-icons.min.css */ "./node_modules/flag-icon-css/css/flag-icons.min.css");\n/* harmony import */ var _components_Languages_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../components/Languages.js */ "./src/components/Languages.js");\n\n\n\n\n\n\n\n\n\n\n\nmoment__WEBPACK_IMPORTED_MODULE_5__.locale(\'nl\');\nconst Dashboard = props => {\n const currentyear = new Date().getFullYear();\n const [year, setYear] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(currentyear);\n const [showModal, setShowModal] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n const [readingYears, setReadingYears] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const getData = async () => {\n const [data, functions] = await Promise.all([Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_components_Data_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ../components/Data.js */ "./src/components/Data.js")), Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_Functions_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ../Functions.js */ "./src/Functions.js"))]);\n const getYears = await data.getReadingYears();\n setReadingYears(getYears);\n functions.initDataTable();\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n getData();\n }, [year]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Sidebar_js__WEBPACK_IMPORTED_MODULE_8__["default"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "topbar"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {\n className: "logo",\n src: "/static/images/logo_white.png"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "topbar_right"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {\n className: "currentUser"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n class: "fas fa-user-circle"\n }), " ", localStorage.getItem(\'name\'))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "content"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "container-fluid"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "row"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-8"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "row"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-4 col-sm-4"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "stat-block"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fa fa-calendar"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-label"\n }, "Selecteer jaar:"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-number"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("select", {\n className: "yearselector",\n value: year,\n onChange: event => setYear(event.target.value)\n }, readingYears.map((year, i) => {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("option", {\n key: i,\n value: year\n }, year);\n }), !readingYears.includes(currentyear) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("option", {\n key: currentyear,\n value: currentyear\n }, currentyear) : \'\')))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Stats__WEBPACK_IMPORTED_MODULE_4__["default"], {\n year: year\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Books__WEBPACK_IMPORTED_MODULE_2__["default"], {\n year: year\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-4"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Languages_js__WEBPACK_IMPORTED_MODULE_10__["default"], {\n year: year\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Genres__WEBPACK_IMPORTED_MODULE_1__["default"], {\n year: year\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Ratings__WEBPACK_IMPORTED_MODULE_3__["default"], {\n year: year\n })))), showModal && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Readed_js__WEBPACK_IMPORTED_MODULE_7__["default"], {\n year: year\n })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Dashboard);\n\n//# sourceURL=webpack://frontend/./src/views/dashboard.js?')}}]); \ No newline at end of file +"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([["src_views_dashboard_js"],{"./src/components/Books.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nconst Books = props => {\n const getData = async () => {\n const [data, charts] = await Promise.all([Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_components_Data_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ./Data.js */ "./src/components/Data.js")), __webpack_require__.e(/*! import() */ "src_components_Charts_js").then(__webpack_require__.bind(__webpack_require__, /*! ./Charts.js */ "./src/components/Charts.js"))]);\n const yearbooks = await data.getBooksPerYearPerGenres(props.year);\n if (yearbooks) {\n charts.initChart(yearbooks, props.year);\n }\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n getData();\n }, [props.year]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "books-per-month"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "block_name"\n }, "Boeken per maand per genre"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("canvas", {\n id: "chart"\n })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Books);\n\n//# sourceURL=webpack://frontend/./src/components/Books.js?')},"./src/components/Genres.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nconst Genres = props => {\n const [genresbooks, setGenresBooks] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const getData = async () => {\n const [data, charts] = await Promise.all([await Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_components_Data_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ./Data.js */ "./src/components/Data.js")), await __webpack_require__.e(/*! import() */ "src_components_Charts_js").then(__webpack_require__.bind(__webpack_require__, /*! ./Charts.js */ "./src/components/Charts.js"))]);\n const yeargenres = await data.getGenresCount(props.year);\n if (yeargenres) {\n charts.initDoughnut(yeargenres, props.year);\n setGenresBooks(yeargenres);\n }\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n getData();\n }, [props.year]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "genresPercent"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "block_name"\n }, "Genres"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("table", {\n className: "ratingstable responsive nowrap",\n width: "100%"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("thead", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "genre"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "count"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tbody", null, genresbooks.map(genre => {\n var dotcolor = \'\';\n if (genre.genre === "Thriller") {\n dotcolor = \'#405181\';\n } else if (genre.genre === "Roman") {\n dotcolor = \'#01a9ac\';\n } else if (genre.genre === \'Non-fictie\') {\n dotcolor = \'#64c5b1\';\n } else {\n dotcolor = \'#1ABB9C\';\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "dotgenre",\n style: {\n background: dotcolor\n }\n }), " ", genre.genre), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {\n style: {\n textAlign: \'right\'\n }\n }, genre.count));\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("canvas", {\n id: "chartGenres"\n })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Genres);\n\n//# sourceURL=webpack://frontend/./src/components/Genres.js?')},"./src/components/Languages.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nconst Languages = props => {\n const [languageBooks, setLanguageBooks] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const getData = async () => {\n const [data, charts] = await Promise.all([await Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_components_Data_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ./Data.js */ "./src/components/Data.js")), await __webpack_require__.e(/*! import() */ "src_components_Charts_js").then(__webpack_require__.bind(__webpack_require__, /*! ./Charts.js */ "./src/components/Charts.js"))]);\n const languagebooks = await data.getLanguagesBooks(props.year);\n if (languagebooks) {\n charts.initDoughnut2(languagebooks, props.year);\n setLanguageBooks(languagebooks);\n }\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n getData();\n }, [props.year]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "ratings languages"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "block_name"\n }, "Talen"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("table", {\n className: "ratingstable responsive nowrap",\n width: "100%"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("thead", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "language"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "count"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tbody", null, languageBooks.map(language => {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: `flag-icon flag-icon-${language.lang == \'en\' ? \'gb\' : language.lang} mx3`\n }), " ", language.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {\n style: {\n textAlign: \'right\'\n }\n }, language.count));\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("canvas", {\n id: "chartLangs"\n })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Languages);\n\n//# sourceURL=webpack://frontend/./src/components/Languages.js?')},"./src/components/Ratings.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nconst Ratings = props => {\n const [ratings, setRatings] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [totalRatings, setTotalRatings] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);\n const getData = async () => {\n const data = await Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_components_Data_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ./Data.js */ "./src/components/Data.js"));\n const yearratings = await data.getRatingsCount(props.year);\n if (yearratings) {\n var total = 0;\n yearratings.forEach(rating => {\n total += rating.count;\n });\n var ratingsArray = {\n 5: 0,\n 4: 0,\n 3: 0,\n 2: 0,\n 1: 0\n };\n for (var i = 5; i > 0; i--) {\n yearratings.forEach(rating => {\n if (rating.rating === i) {\n ratingsArray[i] = rating.count;\n }\n });\n }\n setRatings(Object.entries(ratingsArray));\n setTotalRatings(total);\n }\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n getData();\n }, [props.year]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "ratings"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "block_name"\n }, "Ratings"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("table", {\n className: "ratingstable responsive nowrap",\n width: "100%"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("thead", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "#"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "percentage"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "aantal"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tbody", null, ratings.map((rating, i) => {\n var ratingstars = \'\';\n var rating_percentage = rating[1] / totalRatings * 100;\n if (rating[0]) {\n for (var i = 0; i < rating[0]; i++) {\n ratingstars += "";\n }\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", {\n key: i\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {\n style: {\n width: \'200px\'\n },\n className: "book_rating",\n dangerouslySetInnerHTML: {\n __html: ratingstars\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {\n style: {\n width: \'257px\'\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "progress"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "progress-bar",\n role: "progressbar",\n style: {\n width: rating_percentage ? rating_percentage : 0 + \'%\'\n },\n "aria-valuenow": rating_percentage ? rating_percentage : 0,\n "aria-valuemin": "0",\n "aria-valuemax": "100"\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, rating[1]));\n })))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Ratings);\n\n//# sourceURL=webpack://frontend/./src/components/Ratings.js?')},"./src/components/Readed.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _DataTables_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./DataTables.css */ "./src/components/DataTables.css");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! moment */ "./node_modules/moment/moment.js");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_2__);\n\n\n\nmoment__WEBPACK_IMPORTED_MODULE_2__.locale(\'nl\');\nconst Readed = props => {\n const [books, setBooks] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const getData = async () => {\n const [data, functions] = await Promise.all([Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_components_Data_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ../components/Data.js */ "./src/components/Data.js")), Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_Functions_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ../Functions.js */ "./src/Functions.js"))]);\n const yearbooks = await data.getBooksByYear(props.year);\n var months = [];\n for (var i = 1; i < 13; i++) {\n months[i] = [];\n yearbooks.forEach(book => {\n console.log(moment__WEBPACK_IMPORTED_MODULE_2__(book.readed).format("M"), i);\n if (moment__WEBPACK_IMPORTED_MODULE_2__(book.readed).format("M") == i) {\n months[i].push(book);\n }\n });\n }\n setBooks(yearbooks);\n functions.initDataTable();\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n getData();\n }, [props.year]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n style: {\n display: \'block\'\n },\n className: "modal modal-books",\n tabIndex: "-1",\n role: "dialog"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "modal-dialog",\n role: "document"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "modal-content"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {\n type: "button",\n onClick: () => {\n setShowModal(false);\n },\n className: "close",\n "data-dismiss": "modal",\n "aria-label": "Close"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fas fa-times-circle"\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "DataTable_Container"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("table", {\n id: "DataTable",\n className: "showHead table responsive nowrap",\n width: "100%"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("thead", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "Gelezen boeken"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tbody", null, books.map((book, i) => {\n var dotcolor = \'\';\n if (book.genre === "Thriller") {\n dotcolor = \'#404e67\';\n } else if (book.genre === "Roman") {\n dotcolor = \'#01a9ac\';\n } else if (book.genre === \'Non-fictie\') {\n dotcolor = \'#64c5b1\';\n } else {\n dotcolor = \'#1ABB9C\';\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", {\n key: book.id\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "dotgenre",\n style: {\n display: \'inline-block\',\n verticalAlign: \'top\',\n marginTop: \'5px\',\n marginRight: \'10px\',\n width: \'10px\',\n height: \'10px\',\n borderRadius: \'100%\',\n background: dotcolor\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "book-info",\n style: {\n display: \'inline-block\',\n verticalAlign: \'top\'\n }\n }, book.name, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n style: {\n color: \'#777\'\n },\n className: "book-author"\n }, book.author))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fas fa-star"\n }), " ", book.rating), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, moment__WEBPACK_IMPORTED_MODULE_2__(book.readed).format("MMMM")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {\n style: {\n textAlign: \'right\'\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {\n onClick: () => delBook(book.id),\n type: "button",\n className: "btn btn-danger"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fa fa-trash"\n }))));\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "legenda",\n style: {\n textAlign: \'center\'\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "dotgenre",\n style: {\n display: \'inline-block\',\n verticalAlign: \'top\',\n marginTop: \'3px\',\n marginRight: \'5px\',\n width: \'10px\',\n height: \'10px\',\n borderRadius: \'100%\',\n background: "#404e67"\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n style: {\n marginRight: \'10px\'\n }\n }, "Thriller"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "dotgenre",\n style: {\n display: \'inline-block\',\n verticalAlign: \'top\',\n marginTop: \'3px\',\n marginRight: \'5px\',\n width: \'10px\',\n height: \'10px\',\n borderRadius: \'100%\',\n background: "#01a9ac"\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n style: {\n marginRight: \'10px\'\n }\n }, "Roman"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "dotgenre",\n style: {\n display: \'inline-block\',\n verticalAlign: \'top\',\n marginTop: \'3px\',\n marginRight: \'5px\',\n width: \'10px\',\n height: \'10px\',\n borderRadius: \'100%\',\n background: "#64c5b1"\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n style: {\n marginRight: \'10px\'\n }\n }, "Non-fictie"))))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Readed);\n\n//# sourceURL=webpack://frontend/./src/components/Readed.js?')},"./src/components/Stats.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nconst BookStats = props => {\n const [totalbooks, setTotalbooks] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);\n const [totalgenres, setTotalgenres] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);\n const [yearrating, setYearrating] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);\n const getData = async () => {\n const data = await Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_components_Data_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ./Data.js */ "./src/components/Data.js"));\n const stats = await data.getStats(props.year);\n setTotalbooks(stats.totalbooks);\n setTotalgenres(stats.totalgenres);\n setYearrating(stats.avgyearrating);\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n getData();\n }, [props.year]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-4 col-sm-4"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "stat-block"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fas fa-book-open"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-label"\n }, "Gelezen boeken:"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-number"\n }, totalbooks ? totalbooks : 0))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-4 col-sm-4"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "stat-block"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fas fa-book-open"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-label"\n }, "Genres:"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-number"\n }, totalgenres ? totalgenres : 0))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (BookStats);\n\n//# sourceURL=webpack://frontend/./src/components/Stats.js?')},"./src/views/dashboard.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _components_Genres__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/Genres */ "./src/components/Genres.js");\n/* harmony import */ var _components_Books__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/Books */ "./src/components/Books.js");\n/* harmony import */ var _components_Ratings__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components/Ratings */ "./src/components/Ratings.js");\n/* harmony import */ var _components_Stats__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/Stats */ "./src/components/Stats.js");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! moment */ "./node_modules/moment/moment.js");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _components_DataTables_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../components/DataTables.css */ "./src/components/DataTables.css");\n/* harmony import */ var _components_Readed_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../components/Readed.js */ "./src/components/Readed.js");\n/* harmony import */ var _components_Sidebar_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../components/Sidebar.js */ "./src/components/Sidebar.js");\n/* harmony import */ var flag_icon_css_css_flag_icons_min_css__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! flag-icon-css/css/flag-icons.min.css */ "./node_modules/flag-icon-css/css/flag-icons.min.css");\n/* harmony import */ var _components_Languages_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../components/Languages.js */ "./src/components/Languages.js");\n\n\n\n\n\n\n\n\n\n\n\nmoment__WEBPACK_IMPORTED_MODULE_5__.locale(\'nl\');\nconst Dashboard = props => {\n const currentyear = new Date().getFullYear();\n const [year, setYear] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(currentyear);\n const [showModal, setShowModal] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n const [readingYears, setReadingYears] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const getData = async () => {\n const [data, functions] = await Promise.all([Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_components_Data_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ../components/Data.js */ "./src/components/Data.js")), Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_datatables_net-dt_js_dataTables_dataTables_mjs"), __webpack_require__.e("src_Functions_js")]).then(__webpack_require__.bind(__webpack_require__, /*! ../Functions.js */ "./src/Functions.js"))]);\n const getYears = await data.getReadingYears();\n setReadingYears(getYears);\n functions.initDataTable();\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n getData();\n }, [year]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Sidebar_js__WEBPACK_IMPORTED_MODULE_8__["default"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "topbar"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {\n className: "logo",\n src: "/static/images/logo_white.png"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "topbar_right"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {\n className: "currentUser"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n class: "fas fa-user-circle"\n }), " ", localStorage.getItem(\'name\'))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "content"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "container-fluid"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "row"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-9"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "row"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-4 col-sm-4"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "stat-block"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fa fa-calendar"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-label"\n }, "Selecteer jaar:"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-number"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("select", {\n className: "yearselector",\n value: year,\n onChange: event => setYear(event.target.value)\n }, readingYears.map((year, i) => {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("option", {\n key: i,\n value: year\n }, year);\n }), !readingYears.includes(currentyear) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("option", {\n key: currentyear,\n value: currentyear\n }, currentyear) : \'\')))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Stats__WEBPACK_IMPORTED_MODULE_4__["default"], {\n year: year\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Books__WEBPACK_IMPORTED_MODULE_2__["default"], {\n year: year\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-3"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Languages_js__WEBPACK_IMPORTED_MODULE_10__["default"], {\n year: year\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Genres__WEBPACK_IMPORTED_MODULE_1__["default"], {\n year: year\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Ratings__WEBPACK_IMPORTED_MODULE_3__["default"], {\n year: year\n })))), showModal && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Readed_js__WEBPACK_IMPORTED_MODULE_7__["default"], {\n year: year\n })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Dashboard);\n\n//# sourceURL=webpack://frontend/./src/views/dashboard.js?')}}]); \ No newline at end of file