kuvia/resources/views/dashboard/index.blade.php
2021-01-30 20:52:56 +01:00

118 lines
4.3 KiB
PHP

@extends('layout/template')
@section('title', 'Dashboard')
@section('content')
<div class="row" style="margin-top: 20px;">
<div class="col-md-12">
<h1>Dashboard</h1>
<p>Hello, {{ $user->username }}</p>
<div class="alert alert-danger" role="alert">
This system is in alpha mode, if you found issue contact hello@kekskurse.de
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<div class="card bg-secondary" style="">
<div class="card-header">Storage</div>
<div class="card-body">
<canvas id="storageChart" width="200" height="100"></canvas>
<p class="card-text">Currently you use {{ $currentSize }} of Storage.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card bg-secondary">
<div class="card-header">Traffic</div>
<div class="card-body">
<canvas id="myChart" width="200" height="100"></canvas>
<p class="card-text">In the last 24 Hours you use {{ $currentTraffic }} Traffic, this month you used already {{ $monthlyTraffic }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
FAQ
</div>
</div>
@endsection
@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script>
var data = {
labels: [@foreach($lastDaysTreffic as $date => $traffic)
"{{ $date }}",
@endforeach],
datasets: [
{
label: "Cache Traffic per Day",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [
@foreach($lastDaysTreffic as $traffic)
{{ $traffic["cache"] }},
@endforeach
]
},
{
label: "S3 Traffic per Day",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [
@foreach($lastDaysTreffic as $traffic)
{{ $traffic["s3"] }},
@endforeach
]
}
]
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: data
});
var datastorage = {
labels: [@foreach($lastDaysSize as $date => $traffic)
"{{ $date }}",
@endforeach],
datasets: [
{
label: "Storage per Day",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [
@foreach($lastDaysSize as $traffic)
{{ $traffic }},
@endforeach
]
}
]
};
var ctxstorage = document.getElementById('storageChart').getContext('2d');
var myChartstorage = new Chart(ctxstorage, {
type: 'line',
data: datastorage
});
</script>
@endsection