# modals


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

------------------------------------------------------------------------

<a
href="https://github.com/cj-mills/cjm-fasthtml-sysmon/blob/main/cjm_fasthtml_sysmon/components/modals.py#L31"
target="_blank" style="float:right; font-size:smaller">source</a>

### render_settings_modal

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

*Render the settings modal for configuring refresh intervals.*

<table>
<colgroup>
<col style="width: 6%" />
<col style="width: 25%" />
<col style="width: 34%" />
<col style="width: 34%" />
</colgroup>
<thead>
<tr>
<th></th>
<th><strong>Type</strong></th>
<th><strong>Default</strong></th>
<th><strong>Details</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>refresh_intervals</td>
<td>dict</td>
<td></td>
<td>Dictionary containing refresh interval values for each
component</td>
</tr>
<tr>
<td>post_rt</td>
<td>str</td>
<td>/update_intervals</td>
<td>Target route path</td>
</tr>
<tr>
<td><strong>Returns</strong></td>
<td><strong>FT</strong></td>
<td></td>
<td><strong>A Dialog element containing the settings modal</strong></td>
</tr>
</tbody>
</table>

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

render_settings_modal(refresh_intervals=refresh_intervals)
```

``` html
<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>
```