Show notification after save

assets/js/hooks.js

@@ -46,6 +46,7 @@ export const LocalTime = {
 export const LocalTimeRange = {
   exec() {
     const date = toLocalDate(this.el.dataset.startDate, {
+      year: "numeric",
       month: "short",
       day: "numeric"
     });

lib/teslamate_web/live/charge_live/cost.ex

@@ -9,12 +9,14 @@ defmodule TeslaMateWeb.ChargeLive.Cost do
   alias TeslaMate.Log.ChargingProcess
   alias TeslaMate.Log
 
+  import TeslaMateWeb.Gettext
+
   @impl true
   def render(assigns), do: ChargeView.render("cost.html", assigns)
 
   @impl true
   def mount(_session, socket) do
-    {:ok, socket}
+    {:ok, assign(socket, notification: nil)}
   end
 
   @impl true
@@ -29,23 +31,50 @@ defmodule TeslaMateWeb.ChargeLive.Cost do
         _ -> nil
       end
 
-    assigns = %{
-      charging_process: charging_process,
-      changeset: ChargingProcess.changeset(charging_process, %{}),
-      redirect_to: referrer || Routes.car_path(socket, :index)
-    }
+    socket =
+      socket
+      |> assign(redirect_to: referrer || Routes.car_path(socket, :index))
+      |> assign_charging_process(charging_process)
 
-    {:noreply, assign(socket, assigns)}
+    {:noreply, socket}
   end
 
   @impl true
   def handle_event("save", %{"charging_process" => params}, socket) do
     case Log.update_charging_process(socket.assigns.charging_process, params) do
-      {:ok, _charging_process} ->
-        {:stop, redirect(socket, to: socket.assigns.redirect_to)}
+      {:ok, charging_process} ->
+        notification = create_notification(:success, gettext("Saved!"))
+
+        socket =
+          socket
+          |> assign(notification: notification)
+          |> assign_charging_process(charging_process)
+
+        {:noreply, socket}
 
       {:error, %Ecto.Changeset{} = changeset} ->
         {:noreply, assign(socket, changeset: changeset)}
     end
   end
+
+  @impl true
+  def handle_info({:remove_notification, id}, %{assigns: %{notification: %{id: id}}} = socket) do
+    {:noreply, assign(socket, notification: nil)}
+  end
+
+  def handle_info({:remove_notification, _id}, socket) do
+    {:noreply, socket}
+  end
+
+  # Private
+
+  defp assign_charging_process(socket, %ChargingProcess{} = c) do
+    assign(socket, charging_process: c, changeset: ChargingProcess.changeset(c, %{}))
+  end
+
+  defp create_notification(key, msg) do
+    id = make_ref()
+    Process.send_after(self(), {:remove_notification, id}, 2500)
+    %{id: id, message: msg, key: key}
+  end
 end

lib/teslamate_web/templates/charge/cost.html.leex

@@ -5,7 +5,6 @@
   </ul>
 </nav>
 
-
 <%= f = form_for @changeset, "#", [ phx_submit: :save, class: "charging_process", id: @charging_process.id] %>
   <div class="field is-horizontal">
     <div class="field-label"></div>
@@ -33,31 +32,37 @@
 
         <div class="control">
           <div class="tags has-addons">
-            <span class="tag"><%= gettext "Date" %></span>
+            <span class="tag"><span class="icon"><span class="mdi mdi-calendar-range"></span></span></span>
+          <%= unless is_nil(@charging_process.end_date) do %>
             <%= 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", class: "tag is-info is-light" %>
+                                        phx_hook: "LocalTimeRange",
+                                        class: "tag",
+                                        id: :date_range %>
+          <% end %>
           </div>
         </div>
 
         <div class="control">
           <div class="tags has-addons">
-            <span class="tag"><%= gettext "Used" %></span>
-            <span class="tag is-info is-light"><%= Float.round(max(@charging_process.charge_energy_used || 0, @charging_process.charge_energy_added), 2) %> kWh</span>
+            <span class="tag"><span class="icon"><span class="mdi mdi-car"></span></span></span>
+            <span class="tag"><%= @charging_process.car.name %></span>
           </div>
         </div>
 
         <div class="control">
           <div class="tags has-addons">
-            <span class="tag"><%= gettext "Vehicle" %></span>
-            <span class="tag is-info is-light"><%= @charging_process.car.name %></span>
+            <span class="tag"><span class="icon"><span class="mdi mdi-flash"></span></span></span>
+          <%= unless is_nil(@charging_process.charge_energy_used) do %>
+            <span class="tag"><%= Float.round(max(@charging_process.charge_energy_used || 0, @charging_process.charge_energy_added), 2) %> kWh</span>
+          <% end %>
           </div>
         </div>
 
         <div class="control">
           <div class="tags has-addons">
-            <span class="tag"><%= gettext "Location" %></span>
-            <span class="tag is-info is-light"><%=
+            <span class="tag"><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{display_name: name}} -> name
@@ -78,7 +83,10 @@
     <div class="field-body">
       <div class="field">
         <div class="control is-expanded">
-          <%= text_input f, :cost, class: "input", type: :number, min: 0.0, step: 0.01, phx_hook: "SetLangAttr" %>
+          <%= text_input f, :cost, class: "input",
+                                   type: :number, inputmode: :decimal, min: 0.0, step: 0.01,
+                                   placeholder: gettext("Enter charge cost"),
+                                   phx_hook: "SetLangAttr" %>
         </div>
         <p class="help is-danger"><%= error_tag(f, :cost) %></p>
       </div>
@@ -92,8 +100,10 @@
         <div class="control">
           <%= link gettext("Back"), to: @redirect_to, class: "button" %>
         </div>
-        <div class="control">
-          <%= submit gettext("Save"), phx_disable_with: gettext("Saving..."), class: "button is-info" %>
+        <div class="control""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>

priv/gettext/de/LC_MESSAGES/default.po

@@ -125,7 +125,7 @@ msgid "Units"
 msgstr "Einheiten"
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:93
+#: lib/teslamate_web/templates/charge/cost.html.leex:98
 #: lib/teslamate_web/templates/geo_fence/form.html.leex:119
 msgid "Back"
 msgstr "Zurück"
@@ -170,13 +170,13 @@ msgid "Radius"
 msgstr ""
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:96
+#: lib/teslamate_web/templates/charge/cost.html.leex:101
 #: lib/teslamate_web/templates/geo_fence/form.html.leex:122
 msgid "Save"
 msgstr "Speichern"
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:96
+#: lib/teslamate_web/templates/charge/cost.html.leex:102
 #: lib/teslamate_web/templates/geo_fence/form.html.leex:122
 msgid "Saving..."
 msgstr "Speichere..."
@@ -444,26 +444,16 @@ msgid "Charge Cost"
 msgstr "Ladekosten"
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:76
+#: lib/teslamate_web/templates/charge/cost.html.leex:81
 msgid "Cost"
 msgstr "Kosten"
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:36
-msgid "Date"
-msgstr "Datum"
+#: lib/teslamate_web/templates/charge/cost.html.leex:86
+msgid "Enter charge cost"
+msgstr ""
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:59
-msgid "Location"
-msgstr "Standort"
-
-#, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:45
-msgid "Used"
-msgstr "Geladen"
-
-#, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:52
-msgid "Vehicle"
-msgstr "Fahrzeug"
+#: lib/teslamate_web/live/charge_live/cost.ex:46
+msgid "Saved!"
+msgstr "Speichern"

priv/gettext/default.pot

@@ -124,7 +124,7 @@ msgid "Units"
 msgstr ""
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:93
+#: lib/teslamate_web/templates/charge/cost.html.leex:98
 #: lib/teslamate_web/templates/geo_fence/form.html.leex:119
 msgid "Back"
 msgstr ""
@@ -169,13 +169,13 @@ msgid "Radius"
 msgstr ""
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:96
+#: lib/teslamate_web/templates/charge/cost.html.leex:101
 #: lib/teslamate_web/templates/geo_fence/form.html.leex:122
 msgid "Save"
 msgstr ""
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:96
+#: lib/teslamate_web/templates/charge/cost.html.leex:102
 #: lib/teslamate_web/templates/geo_fence/form.html.leex:122
 msgid "Saving..."
 msgstr ""
@@ -443,26 +443,16 @@ msgid "Charge Cost"
 msgstr ""
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:76
+#: lib/teslamate_web/templates/charge/cost.html.leex:81
 msgid "Cost"
 msgstr ""
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:36
-msgid "Date"
+#: lib/teslamate_web/templates/charge/cost.html.leex:86
+msgid "Enter charge cost"
 msgstr ""
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:59
-msgid "Location"
-msgstr ""
-
-#, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:45
-msgid "Used"
-msgstr ""
-
-#, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:52
-msgid "Vehicle"
+#: lib/teslamate_web/live/charge_live/cost.ex:46
+msgid "Saved!"
 msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -125,7 +125,7 @@ msgid "Units"
 msgstr ""
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:93
+#: lib/teslamate_web/templates/charge/cost.html.leex:98
 #: lib/teslamate_web/templates/geo_fence/form.html.leex:119
 msgid "Back"
 msgstr ""
@@ -170,13 +170,13 @@ msgid "Radius"
 msgstr ""
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:96
+#: lib/teslamate_web/templates/charge/cost.html.leex:101
 #: lib/teslamate_web/templates/geo_fence/form.html.leex:122
 msgid "Save"
 msgstr ""
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:96
+#: lib/teslamate_web/templates/charge/cost.html.leex:102
 #: lib/teslamate_web/templates/geo_fence/form.html.leex:122
 msgid "Saving..."
 msgstr ""
@@ -444,26 +444,16 @@ msgid "Charge Cost"
 msgstr ""
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:76
+#: lib/teslamate_web/templates/charge/cost.html.leex:81
 msgid "Cost"
 msgstr ""
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:36
-msgid "Date"
+#: lib/teslamate_web/templates/charge/cost.html.leex:86
+msgid "Enter charge cost"
 msgstr ""
 
 #, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:59
-msgid "Location"
-msgstr ""
-
-#, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:45
-msgid "Used"
-msgstr ""
-
-#, elixir-format
-#: lib/teslamate_web/templates/charge/cost.html.leex:52
-msgid "Vehicle"
+#: lib/teslamate_web/live/charge_live/cost.ex:46
+msgid "Saved!"
 msgstr ""