Change ISP field to dropdown with common providers and Other option

Dropdown lists Vodafone, PYUR, eazy, O2, 1&1, Telekom, NetCologne,
M-net, Wilhelm.tel. Selecting "Other" reveals a free text input.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: itsDNNS

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 
 Versioning: `YYYY-MM-DD.N` (date + sequential build number per day)
 
+## [2026-02-09.8]
+
+### Changed
+- **ISP selection**: Dropdown with common German cable ISPs + "Other" option with free text input
+
 ## [2026-02-09.7]
 
 ### Added

app/i18n.py

@@ -121,7 +121,11 @@
 
     # ISP
     "isp_name": "Internet Provider",
-    "isp_hint": "e.g. Vodafone, Telekom, O2 (shown in export)",
+    "isp_hint": "Shown in LLM export report",
+    "isp_other": "Other",
+    "isp_other_placeholder": "Enter provider name",
+    "isp_select": "Select provider",
+    "isp_options": ["Vodafone", "PYUR", "eazy", "O2", "1&1", "Telekom", "NetCologne", "M-net", "Wilhelm.tel"],
 
     # Export
     "export_llm": "Export for LLM",
@@ -239,7 +243,11 @@
     "language": "Sprache",
 
     "isp_name": "Internetanbieter",
-    "isp_hint": "z.B. Vodafone, Telekom, O2 (wird im Export angezeigt)",
+    "isp_hint": "Wird im LLM-Export angezeigt",
+    "isp_other": "Andere",
+    "isp_other_placeholder": "Anbietername eingeben",
+    "isp_select": "Anbieter waehlen",
+    "isp_options": ["Vodafone", "PYUR", "eazy", "O2", "1&1", "Telekom", "NetCologne", "M-net", "Wilhelm.tel"],
 
     "export_llm": "Export fuer LLM",
     "export_title": "LLM-Analyse Export",

app/templates/settings.html

@@ -209,11 +209,21 @@ <h2>{{ t.mqtt_broker }} <span style="font-size:0.75em; font-weight:normal; color
     <div class="section">
         <h2>{{ t.general }}</h2>
         <div class="form-grid">
-            <div class="form-row full">
-                <label for="isp_name">{{ t.isp_name }}</label>
-                <input type="text" id="isp_name" name="isp_name" value="{{ config.isp_name }}">
+            <div class="form-row">
+                <label for="isp_select">{{ t.isp_name }}</label>
+                <select id="isp_select" name="isp_select" onchange="onIspChange()">
+                    <option value="">{{ t.isp_select }}</option>
+                    {% for isp in t.isp_options %}
+                    <option value="{{ isp }}" {% if config.isp_name == isp %}selected{% endif %}>{{ isp }}</option>
+                    {% endfor %}
+                    <option value="__other__" {% if config.isp_name and config.isp_name not in t.isp_options %}selected{% endif %}>{{ t.isp_other }}</option>
+                </select>
                 <span class="hint">{{ t.isp_hint }}</span>
             </div>
+            <div class="form-row" id="isp-other-row" style="display:{% if config.isp_name and config.isp_name not in t.isp_options %}block{% else %}none{% endif %}">
+                <label for="isp_other_input">{{ t.isp_other }}</label>
+                <input type="text" id="isp_other_input" value="{% if config.isp_name and config.isp_name not in t.isp_options %}{{ config.isp_name }}{% endif %}" placeholder="{{ t.isp_other_placeholder }}">
+            </div>
             <div class="form-row">
                 <label for="poll_interval">{{ t.interval_sec }}</label>
                 <input type="number" id="poll_interval" name="poll_interval" value="{{ config.poll_interval }}" min="{{ poll_min }}" max="{{ poll_max }}">
@@ -261,6 +271,12 @@ <h2>{{ t.general }}</h2>
     }
 })();
 
+function onIspChange() {
+    var sel = document.getElementById('isp_select');
+    var row = document.getElementById('isp-other-row');
+    row.style.display = sel.value === '__other__' ? 'block' : 'none';
+}
+
 function showToast(msg, ok) {
     var el = document.getElementById('toast');
     el.textContent = msg;
@@ -275,13 +291,19 @@ <h2>{{ t.general }}</h2>
 function getFormData() {
     var form = document.getElementById('settings-form');
     var data = {};
-    form.querySelectorAll('input:not(#theme-check), select').forEach(function(inp) {
+    form.querySelectorAll('input:not(#theme-check):not(#isp_other_input), select:not(#isp_select)').forEach(function(inp) {
         if (SECRET_FIELDS.indexOf(inp.name) !== -1) {
             data[inp.name] = inp.value || MASK;
         } else {
             data[inp.name] = inp.value;
         }
     });
+    var ispSel = document.getElementById('isp_select');
+    if (ispSel.value === '__other__') {
+        data.isp_name = document.getElementById('isp_other_input').value;
+    } else {
+        data.isp_name = ispSel.value;
+    }
     data.theme = themeCheck.checked ? 'dark' : 'light';
     return data;
 }

app/templates/setup.html

@@ -92,7 +92,7 @@
             color: var(--muted);
             margin-bottom: 4px;
         }
-        .form-row input {
+        .form-row input, .form-row select {
             background: var(--input-bg);
             border: 1px solid var(--input-border);
             border-radius: 4px;
@@ -101,7 +101,7 @@
             font-size: 0.95em;
             font-family: inherit;
         }
-        .form-row input:focus { outline: none; border-color: var(--accent); }
+        .form-row input:focus, .form-row select:focus { outline: none; border-color: var(--accent); }
         .form-row .hint { font-size: 0.8em; color: var(--muted); margin-top: 2px; }
         .form-grid {
             display: grid;
@@ -219,11 +219,21 @@ <h2><span class="step-num">1</span>{{ t.fritz_connection }}</h2>
     <div class="section">
         <h2><span class="step-num">2</span>{{ t.general }}</h2>
         <div class="form-grid">
-            <div class="form-row full">
-                <label for="isp_name">{{ t.isp_name }}</label>
-                <input type="text" id="isp_name" name="isp_name" value="{{ config.isp_name }}" placeholder="e.g. Vodafone, Telekom, O2">
+            <div class="form-row">
+                <label for="isp_select">{{ t.isp_name }}</label>
+                <select id="isp_select" onchange="onIspChange()">
+                    <option value="">{{ t.isp_select }}</option>
+                    {% for isp in t.isp_options %}
+                    <option value="{{ isp }}" {% if config.isp_name == isp %}selected{% endif %}>{{ isp }}</option>
+                    {% endfor %}
+                    <option value="__other__" {% if config.isp_name and config.isp_name not in t.isp_options %}selected{% endif %}>{{ t.isp_other }}</option>
+                </select>
                 <span class="hint">{{ t.isp_hint }}</span>
             </div>
+            <div class="form-row" id="isp-other-row" style="display:{% if config.isp_name and config.isp_name not in t.isp_options %}block{% else %}none{% endif %}">
+                <label for="isp_other_input">{{ t.isp_other }}</label>
+                <input type="text" id="isp_other_input" value="{% if config.isp_name and config.isp_name not in t.isp_options %}{{ config.isp_name }}{% endif %}" placeholder="{{ t.isp_other_placeholder }}">
+            </div>
             <div class="form-row">
                 <label for="poll_interval">{{ t.interval_sec }}</label>
                 <input type="number" id="poll_interval" name="poll_interval" value="{{ config.poll_interval }}" min="{{ poll_min }}" max="{{ poll_max }}">
@@ -288,6 +298,12 @@ <h2>{{ t.mqtt_broker }}</h2>
 <script>
 var T = {{ t|tojson }};
 
+function onIspChange() {
+    var sel = document.getElementById('isp_select');
+    var row = document.getElementById('isp-other-row');
+    row.style.display = sel.value === '__other__' ? 'block' : 'none';
+}
+
 function toggleAdvanced() {
     var toggle = document.getElementById('mqtt-toggle');
     var section = document.getElementById('mqtt-section');
@@ -309,6 +325,12 @@ <h2>{{ t.mqtt_broker }}</h2>
             data[inp.name] = inp.value;
         }
     });
+    var ispSel = document.getElementById('isp_select');
+    if (ispSel.value === '__other__') {
+        data.isp_name = document.getElementById('isp_other_input').value;
+    } else {
+        data.isp_name = ispSel.value;
+    }
     data.language = '{{ lang }}';
     return data;
 }