System-End/hackatime
1
0
Fork 0
mirror of https://github.com/System-End/hackatime.git synced 2026-04-19 23:32:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor settings page to a nicer grid

Browse source
This commit is contained in:
Echo 2025-06-08 21:21:56 -04:00
parent 9b5c15243b
commit 2ac91c3d8f
No known key found for this signature in database
4 changed files with 457 additions and 258 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/stylesheets/application.css
View file

@ -11,6 +11,7 @@
@import "https://uchu.style/color.css";
@import "https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css";
@import "settings.css";
/* colors */

161
app/assets/stylesheets/settings.css Normal file
View file

@ -0,0 +1,161 @@
.settings-page .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
gap: 1rem;
margin-top: 2rem;
}
.settings-page article {
background: var(--pico-card-background-color);
border: var(--pico-border-width) solid var(--pico-card-border-color);
border-radius: var(--pico-border-radius);
box-shadow: var(--pico-card-box-shadow);
transition: box-shadow var(--pico-transition);
margin: 0;
}
.settings-page article header {
padding: 0.5rem;
border-bottom: 1px solid var(--pico-muted-border-color);
}
.settings-page article header h2 {
margin-bottom: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--pico-color);
}
.settings-page article header p {
margin-bottom: 0;
color: var(--pico-muted-color);
font-size: 0.875rem;
}
.settings-page article section {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--pico-muted-border-color);
}
.settings-page article section:first-of-type {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.settings-page article section h3 {
margin-bottom: 0.75rem;
font-size: 1rem;
font-weight: 500;
color: var(--pico-color);
}
.settings-page article .form-group {
margin-bottom: 1rem;
}
.settings-page article .form-group:last-child {
margin-bottom: 0;
}
.settings-page article button[role="button"],
.settings-page article input[type="submit"][role="button"] {
margin-top: 1rem;
}
.settings-page article .secondary {
background-color: var(--pico-secondary-background);
border-color: var(--pico-secondary-border);
color: var(--pico-secondary-color);
}
.settings-page article .secondary:hover {
background-color: var(--pico-secondary-hover-background);
border-color: var(--pico-secondary-hover-border);
}
.settings-page article .code-example {
margin: 1rem 0;
background: var(--pico-code-background-color);
border-radius: var(--pico-border-radius);
}
.settings-page article .code-example pre {
margin: 0;
background: transparent;
padding: 0;
}
.settings-page article img {
max-width: 100%;
height: auto;
margin: 1rem 0;
border-radius: var(--pico-border-radius);
}
.settings-page article pre:not(.code-example pre) {
background: var(--pico-code-background-color);
padding: 0.75rem;
border-radius: var(--pico-border-radius);
font-size: 0.875rem;
overflow-x: auto;
}
.settings-page .mirror {
padding: 1rem;
background: var(--pico-card-sectioning-background-color);
border-radius: var(--pico-border-radius);
margin-bottom: 1rem;
}
.settings-page .mirror:last-child {
margin-bottom: 0;
}
.settings-page .email-form {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--pico-muted-border-color);
}
.settings-page .email-form .field {
display: flex;
gap: 0.5rem;
align-items: end;
}
.settings-page .email-form input[type="email"] {
flex: 1;
margin-bottom: 0;
}
@media (max-width: 768px) {
.settings-page .grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.settings-page article {
padding: 1rem;
}
.settings-page .email-form .field {
flex-direction: column;
align-items: stretch;
}
}
@media (prefers-color-scheme: dark) {
.settings-page article {
background: var(--pico-card-background-color, #1e293b);
border-color: var(--pico-card-border-color, #334155);
}
.settings-page article:hover {
box-shadow: var(
--pico-card-box-shadow-hover,
0 0.125rem 1rem rgba(0, 0, 0, 0.3)
);
}
}

2
app/views/layouts/application.html.erb
View file

@ -137,7 +137,7 @@
<%= Sentry.get_trace_propagation_meta.html_safe %>
</head>
<body style="display: flex;" data-controller="nav">
<body class="<%= content_for(:body_class) %>" style="display: flex;" data-controller="nav">
<!-- Mobile nav toggle button -->
<button class="nav-toggle" data-action="click->nav#toggle">Menu</button>

551
app/views/users/edit.html.erb
View file

@ -2,173 +2,195 @@
<%= @is_own_settings ? "My Settings" : "Settings | #{@user.username}" %>
<% end %>
<% content_for :body_class, "settings-page" %>
<main class="container">
<header >
<header>
<h1><%= @is_own_settings ? "My Settings" : "Settings for #{@user.username}" %></h1>
<p>Change your settings for Hackatime and Sailors Log.</p>
</header>
<hr>
<div class="grid">
<section>
<h2>Time tracking wizard</h2>
<%= link_to "Set up time tracking", my_wakatime_setup_path %>
</section>
<article>
<header>
<h2>🚀 Time tracking wizard</h2>
</header>
<p>Get started with tracking your coding time in just a few minutes.</p>
<%= link_to "Set up time tracking", my_wakatime_setup_path, role: "button" %>
</article>
<section>
<h2 id="user_timezone">Timezone</h2>
<%= form_with model: @user,
url: @is_own_settings ? my_settings_path : settings_user_path(@user),
method: :patch do |f| %>
<div class="form-group">
<%= f.label :timezone, "Your timezone" %>
<%= f.select :timezone,
TZInfo::Timezone.all.map(&:identifier).sort,
include_blank: @user.timezone.blank?, class: "form-select" %>
</div>
<small>This affects how your activity graph and other time-based features are displayed.</small>
<%= f.submit "Save Settings" %>
<% end %>
</section>
<hr>
<section>
<h2 id="user_slack_status">Slack status</h2>
<p>When you're hacking on a project, Hackatime can update your Slack status so you can show it off!</p>
<% unless @can_enable_slack_status %>
<%= link_to "Re-authorize with Slack to give permission to update your status", slack_auth_path %>
<% end %>
<%= form_with model: @user,
url: @is_own_settings ? my_settings_path : settings_user_path(@user),
method: :patch do |f| %>
<fieldset>
<label for="user_uses_slack_status">
<%= f.check_box :uses_slack_status, id: "user_uses_slack_status" %>
<%= f.label :uses_slack_status, "Update my Slack status with my current project" %>
</label>
</fieldset>
<%= f.submit "Save Settings" %>
<% end %>
</section>
<section>
<h2 id="user_slack_notifications">Slack notifications</h2>
<% if @enabled_sailors_logs.any? %>
<p>You have notifications enabled for the following channels:</p>
<ul>
<% @enabled_sailors_logs.each do |sl| %>
<li>
<%= render "shared/slack_channel_mention", channel_id: sl.slack_channel_id %>
</li>
<% end %>
</ul>
<% else %>
<p>You have no notifications enabled.</p>
<% end %>
<p>
You can enable notifications for specific channels by running <code>/sailorslog on</code> in the Slack channel you want to enable notifications for.
</p>
</section>
<hr>
<section>
<h2 id="user_github_account">GitHub Account</h2>
<p>
This is used to show your active projects on the leaderboard &amp; current hacking activity on the dashboard.
</p>
<% if @user.github_uid.present? %>
<p>Your GitHub account is linked. <%= link_to "@#{@user.github_username}", "https://github.com/#{@user.github_username}", target: "_blank" %></p>
<% else %>
<%= link_to "Link GitHub Account", github_auth_path, data: { turbo: "false" } %>
<% end %>
</section>
<section>
<h2 id="user_email_addresses">Email Addresses</h2>
<p>These are the email addresses associated with your account.</p>
<% if @user.email_addresses.any? %>
<ul>
<% @user.email_addresses.each do |email_address| %>
<li>
<%= email_address.email %>
<% if email_address.source.present? %>
<span class="super">
(from <%= email_address.source.humanize %>)
</span>
<% end %>
</li>
<% end %>
</ul>
<% else %>
<p>No email addresses found.</p>
<% end %>
<div class="add-email-form">
<%= form_tag add_email_auth_path, data: { turbo: false } do %>
<div class="field">
<%= email_field_tag :email, nil, placeholder: "Add another email address", required: true %>
<article>
<header>
<h2 id="user_timezone">🌍 Timezone</h2>
</header>
<%= form_with model: @user,
url: @is_own_settings ? my_settings_path : settings_user_path(@user),
method: :patch do |f| %>
<div class="form-group">
<%= f.label :timezone, "Your timezone" %>
<%= f.select :timezone,
TZInfo::Timezone.all.map(&:identifier).sort,
include_blank: @user.timezone.blank?, class: "form-select" %>
</div>
<%= submit_tag "Add Email" %>
<small>This affects how your activity graph and other time-based features are displayed.</small>
<%= f.submit "Save Settings", role: "button" %>
<% end %>
</div>
</section>
</article>
<section>
<h2 id="user_hackatime_extension">Hackatime extension</h2>
<%= form_with model: @user,
url: @is_own_settings ? my_settings_path : settings_user_path(@user),
method: :patch do |f| %>
<div class="form-group">
<%= f.label "Simple text" %>
<%= f.select :hackatime_extension_text_type,
User.hackatime_extension_text_types.keys.map { |type| [type.humanize, type] },
selected: @user.hackatime_extension_text_type, class: "form-select" %>
</div>
<%= f.submit "Save Settings" %>
<% end %>
</section>
<section>
<h2 id="user_stats_badges">Stats badges</h2>
<p>This badge shows your stats on your GitHub profile.</p>
<select name="theme" id="theme-select" onchange="updateBadgeTheme(this.value)" class="form-select">
<% GithubReadmeStats.themes.each do |theme| %>
<option value="<%= theme %>"><%= theme.humanize %></option>
<% end %>
</select>
<% gh_badge = GithubReadmeStats.new(current_user.id, "darcula") %>
<img id="badge-preview" src="<%= gh_badge.generate_badge_url %>" data-url="<%= gh_badge.generate_badge_url %>">
<pre id="badge-url"><%= gh_badge.generate_badge_url %></pre>
<script>
function updateBadgeTheme(theme) {
const originalUrl = document.getElementById('badge-preview').dataset.url;
const [baseUrl, queryString] = originalUrl.split('?');
const params = queryString.split('&').map(param => {
const [key, value] = param.split('=');
return key === 'theme' ? `theme=${theme}` : param;
});
const newUrl = `${baseUrl}?${params.join('&')}`;
document.getElementById('badge-preview').src = newUrl;
document.getElementById('badge-url').textContent = newUrl;
}
</script>
</section>
<% if @projects.any? && @user.slack_uid.present? %>
<section>
<p>This badge shows individual project stats.</p>
<p><small>see <a href="https://github.com/pbhak/hackatime-badge">the documentation</a> for more customization options!</small></p>
<select name="project-id" id="project-select" onchange="updateBadgeProject(this.value)" class="form-select">
<% @projects.each do |project_name| %>
<option value="<%= project_name %>"><%= project_name %></option>
<article>
<header>
<h2 id="user_slack_status">💬 Slack Integration</h2>
</header>
<section>
<h3>Status Updates</h3>
<p>When you're hacking on a project, Hackatime can update your Slack status so you can show it off!</p>
<% unless @can_enable_slack_status %>
<%= link_to "Re-authorize with Slack to give permission to update your status", slack_auth_path, role: "button", class: "secondary" %>
<% end %>
</select>
<img id="work-time-badge-preview" src="<%= @work_time_stats_url %>" data-url="<%= @work_time_stats_url %>">
<pre id="work-time-badge-url"><%= @work_time_stats_url %></pre>
<%= form_with model: @user,
url: @is_own_settings ? my_settings_path : settings_user_path(@user),
method: :patch do |f| %>
<fieldset>
<label>
<%= f.check_box :uses_slack_status, id: "user_uses_slack_status" %>
<%= f.label :uses_slack_status, "Update my Slack status with my current project" %>
</label>
</fieldset>
<%= f.submit "Save Settings", role: "button" %>
<% end %>
</section>
<section>
<h3 id="user_slack_notifications">Channel Notifications</h3>
<% if @enabled_sailors_logs.any? %>
<p>You have notifications enabled for the following channels:</p>
<ul>
<% @enabled_sailors_logs.each do |sl| %>
<li>
<%= render "shared/slack_channel_mention", channel_id: sl.slack_channel_id %>
</li>
<% end %>
</ul>
<% else %>
<p>You have no notifications enabled.</p>
<% end %>
<p>
You can enable notifications for specific channels by running <code>/sailorslog on</code> in the Slack channel you want to enable notifications for.
</p>
</section>
</article>
<article>
<header>
<h2 id="user_github_account">🔗 Connected Accounts</h2>
</header>
<section>
<h3>GitHub Account</h3>
<p>This is used to show your active projects on the leaderboard &amp; current hacking activity on the dashboard.</p>
<% if @user.github_uid.present? %>
<p>✅ Your GitHub account is linked: <%= link_to "@#{@user.github_username}", "https://github.com/#{@user.github_username}", target: "_blank" %></p>
<% else %>
<%= link_to "Link GitHub Account", github_auth_path, data: { turbo: "false" }, role: "button" %>
<% end %>
</section>
<section>
<h3 id="user_email_addresses">Email Addresses</h3>
<p>These are the email addresses associated with your account.</p>
<% if @user.email_addresses.any? %>
<ul>
<% @user.email_addresses.each do |email_address| %>
<li>
<%= email_address.email %>
<% if email_address.source.present? %>
<span class="super">
(from <%= email_address.source.humanize %>)
</span>
<% end %>
</li>
<% end %>
</ul>
<% else %>
<p>No email addresses found.</p>
<% end %>
<div class="email-form">
<%= form_tag add_email_auth_path, data: { turbo: false } do %>
<div class="field">
<%= email_field_tag :email, nil, placeholder: "Add another email address", required: true %>
</div>
<%= submit_tag "Add Email", role: "button", class: "secondary" %>
<% end %>
</div>
</section>
</article>
<article>
<header>
<h2 id="user_hackatime_extension">⚙️ Extension Settings</h2>
</header>
<%= form_with model: @user,
url: @is_own_settings ? my_settings_path : settings_user_path(@user),
method: :patch do |f| %>
<div class="form-group">
<%= f.label "Simple text" %>
<%= f.select :hackatime_extension_text_type,
User.hackatime_extension_text_types.keys.map { |type| [type.humanize, type] },
selected: @user.hackatime_extension_text_type, class: "form-select" %>
</div>
<%= f.submit "Save Settings", role: "button" %>
<% end %>
</article>
<article>
<header>
<h2 id="user_stats_badges">📊 Stats Badges</h2>
</header>
<section>
<p>Show your coding stats on your GitHub profile with beautiful badges.</p>
<h3>General Stats Badge</h3>
<p>This badge shows your overall coding statistics.</p>
<select name="theme" id="theme-select" onchange="updateBadgeTheme(this.value)" class="form-select">
<% GithubReadmeStats.themes.each do |theme| %>
<option value="<%= theme %>"><%= theme.humanize %></option>
<% end %>
</select>
<% gh_badge = GithubReadmeStats.new(current_user.id, "darcula") %>
<img id="badge-preview" src="<%= gh_badge.generate_badge_url %>" data-url="<%= gh_badge.generate_badge_url %>">
<pre id="badge-url"><%= gh_badge.generate_badge_url %></pre>
</section>
<% if @projects.any? && @user.slack_uid.present? %>
<section>
<h3>Project Stats Badge</h3>
<p>This badge shows individual project statistics.</p>
<p><small>See <a href="https://github.com/pbhak/hackatime-badge">the documentation</a> for more customization options!</small></p>
<select name="project-id" id="project-select" onchange="updateBadgeProject(this.value)" class="form-select">
<% @projects.each do |project_name| %>
<option value="<%= project_name %>"><%= project_name %></option>
<% end %>
</select>
<img id="work-time-badge-preview" src="<%= @work_time_stats_url %>" data-url="<%= @work_time_stats_url %>">
<pre id="work-time-badge-url"><%= @work_time_stats_url %></pre>
</section>
<% end %>
<script>
function updateBadgeTheme(theme) {
const originalUrl = document.getElementById('badge-preview').dataset.url;
const [baseUrl, queryString] = originalUrl.split('?');
const params = queryString.split('&').map(param => {
const [key, value] = param.split('=');
return key === 'theme' ? `theme=${theme}` : param;
});
const newUrl = `${baseUrl}?${params.join('&')}`;
document.getElementById('badge-preview').src = newUrl;
document.getElementById('badge-url').textContent = newUrl;
}
function updateBadgeProject(project) {
const originalUrl = document.getElementById('work-time-badge-preview').dataset.url;
let splitUrl = originalUrl.split('/');
@ -178,115 +200,130 @@
document.getElementById('work-time-badge-url').textContent = newUrl;
}
</script>
</section>
<% end %>
</article>
<section>
<h2 id="user_markscribe">Markscribe Templates</h2>
<p>Use markscribe to create beautiful GitHub profile READMEs with your coding stats.</p>
<div class="code-example">
<pre><code>{{ wakatimeDoubleCategoryBar "💾 Languages:" wakatimeData.Languages "💼 Projects:" wakatimeData.Projects 5 }}</code></pre>
</div>
<p>Add this to your GitHub profile README template to display your top languages and projects.</p>
<p><small>See the <a href="https://github.com/taciturnaxolotl/markscribe#your-wakatime-languages-formated-as-a-bar" target="_blank">markscribe documentation</a> for more template options.</small></p>
<img src="https://cdn.fluff.pw/slackcdn/524e293aa09bc5f9115c0c29c18fb4bc.png" alt="Example of markscribe output showing coding language and project statistics" width="100%"/>
</section>
<article>
<header>
<h2 id="user_markscribe">📝 Markscribe Templates</h2>
<p>Use markscribe to create beautiful GitHub profile READMEs with your coding stats.</p>
</header>
<div class="code-example">
<pre><code>{{ wakatimeDoubleCategoryBar "💾 Languages:" wakatimeData.Languages "💼 Projects:" wakatimeData.Projects 5 }}</code></pre>
</div>
<p>Add this to your GitHub profile README template to display your top languages and projects.</p>
<p><small>See the <a href="https://github.com/taciturnaxolotl/markscribe#your-wakatime-languages-formated-as-a-bar" target="_blank">markscribe documentation</a> for more template options.</small></p>
<img src="https://cdn.fluff.pw/slackcdn/524e293aa09bc5f9115c0c29c18fb4bc.png" alt="Example of markscribe output showing coding language and project statistics" width="100%"/>
</article>
<hr>
<section>
<h2 id="user_config_file">Config file</h2>
<p>
<% if current_user.most_recent_direct_entry_heartbeat %>
Your last heartbeat was <%= time_ago_in_words current_user.most_recent_direct_entry_heartbeat.created_at %> ago.
<% else %>
You haven't sent any heartbeats yet directly to this platform.
<% end %>
</p>
<%= render "wakatime_config_display" %>
<p>
<small>
This file is located in <code>~/.wakatime.cfg</code> on your computer.
You can configure it with <a href="https://github.com/wakatime/wakatime-cli/blob/develop/USAGE.md#ini-config-file">other settings</a> as well.
</small>
</p>
</section>
<section>
<h2 id="user_privacy">Privacy</h2>
<%= form_with model: @user,
url: @is_own_settings ? my_settings_path : settings_user_path(@user),
method: :patch do |f| %>
<fieldset>
<label for="user_allow_public_stats_lookup">
<%= f.check_box :allow_public_stats_lookup, id: "user_allow_public_stats_lookup" %>
<%= f.label :allow_public_stats_lookup, "Allow others to look up my public coding stats via the API" %>
</label>
</fieldset>
<%= f.submit "Save Settings" %>
<% end %>
</section>
<% admin_tool do %>
<section>
<h2 id="wakatime_mirror">WakaTime Mirror</h2>
<p>Mirror your coding activity to WakaTime.</p>
<% if current_user.wakatime_mirrors.any? %>
<div class="mirrors-list">
<% current_user.wakatime_mirrors.each do |mirror| %>
<div class="mirror-item">
<p>
<strong>Endpoint:</strong> <%= mirror.endpoint_url %><br>
<strong>Last synced:</strong> <%= mirror.last_synced_at ? time_ago_in_words(mirror.last_synced_at) + " ago" : "Never" %>
</p>
<%= button_to "Delete", user_wakatime_mirror_path(current_user, mirror), method: :delete, class: "button", data: { confirm: "Are you sure?" } %>
</div>
<article>
<header>
<h2 id="user_config_file">📄 Config File</h2>
<p>
<% if current_user.most_recent_direct_entry_heartbeat %>
Your last heartbeat was <%= time_ago_in_words current_user.most_recent_direct_entry_heartbeat.created_at %> ago.
<% else %>
You haven't sent any heartbeats yet directly to this platform.
<% end %>
</div>
</p>
</header>
<%= render "wakatime_config_display" %>
<p>
<small>
This file is located in <code>~/.wakatime.cfg</code> on your computer.
You can configure it with <a href="https://github.com/wakatime/wakatime-cli/blob/develop/USAGE.md#ini-config-file">other settings</a> as well.
</small>
</p>
</article>
<article>
<header>
<h2 id="user_privacy">🔒 Privacy Settings</h2>
</header>
<%= form_with model: @user,
url: @is_own_settings ? my_settings_path : settings_user_path(@user),
method: :patch do |f| %>
<fieldset>
<label for="user_allow_public_stats_lookup">
<%= f.check_box :allow_public_stats_lookup, id: "user_allow_public_stats_lookup" %>
<%= f.label :allow_public_stats_lookup, "Allow others to look up my public coding stats via the API" %>
</label>
</fieldset>
<%= f.submit "Save Settings", role: "button" %>
<% end %>
</article>
<%= form_with(model: [current_user, WakatimeMirror.new], local: true) do |f| %>
<div class="field">
<%= f.label :endpoint_url, "WakaTime API Endpoint" %>
<%= f.text_field :endpoint_url, value: "https://wakatime.com/api/v1", placeholder: "https://wakatime.com/api/v1" %>
</div>
<% admin_tool do %>
<article>
<header>
<h2 id="wakatime_mirror">🔄 WakaTime Mirror</h2>
<p>Mirror your coding activity to WakaTime.</p>
</header>
<div class="field">
<%= f.label :encrypted_api_key, "WakaTime API Key" %>
<%= f.text_field :encrypted_api_key, placeholder: "Enter your WakaTime API key" %>
</div>
<%= f.submit "Add Mirror", class: "button" %>
<% end %>
</section>
<% end %>
<section>
<h2 id="user_migration_assistant">Migration assistant</h2>
<p>This will migrate your heartbeats from waka.hackclub.com to this platform.</p>
<%= button_to "Migrate heartbeats", my_settings_migrate_heartbeats_path, method: :post %>
<% if @heartbeats_migration_jobs.any? %>
<ul>
<% @heartbeats_migration_jobs.each do |job| %>
<li>
<% if job.finished_at && !job.error %>
✅
<% elsif job.finished_at && job.error %>
❌
<% else %>
⏳
<% if current_user.wakatime_mirrors.any? %>
<div class="mirrors-list">
<% current_user.wakatime_mirrors.each do |mirror| %>
<div class="mirror">
<p>
<strong>Endpoint:</strong> <%= mirror.endpoint_url %><br>
<strong>Last synced:</strong> <%= mirror.last_synced_at ? time_ago_in_words(mirror.last_synced_at) + " ago" : "Never" %>
</p>
<%= button_to "Delete", user_wakatime_mirror_path(current_user, mirror), method: :delete, role: "button", class: "secondary", data: { confirm: "Are you sure?" } %>
</div>
<% end %>
Job started at <%= job.created_at.strftime("%Y-%m-%d %H:%M:%S") %>
<% if job.finished_at %>
(and finished after <%= distance_of_time_in_words(job.finished_at - job.created_at) %>)
<% end %>
<% admin_tool('', 'span') do %>
<%= link_to "View job", GoodJob::Engine.routes.url_helpers.job_path(job.id) %>
<% end %>
</li>
</div>
<% end %>
</ul>
<%= form_with(model: [current_user, WakatimeMirror.new], local: true) do |f| %>
<div class="form-group">
<%= f.label :endpoint_url, "WakaTime API Endpoint" %>
<%= f.text_field :endpoint_url, value: "https://wakatime.com/api/v1", placeholder: "https://wakatime.com/api/v1", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :encrypted_api_key, "WakaTime API Key" %>
<%= f.text_field :encrypted_api_key, placeholder: "Enter your WakaTime API key", class: "form-control" %>
</div>
<%= f.submit "Add Mirror", role: "button" %>
<% end %>
</article>
<% end %>
</section>
<article>
<header>
<h2 id="user_migration_assistant">🚚 Migration Assistant</h2>
<p>This will migrate your heartbeats from waka.hackclub.com to this platform.</p>
</header>
<%= button_to "Migrate heartbeats", my_settings_migrate_heartbeats_path, method: :post, role: "button" %>
<% if @heartbeats_migration_jobs.any? %>
<section>
<h3>Migration Jobs</h3>
<ul>
<% @heartbeats_migration_jobs.each do |job| %>
<li>
<% if job.finished_at && !job.error %>
✅
<% elsif job.finished_at && job.error %>
❌
<% else %>
⏳
<% end %>
Job started at <%= job.created_at.strftime("%Y-%m-%d %H:%M:%S") %>
<% if job.finished_at %>
(and finished after <%= distance_of_time_in_words(job.finished_at - job.created_at) %>)
<% end %>
<% admin_tool('', 'span') do %>
<%= link_to "View job", GoodJob::Engine.routes.url_helpers.job_path(job.id) %>
<% end %>
</li>
<% end %>
</ul>
</section>
<% end %>
</article>
</div>
</main>