First commit with entire first rendition of the project

spectra/web/templates/settings.html

@@ -0,0 +1,141 @@
+{% extends "base.html" %}
+{% block title %}Settings{% endblock %}
+
+{% block content %}
+<h1>Settings</h1>
+
+<div class="grid">
+  <article>
+    <header>Unsplash</header>
+
+    <form hx-put="/api/config/unsplash/access_key" hx-target="#unsplash-result" hx-swap="innerHTML">
+      <label for="access-key">Access Key</label>
+      <input type="text" id="access-key" name="value"
+             placeholder="Enter your Unsplash API key"
+             value="{{ config.get('unsplash', {}).get('access_key', '') }}">
+      <button type="submit">Save</button>
+    </form>
+
+    <form hx-put="/api/config/unsplash/query" hx-target="#unsplash-result" hx-swap="innerHTML">
+      <label for="query">Search Query</label>
+      <input type="text" id="query" name="value" placeholder="nature, architecture, ..."
+             value="{{ config.get('unsplash', {}).get('query', '') }}">
+      <button type="submit">Save</button>
+    </form>
+
+    <form hx-put="/api/config/unsplash/collections" hx-target="#unsplash-result" hx-swap="innerHTML">
+      <label for="collections">Collection IDs</label>
+      <input type="text" id="collections" name="value" placeholder="Comma-separated IDs"
+             value="{{ config.get('unsplash', {}).get('collections', '') }}">
+      <button type="submit">Save</button>
+    </form>
+
+    <p id="unsplash-result"></p>
+  </article>
+
+  <article>
+    <header>Display</header>
+
+    <form hx-put="/api/config/display/saturation" hx-target="#saturation-result" hx-swap="innerHTML">
+      <label for="saturation">
+        Saturation
+        <output id="saturation-value" style="display:inline-block; min-width:3rem;">
+          {{ config.get('display', {}).get('saturation', 0.5) }}
+        </output>
+      </label>
+      <input type="range" id="saturation" name="value"
+             min="0" max="1" step="0.05"
+             value="{{ config.get('display', {}).get('saturation', 0.5) }}"
+             oninput="document.getElementById('saturation-value').textContent = this.value">
+      <button type="submit">Save</button>
+    </form>
+
+    <form hx-put="/api/config/display/orientation" hx-target="#orientation-result" hx-swap="innerHTML">
+      <label for="orientation">Display Orientation</label>
+      <select id="orientation" name="value">
+        {% set orient = config.get('display', {}).get('orientation', 0) %}
+        <option value="0" {{ 'selected' if orient == 0 }}>0° (Landscape)</option>
+        <option value="90" {{ 'selected' if orient == 90 }}>90° (Portrait)</option>
+        <option value="180" {{ 'selected' if orient == 180 }}>180° (Landscape)</option>
+        <option value="270" {{ 'selected' if orient == 270 }}>270° (Portrait)</option>
+      </select>
+      <button type="submit">Save</button>
+    </form>
+
+    <p id="orientation-result"></p>
+    <p id="saturation-result"></p>
+  </article>
+
+  <article>
+    <header>Schedule</header>
+
+    <form hx-put="/api/config/schedule/interval_hours" hx-target="#schedule-result" hx-swap="innerHTML">
+      <label for="interval">Interval (hours)</label>
+      <input type="number" id="interval" name="value" min="0.5" step="0.5"
+             value="{{ config.get('schedule', {}).get('interval_hours', 1) }}">
+      <button type="submit">Save</button>
+    </form>
+
+    <form hx-put="/api/config/schedule/random_delay_seconds" hx-target="#schedule-result" hx-swap="innerHTML">
+      <label for="delay">Random delay (seconds)</label>
+      <input type="number" id="delay" name="value" min="0" step="10"
+             value="{{ config.get('schedule', {}).get('random_delay_seconds', 300) }}">
+      <button type="submit">Save</button>
+    </form>
+
+    <p id="schedule-result"></p>
+  </article>
+
+  <article>
+    <header>MQTT</header>
+
+    <form hx-put="/api/config/mqtt/enabled" hx-target="#mqtt-result" hx-swap="innerHTML">
+      <label>
+        <input type="hidden" name="value" value="false">
+        <input type="checkbox" id="mqtt-enabled" name="value" value="true"
+               {{ 'checked' if config.get('mqtt', {}).get('enabled', False) }}>
+        Enable MQTT
+      </label>
+      <button type="submit">Save</button>
+    </form>
+
+    <form hx-put="/api/config/mqtt/broker" hx-target="#mqtt-result" hx-swap="innerHTML">
+      <label for="mqtt-broker">Broker</label>
+      <input type="text" id="mqtt-broker" name="value"
+             value="{{ config.get('mqtt', {}).get('broker', 'localhost') }}">
+      <button type="submit">Save</button>
+    </form>
+
+    <form hx-put="/api/config/mqtt/port" hx-target="#mqtt-result" hx-swap="innerHTML">
+      <label for="mqtt-port">Port</label>
+      <input type="number" id="mqtt-port" name="value" min="1" max="65535"
+             value="{{ config.get('mqtt', {}).get('port', 1883) }}">
+      <button type="submit">Save</button>
+    </form>
+
+    <form hx-put="/api/config/mqtt/topic_prefix" hx-target="#mqtt-result" hx-swap="innerHTML">
+      <label for="mqtt-prefix">Topic prefix</label>
+      <input type="text" id="mqtt-prefix" name="value"
+             value="{{ config.get('mqtt', {}).get('topic_prefix', 'spectra') }}">
+      <button type="submit">Save</button>
+    </form>
+
+    <form hx-put="/api/config/mqtt/username" hx-target="#mqtt-result" hx-swap="innerHTML">
+      <label for="mqtt-username">Username</label>
+      <input type="text" id="mqtt-username" name="value"
+             value="{{ config.get('mqtt', {}).get('username', '') }}">
+      <button type="submit">Save</button>
+    </form>
+
+    <form hx-put="/api/config/mqtt/password" hx-target="#mqtt-result" hx-swap="innerHTML">
+      <label for="mqtt-password">Password</label>
+      <input type="password" id="mqtt-password" name="value"
+             value="{{ config.get('mqtt', {}).get('password', '') }}">
+      <button type="submit">Save</button>
+    </form>
+
+    <p id="mqtt-result"></p>
+    <p><small>See <a href="/docs/mqtt.md">MQTT docs</a> for available commands and status topics.</small></p>
+  </article>
+</div>
+{% endblock %}