From 4277e3b36e3373c2f7f3dc9fe42c8fcf55ce7f68 Mon Sep 17 00:00:00 2001 From: Adrian Kumpf Date: Tue, 14 Jan 2020 14:19:43 +0100 Subject: [PATCH] Add tooltip with estimated range at 100% --- assets/css/app.scss | 5 ++ .../templates/car/summary.html.leex | 52 ++++++++++++------- priv/gettext/de/LC_MESSAGES/default.po | 45 +++++++++------- priv/gettext/default.pot | 21 +++++--- priv/gettext/en/LC_MESSAGES/default.po | 45 +++++++++------- .../controllers/car_controller_test.exs | 25 ++++++--- 6 files changed, 121 insertions(+), 72 deletions(-) diff --git a/assets/css/app.scss b/assets/css/app.scss index 9dde254a..26a9c0f5 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -217,3 +217,8 @@ $positions: ('top','left','bottom','right'); margin-bottom: 1.5rem; } } + +.has-dotted-underline { + text-decoration-line: underline; + text-decoration-style: dotted; +} diff --git a/lib/teslamate_web/templates/car/summary.html.leex b/lib/teslamate_web/templates/car/summary.html.leex index faf44e05..e14d2bac 100644 --- a/lib/teslamate_web/templates/car/summary.html.leex +++ b/lib/teslamate_web/templates/car/summary.html.leex @@ -160,32 +160,48 @@ <% end %> <% end %> + <% + get_range_at_100_text = fn battery_level -> + range = + case @settings.preferred_range do + :ideal -> @summary.ideal_battery_range_km + :rated -> @summary.rated_battery_range_km + end + + unless is_nil(range) do + r100 = range / battery_level * 100 + + r100_str = + if @settings.unit_of_length == :mi do + "#{round(r100 / 1.60934)} mi" + else + "#{round(r100)} km" + end + + gettext("≈ %{range} at 100%", range: r100_str) + end + end + %> <%= unless is_nil(@summary.battery_level) do %> <%= gettext "State of Charge" %> - <%= @summary.battery_level %>% (<%= - - if @settings.unit_of_length == :mi do - "#{Float.round(@summary.rated_battery_range_km/@summary.battery_level * 100 / 1.60934, 2)} mi" - else - "#{Float.round(@summary.rated_battery_range_km/@summary.battery_level * 100,2)} km" - end - - %> 100%) + + <%= @summary.battery_level %>% + <% end %> <%= unless is_nil(@summary.usable_battery_level) or @summary.usable_battery_level == @summary.battery_level do %> <%= gettext "Usable State of Charge" %> - <%= @summary.usable_battery_level %>% (<%= - - if @settings.unit_of_length == :mi do - "#{Float.round(@summary.rated_battery_range_km/@summary.usable_battery_level * 100 / 1.60934, 2)} mi" - else - "#{Float.round(@summary.rated_battery_range_km/@summary.usable_battery_level * 100,2)} km" - end - - %> 100%) + + <%= @summary.usable_battery_level %>% + <% end %> <%= if @summary.state == :driving and not is_nil(@summary.speed) do %> diff --git a/priv/gettext/de/LC_MESSAGES/default.po b/priv/gettext/de/LC_MESSAGES/default.po index d414ff2a..fce8ddbf 100644 --- a/priv/gettext/de/LC_MESSAGES/default.po +++ b/priv/gettext/de/LC_MESSAGES/default.po @@ -12,22 +12,22 @@ msgstr "" "Plural-Forms: nplurals=2\n" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:73 +#: lib/teslamate_web/templates/car/summary.html.leex:78 msgid "Status" msgstr "Status" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:166 +#: lib/teslamate_web/templates/car/summary.html.leex:209 msgid "Speed" msgstr "Geschwindigkeit" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:160 +#: lib/teslamate_web/templates/car/summary.html.leex:187 msgid "State of Charge" msgstr "Ladezustand" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:129 +#: lib/teslamate_web/templates/car/summary.html.leex:134 msgid "Charged" msgstr "Geladen" @@ -84,7 +84,7 @@ msgid "Settings" msgstr "Einstellungen" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:144 +#: lib/teslamate_web/templates/car/summary.html.leex:149 msgid "Scheduled charging" msgstr "Ladezeitpunkt" @@ -94,7 +94,7 @@ msgid "Plugged in" msgstr "Eingesteckt" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:153 +#: lib/teslamate_web/templates/car/summary.html.leex:158 msgid "Charge limit" msgstr "Ladelimit" @@ -223,23 +223,23 @@ msgid "Driver present" msgstr "Fahrer anwesend" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:232 +#: lib/teslamate_web/templates/car/summary.html.leex:275 msgid "cancel sleep attempt" msgstr "Schlafversuch abbrechen" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:227 +#: lib/teslamate_web/templates/car/summary.html.leex:270 msgid "try to sleep" msgstr "versuchen zu schlafen" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:116 +#: lib/teslamate_web/templates/car/summary.html.leex:121 msgid "Range (est.)" msgstr "Reichweite (gesch.)" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:76 -#: lib/teslamate_web/templates/car/summary.html.leex:76 +#: lib/teslamate_web/templates/car/summary.html.leex:81 +#: lib/teslamate_web/templates/car/summary.html.leex:81 msgid "for" msgstr "seit" @@ -279,12 +279,12 @@ msgid "Temperature readings" msgstr "Temperaturmesswerte" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:97 +#: lib/teslamate_web/templates/car/summary.html.leex:102 msgid "Range (rated)" msgstr "Reichweite (rated)" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:135 +#: lib/teslamate_web/templates/car/summary.html.leex:140 msgid "Charger Power" msgstr "Ladeleistung" @@ -309,7 +309,7 @@ msgid "rated" msgstr "rated" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:96 +#: lib/teslamate_web/templates/car/summary.html.leex:101 msgid "Range (ideal)" msgstr "Reichweite (ideal)" @@ -334,17 +334,17 @@ msgid "Delete '%{geo_fence}'?" msgstr "'%{geo_fence}' löschen?" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:191 +#: lib/teslamate_web/templates/car/summary.html.leex:234 msgid "Inside temperature" msgstr "Innentemperatur" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:179 +#: lib/teslamate_web/templates/car/summary.html.leex:222 msgid "Outside temperature" msgstr "Außentemperatur" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:204 +#: lib/teslamate_web/templates/car/summary.html.leex:247 msgid "Version" msgstr "" @@ -364,7 +364,7 @@ msgid "Unlocked" msgstr "nicht verschlossen" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:88 +#: lib/teslamate_web/templates/car/summary.html.leex:93 msgid "Remaining Time" msgstr "Restlaufzeit" @@ -420,11 +420,16 @@ msgid "Timeout" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:175 +#: lib/teslamate_web/templates/car/summary.html.leex:198 msgid "Usable State of Charge" msgstr "Verfügbarer Ladestand" #, elixir-format #: lib/teslamate_web/templates/car/summary.html.leex:62 msgid "Reduced Battery Range" -msgstr "Verringerte Reichweite" \ No newline at end of file +msgstr "Verringerte Reichweite" + +#, elixir-format, fuzzy +#: lib/teslamate_web/templates/car/summary.html.leex:181 +msgid "≈ %{range} at 100%" +msgstr "≈ %{range} bei 100%" diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot index 9823929b..3e409c9e 100644 --- a/priv/gettext/default.pot +++ b/priv/gettext/default.pot @@ -16,12 +16,12 @@ msgid "Status" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:193 +#: lib/teslamate_web/templates/car/summary.html.leex:209 msgid "Speed" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:165 +#: lib/teslamate_web/templates/car/summary.html.leex:187 msgid "State of Charge" msgstr "" @@ -222,12 +222,12 @@ msgid "Driver present" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:259 +#: lib/teslamate_web/templates/car/summary.html.leex:275 msgid "cancel sleep attempt" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:254 +#: lib/teslamate_web/templates/car/summary.html.leex:270 msgid "try to sleep" msgstr "" @@ -333,17 +333,17 @@ msgid "Delete '%{geo_fence}'?" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:218 +#: lib/teslamate_web/templates/car/summary.html.leex:234 msgid "Inside temperature" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:206 +#: lib/teslamate_web/templates/car/summary.html.leex:222 msgid "Outside temperature" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:231 +#: lib/teslamate_web/templates/car/summary.html.leex:247 msgid "Version" msgstr "" @@ -419,7 +419,7 @@ msgid "Timeout" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:179 +#: lib/teslamate_web/templates/car/summary.html.leex:198 msgid "Usable State of Charge" msgstr "" @@ -427,3 +427,8 @@ msgstr "" #: lib/teslamate_web/templates/car/summary.html.leex:62 msgid "Reduced Battery Range" msgstr "" + +#, elixir-format +#: lib/teslamate_web/templates/car/summary.html.leex:181 +msgid "≈ %{range} at 100%" +msgstr "" diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po index 55f84291..030fb933 100644 --- a/priv/gettext/en/LC_MESSAGES/default.po +++ b/priv/gettext/en/LC_MESSAGES/default.po @@ -12,22 +12,22 @@ msgstr "" "Plural-Forms: nplurals=2\n" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:73 +#: lib/teslamate_web/templates/car/summary.html.leex:78 msgid "Status" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:166 +#: lib/teslamate_web/templates/car/summary.html.leex:209 msgid "Speed" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:160 +#: lib/teslamate_web/templates/car/summary.html.leex:187 msgid "State of Charge" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:129 +#: lib/teslamate_web/templates/car/summary.html.leex:134 msgid "Charged" msgstr "" @@ -84,7 +84,7 @@ msgid "Settings" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:144 +#: lib/teslamate_web/templates/car/summary.html.leex:149 msgid "Scheduled charging" msgstr "" @@ -94,7 +94,7 @@ msgid "Plugged in" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:153 +#: lib/teslamate_web/templates/car/summary.html.leex:158 msgid "Charge limit" msgstr "" @@ -223,23 +223,23 @@ msgid "Driver present" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:232 +#: lib/teslamate_web/templates/car/summary.html.leex:275 msgid "cancel sleep attempt" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:227 +#: lib/teslamate_web/templates/car/summary.html.leex:270 msgid "try to sleep" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:116 +#: lib/teslamate_web/templates/car/summary.html.leex:121 msgid "Range (est.)" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:76 -#: lib/teslamate_web/templates/car/summary.html.leex:76 +#: lib/teslamate_web/templates/car/summary.html.leex:81 +#: lib/teslamate_web/templates/car/summary.html.leex:81 msgid "for" msgstr "" @@ -279,12 +279,12 @@ msgid "Temperature readings" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:97 +#: lib/teslamate_web/templates/car/summary.html.leex:102 msgid "Range (rated)" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:135 +#: lib/teslamate_web/templates/car/summary.html.leex:140 msgid "Charger Power" msgstr "" @@ -309,7 +309,7 @@ msgid "rated" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:96 +#: lib/teslamate_web/templates/car/summary.html.leex:101 msgid "Range (ideal)" msgstr "" @@ -334,17 +334,17 @@ msgid "Delete '%{geo_fence}'?" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:191 +#: lib/teslamate_web/templates/car/summary.html.leex:234 msgid "Inside temperature" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:179 +#: lib/teslamate_web/templates/car/summary.html.leex:222 msgid "Outside temperature" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:204 +#: lib/teslamate_web/templates/car/summary.html.leex:247 msgid "Version" msgstr "" @@ -364,7 +364,7 @@ msgid "Unlocked" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:88 +#: lib/teslamate_web/templates/car/summary.html.leex:93 msgid "Remaining Time" msgstr "" @@ -420,11 +420,16 @@ msgid "Timeout" msgstr "" #, elixir-format -#: lib/teslamate_web/templates/car/summary.html.leex:175 +#: lib/teslamate_web/templates/car/summary.html.leex:198 msgid "Usable State of Charge" msgstr "" #, elixir-format #: lib/teslamate_web/templates/car/summary.html.leex:62 msgid "Reduced Battery Range" -msgstr "" \ No newline at end of file +msgstr "" + +#, elixir-format, fuzzy +#: lib/teslamate_web/templates/car/summary.html.leex:181 +msgid "≈ %{range} at 100%" +msgstr "" diff --git a/test/teslamate_web/controllers/car_controller_test.exs b/test/teslamate_web/controllers/car_controller_test.exs index 24c528d2..a0e2cfd5 100644 --- a/test/teslamate_web/controllers/car_controller_test.exs +++ b/test/teslamate_web/controllers/car_controller_test.exs @@ -6,11 +6,16 @@ defmodule TeslaMateWeb.CarControllerTest do alias TeslaMate.{Log, Settings, Repo} alias TeslaMate.Log.Car - defp table_row(html, key, value) do - assert {"tr", _, [{"td", _, [^key]}, {"td", [], [^value]}]} = + defp table_row(html, key, value, opts \\ []) do + assert {"tr", _, [{"td", _, [^key]}, {"td", [], [v]}]} = html |> Floki.find("tr") |> Enum.find(&match?({"tr", _, [{"td", _, [^key]}, _td]}, &1)) + + case Keyword.get(opts, :tooltip) do + nil -> assert value == v + str -> assert {"span", [_, {"data-tooltip", ^str}], [^value]} = v + end end defp icon(html, tooltip, icon) do @@ -107,7 +112,7 @@ defmodule TeslaMateWeb.CarControllerTest do assert table_row(html, "Status", "asleep") assert table_row(html, "Range (ideal)", "380.25 km") assert table_row(html, "Range (est.)", "401.52 km") - assert table_row(html, "State of Charge", "80% (218.87 km 100%)") + assert table_row(html, "State of Charge", "80%", tooltip: "≈ 475 km at 100%") assert table_row(html, "Outside temperature", "20.1 °C") assert table_row(html, "Inside temperature", "21.0 °C") end @@ -153,8 +158,8 @@ defmodule TeslaMateWeb.CarControllerTest do assert table_row(html, "Status", "online") assert table_row(html, "Range (ideal)", "321.87 km") assert table_row(html, "Range (est.)", "289.68 km") - assert table_row(html, "State of Charge", "69% (408.17 km 100%)") - assert table_row(html, "Usable State of Charge", "67% (420.36 km 100%)") + assert table_row(html, "State of Charge", "69%", tooltip: "≈ 466 km at 100%") + assert table_row(html, "Usable State of Charge", "67%", tooltip: "≈ 480 km at 100%") assert icon(html, "Locked", "lock") assert icon(html, "Driver present", "account") assert icon(html, "Preconditioning", "air-conditioner") @@ -387,7 +392,13 @@ defmodule TeslaMateWeb.CarControllerTest do shift_state: "D", speed: 30 }, - charge_state: %{ideal_battery_range: 200, est_battery_range: 180, battery_range: 175}, + charge_state: %{ + ideal_battery_range: 200, + est_battery_range: 180, + battery_range: 175, + usable_battery_level: 67, + battery_level: 69 + }, climate_state: %{is_preconditioning: false, outside_temp: 24, inside_temp: 23.2} )} ] @@ -401,6 +412,8 @@ defmodule TeslaMateWeb.CarControllerTest do assert table_row(html, "Status", "driving") assert table_row(html, "Range (ideal)", "200.0 mi") assert table_row(html, "Range (est.)", "180.0 mi") + assert table_row(html, "State of Charge", "69%", tooltip: "≈ 290 mi at 100%") + assert table_row(html, "Usable State of Charge", "67%", tooltip: "≈ 299 mi at 100%") assert table_row(html, "Speed", "30 mph") assert table_row(html, "Outside temperature", "75.2 °F") assert table_row(html, "Inside temperature", "73.8 °F")