mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-08-02 17:28:05 +00:00
Claude
58a28f3a14
Help users quickly find settings and understand how each one works. Tooltips: a new delegated controller (static/v3/js/tooltips.js) drives an accessible (i) info tooltip that appears on hover, keyboard focus, and tap. A shared `help_tip` Jinja macro (partials/_macros.html) emits the trigger; the plugin config macro and the core settings partials now surface help text through it. Per the design, the always-visible field help paragraphs are folded into the tooltip to declutter the forms, and the hardware/display settings carry authored detail (default, range, recommendation). Search: a global header search box finds settings across every settings tab — even ones not yet opened — via a lazy client-side index built by scanning the same field markup (static/v3/js/settings-search.js). Selecting a result switches tabs, waits for the field to load, then scrolls to and flashes it. A per-tab filter box hides non-matching fields on the current tab. Plugin settings get tooltips for free by reusing each field's schema `description`; every settings field also gets a stable `setting-<tab>-<key>` anchor id for search navigation. Styling uses the existing --color-* theme vars so light/dark mode both work, and honors prefers-reduced-motion. Adds Flask render smoke tests that assert each settings partial ships tooltips, anchors, and a filter box. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014gZxznuxw8L92FUMBN3Nqz
181 lines
10 KiB
HTML
181 lines
10 KiB
HTML
{% import 'v3/partials/_macros.html' as ui %}
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="border-b border-gray-200 pb-4 mb-6">
|
|
<h2 class="text-lg font-semibold text-gray-900">General Settings</h2>
|
|
<p class="mt-1 text-sm text-gray-600">Configure general system settings and location information.</p>
|
|
</div>
|
|
|
|
{{ ui.settings_filter() }}
|
|
|
|
<form hx-post="/api/v3/config/main"
|
|
hx-ext="json-enc"
|
|
hx-headers='{"Content-Type": "application/json"}'
|
|
hx-swap="none"
|
|
hx-on:htmx:after-request="
|
|
var xhr = event.detail.xhr;
|
|
var isSuccess = xhr.status >= 200 && xhr.status < 300;
|
|
var message = '';
|
|
var status = 'success';
|
|
try {
|
|
var data = JSON.parse(xhr.responseText);
|
|
message = data.message || '';
|
|
status = data.status || status;
|
|
} catch (e) {}
|
|
if (isSuccess) {
|
|
message = message || 'Settings saved';
|
|
} else {
|
|
message = message || 'Failed to save settings';
|
|
status = 'error';
|
|
}
|
|
showNotification(message, status);
|
|
"
|
|
class="space-y-6">
|
|
|
|
<!-- Web Display Autostart -->
|
|
<div class="form-group" id="setting-general-web_display_autostart" data-setting-key="web_display_autostart">
|
|
<label class="flex items-center">
|
|
<input type="checkbox"
|
|
name="web_display_autostart"
|
|
value="true"
|
|
{% if main_config.web_display_autostart %}checked{% endif %}
|
|
class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
|
<span class="ml-2 text-sm font-medium text-gray-900">Web Display Autostart</span>
|
|
{{ ui.help_tip('Automatically start the web interface when the device boots.\nDefault: on. Turn off if you launch the web UI manually or run headless.', 'Web Display Autostart') }}
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Timezone -->
|
|
<div class="form-group" id="setting-general-timezone" data-setting-key="timezone">
|
|
<label for="timezone" class="block text-sm font-medium text-gray-700">Timezone{{ ui.help_tip('Time zone used for clocks, schedules, and time-based content.\nChoose the zone where the display physically lives so on/off schedules fire at the correct local time.', 'Timezone') }}</label>
|
|
<div id="timezone_container" class="mt-1"></div>
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
// Track if already initialized to prevent re-render
|
|
if (window.__timezoneWidgetInitialized) return;
|
|
|
|
function initTimezoneWidget() {
|
|
if (!window.LEDMatrixWidgets) { setTimeout(initTimezoneWidget, 50); return; }
|
|
var widget = window.LEDMatrixWidgets.get('timezone-selector');
|
|
if (!widget) { setTimeout(initTimezoneWidget, 50); return; }
|
|
var container = document.getElementById('timezone_container');
|
|
if (!container) return;
|
|
|
|
// Only render if container is empty (not already rendered)
|
|
if (container.children.length > 0) return;
|
|
|
|
widget.render(container, {
|
|
'x-options': { showOffset: true, placeholder: 'Select your timezone...' }
|
|
}, {{ (main_config.timezone or "America/Chicago")|tojson }}, {
|
|
fieldId: 'timezone',
|
|
name: 'timezone'
|
|
});
|
|
window.__timezoneWidgetInitialized = true;
|
|
}
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initTimezoneWidget);
|
|
} else {
|
|
setTimeout(initTimezoneWidget, 50);
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<!-- Location Information -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 gap-4">
|
|
<div class="form-group" id="setting-general-city" data-setting-key="location.city">
|
|
<label for="city" class="block text-sm font-medium text-gray-700">City{{ ui.help_tip('City used for weather, sunrise/sunset, and other location-based content.\nExample: Dallas.', 'City') }}</label>
|
|
<input type="text"
|
|
id="city"
|
|
name="city"
|
|
value="{{ main_config.location.city or 'Dallas' }}"
|
|
class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group" id="setting-general-state" data-setting-key="location.state">
|
|
<label for="state" class="block text-sm font-medium text-gray-700">State{{ ui.help_tip('State or region for your location.\nExample: Texas. Improves location-lookup accuracy.', 'State') }}</label>
|
|
<input type="text"
|
|
id="state"
|
|
name="state"
|
|
value="{{ main_config.location.state or 'Texas' }}"
|
|
class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group" id="setting-general-country" data-setting-key="location.country">
|
|
<label for="country" class="block text-sm font-medium text-gray-700">Country{{ ui.help_tip('Country code or name for your location.\nExample: US. Used with City and State for weather and geolocation.', 'Country') }}</label>
|
|
<input type="text"
|
|
id="country"
|
|
name="country"
|
|
value="{{ main_config.location.country or 'US' }}"
|
|
class="form-control">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plugin System Settings -->
|
|
<div class="border-t border-gray-200 pt-6 mt-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Plugin System Settings</h3>
|
|
<p class="text-sm text-gray-600 mb-4">Configure the core plugin system behavior.</p>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Auto Discover -->
|
|
<div class="form-group" id="setting-general-auto_discover" data-setting-key="plugin_system.auto_discover">
|
|
<label class="flex items-center">
|
|
<input type="checkbox"
|
|
name="auto_discover"
|
|
value="true"
|
|
{% if main_config.get('plugin_system', {}).get('auto_discover', True) %}checked{% endif %}
|
|
class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
|
<span class="ml-2 text-sm font-medium text-gray-900">Auto Discover Plugins</span>
|
|
{{ ui.help_tip('Scan the plugins directory for installed plugins each time the service starts.\nDefault: on. Leave on unless you manage plugins manually.', 'Auto Discover Plugins') }}
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Auto Load Enabled -->
|
|
<div class="form-group" id="setting-general-auto_load_enabled" data-setting-key="plugin_system.auto_load_enabled">
|
|
<label class="flex items-center">
|
|
<input type="checkbox"
|
|
name="auto_load_enabled"
|
|
value="true"
|
|
{% if main_config.get('plugin_system', {}).get('auto_load_enabled', True) %}checked{% endif %}
|
|
class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
|
<span class="ml-2 text-sm font-medium text-gray-900">Auto Load Enabled Plugins</span>
|
|
{{ ui.help_tip('Load every plugin marked enabled in the configuration at startup.\nDefault: on. Turn off to keep plugins installed but dormant.', 'Auto Load Enabled Plugins') }}
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Development Mode -->
|
|
<div class="form-group" id="setting-general-development_mode" data-setting-key="plugin_system.development_mode">
|
|
<label class="flex items-center">
|
|
<input type="checkbox"
|
|
name="development_mode"
|
|
value="true"
|
|
{% if main_config.get('plugin_system', {}).get('development_mode', False) %}checked{% endif %}
|
|
class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
|
<span class="ml-2 text-sm font-medium text-gray-900">Development Mode</span>
|
|
{{ ui.help_tip('Enable verbose logging and developer features for plugin debugging.\nDefault: off. Keep off for normal use — it increases log volume.', 'Development Mode') }}
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Plugins Directory -->
|
|
<div class="form-group" id="setting-general-plugins_directory" data-setting-key="plugin_system.plugins_directory">
|
|
<label for="plugins_directory" class="block text-sm font-medium text-gray-700">Plugins Directory{{ ui.help_tip('Folder (relative to the project root) where plugins are stored.\nDefault: plugin-repos. Only change this if you keep plugins in a custom location.', 'Plugins Directory') }}</label>
|
|
<input type="text"
|
|
id="plugins_directory"
|
|
name="plugins_directory"
|
|
value="{{ main_config.get('plugin_system', {}).get('plugins_directory', 'plugin-repos') }}"
|
|
placeholder="plugin-repos"
|
|
class="form-control">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div class="flex justify-end mt-6">
|
|
<button type="submit"
|
|
class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
|
|
<i class="fas fa-save mr-2"></i>
|
|
Save General Settings
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|