<!
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Admin!{% endblock %}</title>
{% block stylesheets %}
<link rel="apple-touch-icon" href="https://i.imgur.com/QRAUqs9.png">
<link rel="shortcut icon" href="https://i.imgur.com/QRAUqs9.png">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/normalize.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-
[email protected]/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-
[email protected]/css/themify-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-
[email protected]/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-
icon-css/3.2.0/css/flag-icon.min.css">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartist.min.css"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jqvmap.min.css"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/weather-
icons.css" rel="stylesheet" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fullcalendar.min.css"
rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('assets/css/cs-skin-
elastic.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
<style>
#weatherWidget .currentDesc {
color: #ffffff!important;
}
.traffic-chart {
min-height: 335px;
}
#flotPie1 {
height: 150px;
}
#flotPie1 td {
padding:3px;
}
#flotPie1 table {
top: 20px!important;
right: -10px!important;
}
.chart-container {
display: table;
min-width: 270px ;
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
}
#flotLine5 {
height: 105px;
}
#flotBarChart {
height: 150px;
}
#cellPaiChart{
height: 160px;
}
</style>
{% endblock %}
<link rel="icon" type="/image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}
<!-- Left Panel -->
<aside id="left-panel" class="left-panel">
<nav class="navbar navbar-expand-sm navbar-default">
<div id="main-menu" class="main-menu collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active" style="margin: 10px 0;">
<a href="#"><i class="menu-icon fa fa-laptop"></i>All
Products</a>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="menu-icon fa fa-truck"></i>Livraison</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="fa fa-user"></i><a
href="{{ path('table_livreur') }}">Livreurs</a></li>
<li><i class="fa fa-table"></i><a
href="{{ path('table_content') }}">Livraison</a></li>
</ul>
</li>
<li class="active" style="margin: 10px 0;">
<a href="#"><i class="menu-icon fa fa-
laptop"></i>Orders</a>
</li>
<li class="active" style="margin: 10px 0;">
<a href="#"><i class="menu-icon fa fa-laptop"></i>Bike
Rental</a>
</li>
<li class="active" style="margin: 10px 0;">
<a href="#"><i class="menu-icon fa fa-
laptop"></i>Publications</a>
</li>
<li class="active" style="margin: 10px 0;">
<a href="#"><i class="menu-icon fa fa-
laptop"></i>Events</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</aside>
<!-- Right Panel -->
<div id="right-panel" class="right-panel">
<!-- Header-->
<header id="header" class="header">
<div class="top-left">
<div class="navbar-header">
<a class="navbar-brand" href="./"><img style="height: 42px;
width: 55px;" src="{{ asset('images/logo.png') }}" alt="Logo"></a>
<a class="navbar-brand hidden" href="./"><img
src="{{ asset('images/logo2.png') }}" alt="Logo"></a>
<a id="menuToggle" class="menutoggle"><i class="fa fa-
bars"></i></a>
</div>
</div>
<div class="top-right">
<div class="header-menu">
<div class="header-left">
<button class="search-trigger"><i class="fa fa-
search"></i></button>
<div class="form-inline">
<form class="search-form">
<input class="form-control mr-sm-2" type="text"
placeholder="Search ..." aria-label="Search">
<button class="search-close" type="submit"><i
class="fa fa-close"></i></button>
</form>
</div>
<div class="dropdown for-notification">
<button class="btn btn-secondary dropdown-toggle"
type="button" id="notification" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
<i class="fa fa-bell"></i>
<span class="count bg-danger">3</span>
</button>
<div class="dropdown-menu" aria-
labelledby="notification">
<p class="red">You have 3 Notification</p>
<a class="dropdown-item media" href="#">
<i class="fa fa-check"></i>
<p>Server #1 overloaded.</p>
</a>
<a class="dropdown-item media" href="#">
<i class="fa fa-info"></i>
<p>Server #2 overloaded.</p>
</a>
<a class="dropdown-item media" href="#">
<i class="fa fa-warning"></i>
<p>Server #3 overloaded.</p>
</a>
</div>
</div>
<div class="dropdown for-message">
<button class="btn btn-secondary dropdown-toggle"
type="button" id="message" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
<i class="fa fa-envelope"></i>
<span class="count bg-primary">4</span>
</button>
<div class="dropdown-menu" aria-labelledby="message">
<p class="red">You have 4 Mails</p>
<a class="dropdown-item media" href="#">
<span class="photo media-left"><img
alt="avatar" src="{{ asset('images/avatar/1.jpg')}}"></span>
<div class="message media-body">
<span class="name float-left">Jonathan
Smith</span>
<span class="time float-right">Just
now</span>
<p>Hello, this is an example msg</p>
</div>
</a>
<a class="dropdown-item media" href="#">
<span class="photo media-left"><img
alt="avatar" src="{{ asset('images/avatar/2.jpg') }}"></span>
<div class="message media-body">
<span class="name float-left">Jack
Sanders</span>
<span class="time float-right">5 minutes
ago</span>
<p>Lorem ipsum dolor sit amet,
consectetur</p>
</div>
</a>
<a class="dropdown-item media" href="#">
<span class="photo media-left"><img
alt="avatar" src="{{ asset('images/avatar/3.jpg') }}"></span>
<div class="message media-body">
<span class="name float-left">Cheryl
Wheeler</span>
<span class="time float-right">10 minutes
ago</span>
<p>Hello, this is an example msg</p>
</div>
</a>
<a class="dropdown-item media" href="#">
<span class="photo media-left"><img
alt="avatar" src="{{ asset('images/avatar/4.jpg') }}"></span>
<div class="message media-body">
<span class="name float-left">Rachel
Santos</span>
<span class="time float-right">15 minutes
ago</span>
<p>Lorem ipsum dolor sit amet,
consectetur</p>
</div>
</a>
</div>
</div>
</div>
<div class="user-area dropdown float-right">
<a href="#" class="dropdown-toggle active" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="user-avatar rounded-circle"
src="{{ asset('images/admin.jpg') }}" alt="User Avatar">
</a>
<div class="user-menu dropdown-menu">
<a class="nav-link" href="#"><i class="fa fa-
user"></i>My Profile</a>
<a class="nav-link" href="#"><i class="fa fa-
user"></i>Notifications <span class="count">13</span></a>
<a class="nav-link" href="#"><i class="fa fa
-cog"></i>Settings</a>
<a class="nav-link" href="#"><i class="fa fa-power
-off"></i>Logout</a>
</div>
</div>
</div>
</div>
</header>
<!-- /#header -->
<!-- Content -->
<div style="width: 100%;min-height: 745px">
{% block main %}
<h1>I'm Block Main</h1>
{% endblock %}
</div>
<!-- /.content -->
<!-- /.site-footer -->
</div>
{% endblock %}
{% block javascripts %}
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script
>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></scrip
t>
<script src="https://cdn.jsdelivr.net/npm/jquery-match-
[email protected]/dist/jquery.matchHeight.min.js"></script>
<script src="{{ asset('assets/js/main.js') }}"></script>
<!-- Chart js -->
<script
src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/Chart.bundle.min.js"></script
>
<!--Chartist Chart-->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartist.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartist-plugin-
[email protected]/chartist-plugin-legend.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.flot.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flot-
[email protected]/src/jquery.flot.pie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flot-
[email protected]/js/jquery.flot.spline.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.simpleWeather.min.js">
</script>
<script src="{{ asset('assets/js/init/weather-init.js') }}"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fullcalendar.min.js"></sc
ript>
<script src="{{ asset('assets/js/init/fullcalendar-init.js') }}"></script>
<script>
jQuery(document).ready(function($) {
"use strict";
// Pie chart flotPie1
var piedata = [
{ label: "Desktop visits", data: [[1,32]], color: '#5c6bc0'},
{ label: "Tab visits", data: [[1,33]], color: '#ef5350'},
{ label: "Mobile visits", data: [[1,35]], color: '#66bb6a'}
];
$.plot('#flotPie1', piedata, {
series: {
pie: {
show: true,
radius: 1,
innerRadius: 0.65,
label: {
show: true,
radius: 2/3,
threshold: 1
},
stroke: {
width: 0
}
}
},
grid: {
hoverable: true,
clickable: true
}
});
// Pie chart flotPie1 End
// cellPaiChart
var cellPaiChart = [
{ label: "Direct Sell", data: [[1,65]], color: '#5b83de'},
{ label: "Channel Sell", data: [[1,35]], color: '#00bfa5'}
];
$.plot('#cellPaiChart', cellPaiChart, {
series: {
pie: {
show: true,
stroke: {
width: 0
}
}
},
legend: {
show: false
},grid: {
hoverable: true,
clickable: true
}
});
// cellPaiChart End
// Line Chart #flotLine5
var newCust = [[0, 3], [1, 5], [2,4], [3, 7], [4, 9], [5, 3], [6, 6],
[7, 4], [8, 10]];
var plot = $.plot($('#flotLine5'),[{
data: newCust,
label: 'New Data Flow',
color: '#fff'
}],
{
series: {
lines: {
show: true,
lineColor: '#fff',
lineWidth: 2
},
points: {
show: true,
fill: true,
fillColor: "#ffffff",
symbol: "circle",
radius: 3
},
shadowSize: 0
},
points: {
show: true,
},
legend: {
show: false
},
grid: {
show: false
}
});
// Line Chart #flotLine5 End
// Traffic Chart using chartist
if ($('#traffic-chart').length) {
var chart = new Chartist.Line('#traffic-chart', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
series: [
[0, 18000, 35000, 25000, 22000, 0],
[0, 33000, 15000, 20000, 15000, 300],
[0, 15000, 28000, 15000, 30000, 5000]
]
}, {
low: 0,
showArea: true,
showLine: false,
showPoint: false,
fullWidth: true,
axisX: {
showGrid: true
}
});
chart.on('draw', function(data) {
if(data.type === 'line' || data.type === 'area') {
data.element.animate({
d: {
begin: 2000 * data.index,
dur: 2000,
from: data.path.clone().scale(1, 0).translate(0,
data.chartRect.height()).stringify(),
to: data.path.clone().stringify(),
easing: Chartist.Svg.Easing.easeOutQuint
}
});
}
});
}
// Traffic Chart using chartist End
//Traffic chart chart-js
if ($('#TrafficChart').length) {
var ctx = document.getElementById( "TrafficChart" );
ctx.height = 150;
var myChart = new Chart( ctx, {
type: 'line',
data: {
labels: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul" ],
datasets: [
{
label: "Visit",
borderColor: "rgba(4, 73, 203,.09)",
borderWidth: "1",
backgroundColor: "rgba(4, 73, 203,.5)",
data: [ 0, 2900, 5000, 3300, 6000, 3250, 0 ]
},
{
label: "Bounce",
borderColor: "rgba(245, 23, 66, 0.9)",
borderWidth: "1",
backgroundColor: "rgba(245, 23, 66,.5)",
pointHighlightStroke: "rgba(245, 23, 66,.5)",
data: [ 0, 4200, 4500, 1600, 4200, 1500, 4000 ]
},
{
label: "Targeted",
borderColor: "rgba(40, 169, 46, 0.9)",
borderWidth: "1",
backgroundColor: "rgba(40, 169, 46, .5)",
pointHighlightStroke: "rgba(40, 169, 46,.5)",
data: [1000, 5200, 3600, 2600, 4200, 5300, 0 ]
}
]
},
options: {
responsive: true,
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'nearest',
intersect: true
}
}
} );
}
//Traffic chart chart-js End
// Bar Chart #flotBarChart
$.plot("#flotBarChart", [{
data: [[0, 18], [2, 8], [4, 5], [6, 13],[8,5], [10,7],[12,4],
[14,6],[16,15], [18, 9],[20,17], [22,7],[24,4], [26,9],[28,11]],
bars: {
show: true,
lineWidth: 0,
fillColor: '#ffffff8a'
}
}], {
grid: {
show: false
}
});
// Bar Chart #flotBarChart End
});
</script>
{% endblock %}
</body>
</html>
