feat(logging): add file logging feature with UI toggle

- Introduced a new setting for enabling file logging in the global settings.
- Implemented a live view for displaying logs and a UI toggle for file logging.
- Updated router and layout to include the new logs page.
- Added migration for the new logging setting.

Author: JakobLichterfeld

assets/css/app.scss

@@ -306,3 +306,13 @@ main.full-height {
     background-color: initial;
   }
 }
+
+.logs {
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  padding: 10px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  height: 500px;
+  overflow-y: scroll;
+}

config/config.exs

@@ -16,9 +16,20 @@ config :teslamate,
     TeslaMate.Auth.Tokens
   ]
 
-config :logger, :console,
-  format: "$time $metadata[$level] $message\n",
-  metadata: [:car_id]
+config :logger,
+  backends: [
+    :console
+  ] ++ (if System.get_env("TESLAMATE_FILE_LOGGING_ENABLED") == "true", do: [{Logger.Handlers.File, :file_logger_for_webview}], else: []),
+  console: [
+    format: "$time $metadata[$level] $message\n",
+    metadata: [:car_id]
+  ],
+  file_logger_for_webview: [
+    format: "$time $metadata[$level] $message\n",
+    metadata: [:car_id],
+    path: System.get_env("TESLAMATE_FILE_LOGGING_PATH") || Path.join(System.cwd(), "data/logs/teslamate.log"),
+    sync_threshold: 5  # sync every 5 messages to file
+  ]
 
 config :phoenix, :json_library, Jason
 

lib/teslamate/settings/global_settings.ex

@@ -13,6 +13,7 @@ defmodule TeslaMate.Settings.GlobalSettings do
     field :grafana_url, :string
 
     field :language, :string
+    field :file_logging_enabled, :boolean, default: false
 
     timestamps()
   end
@@ -91,7 +92,8 @@ defmodule TeslaMate.Settings.GlobalSettings do
       :preferred_range,
       :base_url,
       :grafana_url,
-      :language
+      :language,
+      :file_logging_enabled
     ])
     |> validate_required([
       :unit_of_length,

lib/teslamate_web/live/log_live/index.ex

@@ -0,0 +1,30 @@
+defmodule TeslaMateWeb.LogLive.Index do
+  use TeslaMateWeb, :live_view
+
+  @log_file_path System.get_env("TESLAMATE_FILE_LOGGING_PATH") || Path.join(System.cwd(), "data/logs/teslamate.log")
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, assign(socket, logs: get_logs())}
+  end
+
+  @impl true
+  def handle_event("refresh_logs", _params, socket) do
+    {:noreply, assign(socket, logs: get_logs())}
+  end
+
+  defp get_logs() do
+    case File.read(@log_file_path) do
+      {:ok, content} ->
+        content
+        |> String.split(~r/\R/, trim: true)
+        |> Enum.reverse()
+
+      {:error, :enoent} ->
+        ["Log file not found. It will be created when logs are written."]
+
+      {:error, reason} ->
+        ["Error reading log file: #{reason}"]
+    end
+  end
+end

lib/teslamate_web/live/settings_live/index.ex

@@ -80,9 +80,33 @@ defmodule TeslaMateWeb.SettingsLive.Index do
         assign(socket, settings.())
       end
 
+    if Map.has_key?(params, "file_logging_enabled") do
+      enabled = params["file_logging_enabled"]
+      toggle_file_logger(enabled)
+    end
+
     {:noreply, socket}
   end
 
+  defp toggle_file_logger(true) do
+    unless System.get_env("TESLAMATE_FILE_LOGGING_ENABLED") == "true" do
+      Logger.add_handler(:file_logger_webview, Logger.Handlers.File,
+        format: "$time $metadata[$level] $message\n",
+        metadata: [:car_id],
+        path: "priv/logs/teslamate.log",
+        sync_threshold: 5 # sync every 5 messages to file
+      )
+      Logger.info("File logging enabled via UI.")
+    end
+  end
+
+  defp toggle_file_logger(false) do
+    if System.get_env("TESLAMATE_FILE_LOGGING_ENABLED") != "true" do
+      Logger.remove_handler(:file_logger_webview)
+      Logger.info("File logging disabled via UI.")
+    end
+  end
+
   def handle_event("change", params, %{assigns: %{car_settings: settings, car: id}} = socket) do
     params = params["car_settings_#{id}"]
 

lib/teslamate_web/live/settings_live/index.html.heex

@@ -339,6 +339,31 @@
       </div>
     </div>
   </div>
+
+  <div class="columns is-mobile is-centered">
+    <div class="column">
+      <h2 class="title is-4"><%= gettext("Logging") %></h2>
+      <%= if System.get_env("TESLAMATE_FILE_LOGGING_ENABLED") == "true" do %>
+        <div class="field is-horizontal center-vertically">
+          <div class="field-label is-normal is-paddingless">
+            <%= label(f, :file_logging_enabled, gettext("File Logging"), class: "label") %>
+          </div>
+          <div class="field-body">
+            <div class="field">
+              <div class="control">
+                <%= checkbox(f, :file_logging_enabled, class: "switch is-rounded is-success") %>
+                <%= label(f, :file_logging_enabled, nil) %>
+              </div>
+            </div>
+          </div>
+        </div>
+      <% else %>
+        <p class="help">
+          <%= gettext("File logging can be enabled by setting the TESLAMATE_FILE_LOGGING_ENABLED environment variable to 'true'.") %>
+        </p>
+      <% end %>
+    </div>
+  </div>
 </.form>
 
 <div class="columns is-mobile is-centered">

lib/teslamate_web/router.ex

@@ -44,6 +44,7 @@ defmodule TeslaMateWeb.Router do
       live "/geo-fences/:id/edit", GeoFenceLive.Form
       live "/charge-cost/:id", ChargeLive.Cost
       live "/import", ImportLive.Index
+      live "/logs", LogLive.Index
     end
   end
 

lib/teslamate_web/templates/layout/root.html.heex

@@ -100,6 +100,12 @@
             >
               <span class="icon"><i class="mdi mdi-map-marker-radius"></i></span>&nbsp;<span><%= gettext("Geo-Fences") %></span>
             </.link>
+            <.link
+              navigate={Routes.live_path(@conn, TeslaMateWeb.LogLive.Index)}
+              class="navbar-item  mr-5"
+            >
+              <span class="icon"><i class="mdi mdi-math-log"></i></span>&nbsp;<span><%= gettext("Logs") %></span>
+            </.link>
             <.link
               navigate={Routes.live_path(@conn, TeslaMateWeb.SettingsLive.Index)}
               class="navbar-item  mr-5"

lib/teslamate_web/templates/log_live/index.html.heex

@@ -0,0 +1,9 @@
+<h1>Logs</h1>
+
+<button phx-click="refresh_logs" class="button is-primary">Refresh</button>
+
+<pre class="logs">
+<%= for log <- @logs do %>
+  <%= log %>
+<% end %>
+</pre>

priv/repo/migrations/20250818141505_add_file_logging_enabled_to_global_settings.exs

@@ -0,0 +1,9 @@
+defmodule TeslaMate.Repo.Migrations.AddWebviewLoggingEnabledToGlobalSettings do
+  use Ecto.Migration
+
+  def change do
+    alter table(:settings) do
+      add :webview_logging_enabled, :boolean, default: false, null: false
+    end
+  end
+end