modals

Modal components for configuring system monitoring refresh intervals.

render_settings_modal

 render_settings_modal (refresh_intervals:dict,
                        post_rt:str='/update_intervals')

Render the settings modal for configuring refresh intervals.

	Type	Default	Details
refresh_intervals	dict		Dictionary containing refresh interval values for each component
post_rt	str	/update_intervals	Target route path
Returns	FT		A Dialog element containing the settings modal

refresh_intervals = {
    'cpu': 2,
    'memory': 2,
    'disk': 10,
    'network': 2,
    'process': 5,
    'gpu': 2,
    'temperature': 5
}

render_settings_modal(refresh_intervals=refresh_intervals)

<dialog id="settings_modal" class="modal">  <div class="modal-box w-11/12 max-w-2xl">
<form enctype="multipart/form-data" method="dialog"><button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button></form>    <h3 class="text-lg font-bold mb-4">Refresh Interval Settings</h3>
    <p class="text-base-content text-sm mb-6">Adjust the refresh intervals for each component (in seconds)</p>
    <div class="mb-6">
      <div class="mb-4">
<label class="label flex justify-between mb-2"><span class="font-medium">CPU</span><span id="cpu-interval-value" class="text-primary font-medium">2s</span></label>        <input type="range" min="1" max="30" value="2" oninput="document.getElementById('cpu-interval-value').textContent = this.value + 's'" id="cpu-interval" class="range range-primary w-full" name="cpu-interval">
      </div>
      <div class="mb-4">
<label class="label flex justify-between mb-2"><span class="font-medium">Memory</span><span id="memory-interval-value" class="text-primary font-medium">2s</span></label>        <input type="range" min="1" max="30" value="2" oninput="document.getElementById('memory-interval-value').textContent = this.value + 's'" id="memory-interval" class="range range-primary w-full" name="memory-interval">
      </div>
      <div class="mb-4">
<label class="label flex justify-between mb-2"><span class="font-medium">Disk</span><span id="disk-interval-value" class="text-primary font-medium">10s</span></label>        <input type="range" min="5" max="60" value="10" oninput="document.getElementById('disk-interval-value').textContent = this.value + 's'" id="disk-interval" class="range range-primary w-full" name="disk-interval">
      </div>
      <div class="mb-4">
<label class="label flex justify-between mb-2"><span class="font-medium">Network</span><span id="network-interval-value" class="text-primary font-medium">2s</span></label>        <input type="range" min="1" max="30" value="2" oninput="document.getElementById('network-interval-value').textContent = this.value + 's'" id="network-interval" class="range range-primary w-full" name="network-interval">
      </div>
      <div class="mb-4">
<label class="label flex justify-between mb-2"><span class="font-medium">Processes</span><span id="process-interval-value" class="text-primary font-medium">5s</span></label>        <input type="range" min="2" max="60" value="5" oninput="document.getElementById('process-interval-value').textContent = this.value + 's'" id="process-interval" class="range range-primary w-full" name="process-interval">
      </div>
      <div class="mb-4">
<label class="label flex justify-between mb-2"><span class="font-medium">GPU</span><span id="gpu-interval-value" class="text-primary font-medium">2s</span></label>        <input type="range" min="1" max="30" value="2" oninput="document.getElementById('gpu-interval-value').textContent = this.value + 's'" id="gpu-interval" class="range range-primary w-full" name="gpu-interval">
      </div>
      <div class="mb-4">
<label class="label flex justify-between mb-2"><span class="font-medium">Temperature</span><span id="temperature-interval-value" class="text-primary font-medium">5s</span></label>        <input type="range" min="2" max="60" value="5" oninput="document.getElementById('temperature-interval-value').textContent = this.value + 's'" id="temperature-interval" class="range range-primary w-full" name="temperature-interval">
      </div>
    </div>
    <div class="modal-action gap-2">
<button hx-post="/update_intervals" hx-swap="none" hx-vals="js:{cpu: document.getElementById('cpu-interval').value, memory: document.getElementById('memory-interval').value, disk: document.getElementById('disk-interval').value, network: document.getElementById('network-interval').value, process: document.getElementById('process-interval').value, gpu: document.getElementById('gpu-interval').value, temperature: document.getElementById('temperature-interval').value}" class="btn btn-primary">Apply</button><form enctype="multipart/form-data" method="dialog" class="inline"><button class="btn btn-ghost">Cancel</button></form>    </div>
  </div>
</dialog>