+
+
+
+
+
+
+
+Device settings
+
+ Edit the identity synced to the Pi for {{ configured_device_name }}.
+
+
+{% endblock %}
+
+{% block scripts %}
+
+{% endblock %}
diff --git a/static/js/portal-device-settings.js b/static/js/portal-device-settings.js
new file mode 100644
index 0000000..5b1d8e0
--- /dev/null
+++ b/static/js/portal-device-settings.js
@@ -0,0 +1,121 @@
+const form = document.getElementById('device-settings-form');
+const saveButton = document.getElementById('device-settings-save');
+const message = document.getElementById('device-settings-message');
+const configVersion = document.getElementById('config-version');
+const avatarPreview = document.getElementById('avatar-preview');
+const previewCaption = document.getElementById('preview-caption');
+
+const fields = {
+ owner_name: document.getElementById('owner_name'),
+ car_model: document.getElementById('car_model'),
+ device_name: document.getElementById('device_name'),
+ avatar_path: document.getElementById('avatar_path'),
+};
+
+let initialState = null;
+
+function showMessage(text, kind) {
+ message.className = `alert alert-${kind}`;
+ message.textContent = text;
+ message.hidden = false;
+}
+
+function hideMessage() {
+ message.hidden = true;
+}
+
+function currentState() {
+ return {
+ owner_name: fields.owner_name.value.trim(),
+ car_model: fields.car_model.value.trim(),
+ device_name: fields.device_name.value.trim(),
+ avatar_path: fields.avatar_path.value.trim(),
+ };
+}
+
+function avatarUrl(path) {
+ if (!path) return '/static/img/yaris.png';
+ if (/^https?:\/\//.test(path)) return path;
+ return `/static/${path.replace(/^\/+/, '')}`;
+}
+
+function updatePreview() {
+ const state = currentState();
+ avatarPreview.src = avatarUrl(state.avatar_path);
+ previewCaption.textContent = state.owner_name && state.car_model
+ ? `${state.owner_name} • ${state.car_model}`
+ : 'Preview updates as you type.';
+}
+
+function updateDirtyState() {
+ if (!initialState) {
+ saveButton.disabled = true;
+ return;
+ }
+ saveButton.disabled = JSON.stringify(currentState()) === JSON.stringify(initialState);
+}
+
+function populate(config) {
+ fields.owner_name.value = config.owner_name || '';
+ fields.car_model.value = config.car_model || '';
+ fields.device_name.value = config.device_name || '';
+ fields.avatar_path.value = config.avatar_path || '';
+ configVersion.textContent = config.config_version ?? '—';
+ initialState = currentState();
+ updatePreview();
+ updateDirtyState();
+}
+
+async function loadConfig() {
+ try {
+ const response = await fetch('/api/v1/portal/device-config');
+ const payload = await response.json();
+ if (!response.ok) {
+ throw new Error(payload.error || 'Could not load device config.');
+ }
+ populate(payload);
+ } catch (error) {
+ showMessage(error.message, 'danger');
+ }
+}
+
+async function saveConfig(event) {
+ event.preventDefault();
+ hideMessage();
+ saveButton.disabled = true;
+
+ try {
+ const response = await fetch('/api/device-config', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(currentState()),
+ });
+ const payload = await response.json();
+ if (!response.ok) {
+ const detail = payload.fields
+ ? Object.values(payload.fields).join(' ')
+ : (payload.error || 'Could not save device config.');
+ throw new Error(detail);
+ }
+ populate(payload);
+ showMessage('Device settings saved. The Pi will pick them up on its next sync.', 'success');
+ } catch (error) {
+ showMessage(error.message, 'danger');
+ updateDirtyState();
+ }
+}
+
+for (const field of Object.values(fields)) {
+ field.addEventListener('input', () => {
+ hideMessage();
+ updatePreview();
+ updateDirtyState();
+ });
+}
+
+avatarPreview.addEventListener('error', () => {
+ previewCaption.textContent = 'Preview image not found on the server static path.';
+});
+
+form.addEventListener('submit', saveConfig);
+loadConfig();
diff --git a/tests/test_app_device_config_runtime.py b/tests/test_app_device_config_runtime.py
new file mode 100644
index 0000000..af0a1a8
--- /dev/null
+++ b/tests/test_app_device_config_runtime.py
@@ -0,0 +1,60 @@
+import unittest
+from unittest.mock import Mock, patch
+
+from modules import app_account, app_car, app_device_sync
+
+
+class RuntimeDeviceConfigReloadTest(unittest.TestCase):
+ @patch.object(app_account.Account, "_load_config", return_value={})
+ @patch("modules.app_device_config.get_device_config")
+ def test_account_reload_runtime_config_uses_live_settings(
+ self,
+ get_device_config,
+ _load_config,
+ ):
+ account = app_account.Account()
+ get_device_config.return_value = {
+ "owner_name": "alice",
+ "avatar_path": "img/alice.png",
+ }
+
+ account.reload_runtime_config()
+
+ self.assertEqual(account.name, "alice")
+ self.assertEqual(account.avatar_path, "img/alice.png")
+
+ @patch.object(app_car.Car, "_load_config", return_value={})
+ @patch("modules.app_device_config.get_device_config")
+ def test_car_reload_runtime_config_uses_live_settings(
+ self,
+ get_device_config,
+ _load_config,
+ ):
+ car = app_car.Car()
+ get_device_config.return_value = {
+ "car_model": "Corolla",
+ "device_name": "Garage Pi",
+ }
+
+ car.reload_runtime_config()
+
+ self.assertEqual(car.model, "Corolla")
+ self.assertEqual(car.device_name, "Garage Pi")
+
+
+class DeviceSyncReloadCallbackTest(unittest.TestCase):
+ def test_on_config_changed_calls_registered_callback(self):
+ callback = Mock()
+ original = app_device_sync._RELOAD_CALLBACK
+ try:
+ app_device_sync.register_reload_callback(callback)
+
+ app_device_sync._on_config_changed()
+
+ callback.assert_called_once_with()
+ finally:
+ app_device_sync._RELOAD_CALLBACK = original
+
+
+if __name__ == "__main__":
+ unittest.main()
+
+
+
+
+
+
+ Synced identity
+
+
+
+
+
+
+
+
+
+
+ Sync behavior
+
+
+ + The Pi picks these values up on its next successful internet-backed sync. +
+-
+
- Expected propagation delay: up to ~5 minutes while online. +
- The Pi must have Sync with server enabled locally. +
- Offline cars keep the last synced config until connectivity returns. +
+
+
+
+ Preview
+
+  }})
+
+
+ Config version
+ —
+ Preview updates as you type.
+