Improve tom-select CSS,

BookingSystem/templates/booking.html

@@ -45,18 +45,8 @@ <h3>Dersom du ikke finner eleven i listen, må eleven logge inn på nettstedet o
 
     <script>
       $(document).ready(function () {
-        let options = {
-          create: false,
-          sortField: {
-            field: 'text',
-            direction: 'asc'
-          },
-          hidePlaceholder: true,
-          closeAfterSelect: true,
-        }
-
-        new TomSelect('#user', {
-          ...options,
+        let userSelect = new TomSelect('#user', {
+          ...tomDefaults,
           maxItems: 1,
           searchField: ['text', 'classroom'],
           selectOnTab: true,
@@ -71,13 +61,19 @@ <h3>Dersom du ikke finner eleven i listen, må eleven logge inn på nettstedet o
               let icon = data.classroom === 'Lærer' ? 'fa-user-circle' : 'fa-user-circle-o';
               return `<div class="booking-option">\<div class="option-inline-text">${data.text}</div>\
 <div class="option-inline-details">${data.classroom}</div></div>`
-            }
+            },
+            no_results: function (data, escape) {
+              return '<div class="no-results">Finner ingen bruker med navnet <strong>' + escape(data.input) + '</strong></div>';
+            },
           },
           onDropdownClose: function (dropdown) {
             // Focus days input when user is selected
             let days = $('#days');
             days.focus();
             days.select();
+          },
+          onDropdownOpen: function (dropdown) {
+            userSelect.clear()
           }
         });
 
@@ -90,16 +86,18 @@ <h3>Dersom du ikke finner eleven i listen, må eleven logge inn på nettstedet o
         });
 
         new TomSelect('#equipment', {
-          ...options,
+          ...tomDefaults,
           plugins: ['remove_button'],
-          searchField: ['text'],
           openOnFocus: false,
           render: {
             option: function (data, escape) {
               return `<div class="booking-option">\
 <div class="option-inline-text">${data.text}</div>\
 <div class="option-inline-itemdetails">${data.name} (${data.category})</div></div>`
             },
+            no_results: function (data, escape) {
+              return '<div class="no-results">Finner ingen utstyr med løpenummer <strong>' + escape(data.input) + '</strong></div>';
+            },
           }
         });
 
@@ -171,12 +169,12 @@ <h3>Dersom du ikke finner eleven i listen, må eleven logge inn på nettstedet o
               if (any_overdue) {
                 iziToast.warning({
                   title: 'Advarsel',
-                  message: `Valgt bruker har utstyr som er over forfallsdato!`,
+                  message: `Bruker har utstyr som er over forfallsdato!`,
                 });
               } else {
                 iziToast.info({
                   title: 'Info',
-                  message: `Valgt bruker har aktive lån.`,
+                  message: `Bruker har aktive lån.`,
                 })
               }
             }

BookingSystem/templates/inventar_add.html

@@ -1,7 +1,7 @@
 {% extends 'layout.html' %}
 
 {% block extra_head %}
-    {% include 'templates/chosen.html' %}
+    {% include 'templates/tom-select.html' %}
 {% endblock %}
 
 {% block content %}
@@ -20,7 +20,7 @@ <h3>Her kan du legge til nytt inventar. Legg gjerne til flere, så forlater du b
                pattern="{{ regex_item }}">
 
         <label for="category">Kategori</label>
-        <select name="category" id="category" required>
+        <select name="category" id="category" required data-placeholder="Velg kategori" autocomplete="off">
             <option value=""></option>
             {% for category in categories %}
                 <option value="{{ category }}">{{ category }}</option>
@@ -58,10 +58,7 @@ <h3>Her kan du legge til nytt inventar. Legg gjerne til flere, så forlater du b
 
     <script>
       $(document).ready(function () {
-        $('#category').chosen({
-          no_results_text: 'Fant ingen kategorier med det navnet',
-          placeholder_text_single: 'Velg kategori'
-        });
+        new TomSelect('#category', tomDefaults);
 
         $('form').submit(function (event) {
           event.preventDefault();

BookingSystem/templates/inventar_edit.html

@@ -1,7 +1,7 @@
 {% extends 'layout.html' %}
 
 {% block extra_head %}
-    {% include 'templates/chosen.html' %}
+    {% include 'templates/tom-select.html' %}
 {% endblock %}
 
 {% block content %}
@@ -22,7 +22,7 @@ <h3>Redigerer {{ item.id }} ({{ item.name }})</h3>
                value="{{ item.name }}">
 
         <label for="category">Kategori</label>
-        <select name="category" id="category" required>
+        <select name="category" id="category" data-placeholder="Velg kategori" required autocomplete="off">
             <option value=""></option>
             {% for category in categories %}
                 <option value="{{ category }}">{{ category }}
@@ -63,11 +63,7 @@ <h3>Redigerer {{ item.id }} ({{ item.name }})</h3>
 
       $(document).ready(function () {
         $('#category').val('{{ item.category }}');
-
-        $('#category').chosen({
-          no_results_text: 'Fant ingen kategorier med det navnet',
-          placeholder_text_single: 'Velg kategori'
-        });
+        new TomSelect('#category', tomDefaults);
 
         $('form').submit(function (event) {
           event.preventDefault();

BookingSystem/templates/templates/tom-select.html

@@ -44,12 +44,33 @@
     font-size: calc(var(--font-size) * 0.75);
   }
 
-  /* Change the height for single select to match others */
-  .ts-wrapper input, .ts-wrapper.single .ts-control {
-    height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2) !important;
+  .ts-wrapper input {
+    height: auto;
   }
 
   .ts-dropdown.single {
-    margin-top: .6rem;
+    margin-top: .5rem;
   }
-</style>
+
+  .ts-control input {
+    width: auto;
+  }
+</style>
+
+<script>
+  let tomDefaults = {
+    create: false,
+    sortField: {
+      field: 'text',
+      direction: 'asc'
+    },
+    searchField: ['text'],
+    hidePlaceholder: true,
+    closeAfterSelect: true,
+    render: {
+      no_results: function (data, escape) {
+        return '<div class="no-results">Fant ingen verdier for <strong>' + escape(data.input) + '</strong></div>';
+      },
+    }
+  }
+</script>

README.md

@@ -46,7 +46,6 @@ Python Dependencies are listed in `requirements.txt`
 JS/CSS libraries are used:
 
 - [PicoCSS](https://picocss.com/) (for now)
-- [Chosen](https://harvesthq.github.io/chosen/) (Deprecated, might be removed)
 - [jQuery](https://jquery.com/)
 - [DataTables](https://datatables.net/)
 - [iziToast](https://izitoast.marcelodolza.com/)