Skip to content

Commit 53d492b

Browse files
itsDNNSclaude
itsDNNS
and
claude
committed
Remove ISP color badges, revert to plain select dropdown
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 3d59b2b commit 53d492b

File tree

4 files changed

+34
-200
lines changed

4 files changed

+34
-200
lines changed

‎app/i18n/__init__.py‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,6 @@
77
_TRANSLATIONS = {}
88
LANGUAGES = {}
99

10-
# ISP brand colors for visual indicator dot
11-
ISP_COLORS = {
12-
"Vodafone": "#e60000",
13-
"PYUR": "#512d6d",
14-
"eazy": "#00b900",
15-
"NetCologne": "#ec1c24",
16-
"SFR": "#e2001a",
17-
"Euskaltel": "#e30613",
18-
"R": "#ff6600",
19-
"Telecable": "#0066b3",
20-
}
21-
2210
# Load all *.json files in this directory
2311
for _fname in sorted(os.listdir(_DIR)):
2412
if not _fname.endswith(".json"):

‎app/templates/settings.html‎

Lines changed: 16 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -131,31 +131,6 @@
131131
color: var(--crit); padding: 10px; border-radius: 6px;
132132
margin-bottom: 16px; display: none;
133133
}
134-
.isp-dropdown { position: relative; }
135-
.isp-selected {
136-
display: flex; align-items: center; gap: 8px;
137-
background: var(--input-bg); border: 1px solid var(--input-border);
138-
border-radius: 4px; padding: 8px 10px; cursor: pointer;
139-
font-size: 0.95em; font-family: inherit; color: var(--text);
140-
}
141-
.isp-selected:hover { border-color: var(--accent); }
142-
.isp-selected .isp-arrow { margin-left: auto; font-size: 0.8em; color: var(--muted); }
143-
.isp-options {
144-
display: none; position: absolute; top: 100%; left: 0; right: 0;
145-
background: var(--input-bg); border: 1px solid var(--input-border);
146-
border-radius: 4px; margin-top: 2px; z-index: 50;
147-
max-height: 240px; overflow-y: auto;
148-
}
149-
.isp-options.open { display: block; }
150-
.isp-option {
151-
display: flex; align-items: center; gap: 8px;
152-
padding: 8px 10px; cursor: pointer; font-size: 0.95em;
153-
}
154-
.isp-option:hover { background: var(--card); }
155-
.isp-badge {
156-
display: inline-block; width: 10px; height: 10px;
157-
border-radius: 3px; flex-shrink: 0;
158-
}
159134
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
160135
</style>
161136
</head>
@@ -237,29 +212,14 @@ <h2>{{ t.mqtt_broker }} <span style="font-size:0.75em; font-weight:normal; color
237212
<h2>{{ t.general }}</h2>
238213
<div class="form-grid">
239214
<div class="form-row">
240-
<label>{{ t.isp_name }}</label>
241-
<div class="isp-dropdown" id="isp-dropdown">
242-
<div class="isp-selected" id="isp-selected" onclick="toggleIspDropdown()">
243-
<span class="isp-badge" id="isp-sel-badge"></span>
244-
<span class="isp-text" id="isp-sel-text">{{ t.isp_select }}</span>
245-
<span class="isp-arrow">&#9662;</span>
246-
</div>
247-
<div class="isp-options" id="isp-options">
248-
<div class="isp-option" data-value="" onclick="selectIsp(this)">
249-
<span class="isp-text">{{ t.isp_select }}</span>
250-
</div>
251-
{% for isp in t.isp_options %}
252-
<div class="isp-option" data-value="{{ isp }}" onclick="selectIsp(this)">
253-
{% if isp in isp_colors %}<span class="isp-badge" style="background:{{ isp_colors[isp] }}"></span>{% endif %}
254-
<span class="isp-text">{{ isp }}</span>
255-
</div>
256-
{% endfor %}
257-
<div class="isp-option" data-value="__other__" onclick="selectIsp(this)">
258-
<span class="isp-text">{{ t.isp_other }}</span>
259-
</div>
260-
</div>
261-
<input type="hidden" id="isp_value" value="{{ config.isp_name or '' }}">
262-
</div>
215+
<label for="isp_select">{{ t.isp_name }}</label>
216+
<select id="isp_select" name="isp_select" onchange="onIspChange()">
217+
<option value="">{{ t.isp_select }}</option>
218+
{% for isp in t.isp_options %}
219+
<option value="{{ isp }}" {% if config.isp_name == isp %}selected{% endif %}>{{ isp }}</option>
220+
{% endfor %}
221+
<option value="__other__" {% if config.isp_name and config.isp_name not in t.isp_options %}selected{% endif %}>{{ t.isp_other }}</option>
222+
</select>
263223
<span class="hint">{{ t.isp_hint }}</span>
264224
</div>
265225
<div class="form-row" id="isp-other-row" style="display:{% if config.isp_name and config.isp_name not in t.isp_options %}flex{% else %}none{% endif %}">
@@ -319,49 +279,12 @@ <h2>{{ t.general }}</h2>
319279
}
320280
})();
321281

322-
var ISP_COLORS = {{ isp_colors|tojson }};
323-
var ispOpen = false;
324-
325-
function toggleIspDropdown() {
326-
ispOpen = !ispOpen;
327-
document.getElementById('isp-options').classList.toggle('open', ispOpen);
328-
}
329-
330-
function selectIsp(el) {
331-
var val = el.getAttribute('data-value');
332-
document.getElementById('isp_value').value = val;
333-
var badge = document.getElementById('isp-sel-badge');
334-
var text = document.getElementById('isp-sel-text');
335-
var color = ISP_COLORS[val];
336-
badge.style.background = color || 'transparent';
337-
badge.style.display = color ? 'inline-block' : 'none';
338-
text.textContent = el.querySelector('.isp-text').textContent;
339-
ispOpen = false;
340-
document.getElementById('isp-options').classList.remove('open');
341-
document.getElementById('isp-other-row').style.display = val === '__other__' ? 'flex' : 'none';
282+
function onIspChange() {
283+
var sel = document.getElementById('isp_select');
284+
var row = document.getElementById('isp-other-row');
285+
row.style.display = sel.value === '__other__' ? 'flex' : 'none';
342286
}
343287

344-
document.addEventListener('click', function(e) {
345-
if (!e.target.closest('.isp-dropdown')) {
346-
ispOpen = false;
347-
document.getElementById('isp-options').classList.remove('open');
348-
}
349-
});
350-
351-
(function() {
352-
var val = document.getElementById('isp_value').value;
353-
if (!val) return;
354-
var opts = document.querySelectorAll('#isp-options .isp-option');
355-
var found = false;
356-
for (var i = 0; i < opts.length; i++) {
357-
if (opts[i].getAttribute('data-value') === val) { selectIsp(opts[i]); found = true; break; }
358-
}
359-
if (!found) {
360-
var other = document.querySelector('#isp-options .isp-option[data-value="__other__"]');
361-
selectIsp(other);
362-
}
363-
})();
364-
365288
function showToast(msg, ok) {
366289
var el = document.getElementById('toast');
367290
el.textContent = msg;
@@ -376,18 +299,18 @@ <h2>{{ t.general }}</h2>
376299
function getFormData() {
377300
var form = document.getElementById('settings-form');
378301
var data = {};
379-
form.querySelectorAll('input:not(#theme-check):not(#isp_other_input):not(#isp_value), select').forEach(function(inp) {
302+
form.querySelectorAll('input:not(#theme-check):not(#isp_other_input), select:not(#isp_select)').forEach(function(inp) {
380303
if (SECRET_FIELDS.indexOf(inp.name) !== -1) {
381304
data[inp.name] = inp.value || MASK;
382305
} else {
383306
data[inp.name] = inp.value;
384307
}
385308
});
386-
var ispVal = document.getElementById('isp_value').value;
387-
if (ispVal === '__other__') {
309+
var ispSel = document.getElementById('isp_select');
310+
if (ispSel.value === '__other__') {
388311
data.isp_name = document.getElementById('isp_other_input').value;
389312
} else {
390-
data.isp_name = ispVal;
313+
data.isp_name = ispSel.value;
391314
}
392315
data.theme = themeCheck.checked ? 'dark' : 'light';
393316
return data;

‎app/templates/setup.html‎

Lines changed: 15 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -171,31 +171,6 @@
171171
.advanced-toggle .adv-hint { font-size: 0.8em; color: var(--muted); margin-left: auto; }
172172
.advanced-content { display: none; }
173173
.advanced-content.open { display: block; }
174-
.isp-dropdown { position: relative; }
175-
.isp-selected {
176-
display: flex; align-items: center; gap: 8px;
177-
background: var(--input-bg); border: 1px solid var(--input-border);
178-
border-radius: 4px; padding: 8px 10px; cursor: pointer;
179-
font-size: 0.95em; font-family: inherit; color: var(--text);
180-
}
181-
.isp-selected:hover { border-color: var(--accent); }
182-
.isp-selected .isp-arrow { margin-left: auto; font-size: 0.8em; color: var(--muted); }
183-
.isp-options {
184-
display: none; position: absolute; top: 100%; left: 0; right: 0;
185-
background: var(--input-bg); border: 1px solid var(--input-border);
186-
border-radius: 4px; margin-top: 2px; z-index: 50;
187-
max-height: 240px; overflow-y: auto;
188-
}
189-
.isp-options.open { display: block; }
190-
.isp-option {
191-
display: flex; align-items: center; gap: 8px;
192-
padding: 8px 10px; cursor: pointer; font-size: 0.95em;
193-
}
194-
.isp-option:hover { background: var(--card); }
195-
.isp-badge {
196-
display: inline-block; width: 10px; height: 10px;
197-
border-radius: 3px; flex-shrink: 0;
198-
}
199174
@media (max-width: 600px) {
200175
.form-grid { grid-template-columns: 1fr; }
201176
.advanced-toggle .adv-hint { display: none; }
@@ -250,29 +225,14 @@ <h2><span class="step-num">1</span>{{ t.modem_connection }}</h2>
250225
<h2><span class="step-num">2</span>{{ t.general }}</h2>
251226
<div class="form-grid">
252227
<div class="form-row">
253-
<label>{{ t.isp_name }}</label>
254-
<div class="isp-dropdown" id="isp-dropdown">
255-
<div class="isp-selected" id="isp-selected" onclick="toggleIspDropdown()">
256-
<span class="isp-badge" id="isp-sel-badge"></span>
257-
<span class="isp-text" id="isp-sel-text">{{ t.isp_select }}</span>
258-
<span class="isp-arrow">&#9662;</span>
259-
</div>
260-
<div class="isp-options" id="isp-options">
261-
<div class="isp-option" data-value="" onclick="selectIsp(this)">
262-
<span class="isp-text">{{ t.isp_select }}</span>
263-
</div>
264-
{% for isp in t.isp_options %}
265-
<div class="isp-option" data-value="{{ isp }}" onclick="selectIsp(this)">
266-
{% if isp in isp_colors %}<span class="isp-badge" style="background:{{ isp_colors[isp] }}"></span>{% endif %}
267-
<span class="isp-text">{{ isp }}</span>
268-
</div>
269-
{% endfor %}
270-
<div class="isp-option" data-value="__other__" onclick="selectIsp(this)">
271-
<span class="isp-text">{{ t.isp_other }}</span>
272-
</div>
273-
</div>
274-
<input type="hidden" id="isp_value" value="{{ config.isp_name or '' }}">
275-
</div>
228+
<label for="isp_select">{{ t.isp_name }}</label>
229+
<select id="isp_select" onchange="onIspChange()">
230+
<option value="">{{ t.isp_select }}</option>
231+
{% for isp in t.isp_options %}
232+
<option value="{{ isp }}" {% if config.isp_name == isp %}selected{% endif %}>{{ isp }}</option>
233+
{% endfor %}
234+
<option value="__other__" {% if config.isp_name and config.isp_name not in t.isp_options %}selected{% endif %}>{{ t.isp_other }}</option>
235+
</select>
276236
<span class="hint">{{ t.isp_hint }}</span>
277237
</div>
278238
<div class="form-row" id="isp-other-row" style="display:{% if config.isp_name and config.isp_name not in t.isp_options %}flex{% else %}none{% endif %}">
@@ -343,49 +303,12 @@ <h2>{{ t.mqtt_broker }}</h2>
343303
<script>
344304
var T = {{ t|tojson }};
345305

346-
var ISP_COLORS = {{ isp_colors|tojson }};
347-
var ispOpen = false;
348-
349-
function toggleIspDropdown() {
350-
ispOpen = !ispOpen;
351-
document.getElementById('isp-options').classList.toggle('open', ispOpen);
352-
}
353-
354-
function selectIsp(el) {
355-
var val = el.getAttribute('data-value');
356-
document.getElementById('isp_value').value = val;
357-
var badge = document.getElementById('isp-sel-badge');
358-
var text = document.getElementById('isp-sel-text');
359-
var color = ISP_COLORS[val];
360-
badge.style.background = color || 'transparent';
361-
badge.style.display = color ? 'inline-block' : 'none';
362-
text.textContent = el.querySelector('.isp-text').textContent;
363-
ispOpen = false;
364-
document.getElementById('isp-options').classList.remove('open');
365-
document.getElementById('isp-other-row').style.display = val === '__other__' ? 'flex' : 'none';
306+
function onIspChange() {
307+
var sel = document.getElementById('isp_select');
308+
var row = document.getElementById('isp-other-row');
309+
row.style.display = sel.value === '__other__' ? 'flex' : 'none';
366310
}
367311

368-
document.addEventListener('click', function(e) {
369-
if (!e.target.closest('.isp-dropdown')) {
370-
ispOpen = false;
371-
document.getElementById('isp-options').classList.remove('open');
372-
}
373-
});
374-
375-
(function() {
376-
var val = document.getElementById('isp_value').value;
377-
if (!val) return;
378-
var opts = document.querySelectorAll('#isp-options .isp-option');
379-
var found = false;
380-
for (var i = 0; i < opts.length; i++) {
381-
if (opts[i].getAttribute('data-value') === val) { selectIsp(opts[i]); found = true; break; }
382-
}
383-
if (!found) {
384-
var other = document.querySelector('#isp-options .isp-option[data-value="__other__"]');
385-
selectIsp(other);
386-
}
387-
})();
388-
389312
function toggleAdvanced() {
390313
var toggle = document.getElementById('mqtt-toggle');
391314
var section = document.getElementById('mqtt-section');
@@ -407,11 +330,11 @@ <h2>{{ t.mqtt_broker }}</h2>
407330
data[inp.name] = inp.value;
408331
}
409332
});
410-
var ispVal = document.getElementById('isp_value').value;
411-
if (ispVal === '__other__') {
333+
var ispSel = document.getElementById('isp_select');
334+
if (ispSel.value === '__other__') {
412335
data.isp_name = document.getElementById('isp_other_input').value;
413336
} else {
414-
data.isp_name = ispVal;
337+
data.isp_name = ispSel.value;
415338
}
416339
data.language = '{{ lang }}';
417340
return data;

‎app/web.py‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
from werkzeug.security import check_password_hash
1313

1414
from .config import POLL_MIN, POLL_MAX, PASSWORD_MASK, SECRET_KEYS
15-
from .i18n import get_translations, LANGUAGES, ISP_COLORS
15+
from .i18n import get_translations, LANGUAGES
1616

1717
def _server_tz_info():
1818
"""Return server timezone name and UTC offset in minutes."""
@@ -224,7 +224,7 @@ def setup():
224224
lang = _get_lang()
225225
t = get_translations(lang)
226226
tz_name, tz_offset = _server_tz_info()
227-
return render_template("setup.html", config=config, poll_min=POLL_MIN, poll_max=POLL_MAX, t=t, lang=lang, languages=LANGUAGES, server_tz=tz_name, server_tz_offset=tz_offset, isp_colors=ISP_COLORS)
227+
return render_template("setup.html", config=config, poll_min=POLL_MIN, poll_max=POLL_MAX, t=t, lang=lang, languages=LANGUAGES, server_tz=tz_name, server_tz_offset=tz_offset)
228228

229229

230230
@app.route("/settings")
@@ -235,7 +235,7 @@ def settings():
235235
lang = _get_lang()
236236
t = get_translations(lang)
237237
tz_name, tz_offset = _server_tz_info()
238-
return render_template("settings.html", config=config, theme=theme, poll_min=POLL_MIN, poll_max=POLL_MAX, t=t, lang=lang, languages=LANGUAGES, server_tz=tz_name, server_tz_offset=tz_offset, isp_colors=ISP_COLORS)
238+
return render_template("settings.html", config=config, theme=theme, poll_min=POLL_MIN, poll_max=POLL_MAX, t=t, lang=lang, languages=LANGUAGES, server_tz=tz_name, server_tz_offset=tz_offset)
239239

240240

241241
@app.route("/api/config", methods=["POST"])

0 commit comments

Comments
 (0)