augie/webapp/lib/augie_web/live/servo_live.html.leex

<div class="card">
  <div class="card-divider">
    <h4><%= @driver_name %> Servo Driver</h4>
  </div>
  <div class="card-section">
    <%= if @connected do %>
      <%= if @state_known do %>
        <%= if @enabled do %>
          <button type="button" class="button primary expanded" phx-click="disable-servos">Disable Servos</button>
        <% else %>
          <button type="button" class="button alert expanded" phx-click="enable-servos">Enable Servos</button>
        <% end %>
      <% else %>
        <button type="button" class="button secondary expanded" disabled>Updating...</button>
      <% end  %>


      <%= for {id, servo} <- @servos do %>
        <div class="grid-x">
          <div class="call auto">
            <strong><%= servo.name %></strong>
          </div>
          <div class="cell auto text-right">
            <input id="servo_<%= id %>_enabled"
                  type="checkbox"
                  phx-click="toggle-servo"
                  phx-value-servo-id="<%= id %>"
                  <%= if servo.enabled, do: "checked" %>>
            <label for="servo_<%= id %>_enabled">
              <%= if servo.enabled do %>
                <%= servo.value %>º
              <% else  %>
                Enable
              <% end %>
            </label>
          </div>
        </div>
        <div class="grid-x">
          <div class="cell">
            <form phx-change="set-servo">
            <input type="hidden" name="servo-id" value="<%= id %>">
            <input type="range"
                  min="-135"
                  max="135"
                  step="1"
                  name="servo-value"
                  value="<%= servo.value %>"
                  phx-debounce="500"
                  <%= unless servo.enabled, do: "disabled"%>>
            </form>
          </div>
        </div>
      <% end %>
    <% else %>
      <em>Disconnected</em>
    <% end %>
  </div>
</div>