From 25ab1416e453881dc9184c830faa6125f9227f44 Mon Sep 17 00:00:00 2001 From: Jordy van Zeeland Date: Fri, 10 Mar 2023 15:12:19 +0100 Subject: [PATCH] UI Development --- ras/frontend/src/components/Challenge.js | 22 ++++----- ras/frontend/src/views/dashboard.js | 45 +++++++------------ ras/frontend/static/css/style.css | 32 +++++++++---- ras/frontend/static/js/225.js | 2 +- ras/frontend/static/js/902.js | 1 + ras/frontend/static/js/947.js | 2 +- .../static/js/src_views_dashboard_js.js | 2 +- .../js/src_views_dashboard_js.js.LICENSE.txt | 8 ---- 8 files changed, 51 insertions(+), 63 deletions(-) create mode 100644 ras/frontend/static/js/902.js diff --git a/ras/frontend/src/components/Challenge.js b/ras/frontend/src/components/Challenge.js index cc7a340..f3f9cc8 100644 --- a/ras/frontend/src/components/Challenge.js +++ b/ras/frontend/src/components/Challenge.js @@ -10,7 +10,7 @@ export default class Challenge extends Component { } } - getComponentData(){ + getComponentData() { var $this = this; getStats(this.props.year).then(data => { @@ -42,21 +42,15 @@ export default class Challenge extends Component { return ( {this.state.challenge && this.state.challenge !== 0 ? -
-
-
-
- Book Challenge -
-
-
{challengePercentage}%
-
-
- - {this.state.totalbooks}van de{this.state.challenge}boeken gelezen -
+
+ Book Challenge +
+
+
{challengePercentage}%
+ + {this.state.totalbooks}van de{this.state.challenge}boeken gelezen
: ''} diff --git a/ras/frontend/src/views/dashboard.js b/ras/frontend/src/views/dashboard.js index ff7f27b..f07d568 100644 --- a/ras/frontend/src/views/dashboard.js +++ b/ras/frontend/src/views/dashboard.js @@ -1,9 +1,6 @@ import React, { Component } from "react"; -import { NavLink } from "react-router-dom"; import Challenge from "../components/Challenge"; -import BookStats from "../components/Stats"; import Countries from "../components/Countries"; -import Pages from "../components/Pages"; import Genres from "../components/Genres"; import Books from "../components/Books"; import { getRatingsCount, getReadingYears } from "../components/Data.js"; @@ -11,7 +8,7 @@ import Sidebar from "../components/Sidebar"; import Ratings from "../components/Ratings"; export default class Dashboard extends Component { - + constructor(props) { super(props); this.state = { @@ -43,41 +40,31 @@ export default class Dashboard extends Component { return ( +
+ + + + +
+
-
-
-
-
-
- - - - -
-
- - -
-
-
- - -
+ - + {/* */}
- + +
diff --git a/ras/frontend/static/css/style.css b/ras/frontend/static/css/style.css index 3988cb5..1394623 100644 --- a/ras/frontend/static/css/style.css +++ b/ras/frontend/static/css/style.css @@ -127,10 +127,6 @@ html, body{ border-radius: 10px; } - .sidebar ul li:has(> a.active) { - background: #333f54 !important; - } - .sidebar ul li a.active { color: #ffffff; background: rgba(0,0,0,0.3) !important; @@ -168,11 +164,29 @@ html, body{ border-radius: 10px; } - .books-stats .col-md-2:nth-child(1) i{ - background: #f8f5fc; - color: #8066ee; + .chooseYear{ + float: right; + margin-top: 10px; + padding: 12px 15px; + border-radius: 10px; + font-size:14px; } - .books-stats .col-md-2:nth-child(2) i{ + + .chooseYear i{ + color: #a9b7d0; + } + + .chooseYear select{ + font-size:16px; + background: none; + color:#ffffff; + } + + .chooseYear select:focus-visible{ + border:none !important; + outline: none !important; + } + /* .books-stats .col-md-2:nth-child(2) i{ background: #f1fcf8; color: #58c8d6; } @@ -191,7 +205,7 @@ html, body{ .books-stats .col-md-2:nth-child(6) i{ background: #f8f5fc; color: #8066ee; - } + } */ .books-stats .stat-block i{ font-weight: 900; diff --git a/ras/frontend/static/js/225.js b/ras/frontend/static/js/225.js index 642c965..b39131d 100644 --- a/ras/frontend/static/js/225.js +++ b/ras/frontend/static/js/225.js @@ -1 +1 @@ -"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([[225],{3225:(e,t,o)=>{o.r(t),o.d(t,{getAllBooks:()=>s,getBooksPerYearPerGenres:()=>c,getChallenge:()=>n,getCountries:()=>r,getGenresCount:()=>g,getReadingYears:()=>a,getShortestLongestBook:()=>d,getStats:()=>h});const s=()=>fetch("/api/books",{method:"GET"}).then((e=>e.json())).then((e=>e)),h=e=>fetch("/api/books/stats",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),n=e=>fetch("/api/books/challenge",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),a=()=>fetch("/api/books/years",{method:"GET"}).then((e=>e.json())).then((e=>e)),r=e=>fetch("/api/books/countries",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),d=e=>fetch("/api/books/pages/stats",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),c=e=>fetch("/api/books/genres",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),g=e=>fetch("/api/books/genres/count",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e))}}]); \ No newline at end of file +"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([[225],{3225:(e,t,o)=>{o.r(t),o.d(t,{getAllBooks:()=>s,getAvgRatings:()=>i,getBooksPerYearPerGenres:()=>g,getChallenge:()=>h,getCountries:()=>r,getGenresCount:()=>c,getRatingsCount:()=>k,getReadingYears:()=>a,getShortestLongestBook:()=>d,getStats:()=>n});const s=()=>fetch("/api/books",{method:"GET"}).then((e=>e.json())).then((e=>e)),n=e=>fetch("/api/books/stats",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),h=e=>fetch("/api/books/challenge",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),a=()=>fetch("/api/books/years",{method:"GET"}).then((e=>e.json())).then((e=>e)),r=e=>fetch("/api/books/countries",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),d=e=>fetch("/api/books/pages/stats",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),g=e=>fetch("/api/books/genres",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),c=e=>fetch("/api/books/genres/count",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),i=e=>fetch("/api/books/ratings",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),k=e=>fetch("/api/books/ratings/count",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e))}}]); \ No newline at end of file diff --git a/ras/frontend/static/js/902.js b/ras/frontend/static/js/902.js new file mode 100644 index 0000000..2530dbe --- /dev/null +++ b/ras/frontend/static/js/902.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([[902,225],{3225:(e,t,a)=>{a.r(t),a.d(t,{getAllBooks:()=>n,getAvgRatings:()=>h,getBooksPerYearPerGenres:()=>i,getChallenge:()=>r,getCountries:()=>l,getGenresCount:()=>m,getRatingsCount:()=>d,getReadingYears:()=>o,getShortestLongestBook:()=>c,getStats:()=>s});const n=()=>fetch("/api/books",{method:"GET"}).then((e=>e.json())).then((e=>e)),s=e=>fetch("/api/books/stats",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),r=e=>fetch("/api/books/challenge",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),o=()=>fetch("/api/books/years",{method:"GET"}).then((e=>e.json())).then((e=>e)),l=e=>fetch("/api/books/countries",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),c=e=>fetch("/api/books/pages/stats",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),i=e=>fetch("/api/books/genres",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),m=e=>fetch("/api/books/genres/count",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),h=e=>fetch("/api/books/ratings",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),d=e=>fetch("/api/books/ratings/count",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e))},764:(e,t,a)=>{a.d(t,{Z:()=>o});var n=a(7294),s=a.n(n),r=a(9655);const o=function(){return s().createElement(s().Fragment,null,s().createElement("div",{className:"sidebar"},s().createElement("ul",null,s().createElement("li",null,s().createElement(r.OL,{to:"/"},s().createElement("i",{className:"fa fa-chart-bar"})," Dashboard")),s().createElement("li",null,s().createElement(r.OL,{to:"/booklist"},s().createElement("i",{className:"fas fa-book"})," Boekenlijst")),s().createElement("li",null,s().createElement("i",{className:"fa fa-calendar"}),s().createElement("span",{className:"stats-number"},s().createElement("select",{className:"yearselector",value:this.state.year,onChange:e=>this.changeYear(e)},this.state.readingYears.map(((e,t)=>s().createElement("option",{key:t,value:e},e)))))))))}},1902:(e,t,a)=>{a.r(t),a.d(t,{default:()=>g});var n=a(7294),s=a.n(n),r=a(3225);class o extends n.Component{constructor(e){super(e),this.state={readingYears:[],challenge:0}}getComponentData(){var e=this;(0,r.getStats)(this.props.year).then((t=>{e.setState({totalbooks:t.totalbooks})})),(0,r.getChallenge)(this.props.year).then((e=>{this.setState({challenge:e&&e.length>0?e[0].nrofbooks:0})}))}componentDidMount(){this.getComponentData()}componentDidUpdate(e,t){e.year!==this.props.year&&this.getComponentData()}render(){var e=Math.round(this.state.totalbooks/this.state.challenge*100,0);return s().createElement(s().Fragment,null,this.state.challenge&&0!==this.state.challenge?s().createElement("div",{className:"container-fluid"},s().createElement("div",{className:"row"},s().createElement("div",{className:"col-md-12"},s().createElement("div",{className:"stat-block"},s().createElement("span",{className:"block_name"},"Book Challenge"),s().createElement("div",{className:"progress"},s().createElement("div",{className:"progress-bar progress-bar-striped",role:"progressbar",style:{width:e+"%"},"aria-valuenow":e,"aria-valuemin":"0","aria-valuemax":"100"},s().createElement("div",{className:"progress-bar-number"},e,"%"))),s().createElement("span",{className:"stats-number"},this.state.totalbooks),s().createElement("span",{className:"stats-label"},"van de"),s().createElement("span",{className:"stats-number"},this.state.challenge),s().createElement("span",{className:"stats-label"},"boeken gelezen"))))):"")}}class l extends n.Component{constructor(e){super(e),this.state={countries:[]}}getComponentData(){(0,r.getCountries)(this.props.year).then((e=>{this.setState({countries:e})}))}componentDidMount(){this.getComponentData()}componentDidUpdate(e,t){e.year!==this.props.year&&this.getComponentData()}render(){return s().createElement(s().Fragment,null,s().createElement("div",{className:"books-per-country"},s().createElement("span",{className:"block_name"},"Landen"),s().createElement("table",{id:"DataTable",className:"table responsive nowrap",width:"100%"},s().createElement("thead",null,s().createElement("tr",null,s().createElement("th",null,"#"),s().createElement("th",null,"Land"),s().createElement("th",null,"Boeken"))),s().createElement("tbody",null,this.state.countries.map(((e,t)=>{var a=e.code.toLowerCase();return s().createElement("tr",{key:t},s().createElement("td",null,t+1),s().createElement("td",null,s().createElement("img",{src:`https://flagcdn.com/32x24/${a}.png`})," ",e.country),s().createElement("td",null,e.count))}))))))}}const c=(e,t,a)=>{var n=[],s=["#8066ee","#58c8d6","#fe4c62","#49b8fd","#ffbe0e"],r=[];e.forEach((e=>{n.includes(e.genre)||n.push(e.genre)})),n&&n.length>0&&n.forEach(((t,n)=>{for(var o=[],l=0;l<12;l++){if(o[l]=0,l+1<10)var c="0"+(l+1);else c=l+1;for(var i=0;i');const m={id:"legendMargin",beforeInit(e,t,a){const n=e.legend.fit;e.legend.fit=function(){return n.bind(e.legend)(),this.height+=30}}};new Chart(document.getElementById("chart"),{type:"bar",data:{labels:["Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","Oktober","November","December"],datasets:r},options:{maintainAspectRatio:!1,responsive:!0,showTooltips:!0,legend:{display:!0,labels:{usePointStyle:!0}},interaction:{mode:"index"},scales:{x:{ticks:{beginAtZero:!0,color:"#101010",fontFamily:"Source Sans Pro"},stacked:!0},y:{ticks:{beginAtZero:!0,stepSize:1,color:"#101010",fontFamily:"Source Sans Pro"},stacked:!0}},plugins:{legend:{position:"top",labels:{usePointStyle:!0,color:"#101010",padding:20,font:{size:14,family:"Source Sans Pro"}}}},tooltips:{bodyFont:"Source Sans Pro"}},plugins:[m]})},i=e=>{console.log(e);var t=[],a=[];e.forEach((e=>{t.includes(e.genre)||t.push(e.genre),a.push(e.count)})),$("canvas#chartGenres").remove(),$("div.genresPercent").append('');var n=document.getElementById("chartGenres");new Chart(n,{type:"pie",data:{labels:t,datasets:[{label:"# of Tomatoes",data:a,backgroundColor:["#8066ee","#58c8d6","#fe4c62","#49b8fd","#ffbe0e"],borderWidth:0,borderColor:"#1f2940",tooltip:{callbacks:{label:function(e){let t=e.label,a=e.formattedValue;t||(t="Unknown");let n=0;return e.chart.data.datasets[0].data.map((e=>{n+=Number(e)})),t+": "+(100*a/n).toFixed(1)+"%"}}}}]},options:{cutout:"80%",responsive:!0,plugins:{legend:{position:"top",labels:{padding:20,usePointStyle:!0,color:"##101010",font:{size:14,family:"Source Sans Pro"}}}}},plugins:[{id:"legendMargin",beforeInit(e,t,a){const n=e.legend.fit;e.legend.fit=function(){return n.bind(e.legend)(),this.height+=30}}}]})};class m extends n.Component{constructor(e){super(e),this.state={genres:[]}}getComponentData(){(0,r.getGenresCount)(this.props.year).then((e=>{this.setState({genres:e}),i(e,this.props.year)}))}componentDidMount(){this.getComponentData()}componentDidUpdate(e,t){e.year!==this.props.year&&this.getComponentData()}render(){return s().createElement(s().Fragment,null,s().createElement("div",{className:"genresPercent"},s().createElement("span",{className:"block_name"},"Genres"),s().createElement("canvas",{id:"chartGenres"})))}}class h extends n.Component{constructor(e){super(e),this.state={books:[]}}getComponentData(){(0,r.getBooksPerYearPerGenres)(this.props.year).then((e=>{this.setState({books:e}),(0,r.getAvgRatings)(this.props.year).then((t=>{c(e,t,this.props.year)}))}))}componentDidMount(){this.getComponentData()}componentDidUpdate(e,t){e.year!==this.props.year&&this.getComponentData()}render(){return s().createElement(s().Fragment,null,s().createElement("div",{className:"books-per-month"},s().createElement("span",{className:"block_name"},"Boeken per maand per genre"),s().createElement("canvas",{id:"chart"})))}}var d=a(764);class p extends n.Component{constructor(e){super(e),this.state={ratings:[],totalRatings:0}}getComponentData(){(0,r.getRatingsCount)(this.props.year).then((e=>{var t=0;e.forEach((e=>{t+=e.count}));for(var a={5:0,4:0,3:0,2:0,1:0},n=5;n>0;n--)e.forEach((e=>{e.rating===n&&(a[n]=e.count)}));console.log(Object.entries(a)),this.setState({ratings:Object.entries(a),totalRatings:t})}))}componentDidMount(){this.getComponentData()}componentDidUpdate(e,t){e.year!==this.props.year&&this.getComponentData()}render(){return s().createElement(s().Fragment,null,s().createElement("div",{className:"ratings"},s().createElement("span",{className:"block_name"},"Waarderingen (",this.state.totalRatings,")"),s().createElement("table",{id:"DataTable",className:"table responsive nowrap",width:"100%"},s().createElement("thead",null,s().createElement("tr",null,s().createElement("th",null,"#"),s().createElement("th",null,"percentage"),s().createElement("th",null,"aantal"))),s().createElement("tbody",null,this.state.ratings.map((e=>{var t="",a=e[1]/this.state.totalRatings*100;if(console.log(e[1],this.state.totalRatings),e[0])for(var n=0;n";return s().createElement("tr",null,s().createElement("td",{style:{width:"120px"},className:"book_rating",dangerouslySetInnerHTML:{__html:t}}),s().createElement("td",{style:{width:"257px"}},s().createElement("div",{className:"progress"},s().createElement("div",{className:"progress-bar progress-bar-striped",role:"progressbar",style:{width:a+"%"},"aria-valuenow":a,"aria-valuemin":"0","aria-valuemax":"100"}))),s().createElement("td",null,e[1]))}))))))}}class g extends n.Component{constructor(e){super(e),this.state={year:(new Date).getFullYear(),readingYears:[]}}changeYear(e){this.setState({year:e.target.value})}componentDidMount(){(0,r.getReadingYears)().then((e=>{this.setState({readingYears:e})})),(0,r.getRatingsCount)(this.state.year).then((e=>{console.log(e)}))}render(){return window.location.href.split("/"),s().createElement(s().Fragment,null,s().createElement(d.Z,null),s().createElement("div",{className:"content"},s().createElement("div",{className:"container-fluid"},s().createElement("div",{className:"row"},s().createElement("div",{className:"col-md-8"},s().createElement(o,{year:this.state.year}),s().createElement(h,{year:this.state.year})),s().createElement("div",{className:"col-md-4"},s().createElement(m,{year:this.state.year}),s().createElement(l,{year:this.state.year}),s().createElement(p,{year:this.state.year}))))))}}}}]); \ No newline at end of file diff --git a/ras/frontend/static/js/947.js b/ras/frontend/static/js/947.js index 78fb50d..bfd90cf 100644 --- a/ras/frontend/static/js/947.js +++ b/ras/frontend/static/js/947.js @@ -1 +1 @@ -(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([[947],{764:(n,e,a)=>{"use strict";a.d(e,{Z:()=>s});var t=a(7294),r=a.n(t),l=a(9655);const s=function(){return r().createElement(r().Fragment,null,r().createElement("div",{className:"sidebar"},r().createElement("ul",null,r().createElement("li",null,r().createElement(l.OL,{to:"/"},r().createElement("i",{className:"fa fa-chart-bar"})," Dashboard")),r().createElement("li",null,r().createElement(l.OL,{to:"/booklist"},r().createElement("i",{className:"fas fa-book"})," Boekenlijst")))))}},6645:(n,e,a)=>{"use strict";a.r(e),a.d(e,{default:()=>v});var t=a(7294),r=a.n(t),l=a(3379),s=a.n(l),o=a(7795),i=a.n(o),d=a(569),p=a.n(d),c=a(3565),b=a.n(c),m=a(9216),g=a.n(m),j=a(4589),u=a.n(j),h=a(6514),x={};x.styleTagTransform=u(),x.setAttributes=b(),x.insert=p().bind(null,"head"),x.domAPI=i(),x.insertStyleElement=g(),s()(h.Z,x),h.Z&&h.Z.locals&&h.Z.locals;var f=a(381),T=a(764);const k=a(9755);k.DataTable=a(991),f.locale("nl");const E=function(){const n=(n,e,a)=>{0!==e&&!0===a?k("#DataTable").DataTable().column(n).search("(^"+e+"$)",!0,!1).draw():k("#DataTable").DataTable().column(n).search(e).draw()};return k(".author").on("change",(function(){n(1,this.value,!1)})),k(".genre").on("change",(function(){n(2,this.value,!1)})),k(".country").on("change",(function(){n(3,this.value,!1)})),r().createElement(r().Fragment,null,r().createElement("div",{className:"search-bar"},r().createElement("input",{type:"text",onChange:e=>n(0,e.target.value,!1),name:"search",id:"search",placeholder:"Zoeken..."})),r().createElement("div",{className:"filters"},r().createElement("select",{className:"author"},r().createElement("option",{value:""},"Filter op Schrijver")),r().createElement("select",{className:"genre"},r().createElement("option",{value:""},"Filter op Genre")),r().createElement("select",{className:"country"},r().createElement("option",{value:""},"Filter op Land"))))},y=a(9755);y.DataTable=a(991),f.locale("nl");const v=function(){var[n,e]=(0,t.useState)([]);const l=(n,e,a)=>{if(console.log(e,a),e&&!n.find("option:contains('"+a+"')").length){var t=new Option(e,e);t.innerHTML=a,n[0].appendChild(t)}};return(0,t.useEffect)((()=>{document.title="Boekenlijst - Reading Analytics System",a.e(225).then(a.bind(a,3225)).then((n=>n.getAllBooks().then((n=>{e(n),setTimeout((()=>{y("#DataTable").DataTable({language:{url:"https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json"},dom:'rt<"bottom"pl><"clear">',order:[]})}),1e3)}))))}),[]),r().createElement(r().Fragment,null,r().createElement(T.Z,null),r().createElement("div",{className:"content"},r().createElement(E,null),r().createElement("div",{className:"DataTable_Container"},r().createElement("table",{id:"DataTable",className:"showHead table responsive nowrap",width:"100%"},r().createElement("thead",null,r().createElement("tr",null,r().createElement("th",null,"Boek"),r().createElement("th",null,"Schrijver"),r().createElement("th",null,"Genre"),r().createElement("th",null,"Land"),r().createElement("th",null,"Aantal pagina's"),r().createElement("th",null,"Gelezen op"),r().createElement("th",null,"Beoordeling"))),r().createElement("tbody",null,n.map(((n,e)=>{var a=n.country_code.toLowerCase(),t=(n=>{const e=n.toUpperCase().split("").map((n=>127397+n.charCodeAt()));return String.fromCodePoint(...e)})(n.country_code),s=n.country,o=t+" "+n.country;return l(y(".genre"),n.genre,n.genre),l(y(".country"),s,o),l(y(".author"),n.author,n.author),r().createElement("tr",{key:n.id},r().createElement("td",null,n.name),r().createElement("td",null,n.author),r().createElement("td",null,n.genre),r().createElement("td",null,r().createElement("img",{src:`https://flagcdn.com/20x15/${a}.png`})," ",n.country),r().createElement("td",null,n.pages),r().createElement("td",null,f(n.readed).format("MMMM YYYY")),r().createElement("td",null,r().createElement("i",{class:"fas fa-star"}),n.rating))})))))))}},6514:(n,e,a)=>{"use strict";a.d(e,{Z:()=>o});var t=a(8081),r=a.n(t),l=a(3645),s=a.n(l)()(r());s.push([n.id,".dataTable-top td{\n vertical-align: top;\n}\n\n.dataTable-top td{\n padding-top:15px !important;\n}\n\n.DataTable_Container {\n margin: 0 !important;\n margin-top:30px !important;\n}\n\n#DataTable{\n margin-bottom:0;\n box-shadow: 0 2px 0 1px rgb(0 0 0/3%);\n}\n\n#DataTable a {\n color: #000;\n text-decoration: none;\n}\n\n#DataTable i {\n color: #ffbe0e;\n margin-right:10px;\n}\n\n#DataTable thead th{\n padding: 20px 20px;\n border-bottom: 1px solid #efefef;\n font-weight: 600;\n font-size: 15px;\n color:#000000;\n}\n\n#DataTable tr{\n background:#ffffff;\n}\n\n#DataTable tr:first-child td{\n border-top:none;\n}\n\n#DataTable td{\n padding:14px;\n}\n\n#DataTable{\n margin-bottom:0;\n}\n\n#DataTable .openAlarm .pictogram {\n /* display: inline-block;\n padding: 0 0 0 0;\n margin: 10px 10px 10px 10px;\n background: rgb(255,0,0); */\n display: inline-block;\n margin: 10px 10px 10px 10px;\n background: rgb(255,0,0);\n box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\n border-radius: 100%;\n padding: 5px;\n}\n\n#DataTable tbody td:first-child{\n padding: 0rem;\n}\n\n\n#DataTable td{\n padding:10px;\n color: #000000;\n font-size: 15px;\n height: 45px;\n font-weight: 400;\n vertical-align: middle;\n padding-left: 20px !important;\n border-top: 1px solid #efefef;\n border-bottom: none;\n}\n\n#DataTable .openAlarm td{\n padding:10px;\n color: #000000;\n font-size: 14px;\n height: 45px;\n font-weight: 400;\n vertical-align: middle;\n border-top: 1px solid #efefef;\n}\n\n#DataTable .openAlarm:first-child td{\n border-top:none;\n}\n\n.DataTable_Container {\n margin: 0px 2.5rem 0px 2.5rem;\n}\n\n.DataTable_Container thead{\n display:none;\n}\n\n\n.DataTable_Container table{\n margin-bottom:0;\n}\n\n.DataTable_Container h2 {\n float: left;\n margin-top: 15px;\n font-size: 14px;\n font-weight: 600;\n padding-left: 20px;\n width: 100%;\n border-bottom: solid 1px #e7eaed;\n padding-bottom: 15px;\n margin-bottom: 0;\n}\n\n.DataTable_Container .historyAlarm .pictogram {\n /* display: inline-block;\n padding: 0 0 0 0;\n margin: 10px 10px 10px 10px;\n background: rgb(255,0,0); */\n display: inline-block;\n margin: 10px 10px 10px 10px;\n background: rgb(255,0,0);\n box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\n border-radius: 100%;\n padding: 5px;\n}\n\n.DataTable_Container .table tbody td:first-child{\n padding: 0rem;\n}\n\n.DataTable_Container .historyAlarm td{\n padding:10px;\n color: #000000;\n font-size: 14px;\n height: 45px;\n font-weight: 100;\n vertical-align: middle;\n border-top: 1px solid #efefef;\n}\n\n.DataTable_Container .historyAlarm:first-child td{\n border-top:none;\n}\n\n.DataTable_Container .dataTables_length{\n padding: 20px 0;\n}\n\n.DataTable_Container .dataTables_length select{\n border: 1px solid #ced4da !important;\n padding: 5px 5px !important;\n margin-right: 5px !important;\n background:#ffffff;\n}\n\n.DataTable_Container .dataTables_filter{\n padding: 20px 0;\n}\n\n.DataTable_Container .dataTables_filter input{\n border: 1px solid #ced4da !important;\n padding: 5px 5px !important;\n margin-right: 5px !important;\n background:#ffffff;\n}\n\n.DataTable_Container table.dataTable.no-footer {\n border-bottom: none;\n}\n\n.DataTable_Container .dataTables_info{\n padding: 20px 0;\n font-size: 14px;\n}\n\n.DataTable_Container .dataTables_paginate{\n padding: 20px 0;\n}\n\n.DataTable_Container .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {\n background: none !important;\n background-color: #8066ee !important;\n border-color: #8066ee !important;\n color: #fff !important;\n}\n\n.DataTable_Container .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\n background: none !important;\n background-color: #eaebec !important;\n color: #000 !important;\n}\n\n.dataTables_wrapper .dataTables_paginate{\n float:right;\n}\n\n.dataTables_wrapper .dataTables_paginate .paginate_button {\n box-sizing: border-box;\n display: inline-block;\n min-width: 1.5em;\n padding: 0.5em 1em;\n margin-left: 2px;\n text-align: center;\n text-decoration: none !important;\n cursor: pointer;\n color: #333 !important;\n border: 1px solid transparent;\n border-radius: 2px;\n font-size: 13px;\n}\n\n.showHead thead{\n display: table-header-group;\n}\n\n.badge-info{\n box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\n padding: 5px 15px;\n}",""]);const o=s},6700:(n,e,a)=>{var t={"./af":2786,"./af.js":2786,"./ar":867,"./ar-dz":4130,"./ar-dz.js":4130,"./ar-kw":6135,"./ar-kw.js":6135,"./ar-ly":6440,"./ar-ly.js":6440,"./ar-ma":7702,"./ar-ma.js":7702,"./ar-sa":6040,"./ar-sa.js":6040,"./ar-tn":7100,"./ar-tn.js":7100,"./ar.js":867,"./az":1083,"./az.js":1083,"./be":9808,"./be.js":9808,"./bg":8338,"./bg.js":8338,"./bm":7438,"./bm.js":7438,"./bn":8905,"./bn-bd":6225,"./bn-bd.js":6225,"./bn.js":8905,"./bo":1560,"./bo.js":1560,"./br":1278,"./br.js":1278,"./bs":622,"./bs.js":622,"./ca":2468,"./ca.js":2468,"./cs":5822,"./cs.js":5822,"./cv":877,"./cv.js":877,"./cy":7373,"./cy.js":7373,"./da":4780,"./da.js":4780,"./de":9740,"./de-at":217,"./de-at.js":217,"./de-ch":894,"./de-ch.js":894,"./de.js":9740,"./dv":5300,"./dv.js":5300,"./el":837,"./el.js":837,"./en-au":8348,"./en-au.js":8348,"./en-ca":7925,"./en-ca.js":7925,"./en-gb":2243,"./en-gb.js":2243,"./en-ie":6436,"./en-ie.js":6436,"./en-il":7207,"./en-il.js":7207,"./en-in":4175,"./en-in.js":4175,"./en-nz":6319,"./en-nz.js":6319,"./en-sg":1662,"./en-sg.js":1662,"./eo":2915,"./eo.js":2915,"./es":5655,"./es-do":5251,"./es-do.js":5251,"./es-mx":6112,"./es-mx.js":6112,"./es-us":1146,"./es-us.js":1146,"./es.js":5655,"./et":5603,"./et.js":5603,"./eu":7763,"./eu.js":7763,"./fa":6959,"./fa.js":6959,"./fi":1897,"./fi.js":1897,"./fil":2549,"./fil.js":2549,"./fo":4694,"./fo.js":4694,"./fr":4470,"./fr-ca":3049,"./fr-ca.js":3049,"./fr-ch":2330,"./fr-ch.js":2330,"./fr.js":4470,"./fy":5044,"./fy.js":5044,"./ga":9295,"./ga.js":9295,"./gd":2101,"./gd.js":2101,"./gl":8794,"./gl.js":8794,"./gom-deva":7884,"./gom-deva.js":7884,"./gom-latn":3168,"./gom-latn.js":3168,"./gu":5349,"./gu.js":5349,"./he":4206,"./he.js":4206,"./hi":94,"./hi.js":94,"./hr":316,"./hr.js":316,"./hu":2138,"./hu.js":2138,"./hy-am":1423,"./hy-am.js":1423,"./id":9218,"./id.js":9218,"./is":135,"./is.js":135,"./it":626,"./it-ch":150,"./it-ch.js":150,"./it.js":626,"./ja":9183,"./ja.js":9183,"./jv":4286,"./jv.js":4286,"./ka":2105,"./ka.js":2105,"./kk":7772,"./kk.js":7772,"./km":8758,"./km.js":8758,"./kn":9282,"./kn.js":9282,"./ko":3730,"./ko.js":3730,"./ku":1408,"./ku.js":1408,"./ky":3291,"./ky.js":3291,"./lb":6841,"./lb.js":6841,"./lo":5466,"./lo.js":5466,"./lt":7010,"./lt.js":7010,"./lv":7595,"./lv.js":7595,"./me":9861,"./me.js":9861,"./mi":5493,"./mi.js":5493,"./mk":5966,"./mk.js":5966,"./ml":7341,"./ml.js":7341,"./mn":5115,"./mn.js":5115,"./mr":370,"./mr.js":370,"./ms":9847,"./ms-my":1237,"./ms-my.js":1237,"./ms.js":9847,"./mt":2126,"./mt.js":2126,"./my":6165,"./my.js":6165,"./nb":4924,"./nb.js":4924,"./ne":6744,"./ne.js":6744,"./nl":3901,"./nl-be":9814,"./nl-be.js":9814,"./nl.js":3901,"./nn":3877,"./nn.js":3877,"./oc-lnc":2135,"./oc-lnc.js":2135,"./pa-in":5858,"./pa-in.js":5858,"./pl":4495,"./pl.js":4495,"./pt":9520,"./pt-br":7971,"./pt-br.js":7971,"./pt.js":9520,"./ro":6459,"./ro.js":6459,"./ru":1793,"./ru.js":1793,"./sd":950,"./sd.js":950,"./se":490,"./se.js":490,"./si":124,"./si.js":124,"./sk":4249,"./sk.js":4249,"./sl":4985,"./sl.js":4985,"./sq":1104,"./sq.js":1104,"./sr":9131,"./sr-cyrl":9915,"./sr-cyrl.js":9915,"./sr.js":9131,"./ss":5893,"./ss.js":5893,"./sv":8760,"./sv.js":8760,"./sw":1172,"./sw.js":1172,"./ta":7333,"./ta.js":7333,"./te":3110,"./te.js":3110,"./tet":2095,"./tet.js":2095,"./tg":7321,"./tg.js":7321,"./th":9041,"./th.js":9041,"./tk":9005,"./tk.js":9005,"./tl-ph":5768,"./tl-ph.js":5768,"./tlh":9444,"./tlh.js":9444,"./tr":2397,"./tr.js":2397,"./tzl":8254,"./tzl.js":8254,"./tzm":1106,"./tzm-latn":699,"./tzm-latn.js":699,"./tzm.js":1106,"./ug-cn":9288,"./ug-cn.js":9288,"./uk":7691,"./uk.js":7691,"./ur":3795,"./ur.js":3795,"./uz":6791,"./uz-latn":588,"./uz-latn.js":588,"./uz.js":6791,"./vi":5666,"./vi.js":5666,"./x-pseudo":4378,"./x-pseudo.js":4378,"./yo":5805,"./yo.js":5805,"./zh-cn":3839,"./zh-cn.js":3839,"./zh-hk":5726,"./zh-hk.js":5726,"./zh-mo":9807,"./zh-mo.js":9807,"./zh-tw":4152,"./zh-tw.js":4152};function r(n){var e=l(n);return a(e)}function l(n){if(!a.o(t,n)){var e=new Error("Cannot find module '"+n+"'");throw e.code="MODULE_NOT_FOUND",e}return t[n]}r.keys=function(){return Object.keys(t)},r.resolve=l,n.exports=r,r.id=6700}}]); \ No newline at end of file +(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([[947],{764:(n,e,a)=>{"use strict";a.d(e,{Z:()=>s});var t=a(7294),r=a.n(t),l=a(9655);const s=function(){return r().createElement(r().Fragment,null,r().createElement("div",{className:"sidebar"},r().createElement("ul",null,r().createElement("li",null,r().createElement(l.OL,{to:"/"},r().createElement("i",{className:"fa fa-chart-bar"})," Dashboard")),r().createElement("li",null,r().createElement(l.OL,{to:"/booklist"},r().createElement("i",{className:"fas fa-book"})," Boekenlijst")),r().createElement("li",null,r().createElement("i",{className:"fa fa-calendar"}),r().createElement("span",{className:"stats-number"},r().createElement("select",{className:"yearselector",value:this.state.year,onChange:n=>this.changeYear(n)},this.state.readingYears.map(((n,e)=>r().createElement("option",{key:e,value:n},n)))))))))}},6645:(n,e,a)=>{"use strict";a.r(e),a.d(e,{default:()=>v});var t=a(7294),r=a.n(t),l=a(3379),s=a.n(l),o=a(7795),i=a.n(o),d=a(569),p=a.n(d),c=a(3565),m=a.n(c),b=a(9216),g=a.n(b),j=a(4589),u=a.n(j),h=a(6514),x={};x.styleTagTransform=u(),x.setAttributes=m(),x.insert=p().bind(null,"head"),x.domAPI=i(),x.insertStyleElement=g(),s()(h.Z,x),h.Z&&h.Z.locals&&h.Z.locals;var f=a(381),T=a(764);const k=a(9755);k.DataTable=a(991),f.locale("nl");const E=function(){const n=(n,e,a)=>{0!==e&&!0===a?k("#DataTable").DataTable().column(n).search("(^"+e+"$)",!0,!1).draw():k("#DataTable").DataTable().column(n).search(e).draw()};return k(".author").on("change",(function(){n(1,this.value,!1)})),k(".genre").on("change",(function(){n(2,this.value,!1)})),k(".country").on("change",(function(){n(3,this.value,!1)})),r().createElement(r().Fragment,null,r().createElement("div",{className:"search-bar"},r().createElement("input",{type:"text",onChange:e=>n(0,e.target.value,!1),name:"search",id:"search",placeholder:"Zoeken..."})),r().createElement("div",{className:"filters"},r().createElement("select",{className:"author"},r().createElement("option",{value:""},"Filter op Schrijver")),r().createElement("select",{className:"genre"},r().createElement("option",{value:""},"Filter op Genre")),r().createElement("select",{className:"country"},r().createElement("option",{value:""},"Filter op Land"))))},y=a(9755);y.DataTable=a(991),f.locale("nl");const v=function(){var[n,e]=(0,t.useState)([]);const l=(n,e,a)=>{if(console.log(e,a),e&&!n.find("option:contains('"+a+"')").length){var t=new Option(e,e);t.innerHTML=a,n[0].appendChild(t)}};return(0,t.useEffect)((()=>{document.title="Boekenlijst - Reading Analytics System",a.e(225).then(a.bind(a,3225)).then((n=>n.getAllBooks().then((n=>{e(n),setTimeout((()=>{y("#DataTable").DataTable({language:{url:"https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json"},dom:'rt<"bottom"pl><"clear">',order:[]})}),1e3)}))))}),[]),r().createElement(r().Fragment,null,r().createElement(T.Z,null),r().createElement("div",{className:"content"},r().createElement(E,null),r().createElement("div",{className:"DataTable_Container"},r().createElement("table",{id:"DataTable",className:"showHead table responsive nowrap",width:"100%"},r().createElement("thead",null,r().createElement("tr",null,r().createElement("th",null,"Boek"),r().createElement("th",null,"Schrijver"),r().createElement("th",null,"Genre"),r().createElement("th",null,"Land"),r().createElement("th",null,"Aantal pagina's"),r().createElement("th",null,"Gelezen op"),r().createElement("th",null,"Beoordeling"))),r().createElement("tbody",null,n.map(((n,e)=>{var a=n.country_code.toLowerCase(),t=(n=>{const e=n.toUpperCase().split("").map((n=>127397+n.charCodeAt()));return String.fromCodePoint(...e)})(n.country_code),s=n.country,o=t+" "+n.country;return l(y(".genre"),n.genre,n.genre),l(y(".country"),s,o),l(y(".author"),n.author,n.author),r().createElement("tr",{key:n.id},r().createElement("td",null,n.name),r().createElement("td",null,n.author),r().createElement("td",null,n.genre),r().createElement("td",null,r().createElement("img",{src:`https://flagcdn.com/20x15/${a}.png`})," ",n.country),r().createElement("td",null,n.pages),r().createElement("td",null,f(n.readed).format("MMMM YYYY")),r().createElement("td",null,r().createElement("i",{class:"fas fa-star"}),n.rating))})))))))}},6514:(n,e,a)=>{"use strict";a.d(e,{Z:()=>o});var t=a(8081),r=a.n(t),l=a(3645),s=a.n(l)()(r());s.push([n.id,".dataTable-top td{\n vertical-align: top;\n}\n\n.dataTable-top td{\n padding-top:15px !important;\n}\n\n.DataTable_Container {\n margin: 0 !important;\n margin-top:30px !important;\n}\n\n#DataTable{\n margin-bottom:0;\n box-shadow: 0 2px 0 1px rgb(0 0 0/3%);\n}\n\n#DataTable a {\n color: #000;\n text-decoration: none;\n}\n\n#DataTable i {\n color: #ffbe0e;\n margin-right:10px;\n}\n\n#DataTable thead th{\n padding: 20px 20px;\n border-bottom: 1px solid #efefef;\n font-weight: 600;\n font-size: 15px;\n color:#000000;\n}\n\n#DataTable tr{\n background:#ffffff;\n}\n\n#DataTable tr:first-child td{\n border-top:none;\n}\n\n#DataTable td{\n padding:14px;\n}\n\n#DataTable{\n margin-bottom:0;\n}\n\n#DataTable .openAlarm .pictogram {\n /* display: inline-block;\n padding: 0 0 0 0;\n margin: 10px 10px 10px 10px;\n background: rgb(255,0,0); */\n display: inline-block;\n margin: 10px 10px 10px 10px;\n background: rgb(255,0,0);\n box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\n border-radius: 100%;\n padding: 5px;\n}\n\n#DataTable tbody td:first-child{\n padding: 0rem;\n}\n\n\n#DataTable td{\n padding:10px;\n color: #000000;\n font-size: 15px;\n height: 45px;\n font-weight: 400;\n vertical-align: middle;\n padding-left: 20px !important;\n border-top: 1px solid #efefef;\n border-bottom: none;\n}\n\n#DataTable .openAlarm td{\n padding:10px;\n color: #000000;\n font-size: 14px;\n height: 45px;\n font-weight: 400;\n vertical-align: middle;\n border-top: 1px solid #efefef;\n}\n\n#DataTable .openAlarm:first-child td{\n border-top:none;\n}\n\n.DataTable_Container {\n margin: 0px 2.5rem 0px 2.5rem;\n}\n\n.DataTable_Container thead{\n display:none;\n}\n\n\n.DataTable_Container table{\n margin-bottom:0;\n}\n\n.DataTable_Container h2 {\n float: left;\n margin-top: 15px;\n font-size: 14px;\n font-weight: 600;\n padding-left: 20px;\n width: 100%;\n border-bottom: solid 1px #e7eaed;\n padding-bottom: 15px;\n margin-bottom: 0;\n}\n\n.DataTable_Container .historyAlarm .pictogram {\n /* display: inline-block;\n padding: 0 0 0 0;\n margin: 10px 10px 10px 10px;\n background: rgb(255,0,0); */\n display: inline-block;\n margin: 10px 10px 10px 10px;\n background: rgb(255,0,0);\n box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\n border-radius: 100%;\n padding: 5px;\n}\n\n.DataTable_Container .table tbody td:first-child{\n padding: 0rem;\n}\n\n.DataTable_Container .historyAlarm td{\n padding:10px;\n color: #000000;\n font-size: 14px;\n height: 45px;\n font-weight: 100;\n vertical-align: middle;\n border-top: 1px solid #efefef;\n}\n\n.DataTable_Container .historyAlarm:first-child td{\n border-top:none;\n}\n\n.DataTable_Container .dataTables_length{\n padding: 20px 0;\n}\n\n.DataTable_Container .dataTables_length select{\n border: 1px solid #ced4da !important;\n padding: 5px 5px !important;\n margin-right: 5px !important;\n background:#ffffff;\n}\n\n.DataTable_Container .dataTables_filter{\n padding: 20px 0;\n}\n\n.DataTable_Container .dataTables_filter input{\n border: 1px solid #ced4da !important;\n padding: 5px 5px !important;\n margin-right: 5px !important;\n background:#ffffff;\n}\n\n.DataTable_Container table.dataTable.no-footer {\n border-bottom: none;\n}\n\n.DataTable_Container .dataTables_info{\n padding: 20px 0;\n font-size: 14px;\n}\n\n.DataTable_Container .dataTables_paginate{\n padding: 20px 0;\n}\n\n.DataTable_Container .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {\n background: none !important;\n background-color: #8066ee !important;\n border-color: #8066ee !important;\n color: #fff !important;\n}\n\n.DataTable_Container .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\n background: none !important;\n background-color: #eaebec !important;\n color: #000 !important;\n}\n\n.dataTables_wrapper .dataTables_paginate{\n float:right;\n}\n\n.dataTables_wrapper .dataTables_paginate .paginate_button {\n box-sizing: border-box;\n display: inline-block;\n min-width: 1.5em;\n padding: 0.5em 1em;\n margin-left: 2px;\n text-align: center;\n text-decoration: none !important;\n cursor: pointer;\n color: #333 !important;\n border: 1px solid transparent;\n border-radius: 2px;\n font-size: 13px;\n}\n\n.showHead thead{\n display: table-header-group;\n}\n\n.badge-info{\n box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\n padding: 5px 15px;\n}",""]);const o=s},6700:(n,e,a)=>{var t={"./af":2786,"./af.js":2786,"./ar":867,"./ar-dz":4130,"./ar-dz.js":4130,"./ar-kw":6135,"./ar-kw.js":6135,"./ar-ly":6440,"./ar-ly.js":6440,"./ar-ma":7702,"./ar-ma.js":7702,"./ar-sa":6040,"./ar-sa.js":6040,"./ar-tn":7100,"./ar-tn.js":7100,"./ar.js":867,"./az":1083,"./az.js":1083,"./be":9808,"./be.js":9808,"./bg":8338,"./bg.js":8338,"./bm":7438,"./bm.js":7438,"./bn":8905,"./bn-bd":6225,"./bn-bd.js":6225,"./bn.js":8905,"./bo":1560,"./bo.js":1560,"./br":1278,"./br.js":1278,"./bs":622,"./bs.js":622,"./ca":2468,"./ca.js":2468,"./cs":5822,"./cs.js":5822,"./cv":877,"./cv.js":877,"./cy":7373,"./cy.js":7373,"./da":4780,"./da.js":4780,"./de":9740,"./de-at":217,"./de-at.js":217,"./de-ch":894,"./de-ch.js":894,"./de.js":9740,"./dv":5300,"./dv.js":5300,"./el":837,"./el.js":837,"./en-au":8348,"./en-au.js":8348,"./en-ca":7925,"./en-ca.js":7925,"./en-gb":2243,"./en-gb.js":2243,"./en-ie":6436,"./en-ie.js":6436,"./en-il":7207,"./en-il.js":7207,"./en-in":4175,"./en-in.js":4175,"./en-nz":6319,"./en-nz.js":6319,"./en-sg":1662,"./en-sg.js":1662,"./eo":2915,"./eo.js":2915,"./es":5655,"./es-do":5251,"./es-do.js":5251,"./es-mx":6112,"./es-mx.js":6112,"./es-us":1146,"./es-us.js":1146,"./es.js":5655,"./et":5603,"./et.js":5603,"./eu":7763,"./eu.js":7763,"./fa":6959,"./fa.js":6959,"./fi":1897,"./fi.js":1897,"./fil":2549,"./fil.js":2549,"./fo":4694,"./fo.js":4694,"./fr":4470,"./fr-ca":3049,"./fr-ca.js":3049,"./fr-ch":2330,"./fr-ch.js":2330,"./fr.js":4470,"./fy":5044,"./fy.js":5044,"./ga":9295,"./ga.js":9295,"./gd":2101,"./gd.js":2101,"./gl":8794,"./gl.js":8794,"./gom-deva":7884,"./gom-deva.js":7884,"./gom-latn":3168,"./gom-latn.js":3168,"./gu":5349,"./gu.js":5349,"./he":4206,"./he.js":4206,"./hi":94,"./hi.js":94,"./hr":316,"./hr.js":316,"./hu":2138,"./hu.js":2138,"./hy-am":1423,"./hy-am.js":1423,"./id":9218,"./id.js":9218,"./is":135,"./is.js":135,"./it":626,"./it-ch":150,"./it-ch.js":150,"./it.js":626,"./ja":9183,"./ja.js":9183,"./jv":4286,"./jv.js":4286,"./ka":2105,"./ka.js":2105,"./kk":7772,"./kk.js":7772,"./km":8758,"./km.js":8758,"./kn":9282,"./kn.js":9282,"./ko":3730,"./ko.js":3730,"./ku":1408,"./ku.js":1408,"./ky":3291,"./ky.js":3291,"./lb":6841,"./lb.js":6841,"./lo":5466,"./lo.js":5466,"./lt":7010,"./lt.js":7010,"./lv":7595,"./lv.js":7595,"./me":9861,"./me.js":9861,"./mi":5493,"./mi.js":5493,"./mk":5966,"./mk.js":5966,"./ml":7341,"./ml.js":7341,"./mn":5115,"./mn.js":5115,"./mr":370,"./mr.js":370,"./ms":9847,"./ms-my":1237,"./ms-my.js":1237,"./ms.js":9847,"./mt":2126,"./mt.js":2126,"./my":6165,"./my.js":6165,"./nb":4924,"./nb.js":4924,"./ne":6744,"./ne.js":6744,"./nl":3901,"./nl-be":9814,"./nl-be.js":9814,"./nl.js":3901,"./nn":3877,"./nn.js":3877,"./oc-lnc":2135,"./oc-lnc.js":2135,"./pa-in":5858,"./pa-in.js":5858,"./pl":4495,"./pl.js":4495,"./pt":9520,"./pt-br":7971,"./pt-br.js":7971,"./pt.js":9520,"./ro":6459,"./ro.js":6459,"./ru":1793,"./ru.js":1793,"./sd":950,"./sd.js":950,"./se":490,"./se.js":490,"./si":124,"./si.js":124,"./sk":4249,"./sk.js":4249,"./sl":4985,"./sl.js":4985,"./sq":1104,"./sq.js":1104,"./sr":9131,"./sr-cyrl":9915,"./sr-cyrl.js":9915,"./sr.js":9131,"./ss":5893,"./ss.js":5893,"./sv":8760,"./sv.js":8760,"./sw":1172,"./sw.js":1172,"./ta":7333,"./ta.js":7333,"./te":3110,"./te.js":3110,"./tet":2095,"./tet.js":2095,"./tg":7321,"./tg.js":7321,"./th":9041,"./th.js":9041,"./tk":9005,"./tk.js":9005,"./tl-ph":5768,"./tl-ph.js":5768,"./tlh":9444,"./tlh.js":9444,"./tr":2397,"./tr.js":2397,"./tzl":8254,"./tzl.js":8254,"./tzm":1106,"./tzm-latn":699,"./tzm-latn.js":699,"./tzm.js":1106,"./ug-cn":9288,"./ug-cn.js":9288,"./uk":7691,"./uk.js":7691,"./ur":3795,"./ur.js":3795,"./uz":6791,"./uz-latn":588,"./uz-latn.js":588,"./uz.js":6791,"./vi":5666,"./vi.js":5666,"./x-pseudo":4378,"./x-pseudo.js":4378,"./yo":5805,"./yo.js":5805,"./zh-cn":3839,"./zh-cn.js":3839,"./zh-hk":5726,"./zh-hk.js":5726,"./zh-mo":9807,"./zh-mo.js":9807,"./zh-tw":4152,"./zh-tw.js":4152};function r(n){var e=l(n);return a(e)}function l(n){if(!a.o(t,n)){var e=new Error("Cannot find module '"+n+"'");throw e.code="MODULE_NOT_FOUND",e}return t[n]}r.keys=function(){return Object.keys(t)},r.resolve=l,n.exports=r,r.id=6700}}]); \ 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 9f3a6b8..a0b8145 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": () => (/* binding */ Books)\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 _Data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Data.js */ "./src/components/Data.js");\n/* harmony import */ var _Charts_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Charts.js */ "./src/components/Charts.js");\n\n\n\nclass Books extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n constructor(props) {\n super(props);\n this.state = {\n books: []\n };\n }\n getComponentData() {\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getBooksPerYearPerGenres)(this.props.year).then(books => {\n this.setState({\n books: books\n });\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getAvgRatings)(this.props.year).then(ratings => {\n (0,_Charts_js__WEBPACK_IMPORTED_MODULE_2__.initChart)(books, ratings, this.props.year);\n });\n });\n }\n componentDidMount() {\n this.getComponentData();\n }\n componentDidUpdate(prevProps, prevState) {\n if (prevProps.year !== this.props.year) {\n this.getComponentData();\n }\n }\n render() {\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}\n\n//# sourceURL=webpack://frontend/./src/components/Books.js?')},"./src/components/Challenge.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": () => (/* binding */ Challenge)\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 _Data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Data.js */ "./src/components/Data.js");\n\n\nclass Challenge extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n constructor(props) {\n super(props);\n this.state = {\n readingYears: [],\n challenge: 0\n };\n }\n getComponentData() {\n var $this = this;\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getStats)(this.props.year).then(data => {\n $this.setState({\n totalbooks: data.totalbooks\n });\n });\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getChallenge)(this.props.year).then(data => {\n this.setState({\n challenge: data && data.length > 0 ? data[0].nrofbooks : 0\n });\n });\n }\n componentDidMount() {\n this.getComponentData();\n }\n componentDidUpdate(prevProps, prevState) {\n if (prevProps.year !== this.props.year) {\n this.getComponentData();\n }\n }\n render() {\n var challengePercentage = Math.round(this.state.totalbooks / this.state.challenge * 100, 0);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, this.state.challenge && this.state.challenge !== 0 ? /*#__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-12"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "stat-block"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "block_name"\n }, "Book Challenge"), /*#__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 progress-bar-striped",\n role: "progressbar",\n style: {\n width: challengePercentage + \'%\'\n },\n "aria-valuenow": challengePercentage,\n "aria-valuemin": "0",\n "aria-valuemax": "100"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "progress-bar-number"\n }, challengePercentage, "%"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-number"\n }, this.state.totalbooks), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-label"\n }, "van de"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-number"\n }, this.state.challenge), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-label"\n }, "boeken gelezen"))))) : \'\');\n }\n}\n\n//# sourceURL=webpack://frontend/./src/components/Challenge.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, ratings, year) => {\n /*\n ----------------------------------\n Books per month per genre\n ----------------------------------\n */\n\n var genres = [];\n var colors = [\n // '#696ffc', '#7596fa', '#92adfe', '#abc0ff'\n '#8066ee', '#58c8d6', '#fe4c62', '#49b8fd', '#ffbe0e'];\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 Avarage ratings per month\n ----------------------------------\n */\n\n var avgRatings = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\n for (var j = 0; j < 12; j++) {\n if (j < 9) {\n var month = \"0\" + (j + 1);\n } else {\n month = j + 1;\n }\n for (var i = 0; i < ratings.length; i++) {\n if (ratings[i].date == month + '-' + year) {\n avgRatings[j] = ratings[i].rating;\n }\n }\n }\n dataSet.push({\n label: 'Gemiddelde beoordeling',\n data: avgRatings,\n backgroundColor: '#ffa500',\n borderColor: '#ffa500',\n tension: 0.4,\n type: 'line',\n order: 1\n });\n console.log(dataSet);\n\n /*\n ----------------------------------\n Stacked bar chart\n ----------------------------------\n */\n\n $(\"canvas#chart\").remove();\n $(\"div.books-per-month\").append('');\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 ticks: {\n beginAtZero: true,\n color: \"#101010\",\n fontFamily: \"Source Sans Pro\"\n },\n stacked: true\n },\n y: {\n ticks: {\n beginAtZero: true,\n stepSize: 1,\n color: \"#101010\",\n fontFamily: \"Source Sans Pro\"\n },\n stacked: true\n }\n },\n plugins: {\n legend: {\n position: 'top',\n labels: {\n usePointStyle: true,\n color: \"#101010\",\n padding: 20,\n font: {\n size: 14,\n family: 'Source Sans Pro'\n }\n }\n }\n },\n tooltips: {\n bodyFont: 'Source Sans Pro'\n }\n },\n plugins: [legendMargin]\n });\n};\nconst initDoughnut = data => {\n console.log(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 $(\"div.genresPercent\").append('');\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: ['#8066ee', '#58c8d6', '#fe4c62', '#49b8fd', '#ffbe0e'],\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 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: \"##101010\",\n font: {\n size: 14,\n family: 'Source Sans Pro'\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?")},"./src/components/Countries.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": () => (/* binding */ Countries)\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 _Data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Data.js */ "./src/components/Data.js");\n\n\nclass Countries extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n constructor(props) {\n super(props);\n this.state = {\n countries: []\n };\n }\n getComponentData() {\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getCountries)(this.props.year).then(countries => {\n this.setState({\n countries: countries\n });\n });\n }\n componentDidMount() {\n this.getComponentData();\n }\n componentDidUpdate(prevProps, prevState) {\n if (prevProps.year !== this.props.year) {\n this.getComponentData();\n }\n }\n render() {\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-country"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "block_name"\n }, "Landen"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("table", {\n id: "DataTable",\n className: "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, "#"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "Land"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "Boeken"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tbody", null, this.state.countries.map((country, i) => {\n var code = country.code.toLowerCase();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", {\n key: i\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, i + 1), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {\n src: `https://flagcdn.com/32x24/${code}.png`\n }), " ", country.country), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, country.count));\n })))));\n }\n}\n\n//# sourceURL=webpack://frontend/./src/components/Countries.js?')},"./src/components/Data.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 */ "getAllBooks": () => (/* binding */ getAllBooks),\n/* harmony export */ "getAvgRatings": () => (/* binding */ getAvgRatings),\n/* harmony export */ "getBooksPerYearPerGenres": () => (/* binding */ getBooksPerYearPerGenres),\n/* harmony export */ "getChallenge": () => (/* binding */ getChallenge),\n/* harmony export */ "getCountries": () => (/* binding */ getCountries),\n/* harmony export */ "getGenresCount": () => (/* binding */ getGenresCount),\n/* harmony export */ "getRatingsCount": () => (/* binding */ getRatingsCount),\n/* harmony export */ "getReadingYears": () => (/* binding */ getReadingYears),\n/* harmony export */ "getShortestLongestBook": () => (/* binding */ getShortestLongestBook),\n/* harmony export */ "getStats": () => (/* binding */ getStats)\n/* harmony export */ });\nconst getAllBooks = () => {\n return fetch(\'/api/books\', {\n "method": "GET"\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getStats = year => {\n return fetch(\'/api/books/stats\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getChallenge = year => {\n return fetch(\'/api/books/challenge\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getReadingYears = () => {\n return fetch(\'/api/books/years\', {\n "method": "GET"\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getCountries = year => {\n return fetch(\'/api/books/countries\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getShortestLongestBook = year => {\n return fetch(\'/api/books/pages/stats\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getBooksPerYearPerGenres = year => {\n return fetch(\'/api/books/genres\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getGenresCount = year => {\n return fetch(\'/api/books/genres/count\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getAvgRatings = year => {\n return fetch(\'/api/books/ratings\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getRatingsCount = year => {\n return fetch(\'/api/books/ratings/count\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\n\n//# sourceURL=webpack://frontend/./src/components/Data.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": () => (/* binding */ Genres)\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 _Data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Data.js */ "./src/components/Data.js");\n/* harmony import */ var _Charts_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Charts.js */ "./src/components/Charts.js");\n\n\n\nclass Genres extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n constructor(props) {\n super(props);\n this.state = {\n genres: []\n };\n }\n getComponentData() {\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getGenresCount)(this.props.year).then(genres => {\n this.setState({\n genres: genres\n });\n (0,_Charts_js__WEBPACK_IMPORTED_MODULE_2__.initDoughnut)(genres, this.props.year);\n });\n }\n componentDidMount() {\n this.getComponentData();\n }\n componentDidUpdate(prevProps, prevState) {\n if (prevProps.year !== this.props.year) {\n this.getComponentData();\n }\n }\n render() {\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}\n\n//# sourceURL=webpack://frontend/./src/components/Genres.js?')},"./src/components/Pages.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": () => (/* binding */ Pages)\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 _Data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Data.js */ "./src/components/Data.js");\n\n\nclass Pages extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n constructor(props) {\n super(props);\n this.state = {\n pagesStats: []\n };\n }\n getComponentData() {\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getShortestLongestBook)(this.props.year).then(bookstats => {\n this.setState({\n pagesStats: bookstats\n });\n });\n }\n componentDidMount() {\n this.getComponentData();\n }\n componentDidUpdate(prevProps, prevState) {\n if (prevProps.year !== this.props.year) {\n this.getComponentData();\n }\n }\n render() {\n var ratingshort = \'\';\n var ratinglong = \'\';\n if (this.state.pagesStats.shortestbook) {\n for (var i = 0; i < this.state.pagesStats.shortestbook.rating; i++) {\n ratingshort += "";\n }\n }\n if (document.getElementById("shortest_rating") !== null) {\n document.getElementById(\'shortest_rating\').innerHTML = ratingshort;\n }\n if (this.state.pagesStats.longestbook) {\n for (var i = 0; i < this.state.pagesStats.longestbook.rating; i++) {\n ratinglong += "";\n }\n }\n if (document.getElementById("longest_rating") !== null) {\n document.getElementById(\'longest_rating\').innerHTML = ratinglong;\n }\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: "row"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-6"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "book shortest"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "block_name"\n }, "Kortste boek"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fa fa-book book-icon"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "book_pages"\n }, this.state.pagesStats.shortestbook ? this.state.pagesStats.shortestbook.pages : \'\', " pagina\'s"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "book_title_author"\n }, this.state.pagesStats.shortestbook ? this.state.pagesStats.shortestbook.name : \'\', " - ", this.state.pagesStats.shortestbook ? this.state.pagesStats.shortestbook.author : \'\'), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n id: "shortest_rating",\n className: "book_rating"\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-6"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "book longest"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "block_name"\n }, "Langste boek"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fa fa-book book-icon"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "book_pages"\n }, this.state.pagesStats.longestbook ? this.state.pagesStats.longestbook.pages : \'\', " pagina\'s"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "book_title_author"\n }, this.state.pagesStats.longestbook ? this.state.pagesStats.longestbook.name : \'\', " - ", this.state.pagesStats.longestbook ? this.state.pagesStats.longestbook.author : \'\'), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n id: "longest_rating",\n className: "book_rating"\n })))));\n }\n}\n\n//# sourceURL=webpack://frontend/./src/components/Pages.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": () => (/* binding */ Ratings)\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 _Data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Data.js */ "./src/components/Data.js");\n/* harmony import */ var _Charts_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Charts.js */ "./src/components/Charts.js");\n\n\n\nclass Ratings extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n constructor(props) {\n super(props);\n this.state = {\n ratings: [],\n totalRatings: 0\n };\n }\n getComponentData() {\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getRatingsCount)(this.props.year).then(ratings => {\n var total = 0;\n ratings.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 ratings.forEach(rating => {\n if (rating.rating === i) {\n ratingsArray[i] = rating.count;\n }\n });\n }\n console.log(Object.entries(ratingsArray));\n this.setState({\n ratings: Object.entries(ratingsArray),\n totalRatings: total\n });\n });\n }\n componentDidMount() {\n this.getComponentData();\n }\n componentDidUpdate(prevProps, prevState) {\n if (prevProps.year !== this.props.year) {\n this.getComponentData();\n }\n }\n render() {\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 }, "Waarderingen (", this.state.totalRatings, ")"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("table", {\n id: "DataTable",\n className: "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, "#"), /*#__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, this.state.ratings.map(rating => {\n var ratingstars = \'\';\n var rating_percentage = rating[1] / this.state.totalRatings * 100;\n console.log(rating[1], this.state.totalRatings);\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", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {\n style: {\n width: \'120px\'\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 progress-bar-striped",\n role: "progressbar",\n style: {\n width: rating_percentage + \'%\'\n },\n "aria-valuenow": rating_percentage,\n "aria-valuemin": "0",\n "aria-valuemax": "100"\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, rating[1]));\n })))));\n }\n}\n\n//# sourceURL=webpack://frontend/./src/components/Ratings.js?')},"./src/components/Sidebar.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 react_router_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router-dom/dist/index.js");\n\n\nfunction Sidebar() {\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: "sidebar"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_1__.NavLink, {\n to: "/"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fa fa-chart-bar"\n }), " Dashboard")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_1__.NavLink, {\n to: "/booklist"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fas fa-book"\n }), " Boekenlijst")))));\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Sidebar);\n\n//# sourceURL=webpack://frontend/./src/components/Sidebar.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": () => (/* binding */ BookStats)\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 _Data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Data.js */ "./src/components/Data.js");\n\n\nclass BookStats extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n constructor(props) {\n super(props);\n this.state = {\n readingYears: [],\n totalbooks: 0,\n totalpages: 0,\n totalauthors: 0,\n totalcountries: 0,\n totalgenres: 0\n };\n }\n getComponentData() {\n var $this = this;\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getStats)(this.props.year).then(data => {\n $this.setState({\n totalbooks: data.totalbooks,\n totalpages: data.totalpages,\n totalauthors: data.totalauthors,\n totalcountries: data.totalcountries,\n totalgenres: data.totalgenres\n });\n });\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getReadingYears)().then(data => {\n this.setState({\n readingYears: data\n });\n });\n }\n componentDidMount() {\n this.getComponentData();\n }\n componentDidUpdate(prevProps, prevState) {\n if (prevProps.year !== this.props.year) {\n this.getComponentData();\n }\n }\n render() {\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-2"\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-book"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-number"\n }, this.state.totalbooks), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-label"\n }, "Boeken"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-2"\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-book-open"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-number"\n }, this.state.totalpages), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-label"\n }, "Bladzijdes"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-2"\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-pen"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-number"\n }, this.state.totalauthors), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-label"\n }, "Schrijvers"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-2"\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-book"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-number"\n }, this.state.totalgenres), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-label"\n }, "Genres"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "col-md-2"\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-globe"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-number"\n }, this.state.totalcountries), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-label"\n }, "Landen"))));\n }\n}\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": () => (/* binding */ Dashboard)\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_Challenge__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/Challenge */ "./src/components/Challenge.js");\n/* harmony import */ var _components_Stats__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/Stats */ "./src/components/Stats.js");\n/* harmony import */ var _components_Countries__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components/Countries */ "./src/components/Countries.js");\n/* harmony import */ var _components_Pages__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/Pages */ "./src/components/Pages.js");\n/* harmony import */ var _components_Genres__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/Genres */ "./src/components/Genres.js");\n/* harmony import */ var _components_Books__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../components/Books */ "./src/components/Books.js");\n/* harmony import */ var _components_Data_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../components/Data.js */ "./src/components/Data.js");\n/* harmony import */ var _components_Sidebar__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../components/Sidebar */ "./src/components/Sidebar.js");\n/* harmony import */ var _components_Ratings__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../components/Ratings */ "./src/components/Ratings.js");\n\n\n\n\n\n\n\n\n\n\n\nclass Dashboard extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n constructor(props) {\n super(props);\n this.state = {\n year: new Date().getFullYear(),\n readingYears: []\n };\n }\n changeYear(event) {\n this.setState({\n year: event.target.value\n });\n }\n componentDidMount() {\n (0,_components_Data_js__WEBPACK_IMPORTED_MODULE_7__.getReadingYears)().then(data => {\n this.setState({\n readingYears: data\n });\n });\n (0,_components_Data_js__WEBPACK_IMPORTED_MODULE_7__.getRatingsCount)(this.state.year).then(data => {\n console.log(data);\n });\n }\n render() {\n var url = window.location.href.split("/");\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__WEBPACK_IMPORTED_MODULE_8__["default"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "content"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "books-stats"\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-2"\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-number"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("select", {\n className: "yearselector",\n value: this.state.year,\n onChange: event => this.changeYear(event)\n }, this.state.readingYears.map((year, i) => {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("option", {\n key: i,\n value: year\n }, year);\n }))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Stats__WEBPACK_IMPORTED_MODULE_2__["default"], {\n year: this.state.year\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Challenge__WEBPACK_IMPORTED_MODULE_1__["default"], {\n year: this.state.year\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(_components_Books__WEBPACK_IMPORTED_MODULE_6__["default"], {\n year: this.state.year\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Pages__WEBPACK_IMPORTED_MODULE_4__["default"], {\n year: this.state.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_Countries__WEBPACK_IMPORTED_MODULE_3__["default"], {\n year: this.state.year\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Genres__WEBPACK_IMPORTED_MODULE_5__["default"], {\n year: this.state.year\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Ratings__WEBPACK_IMPORTED_MODULE_9__["default"], {\n year: this.state.year\n }))))));\n }\n}\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": () => (/* binding */ Books)\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 _Data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Data.js */ "./src/components/Data.js");\n/* harmony import */ var _Charts_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Charts.js */ "./src/components/Charts.js");\n\n\n\nclass Books extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n constructor(props) {\n super(props);\n this.state = {\n books: []\n };\n }\n getComponentData() {\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getBooksPerYearPerGenres)(this.props.year).then(books => {\n this.setState({\n books: books\n });\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getAvgRatings)(this.props.year).then(ratings => {\n (0,_Charts_js__WEBPACK_IMPORTED_MODULE_2__.initChart)(books, ratings, this.props.year);\n });\n });\n }\n componentDidMount() {\n this.getComponentData();\n }\n componentDidUpdate(prevProps, prevState) {\n if (prevProps.year !== this.props.year) {\n this.getComponentData();\n }\n }\n render() {\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}\n\n//# sourceURL=webpack://frontend/./src/components/Books.js?')},"./src/components/Challenge.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": () => (/* binding */ Challenge)\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 _Data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Data.js */ "./src/components/Data.js");\n\n\nclass Challenge extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n constructor(props) {\n super(props);\n this.state = {\n readingYears: [],\n challenge: 0\n };\n }\n getComponentData() {\n var $this = this;\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getStats)(this.props.year).then(data => {\n $this.setState({\n totalbooks: data.totalbooks\n });\n });\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getChallenge)(this.props.year).then(data => {\n this.setState({\n challenge: data && data.length > 0 ? data[0].nrofbooks : 0\n });\n });\n }\n componentDidMount() {\n this.getComponentData();\n }\n componentDidUpdate(prevProps, prevState) {\n if (prevProps.year !== this.props.year) {\n this.getComponentData();\n }\n }\n render() {\n var challengePercentage = Math.round(this.state.totalbooks / this.state.challenge * 100, 0);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, this.state.challenge && this.state.challenge !== 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "stat-block",\n style: {\n marginBottom: \'20px\'\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "block_name"\n }, "Book Challenge"), /*#__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 progress-bar-striped",\n role: "progressbar",\n style: {\n width: challengePercentage + \'%\'\n },\n "aria-valuenow": challengePercentage,\n "aria-valuemin": "0",\n "aria-valuemax": "100"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {\n className: "progress-bar-number"\n }, challengePercentage, "%"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-number"\n }, this.state.totalbooks), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-label"\n }, "van de"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-number"\n }, this.state.challenge), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "stats-label"\n }, "boeken gelezen")) : \'\');\n }\n}\n\n//# sourceURL=webpack://frontend/./src/components/Challenge.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, ratings, year) => {\n /*\n ----------------------------------\n Books per month per genre\n ----------------------------------\n */\n\n var genres = [];\n var colors = [\n // '#696ffc', '#7596fa', '#92adfe', '#abc0ff'\n '#8066ee', '#58c8d6', '#fe4c62', '#49b8fd', '#ffbe0e'];\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 Avarage ratings per month\n ----------------------------------\n */\n\n var avgRatings = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\n for (var j = 0; j < 12; j++) {\n if (j < 9) {\n var month = \"0\" + (j + 1);\n } else {\n month = j + 1;\n }\n for (var i = 0; i < ratings.length; i++) {\n if (ratings[i].date == month + '-' + year) {\n avgRatings[j] = ratings[i].rating;\n }\n }\n }\n dataSet.push({\n label: 'Gemiddelde beoordeling',\n data: avgRatings,\n backgroundColor: '#ffa500',\n borderColor: '#ffa500',\n tension: 0.4,\n type: 'line',\n order: 1\n });\n console.log(dataSet);\n\n /*\n ----------------------------------\n Stacked bar chart\n ----------------------------------\n */\n\n $(\"canvas#chart\").remove();\n $(\"div.books-per-month\").append('');\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 ticks: {\n beginAtZero: true,\n color: \"#101010\",\n fontFamily: \"Source Sans Pro\"\n },\n stacked: true\n },\n y: {\n ticks: {\n beginAtZero: true,\n stepSize: 1,\n color: \"#101010\",\n fontFamily: \"Source Sans Pro\"\n },\n stacked: true\n }\n },\n plugins: {\n legend: {\n position: 'top',\n labels: {\n usePointStyle: true,\n color: \"#101010\",\n padding: 20,\n font: {\n size: 14,\n family: 'Source Sans Pro'\n }\n }\n }\n },\n tooltips: {\n bodyFont: 'Source Sans Pro'\n }\n },\n plugins: [legendMargin]\n });\n};\nconst initDoughnut = data => {\n console.log(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 $(\"div.genresPercent\").append('');\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: ['#8066ee', '#58c8d6', '#fe4c62', '#49b8fd', '#ffbe0e'],\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 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: \"##101010\",\n font: {\n size: 14,\n family: 'Source Sans Pro'\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?")},"./src/components/Countries.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": () => (/* binding */ Countries)\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 _Data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Data.js */ "./src/components/Data.js");\n\n\nclass Countries extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n constructor(props) {\n super(props);\n this.state = {\n countries: []\n };\n }\n getComponentData() {\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getCountries)(this.props.year).then(countries => {\n this.setState({\n countries: countries\n });\n });\n }\n componentDidMount() {\n this.getComponentData();\n }\n componentDidUpdate(prevProps, prevState) {\n if (prevProps.year !== this.props.year) {\n this.getComponentData();\n }\n }\n render() {\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-country"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {\n className: "block_name"\n }, "Landen"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("table", {\n id: "DataTable",\n className: "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, "#"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "Land"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", null, "Boeken"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tbody", null, this.state.countries.map((country, i) => {\n var code = country.code.toLowerCase();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", {\n key: i\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, i + 1), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {\n src: `https://flagcdn.com/32x24/${code}.png`\n }), " ", country.country), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, country.count));\n })))));\n }\n}\n\n//# sourceURL=webpack://frontend/./src/components/Countries.js?')},"./src/components/Data.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 */ "getAllBooks": () => (/* binding */ getAllBooks),\n/* harmony export */ "getAvgRatings": () => (/* binding */ getAvgRatings),\n/* harmony export */ "getBooksPerYearPerGenres": () => (/* binding */ getBooksPerYearPerGenres),\n/* harmony export */ "getChallenge": () => (/* binding */ getChallenge),\n/* harmony export */ "getCountries": () => (/* binding */ getCountries),\n/* harmony export */ "getGenresCount": () => (/* binding */ getGenresCount),\n/* harmony export */ "getRatingsCount": () => (/* binding */ getRatingsCount),\n/* harmony export */ "getReadingYears": () => (/* binding */ getReadingYears),\n/* harmony export */ "getShortestLongestBook": () => (/* binding */ getShortestLongestBook),\n/* harmony export */ "getStats": () => (/* binding */ getStats)\n/* harmony export */ });\nconst getAllBooks = () => {\n return fetch(\'/api/books\', {\n "method": "GET"\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getStats = year => {\n return fetch(\'/api/books/stats\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getChallenge = year => {\n return fetch(\'/api/books/challenge\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getReadingYears = () => {\n return fetch(\'/api/books/years\', {\n "method": "GET"\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getCountries = year => {\n return fetch(\'/api/books/countries\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getShortestLongestBook = year => {\n return fetch(\'/api/books/pages/stats\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getBooksPerYearPerGenres = year => {\n return fetch(\'/api/books/genres\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getGenresCount = year => {\n return fetch(\'/api/books/genres/count\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getAvgRatings = year => {\n return fetch(\'/api/books/ratings\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\nconst getRatingsCount = year => {\n return fetch(\'/api/books/ratings/count\', {\n "method": "GET",\n "headers": {\n "year": year\n }\n }).then(response => response.json()).then(data => {\n return data;\n });\n};\n\n//# sourceURL=webpack://frontend/./src/components/Data.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": () => (/* binding */ Genres)\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 _Data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Data.js */ "./src/components/Data.js");\n/* harmony import */ var _Charts_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Charts.js */ "./src/components/Charts.js");\n\n\n\nclass Genres extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n constructor(props) {\n super(props);\n this.state = {\n genres: []\n };\n }\n getComponentData() {\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getGenresCount)(this.props.year).then(genres => {\n this.setState({\n genres: genres\n });\n (0,_Charts_js__WEBPACK_IMPORTED_MODULE_2__.initDoughnut)(genres, this.props.year);\n });\n }\n componentDidMount() {\n this.getComponentData();\n }\n componentDidUpdate(prevProps, prevState) {\n if (prevProps.year !== this.props.year) {\n this.getComponentData();\n }\n }\n render() {\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}\n\n//# sourceURL=webpack://frontend/./src/components/Genres.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": () => (/* binding */ Ratings)\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 _Data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Data.js */ "./src/components/Data.js");\n/* harmony import */ var _Charts_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Charts.js */ "./src/components/Charts.js");\n\n\n\nclass Ratings extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n constructor(props) {\n super(props);\n this.state = {\n ratings: [],\n totalRatings: 0\n };\n }\n getComponentData() {\n (0,_Data_js__WEBPACK_IMPORTED_MODULE_1__.getRatingsCount)(this.props.year).then(ratings => {\n var total = 0;\n ratings.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 ratings.forEach(rating => {\n if (rating.rating === i) {\n ratingsArray[i] = rating.count;\n }\n });\n }\n console.log(Object.entries(ratingsArray));\n this.setState({\n ratings: Object.entries(ratingsArray),\n totalRatings: total\n });\n });\n }\n componentDidMount() {\n this.getComponentData();\n }\n componentDidUpdate(prevProps, prevState) {\n if (prevProps.year !== this.props.year) {\n this.getComponentData();\n }\n }\n render() {\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 }, "Waarderingen (", this.state.totalRatings, ")"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("table", {\n id: "DataTable",\n className: "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, "#"), /*#__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, this.state.ratings.map(rating => {\n var ratingstars = \'\';\n var rating_percentage = rating[1] / this.state.totalRatings * 100;\n console.log(rating[1], this.state.totalRatings);\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", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {\n style: {\n width: \'120px\'\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 progress-bar-striped",\n role: "progressbar",\n style: {\n width: rating_percentage + \'%\'\n },\n "aria-valuenow": rating_percentage,\n "aria-valuemin": "0",\n "aria-valuemax": "100"\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", null, rating[1]));\n })))));\n }\n}\n\n//# sourceURL=webpack://frontend/./src/components/Ratings.js?')},"./src/components/Sidebar.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 react_router_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router-dom/dist/index.js");\n\n\nfunction Sidebar() {\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: "sidebar"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_1__.NavLink, {\n to: "/"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fa fa-chart-bar"\n }), " Dashboard")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_1__.NavLink, {\n to: "/booklist"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {\n className: "fas fa-book"\n }), " Boekenlijst")))));\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Sidebar);\n\n//# sourceURL=webpack://frontend/./src/components/Sidebar.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": () => (/* binding */ Dashboard)\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_Challenge__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/Challenge */ "./src/components/Challenge.js");\n/* harmony import */ var _components_Countries__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/Countries */ "./src/components/Countries.js");\n/* harmony import */ var _components_Genres__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components/Genres */ "./src/components/Genres.js");\n/* harmony import */ var _components_Books__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/Books */ "./src/components/Books.js");\n/* harmony import */ var _components_Data_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/Data.js */ "./src/components/Data.js");\n/* harmony import */ var _components_Sidebar__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../components/Sidebar */ "./src/components/Sidebar.js");\n/* harmony import */ var _components_Ratings__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../components/Ratings */ "./src/components/Ratings.js");\n\n\n\n\n\n\n\n\nclass Dashboard extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n constructor(props) {\n super(props);\n this.state = {\n year: new Date().getFullYear(),\n readingYears: []\n };\n }\n changeYear(event) {\n this.setState({\n year: event.target.value\n });\n }\n componentDidMount() {\n (0,_components_Data_js__WEBPACK_IMPORTED_MODULE_5__.getReadingYears)().then(data => {\n this.setState({\n readingYears: data\n });\n });\n (0,_components_Data_js__WEBPACK_IMPORTED_MODULE_5__.getRatingsCount)(this.state.year).then(data => {\n console.log(data);\n });\n }\n render() {\n var url = window.location.href.split("/");\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: "chooseYear"\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-number"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("select", {\n className: "yearselector",\n value: this.state.year,\n onChange: event => this.changeYear(event)\n }, this.state.readingYears.map((year, i) => {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("option", {\n key: i,\n value: year\n }, year);\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Sidebar__WEBPACK_IMPORTED_MODULE_6__["default"], null), /*#__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(_components_Challenge__WEBPACK_IMPORTED_MODULE_1__["default"], {\n year: this.state.year\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Books__WEBPACK_IMPORTED_MODULE_4__["default"], {\n year: this.state.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_Genres__WEBPACK_IMPORTED_MODULE_3__["default"], {\n year: this.state.year\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Countries__WEBPACK_IMPORTED_MODULE_2__["default"], {\n year: this.state.year\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_Ratings__WEBPACK_IMPORTED_MODULE_7__["default"], {\n year: this.state.year\n }))))));\n }\n}\n\n//# sourceURL=webpack://frontend/./src/views/dashboard.js?')}}]); \ No newline at end of file diff --git a/ras/frontend/static/js/src_views_dashboard_js.js.LICENSE.txt b/ras/frontend/static/js/src_views_dashboard_js.js.LICENSE.txt index 11ceff8..8055384 100644 --- a/ras/frontend/static/js/src_views_dashboard_js.js.LICENSE.txt +++ b/ras/frontend/static/js/src_views_dashboard_js.js.LICENSE.txt @@ -10,14 +10,6 @@ !*** ./src/components/Books.js ***! \*********************************/ -/*!*********************************!*\ - !*** ./src/components/Pages.js ***! - \*********************************/ - -/*!*********************************!*\ - !*** ./src/components/Stats.js ***! - \*********************************/ - /*!**********************************!*\ !*** ./src/components/Charts.js ***! \**********************************/