<div id="layout">
<input type="checkbox" id="menu-trigger">
<div id="off-screen-menu">
<nav id="main-nav">
<ul class="flat-list">
<li>
<a href="../preview/dashboard.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#dashboard" />
</svg>
Dashboard
</a>
</li>
<li>
<a href="../preview/account-settings.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#settings" />
</svg>
Account settings
</a>
</li>
<li>
<a href="../preview/suppliers.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#package" />
</svg>
Suppliers
</a>
</li>
<li>
<a href="../preview/new-wine.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#upload" />
</svg>
Add wines
</a>
</li>
<li>
<a href="../preview/my-wine-cellar.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#view-list" />
</svg>
My wine cellar
</a>
</li>
<li>
<a href="../preview/wine-cellar-inventory.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#inventory" />
</svg>
Wine cellar inventory
</a>
</li>
<li>
<a href="../preview/add-dishes.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#dish" />
</svg>
Dishes
</a>
</li>
<li>
<a href="../preview/orders.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-check" />
</svg>
Orders
</a>
</li>
<li>
<a href="../preview/digital-sommelier.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#sommelier" />
</svg>
Digital Sommelier
</a>
</li>
<li>
<a href="../preview/login.html" class="logout">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#logout" />
</svg>
Log out
</a>
</li>
</ul>
</nav>
<div class="lang-selector">
<label for="lang-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-gb" />
</svg>
English
</label>
<input type="checkbox" id="lang-trigger">
<ul class="flat-list lang-list">
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-se" />
</svg>
Svenska
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-no" />
</svg>
Norsk
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-dk" />
</svg>
Dansk
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-de" />
</svg>
Deutsch
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-fr" />
</svg>
Français
</a>
</li>
</ul>
</div>
</div>
<header id="header">
<div class="header-content">
<p class="main-title">
<a href="../preview/dashboard.html" class="block-link"><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#logo-badge" />
</svg>
Fine Wine Club</a>
</p>
</div>
<div class="header-content">
<div class="shopping-list-wrapper">
<label for="shopping-list-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-list" />
</svg>
<span class="trigger-label">Shopping list</span>
<span class="list-counter">3</span>
</label>
<input id="shopping-list-trigger" type="checkbox">
<div class="shopping-list">
<form action="#" method="post">
<div class="shopping-list-content">
<table class="shopping-list-table">
<thead>
<tr>
<th scope="col">Producer</th>
<th scope="col">Wine</th>
<th scope="col">Vintage</th>
<th scope="col"><span class="at-only">Remove</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Chateu Pontet-Canet</td>
<td>Chateu Pontet-Canet</td>
<td>2010</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td>Aalto</td>
<td>PS</td>
<td>2015</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td>Roederer</td>
<td>Cristal</td>
<td>2009</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
</tbody>
</table>
<div class="submit-area ">
<button type="button" data-prototype-url="../preview/orders.html">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-add" />
</svg>
<span>Create purchase orders</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
<label for="menu-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#menu" />
</svg>
Menu
</label>
</div>
</header>
<main id="main-content">
<h1>Dashboard - Backoffice</h1>
<h2>Statistics</h2>
<div class="dash-grid">
<div class="card grid-item-size-l-wide">
<h3>Wines in customer cellars</h3>
<div class="chart-container" id="wine-cellars"></div>
<p><small><em>Data updated 2019-07-01</em></small></p>
</div>
<div class="card ">
<h3>Wine cellars</h3>
<div class="chart-container" id="customer-wines"></div>
<p><small><em>Data updated 2019-07-01</em></small></p>
</div>
</div>
<h2>Notifications</h2>
<div class="card ">
<div class="scrollable-table">
<table class="issues-table">
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Date</th>
<th scope="col">Information</th>
<th scope="col">Assigned to</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="one-line"><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#validate" />
</svg>
New wine validation</td>
<td class="one-line">2019-07-03 15:46</td>
<td class="info">
<p><a href="#">First Hotel Billingehus</a> has uploaded a new wine in need of validation. <a href="#notification-1" class="toggle" aria-controls="#notification-1" data-toggle-alt="Show less">Show more…</a></p>
<div id="notification-1" class="toggle-content">
<p>Dolor odio facere tempore perferendis possimus? Exercitationem
inventore id magni explicabo tenetur Ea et quibusdam molestiae
pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid
deleniti nisi Sint explicabo hic</p>
<p>Dolor odio facere tempore perferendis possimus? Exercitationem
inventore id magni explicabo tenetur Ea et quibusdam molestiae
pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid
deleniti nisi Sint explicabo hic</p>
<p>Dolor odio facere tempore perferendis possimus? Exercitationem
inventore id magni explicabo tenetur Ea et quibusdam molestiae
pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid
deleniti nisi Sint explicabo hic</p>
</div>
</td>
<td class="one-line">
<a href="mailto:jerker@finewineclub.com" data-tippy-content="jerker@finewineclub.com">Jerker Soomus</a>
</td>
<td>
<div class="action-bar">
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#inbox" />
</svg>
<span>Pick task</span>
</span>
</button>
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#archive" />
</svg>
<span>Archive</span>
</span>
</button>
<button type="button" class="alt size-xs" aria-label="Delete">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</div>
</td>
</tr>
<tr>
<td class="one-line"><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#money" />
</svg>
Price change</td>
<td class="one-line">2019-07-04 10:18</td>
<td class="info"><a href="#">Bertrand Ambroise Corton Rognet 2007</a> has increased in price with 25%.
</td>
<td class="one-line">
</td>
<td>
<div class="action-bar">
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#inbox" />
</svg>
<span>Pick task</span>
</span>
</button>
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#archive" />
</svg>
<span>Archive</span>
</span>
</button>
<button type="button" class="alt size-xs" aria-label="Delete">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</div>
</td>
</tr>
<tr>
<td class="one-line"><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#support" />
</svg>
Support request</td>
<td class="one-line">2019-07-04 18:33</td>
<td class="info"><a href="#">Stureplan</a> has requested help with wine matching.
</td>
<td class="one-line">
<a href="mailto:ralf@finewineclub.com" data-tippy-content="ralf@finewineclub.com">Ralf Nord</a>
</td>
<td>
<div class="action-bar">
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#inbox" />
</svg>
<span>Pick task</span>
</span>
</button>
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#archive" />
</svg>
<span>Archive</span>
</span>
</button>
<button type="button" class="alt size-xs" aria-label="Delete">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
{{#> @regular-page}}
<h1>Dashboard - Backoffice</h1>
<h2>Statistics</h2>
{{#> @dash-grid}}
{{#> @card wine-cellars}}
<h3>{{heading}}</h3>
{{> @chart-container id="wine-cellars"}}
<p><small><em>Data updated 2019-07-01</em></small></p>
{{/ @card}}
{{#> @card customer-wines}}
<h3>{{heading}}</h3>
{{> @chart-container id="customer-wines"}}
<p><small><em>Data updated 2019-07-01</em></small></p>
{{/ @card}}
{{/ @dash-grid}}
<h2>Notifications</h2>
{{#> @card notifications}}
{{> @issues-table}}
{{/ @card}}
{{/ @regular-page}}
{
"wine-cellars": {
"heading": "Wines in customer cellars",
"modifier": "grid-item-size-l-wide"
},
"customer-wines": {
"heading": "Wine cellars"
},
"notifications": {
"issues-buttons": [
{
"text": "Pick task",
"icon": "inbox",
"modifier": "alt size-xs"
},
{
"text": "Archive",
"icon": "archive",
"modifier": "alt size-xs"
},
{
"text": "Delete",
"icon": "delete",
"icon-only": true,
"modifier": "alt size-xs"
}
],
"issues": [
{
"category": "New wine validation",
"icon": "validate",
"date": "2019-07-03 15:46",
"assignee": "Jerker Soomus",
"assignee-mail": "jerker@finewineclub.com",
"information": "<p><a href=\"#\">First Hotel Billingehus</a> has uploaded a new wine in need of validation. <a href=\"#notification-1\" class=\"toggle\" aria-controls=\"#notification-1\" data-toggle-alt=\"Show less\">Show more…</a></p> <div id=\"notification-1\" class=\"toggle-content\">\n <p>Dolor odio facere tempore perferendis possimus? Exercitationem\n inventore id magni explicabo tenetur Ea et quibusdam molestiae\n pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid\n deleniti nisi Sint explicabo hic</p>\n <p>Dolor odio facere tempore perferendis possimus? Exercitationem\n inventore id magni explicabo tenetur Ea et quibusdam molestiae\n pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid\n deleniti nisi Sint explicabo hic</p>\n <p>Dolor odio facere tempore perferendis possimus? Exercitationem\n inventore id magni explicabo tenetur Ea et quibusdam molestiae\n pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid\n deleniti nisi Sint explicabo hic</p>\n</div>\n"
},
{
"category": "Price change",
"icon": "money",
"date": "2019-07-04 10:18",
"information": "<a href=\"#\">Bertrand Ambroise Corton Rognet 2007</a> has increased in price with 25%.\n"
},
{
"category": "Support request",
"icon": "support",
"date": "2019-07-04 18:33",
"assignee": "Ralf Nord",
"assignee-mail": "ralf@finewineclub.com",
"information": "<a href=\"#\">Stureplan</a> has requested help with wine matching.\n"
}
]
}
}
/**
* Draw a pie chart with Google Charts
*/
/* global google */
'use strict';
(function () {
// Cache the container elements
const wineCellars = document.querySelector('#wine-cellars');
const customerWines = document.querySelector('#customer-wines');
// Halt if none of the elements are present
if (!wineCellars)
return;
/**
* Configure & draw pie charts
*/
function pieChartConfig(data, elem) {
// Pie chart options
const pieChartOptions = {
legend: {
position: 'right',
alignment: 'center',
},
chartArea: {
top: 8,
height: '100%',
width: '90%',
},
};
// Draw
var chart = new google.visualization.PieChart(elem);
chart.draw(data, pieChartOptions);
}
/**
* Configure & draw line graphs
*/
function lineGraphConfig(data, elem) {
// Pie chart options
const lineGraphOptions = {
curveType: 'function',
legend: {
position: 'top'
},
chartArea: {
width: '86%',
},
};
// Draw
var chart = new google.visualization.LineChart(elem);
chart.draw(data, lineGraphOptions);
}
/**
* Data: Customer wine cellars
*/
function drawCustomerWineCellars() {
const data = google.visualization.arrayToDataTable([
['Month', 'White', 'Red', 'Rosé', 'Sparkling'],
['February', 187, 337, 35, 91],
['March', 215, 365, 44, 111],
['April', 251, 444, 50, 135],
['May', 332, 480, 55, 149],
['June', 433, 551, 68, 175],
['July', 501, 733, 71, 196],
]);
lineGraphConfig(data, wineCellars);
}
// Set a callback to run when the API is loaded
google.charts.setOnLoadCallback(drawCustomerWineCellars);
/**
* Data: Customer wines
*/
function drawCustomerWines() {
const data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Bottles');
data.addRows([
['Germany', 197],
['France', 219],
['Italy', 348],
['Spain', 213],
['Australia', 111],
['Argentina', 183],
['Portugal', 321]
]);
pieChartConfig(data, customerWines);
}
// Set a callback to run when the API is loaded
google.charts.setOnLoadCallback(drawCustomerWines);
// Redraw charts on window resize
window.addEventListener('resize', function() {
drawCustomerWineCellars();
});
})();
No notes defined.