<h2>Unmatched wines</h2>
<form action="#" method="post">
<div class="scrollable-table">
<table class="matching-table">
<thead>
<tr>
<th scope="col">Uploaded name</th>
<th scope="col">Probable matches</th>
</tr>
</thead>
<tbody>
<tr>
<td>Torevillos Cabernet Sauvignon</td>
<td>
<ol class="flat-list possible-matches">
<li>
<label>
<input type="radio" id="radio-0" name="match-group-1">
2012 Abreu Cabernet Sauvignon Rico, Matteo & Lucia Thorevilos
</label>
</li>
<li>
<label>
<input type="radio" id="radio-1" name="match-group-1">
2009 Abreu Cabernet Sauvignon Rico, Matteo & Lucia Thorevilos
</label>
</li>
<li>
<label>
<input type="radio" id="radio-2" name="match-group-1">
2011 Abreu Cabernet Sauvignon Rico, Matteo & Lucia Thorevilos
</label>
</li>
<li>
<label>
<input type="radio" id="radio-3" name="match-group-1">
None of the above
</label>
</li>
</ol>
<div class="simple-accordion">
<div class="simple-accordion-item">
<p class="simple-accordion-title">
<span>Enter wine details manually</span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#angle" />
</svg>
</p>
<div class="collapsible-content">
<div class="simple-accordion-inner-content">
<div class="new-wine">
<div class="form-item ">
<label for="new-wine-producer-0">
Producer
</label>
<input type="text" id="new-wine-producer-0" value="">
</div>
<div class="form-item ">
<label for="15a39e59-8ae4-ba3d-c0c8-3df9607a67c7">
Wine name
</label>
<input type="text" id="15a39e59-8ae4-ba3d-c0c8-3df9607a67c7" value="">
</div>
<div class="form-item ">
<label for="new-wine-country-0">
Country
</label>
<input type="text" id="new-wine-country-0" value="">
</div>
<div class="form-item ">
<label for="new-wine-region-0">
Region
</label>
<input type="text" id="new-wine-region-0" value="">
</div>
<div class="form-item ">
<label for="new-wine-district-0">
District
</label>
<input type="text" id="new-wine-district-0" value="">
</div>
<div class="form-item ">
<label for="new-wine-vintage-0">
Vintage
</label>
<input type="text" id="new-wine-vintage-0" value="">
</div>
<div class="form-item ">
<label for="236e19ba-2088-7201-297a-f85a1bf47230">
Bottle size
</label>
<input type="text" id="236e19ba-2088-7201-297a-f85a1bf47230" value="">
</div>
<div class="form-item ">
<label for="432e13e9-1b9f-e309-48e6-9cf7b70dc6e7">
Bottles/case
</label>
<input type="text" id="432e13e9-1b9f-e309-48e6-9cf7b70dc6e7" value="">
</div>
<div class="form-item ">
<label for="93af78d0-135a-5515-82e7-fff3fbfd4929">
Bottles in wine cellar
</label>
<input type="text" id="93af78d0-135a-5515-82e7-fff3fbfd4929" value="">
</div>
<div class="form-item ">
<label for="74a66286-8d89-8237-2cdb-f52de10e3b62">
Supplier
</label>
<input type="text" id="74a66286-8d89-8237-2cdb-f52de10e3b62" value="">
</div>
<div class="form-item ">
<label for="91496768-2107-9e28-4027-169e1abccc04">
Purchase Price per bottle(ex VAT)
</label>
<input type="text" id="91496768-2107-9e28-4027-169e1abccc04" value="">
</div>
<div class="form-item ">
<label for="e76ad38d-6006-7460-7f61-b9e9b5744903">
Price per bottle in winelist (ex VAT)
</label>
<input type="text" id="e76ad38d-6006-7460-7f61-b9e9b5744903" value="">
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Roch de Chambes</td>
<td>
<ol class="flat-list possible-matches">
<li>
<label>
<input type="radio" id="radio-0" name="match-group-2">
Roc de Cambes
</label>
</li>
<li>
<label>
<input type="radio" id="radio-1" name="match-group-2">
None of the above
</label>
</li>
</ol>
<div class="simple-accordion">
<div class="simple-accordion-item">
<p class="simple-accordion-title">
<span>Enter wine details manually</span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#angle" />
</svg>
</p>
<div class="collapsible-content">
<div class="simple-accordion-inner-content">
<div class="new-wine">
<div class="form-item ">
<label for="3cce7d5f-44b3-92f2-3f51-299771b6604b">
Producer
</label>
<input type="text" id="3cce7d5f-44b3-92f2-3f51-299771b6604b" value="">
</div>
<div class="form-item ">
<label for="a521d6df-1fea-4f01-2fd8-14e92306089b">
Wine name
</label>
<input type="text" id="a521d6df-1fea-4f01-2fd8-14e92306089b" value="">
</div>
<div class="form-item ">
<label for="f513521d-b3d3-a95f-313f-5a82116c6f3c">
Country
</label>
<input type="text" id="f513521d-b3d3-a95f-313f-5a82116c6f3c" value="">
</div>
<div class="form-item ">
<label for="bc0182fc-279a-4e37-79dc-9e3a7970a208">
Region
</label>
<input type="text" id="bc0182fc-279a-4e37-79dc-9e3a7970a208" value="">
</div>
<div class="form-item ">
<label for="ab01871d-5da2-054f-0d2b-124afe9ad3ff">
District
</label>
<input type="text" id="ab01871d-5da2-054f-0d2b-124afe9ad3ff" value="">
</div>
<div class="form-item ">
<label for="72f284e8-a4b6-fa4f-3275-0b0dbb8e6b0f">
Vintage
</label>
<input type="text" id="72f284e8-a4b6-fa4f-3275-0b0dbb8e6b0f" value="">
</div>
<div class="form-item ">
<label for="38718378-3482-1c05-f413-9dc1d677838d">
Bottle size
</label>
<input type="text" id="38718378-3482-1c05-f413-9dc1d677838d" value="">
</div>
<div class="form-item ">
<label for="4708fc28-b159-2a08-68f8-b3ab077cace4">
Bottles/case
</label>
<input type="text" id="4708fc28-b159-2a08-68f8-b3ab077cace4" value="">
</div>
<div class="form-item ">
<label for="ce0decdc-6e84-0607-0d8e-d5b30e906425">
Bottles in wine cellar
</label>
<input type="text" id="ce0decdc-6e84-0607-0d8e-d5b30e906425" value="">
</div>
<div class="form-item ">
<label for="006c5a43-c352-7022-42a6-98b9369c730a">
Supplier
</label>
<input type="text" id="006c5a43-c352-7022-42a6-98b9369c730a" value="">
</div>
<div class="form-item ">
<label for="1c41fcef-dc28-c5d0-7c99-dd3bdd06dfeb">
Purchase Price per bottle(ex VAT)
</label>
<input type="text" id="1c41fcef-dc28-c5d0-7c99-dd3bdd06dfeb" value="">
</div>
<div class="form-item ">
<label for="52714bff-6232-9133-0207-b5511f32143b">
Price per bottle in winelist (ex VAT)
</label>
<input type="text" id="52714bff-6232-9133-0207-b5511f32143b" value="">
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Château Léoville Barton</td>
<td>
<ol class="flat-list possible-matches">
<li>
<label>
<input type="radio" id="radio-0" name="match-group-3" checked>
No probable matches
</label>
</li>
</ol>
<div class="simple-accordion">
<div class="simple-accordion-item">
<p class="simple-accordion-title">
<span>Enter wine details manually</span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#angle" />
</svg>
</p>
<div class="collapsible-content">
<div class="simple-accordion-inner-content">
<div class="new-wine">
<div class="form-item ">
<label for="036c0c24-64d5-35d4-a83d-2ebd2a835035">
Producer
</label>
<input type="text" id="036c0c24-64d5-35d4-a83d-2ebd2a835035" value="Château Léoville Barton">
</div>
<div class="form-item ">
<label for="e4c11e0b-1889-b025-b36f-a6c1153d4e05">
Wine name
</label>
<input type="text" id="e4c11e0b-1889-b025-b36f-a6c1153d4e05" value="">
</div>
<div class="form-item ">
<label for="56eee670-8193-59d7-861d-04036f84a96e">
Country
</label>
<input type="text" id="56eee670-8193-59d7-861d-04036f84a96e" value="France">
</div>
<div class="form-item ">
<label for="d415b98d-37ca-ac79-c6b5-9f592c0475af">
Region
</label>
<input type="text" id="d415b98d-37ca-ac79-c6b5-9f592c0475af" value="Saint Julien">
</div>
<div class="form-item ">
<label for="89aa37ca-4c3f-a7e6-eb96-63884fbb5f7e">
District
</label>
<input type="text" id="89aa37ca-4c3f-a7e6-eb96-63884fbb5f7e" value="">
</div>
<div class="form-item ">
<label for="946ed28a-dd70-40a2-ee3f-1bc5c54b2a20">
Vintage
</label>
<input type="text" id="946ed28a-dd70-40a2-ee3f-1bc5c54b2a20" value="2005">
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="submit-area ">
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#save" />
</svg>
<span>Save wine info</span>
</span>
</button>
</div>
</form>
<h2>Unmatched wines</h2>
<form action="#" method="post">
{{#> @scrollable-table}}
<table class="matching-table">
<thead>
<tr>
<th scope="col">Uploaded name</th>
<th scope="col">Probable matches</th>
</tr>
</thead>
<tbody>
{{#each match-items}}
<tr>
<td>{{uploaded-name}}</td>
<td>
<ol class="flat-list possible-matches">
{{#each possible-matches}}
<li>
<label>
<input type="radio" id="radio-{{@index}}" name="{{../id}}"{{#if checked}} checked{{/if}}>
{{vintage}} {{name}}
</label>
</li>
{{/each}}
</ol>
{{#> @simple-accordion title="Enter wine details manually" }}
{{> @new-wine-form new-wine}}
{{/ @simple-accordion}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{/ @scrollable-table}}
{{> @submit-area}}
</form>
{
"match-items": [
{
"uploaded-name": "Torevillos Cabernet Sauvignon",
"id": "match-group-1",
"new-wine": {
"input-fields": [
{
"label": "Producer",
"id": "new-wine-producer-0"
},
{
"label": "Wine name"
},
{
"label": "Country",
"id": "new-wine-country-0"
},
{
"label": "Region",
"id": "new-wine-region-0"
},
{
"label": "District",
"id": "new-wine-district-0"
},
{
"label": "Vintage",
"id": "new-wine-vintage-0"
},
{
"label": "Bottle size"
},
{
"label": "Bottles/case"
},
{
"label": "Bottles in wine cellar"
},
{
"label": "Supplier"
},
{
"label": "Purchase Price per bottle(ex VAT)"
},
{
"label": "Price per bottle in winelist (ex VAT)"
}
]
},
"possible-matches": [
{
"name": "Abreu Cabernet Sauvignon Rico, Matteo & Lucia Thorevilos",
"vintage": 2012,
"score": 90
},
{
"name": "Abreu Cabernet Sauvignon Rico, Matteo & Lucia Thorevilos",
"vintage": 2009,
"score": 86
},
{
"name": "Abreu Cabernet Sauvignon Rico, Matteo & Lucia Thorevilos",
"vintage": 2011,
"score": 80
},
{
"name": "None of the above"
}
]
},
{
"uploaded-name": "Roch de Chambes",
"id": "match-group-2",
"new-wine": {
"input-fields": [
{
"label": "Producer"
},
{
"label": "Wine name"
},
{
"label": "Country"
},
{
"label": "Region"
},
{
"label": "District"
},
{
"label": "Vintage"
},
{
"label": "Bottle size"
},
{
"label": "Bottles/case"
},
{
"label": "Bottles in wine cellar"
},
{
"label": "Supplier"
},
{
"label": "Purchase Price per bottle(ex VAT)"
},
{
"label": "Price per bottle in winelist (ex VAT)"
}
],
"submit-button": {
"text": "Save wine"
}
},
"possible-matches": [
{
"name": "Roc de Cambes",
"score": 88
},
{
"name": "None of the above"
}
]
},
{
"uploaded-name": "Château Léoville Barton",
"id": "match-group-3",
"new-wine": {
"input-fields": [
{
"label": "Producer",
"value": "Château Léoville Barton"
},
{
"label": "Wine name"
},
{
"label": "Country",
"value": "France"
},
{
"label": "Region",
"value": "Saint Julien"
},
{
"label": "District"
},
{
"label": "Vintage",
"value": 2005
}
]
},
"possible-matches": [
{
"name": "No probable matches",
"checked": true
}
]
}
],
"submit-button": {
"icon": "save",
"text": "Save wine info"
}
}
/**
* Wine matching list
*/
@media screen {
.matching-table {
width: 100%;
}
.matching-table thead th {
color: var(--white);
background-color: var(--dark-grey);
text-align: left;
vertical-align: bottom;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
.matching-table tr:nth-child(even) {
background-color: hsla(0, 0%, 0%, 0.05);
}
.matching-table th,
.matching-table td {
padding: 0.5em 0.5em 1em;
}
.matching-table td {
vertical-align: top;
}
.wine-matching-item h3 {
font-size: 1.1em;
font-weight: 700;
}
.wine-matching-item h3 em {
display: block;
font-size: 0.9em;
font-weight: 400;
margin-bottom: 0.25em;
}
.wine-matching-item h4 {
font-size: 1em;
font-weight: 700;
}
.wine-matching-item + .wine-matching-item {
margin-top: 1.5em;
}
.possible-matches {
margin: 0;
}
.possible-matches label {
font-weight: 400;
}
}
/**
* Initialize autoComplete for custom wines
*/
/* global autocomplete */
(function() {
// Wine name input field
const wineInput = document.getElementById('new-wine-producer-0');
const vintageInput = document.getElementById('new-wine-vintage-0');
if (!wineInput && !vintageInput) return;
// Disable browser autocomplete
wineInput.setAttribute('autocomplete', 'off');
vintageInput.setAttribute('autocomplete', 'off');
// Some real (but fake) wine names
const wineList = [
{ label: 'Bodegas Montecillo Rioja Reserva' },
{ label: 'Château Beau-Site' },
{ label: 'Château Lafite Rothschild' },
{ label: 'Château Léoville Barton' },
{ label: 'Château Margaux' },
{ label: 'Château Mouton Rothschild' },
{ label: 'Château Pontet-Canet' },
{ label: 'Domaine Rossignol Trapet Chambertin' },
{ label: 'Fontodi Chianti Classico' },
{ label: 'Marqués de Riscal Rioja Reserva' },
];
const vintageList = [
{ label: '2018' },
{ label: '2017' },
{ label: '2016' },
{ label: '2015' },
{ label: '2014' },
{ label: '2013' },
];
// Config for wines
autocomplete({
input: wineInput,
minLength: 1,
fetch: function(text, update) {
text = text.toLowerCase();
const suggestions = wineList
.filter(n => n.label.toLowerCase().startsWith(text));
update(suggestions);
},
onSelect: function(item) {
wineInput.value = item.label;
// Populate other fields to simulate a wine selection
populateFields();
}
});
// Config for vintages
autocomplete({
input: vintageInput,
minLength: 0,
fetch: function(text, update) {
text = text.toLowerCase();
const suggestions = vintageList
.filter(n => n.label.toLowerCase().startsWith(text));
update(suggestions);
},
onSelect: function(item) {
vintageInput.value = item.label;
}
});
// Simulate auto-population of related fields
function populateFields() {
const
wineCountry = document.getElementById('new-wine-country-0'),
wineDistrict = document.getElementById('new-wine-district-0'),
wineRegion = document.getElementById('new-wine-region-0');
wineCountry.value = 'France ';
wineCountry.classList.add('updated');
wineRegion.value = 'Pauillac ';
wineRegion.classList.add('updated');
wineDistrict.value = 'Bordeaux';
wineDistrict.classList.add('updated');
}
})();