Refactor worklog handling and rendering; enhance active worklog display and add settings page with brand management functionality

templates/settings.html

@@ -0,0 +1,73 @@
+{% 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 %}