<a href="#rental-modal" data-js="open-modal">Muuda</a>
<div class="modal " aria-modal="true" role="dialog" id="rental-modal" aria-labelledby="rental-modal_label" data-close-label="Close" aria-describedby="modal_description" data-focusable-element="name">
<h1 id="rental-modal_label" class="h3 modal__title ">
Optimeeri rendipunkt
</h1>
<div class="modal__content">
<div class="grid grid--center-xs">
<div class="grid__col grid__col--lg-10">
<div class="text h-text-center">
<p id="modal_description">
Vali rendipunkt, kuhu soovid kõikidele toodetele valitud kuupäeval järele tulla
</p>
<div class="grid grid--between-xs grid--no-vertical-gutter">
<div class="grid__col grid__col--xs-2 grid__col--sm-1 grid__col--md-2 h-text-left">
<small>RENDIALGUS:</small>
</div>
<div class="grid__col grid__col--xs-2 grid__col--sm-1 grid__col--md-2 h-text-right">
<span class="rental-modal__value">25.08.2022</span>
</div>
<div class="grid__col grid__col--xs-2 grid__col--sm-1 grid__col--md-2 h-text-left">
<small>RENDILÕPP:</small>
</div>
<div class="grid__col grid__col--xs-2 grid__col--sm-1 grid__col--md-2 h-text-right">
<span class="rental-modal__value">27.08.2022</span>
</div>
</div>
<div class="table rental-modal__table table--no-borders">
<table class="table__table tablesaw" data-tablesaw-sortable>
<thead class="table__head">
<tr class="table__row">
<th class="table__header" scope="col" data-tablesaw-sortable-col>
<span class="table__title text-small">Rendipunkt</span>
</th>
<th class="table__header" scope="col" data-tablesaw-sortable-col>
<span class="table__title text-small">Saadavus</span>
</th>
</tr>
</thead>
<tbody class="table__body">
<tr class="table__row">
<td class="table__item">
<div class="radio
">
<input type="radio" id="radio1" name="radio" value="" class="radio__input">
<label for="radio1" class="radio__label">
<span class="radio__indicator"></span>
<span class="radio__text">Tallinn Laki</span>
</label>
</div>
</td>
<td class="table__item">
<div class="availability">
<span class="availability__bullet"></span>
<span class="availability__text"></span>
</div>
</td>
</tr>
<tr class="table__row">
<td class="table__item">
<div class="radio
">
<input type="radio" id="radio2" name="radio" value="" class="radio__input">
<label for="radio2" class="radio__label">
<span class="radio__indicator"></span>
<span class="radio__text">Tallinn Peterburi tee</span>
</label>
</div>
</td>
<td class="table__item">
<div class="availability">
<span class="availability__bullet"></span>
<span class="availability__text"></span>
</div>
</td>
</tr>
<tr class="table__row">
<td class="table__item">
<div class="radio
">
<input type="radio" id="radio3" name="radio" value="" class="radio__input">
<label for="radio3" class="radio__label">
<span class="radio__indicator"></span>
<span class="radio__text">Tallinn Tähesaju</span>
</label>
</div>
</td>
<td class="table__item">
<div class="availability">
<span class="availability__bullet"></span>
<span class="availability__text"></span>
</div>
</td>
</tr>
<tr class="table__row">
<td class="table__item">
<div class="radio
">
<input type="radio" id="radio4" name="radio" value="" class="radio__input">
<label for="radio4" class="radio__label">
<span class="radio__indicator"></span>
<span class="radio__text">Tartu</span>
</label>
</div>
</td>
<td class="table__item">
<div class="availability">
<span class="availability__bullet"></span>
<span class="availability__text"></span>
</div>
</td>
</tr>
<tr class="table__row">
<td class="table__item">
<div class="radio
">
<input type="radio" id="radio5" name="radio" value="" class="radio__input">
<label for="radio5" class="radio__label">
<span class="radio__indicator"></span>
<span class="radio__text">Tallinn Pärnu mnt</span>
</label>
</div>
</td>
<td class="table__item">
<div class="availability">
<span class="availability__bullet"></span>
<span class="availability__text"></span>
</div>
</td>
</tr>
<tr class="table__row">
<td class="table__item">
<div class="radio
">
<input type="radio" id="radio6" name="radio" value="" class="radio__input">
<label for="radio6" class="radio__label">
<span class="radio__indicator"></span>
<span class="radio__text">Viljandi</span>
</label>
</div>
</td>
<td class="table__item">
<div class="availability">
<span class="availability__bullet"></span>
<span class="availability__text"></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="button rental-modal__button text__margin-double">
<span class="button__inner">
<span class="button__text">Muuda rendipunkti</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<a href="#rental-modal" data-js="open-modal">Muuda</a>
{% set modalContent %}
{% set tableRows = [] %}
{% for row in data.table.rows %}
{% set newCells = [] %}
{% set newRow = {} %}
{% for cell in row.cells %}
{% if cell.radio %}
{% set cellContent -%}
{%- include '@radio' with { data: cell.radio, class: '', modifier: '' } -%}
{%- endset %}
{% elseif cell.status %}
{% set cellContent -%}
{%- include '@availability' with { data: cell.availability, class: '', modifier: '' } -%}
{%- endset %}
{% else %}
{% set cellContent = cell.content %}
{% endif %}
{% set newCell = {
content: cellContent
} %}
{% set newCells = newCells|merge([newCell]) %}
{% set newRow = newRow|merge({
cells: newCells,
}) %}
{% endfor %}
{% set tableRows = tableRows|merge([newRow]) %}
{% endfor %}
<div class="grid grid--center-xs">
<div class="grid__col grid__col--lg-10">
<div class="text h-text-center">
<p id="modal_description">
{{ data.text }}
</p>
{% if data.start or data.end %}
<div class="grid grid--between-xs grid--no-vertical-gutter">
{% if data.start %}
<div class="grid__col grid__col--xs-2 grid__col--sm-1 grid__col--md-2 h-text-left">
<small>{{ data.start.label }}:</small>
</div>
<div class="grid__col grid__col--xs-2 grid__col--sm-1 grid__col--md-2 h-text-right">
<span class="rental-modal__value">{{ data.start.value }}</span>
</div>
{% endif %}
{% if data.end %}
<div class="grid__col grid__col--xs-2 grid__col--sm-1 grid__col--md-2 h-text-left">
<small>{{ data.end.label }}:</small>
</div>
<div class="grid__col grid__col--xs-2 grid__col--sm-1 grid__col--md-2 h-text-right">
<span class="rental-modal__value">{{ data.end.value }}</span>
</div>
{% endif %}
</div>
{% endif %}
{% include '@table' with {
data: {
headers: data.table.headers,
rows: tableRows,
},
class: 'rental-modal__table',
modifier: 'table--no-borders',
} %}
{% include '@button' with { data: data.button, class: 'rental-modal__button text__margin-double', modifier: '' } %}
</div>
</div>
</div>
{% endset %}
{% include '@modal' with {
data: {
title: {
text: 'Optimeeri rendipunkt'
},
closeLabel: 'Close',
content: modalContent
},
id: 'rental-modal',
focusableElementId: 'name',
descriptionId: 'modal_description',
class: '',
headingElement: 'h1'
} %}
{
"language": "en-US",
"data": {
"button": {
"text": "Muuda rendipunkti"
},
"start": {
"label": "RENDIALGUS",
"value": "25.08.2022"
},
"end": {
"label": "RENDILÕPP",
"value": "27.08.2022"
},
"table": {
"headers": [
{
"title": "Rendipunkt",
"sortable": true
},
{
"title": "Saadavus",
"sortable": true
}
],
"rows": [
{
"cells": [
{
"content": "Tallinn Laki",
"radio": {
"label": "Tallinn Laki",
"id": "radio1",
"name": "radio"
}
},
{
"content": "Saadaval",
"status": {
"text": "Saadaval"
}
}
]
},
{
"cells": [
{
"content": "Tallinn Peterburi tee",
"radio": {
"label": "Tallinn Peterburi tee",
"id": "radio2",
"name": "radio"
}
},
{
"content": "Saadaval",
"status": {
"text": "Saadaval"
}
}
]
},
{
"cells": [
{
"content": "Tallinn Tähesaju",
"radio": {
"label": "Tallinn Tähesaju",
"id": "radio3",
"name": "radio"
}
},
{
"content": "Saadaval",
"status": {
"text": "Saadaval"
}
}
]
},
{
"cells": [
{
"content": "Tartu",
"radio": {
"label": "Tartu",
"id": "radio4",
"name": "radio"
}
},
{
"content": "Saadaval",
"status": {
"text": "Saadaval"
}
}
]
},
{
"cells": [
{
"content": "Tallinn Pärnu mnt",
"radio": {
"label": "Tallinn Pärnu mnt",
"id": "radio5",
"name": "radio"
}
},
{
"content": "Saadaval",
"status": {
"text": "Saadaval"
}
}
]
},
{
"cells": [
{
"content": "Viljandi",
"radio": {
"label": "Viljandi",
"id": "radio6",
"name": "radio"
}
},
{
"content": "Saadaval",
"status": {
"text": "Saadaval"
}
}
]
}
]
},
"text": "Vali rendipunkt, kuhu soovid kõikidele toodetele valitud kuupäeval järele tulla"
}
}
.rental-modal__table {
max-height: 300px;
border-bottom: 1px solid $L-table-border-color;
overflow-y: auto;
}
.rental-modal__value {
color: $brand-primary;
font-weight: $font-weight-medium;
}
import './rental-modal.scss';