dawarich/app/views/settings/index.html.erb

<% content_for :title, 'Settings' %>

<div class="min-h-content bg-base-200 w-full">
  <div class="flex flex-col lg:flex-row w-full my-10 space-x-4">
    <div class="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-100 px-5 py-5 mx-5">
      <h2 class="text-2xl font-bold">Edit your Dawarich settings!</h1>
      <%= form_for :settings, url: settings_path, method: :patch, data: { turbo_method: :patch, turbo: false } do |f| %>
        <div class="form-control my-2">
          <%= f.label :meters_between_routes do %>
            Meters between routes

            <!-- The button to open modal -->
            <label for="meters_between_routes_info" class="btn">?</label>

            <!-- Put this part before </body> tag -->
            <input type="checkbox" id="meters_between_routes_info" class="modal-toggle" />
            <div class="modal" role="dialog">
              <div class="modal-box">
                <h3 class="text-lg font-bold">Meters between routes</h3>
                <p class="py-4">
                  Value in meters.
                </p>
                <p class="py-4">
                  Points on the map are connected by lines. This value is the maximum distance between two points to be connected by a line. If the distance between two points is greater than this value, they will not be connected, and the line will not be drawn. This allows to split the route into smaller segments, and to avoid drawing lines between two points that are far from each other.
                </p>
              </div>
              <label class="modal-backdrop" for="meters_between_routes_info">Close</label>
            </div>
          <% end %>
          <%= f.number_field :meters_between_routes, value: current_user.settings['meters_between_routes'], class: "input input-bordered" %>
        </div>

        <div class="form-control my-2">
          <%= f.label :minutes_between_routes do %>
            Minutes between routes

            <!-- The button to open modal -->
            <label for="minutes_between_routes_info" class="btn">?</label>

            <!-- Put this part before </body> tag -->
            <input type="checkbox" id="minutes_between_routes_info" class="modal-toggle" />
            <div class="modal" role="dialog">
              <div class="modal-box">
                <h3 class="text-lg font-bold">Minutes between routes</h3>
                <p class="py-4">
                  Value in minutes.
                </p>
                <p class="py-4">
                  Points on the map are connected by lines. This value is the maximum time between two points to be connected by a line. If the time between two points is greater than this value, they will not be connected. This allows to split the route into smaller segments, and to avoid drawing lines between two points that are far in time from each other.
                </p>
              </div>
              <label class="modal-backdrop" for="minutes_between_routes_info">Close</label>
            </div>
          <% end %>
          <%= f.number_field :minutes_between_routes, value: current_user.settings['minutes_between_routes'], class: "input input-bordered" %>
        </div>
        <div class="form-control my-2">
          <%= f.label :fog_of_war_meters do %>
            Fog of War meters

            <!-- The button to open modal -->
            <label for="fog_of_war_meters_info" class="btn">?</label>

            <!-- Put this part before </body> tag -->
            <input type="checkbox" id="fog_of_war_meters_info" class="modal-toggle" />
            <div class="modal" role="dialog">
              <div class="modal-box">
                <h3 class="text-lg font-bold">Fog of War meters</h3>
                <p class="py-4">
                  Value in meters.
                </p>
                <p class="py-4">
                  Here you can set the radius of the "cleared" area around a point when Fog of War mode is enabled. The area around the point will be cleared, and the rest of the map will be covered with fog. The cleared area will be a circle with the point as the center and the radius as the value you set here.
                </p>
              </div>
              <label class="modal-backdrop" for="fog_of_war_meters_info">Close</label>
            </div>
          <% end %>
          <%= f.number_field :fog_of_war_meters, value: current_user.settings['fog_of_war_meters'], class: "input input-bordered" %>
        </div>
        <div class="form-control my-2">
          <%= f.submit "Update", class: "btn btn-primary" %>
        </div>
      <% end %>
    </div>
    <div class="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-100 px-5 py-5">
      <h2 class="text-2xl font-bold">Create a new user!</h1>
      <%= form_for :user, url: settings_users_path, method: :post, data: { turbo_method: :post, turbo: false } do |f| %>
        <div class="form-control">
          <%= f.label :email do %>
            Email
          <% end %>
          <%= f.email_field :email, value: '', class: "input input-bordered" %>
        </div>
        <div class="form-control mt-5">
          <%= f.submit "Create", class: "btn btn-primary" %>
        </div>
      <% end %>
    </div>
  </div>
</div>