diff options
Diffstat (limited to 'resources/views/anime.blade.php')
| -rw-r--r-- | resources/views/anime.blade.php | 148 |
1 files changed, 134 insertions, 14 deletions
diff --git a/resources/views/anime.blade.php b/resources/views/anime.blade.php index 0e5596b..f2daedf 100644 --- a/resources/views/anime.blade.php +++ b/resources/views/anime.blade.php @@ -1,15 +1,17 @@ -@extends('layouts.app') +@extends('layouts.app', [ 'title' => $anime["title_pref"]] ) @section('content') <div class="container" id="index"> <h1>{{ $anime->title_pref }}</h1> <div class="row"> - <div class="col-sm"> - <img src="{{ $anime->image_url }}" class="img-fluid"> + <div class="col-sm-4 col-lg-3"> + <img src="{{ $anime->image_url }}" class="img-fluid" style="margin-bottom: 10px;"> </div> - <div class="col-sm"> - {!! str_replace("%%br%%", "<br>", e($anime->synopsis)) !!} + <div class="col-sm-8 col-lg-9"> + <h2>Synopsis</h2> + <!--{!! str_replace("%%br%%", "<br>", e($anime->synopsis)) !!}--> + {!! replaceSpecialChars(e($anime->synopsis)) !!} <br> <br> <strong>Score: </strong> {{ $anime["basic_data"]->score }} @@ -19,42 +21,160 @@ <strong>Popularity: </strong> {{ $anime["basic_data"]->popularity }} <br> <strong>Members: </strong> {{ $anime["basic_data"]->members }} + <br> + <a href="{{ $anime->url}}" title="Link zu MAL">Link zu MyAnimeList</a> </div> </div> <p> - <h2>Score History</h2> - <canvas id="score_chart" height=""></canvas> + <h2>Score History</h2> + <canvas id="score_chart"></canvas> + </p> + <p> + <h2>Rank History</h2> + <canvas id="rank_chart"></canvas> + </p> + <p> + <h2>Popularity History</h2> + <canvas id="popularity_chart"></canvas> + </p> + <p> + <h2>Members History</h2> + <canvas id="members_chart"></canvas> + </p> + <p> + <h2>Favorites History</h2> + <canvas id="favorites_chart"></canvas> + </p> <!-- {{ $anime }} --> - </p> </div> <script> -var ctx = document.getElementById('score_chart'); -var myChart = new Chart(ctx, { +window.onload = function() { +new Chart(document.getElementById('score_chart'), { type: 'line', data: { - labels: {!! json_encode($anime["score_label"]) !!}, + labels: {!! json_encode($anime["chart_label"]) !!}, datasets: [{ label: 'Average Score on MAL', data: {{ json_encode($anime["score"]) }}, - file: 'false', + file: 'false', borderColor: 'rgb(75, 192, 192)', lineTension: 0.01, backgroundColor: 'white', }] }, options: { + maintainAspectRatio: true, scales: { yAxes: [{ ticks: { - beginAtZero: false + beginAtZero: false, + stepSize: 0.05, } }] } } }); - +new Chart(document.getElementById('rank_chart'), { + type: 'line', + data: { + labels: {!! json_encode($anime["chart_label"]) !!}, + datasets: [{ + label: 'Ranking of best Anime', + data: {{ json_encode($anime["rank"]) }}, + file: 'false', + borderColor: 'rgb(75, 192, 192)', + lineTension: 0.01, + backgroundColor: 'white', + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: false, + reverse: true, + stepSize: 1, + } + }] + } + } +}); +new Chart(document.getElementById('popularity_chart'), { + type: 'line', + data: { + labels: {!! json_encode($anime["chart_label"]) !!}, + datasets: [{ + label: 'Popularity Score on MAL', + data: {{ json_encode($anime["popularity"]) }}, + file: 'false', + borderColor: 'rgb(75, 192, 192)', + lineTension: 0.01, + backgroundColor: 'white', + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: false, + reverse: true, + stepSize: 1, + } + }] + } + } +}); +new Chart(document.getElementById('favorites_chart'), { + type: 'line', + data: { + labels: {!! json_encode($anime["chart_label"]) !!}, + datasets: [{ + label: 'Count of Favorites', + data: {{ json_encode($anime["favorites"]) }}, + file: 'false', + borderColor: 'rgb(75, 192, 192)', + lineTension: 0.01, + backgroundColor: 'white', + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: false, + reverse: false, + } + }] + } + } +}); +new Chart(document.getElementById('members_chart'), { + type: 'line', + data: { + labels: {!! json_encode($anime["chart_label"]) !!}, + datasets: [{ + label: 'Count of People which have this on Watch list', + data: {{ json_encode($anime["members"]) }}, + file: 'false', + borderColor: 'rgb(75, 192, 192)', + lineTension: 0.01, + backgroundColor: 'white', + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: false, + reverse: false, + } + }] + } + } +}); +}; </script> @endsection |