73 lines
No EOL
2.4 KiB
HTML
73 lines
No EOL
2.4 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block title %}{{ title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<form method="POST" action="{{ url_for('main.settings') }}">
|
|
{{ breadcrumbs.breadcrumb_header(
|
|
title=title,
|
|
submit_button=True
|
|
) }}
|
|
|
|
<div class="container">
|
|
<label for="brandInput" class="form-label">Brands</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control rounded-bottom-0" id="brandInput" name="brandInput" placeholder="Add a new brand">
|
|
<button type="button" class="btn btn-primary rounded-bottom-0" id="addBrandButton" onclick="addBrand();" disabled>
|
|
{{ icons.plus(16) }}
|
|
</button>
|
|
<button type="button" class="btn btn-danger rounded-bottom-0" id="removeBrandButton" onclick="removeSelectedBrands()" disabled>
|
|
{{ icons.minus(16) }}
|
|
</button>
|
|
</div>
|
|
<select class="form-select border-top-0 rounded-top-0" id="brandList" size="10" multiple>
|
|
{% for brand in brands %}
|
|
<option value="{{ brand.id }}">{{ brand.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</form>
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
const brandInput = document.querySelector('#brandInput');
|
|
const brandList = document.querySelector('#brandList');
|
|
const addBrandButton = document.querySelector('#addBrandButton');
|
|
const removeBrandButton = document.querySelector('#removeBrandButton');
|
|
|
|
brandInput.addEventListener('input', () => {
|
|
addBrandButton.disabled = brandInput.value.trim() === '';
|
|
});
|
|
|
|
brandList.addEventListener('change', () => {
|
|
removeBrandButton.disabled = brandList.selectedOptions.length === 0;
|
|
});
|
|
|
|
function sortOptions() {
|
|
const options = Array.from(brandList.options);
|
|
options.sort((a, b) => a.text.localeCompare(b.text));
|
|
brandList.innerHTML = '';
|
|
options.forEach(option => brandList.appendChild(option));
|
|
}
|
|
|
|
let tempIdCounter = -1;
|
|
|
|
function addBrand() {
|
|
const newBrand = brandInput.value.trim();
|
|
if (newBrand) {
|
|
const option = document.createElement('option');
|
|
option.textContent = newBrand;
|
|
option.value = tempIdCounter--;
|
|
brandList.appendChild(option);
|
|
brandInput.value = '';
|
|
addBrandButton.disabled = true;
|
|
sortOptions();
|
|
}
|
|
}
|
|
|
|
function removeSelectedBrands() {
|
|
Array.from(brandList.selectedOptions).forEach(option => option.remove());
|
|
removeBrandButton.disabled = true;
|
|
}
|
|
{% endblock %} |