archived-hipudding-teslamate/lib/teslamate_web/live/charge_live/cost.html.heex

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><.link navigate={~p"/"}><%= gettext("Home") %></.link></li>
    <li class="is-active"><.link navigate=""><%= gettext("Charge Cost") %></.link></li>
  </ul>
</nav>

<.form :let={f} for={@changeset} phx-submit="save" class="charging_process">
  <div class="field is-horizontal">
    <div class="field-label"></div>
    <div class="field-body">
      <div class="field">
        <div class="card-image">
          <figure
            id={"map_#{@charging_process.id}_container"}
            data-id={@charging_process.id}
            data-zoom="1"
            phx-update="ignore"
            phx-hook="SimpleMap"
          >
            <div
              id={"map_#{@charging_process.id}"}
              class="map"
              style="height: 250px; position: relative;"
            />
          </figure>
          <%= text_input(:position, "#{@charging_process.id}",
            value:
              "#{@charging_process.position.latitude},#{@charging_process.position.longitude}",
            phx_hook: "TriggerChange",
            id: "position_#{@charging_process.id}",
            class: "is-hidden",
            disabled: true
          ) %>
        </div>
      </div>
    </div>
  </div>

  <div class="field is-horizontal" style="margin-top: -6px;">
    <div class="field-label is-normal"></div>
    <div class="field-body">
      <div class="field is-grouped is-grouped-multiline">
        <%= unless is_nil(@charging_process.end_date) do %>
          <div class="control">
            <div id="date-tag" class="tags has-addons">
              <span class="tag is-primary is-light">
                <span class="icon"><span class="mdi mdi-calendar-range"></span></span>
              </span>
              <%= content_tag(:span, "–",
                data: [
                  start_date: DateTime.to_iso8601(@charging_process.start_date),
                  end_date: DateTime.to_iso8601(@charging_process.end_date)
                ],
                phx_hook: "LocalTimeRange",
                id: "date_range_#{@charging_process.id}",
                class: "tag"
              ) %>
            </div>
          </div>
        <% end %>

        <div class="control">
          <div id="car-tag" class="tags has-addons">
            <span class="tag is-info is-light">
              <span class="icon"><span class="mdi mdi-car"></span></span>
            </span>
            <span class="tag"><%= @charging_process.car.name %></span>
          </div>
        </div>

        <%= unless is_nil(@charging_process.charge_energy_added) do %>
          <div class="control">
            <div id="energy-tag" class="tags has-addons">
              <span class="tag is-warning is-light">
                <span class="icon"><span class="mdi mdi-flash"></span></span>
              </span>
              <span class="tag">
                <%= Decimal.round(
                  Decimal.max(
                    @charging_process.charge_energy_used || 0,
                    @charging_process.charge_energy_added
                  ),
                  2
                ) %> kWh
              </span>
            </div>
          </div>
        <% end %>

        <%= unless is_nil(@charging_process.duration_min) do %>
          <div class="control">
            <div id="duration-tag" class="tags has-addons">
              <span class="tag is-light">
                <span class="icon"><span class="mdi mdi-clock"></span></span>
              </span>
              <span class="tag"><%= @charging_process.duration_min %> min</span>
            </div>
          </div>
        <% end %>

        <div class="control">
          <div id="location-tag" class="tags has-addons">
            <span class="tag is-danger is-light">
              <span class="icon"><span class="mdi mdi-map-marker"></span></span>
            </span>
            <span class="tag">
              <%= case @charging_process do
                %ChargingProcess{geofence: %GeoFence{name: name}} ->
                  name

                %ChargingProcess{
                  address: %Address{name: name, road: road, house_number: no, city: city}
                } ->
                  [name || [road, no], city]
                  |> List.flatten()
                  |> Enum.reject(&is_nil/1)
                  |> Enum.join(", ")

                _ ->
                  "???"
              end %>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="field is-horizontal">
    <div class="field-label is-normal">
      <%= label(f, :cost, gettext("Cost"), class: "label") %>
    </div>
    <div class="field-body">
      <div class="field has-addons">
        <p class="control">
          <span class="select">
            <%= select(f, :mode, [
              {gettext("Total"), :total},
              {gettext("Per kWh"), :per_kwh},
              {gettext("Per Minute"), :per_minute}
            ]) %>
          </span>
        </p>
        <p class="control is-expanded">
          <%= text_input(f, :cost,
            class: "input",
            type: :number,
            inputmode: :decimal,
            step: 0.01,
            placeholder: gettext("Enter charge cost"),
            autofocus: true
          ) %>
        </p>
        <p class="help is-danger"><%= error_tag(f, :cost) %></p>
      </div>
    </div>
  </div>

  <div class="field is-horizontal mt-5">
    <div class="field-label"></div>
    <div class="field-body">
      <div class="field is-grouped">
        <div class="control">
          <%= link(gettext("Back"), to: @redirect_to, class: "button") %>
        </div>
        <div class="control" style="min-width: 300px;">
          <%= submit(if(is_nil(@notification), do: gettext("Save"), else: @notification.message),
            phx_disable_with: gettext("Saving..."),
            class: [
              "button",
              if(is_nil(@notification), do: "is-info", else: "is-#{@notification.key}")
            ]
          ) %>
        </div>
      </div>
    </div>
  </div>
</.form>