cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use bootstrap_form as the formbuilder for GPX upload form

Browse source 
This also uses the recommended bs-custom-file-input javascript plugin
for the file input control.
This commit is contained in:
Andy Allan 2020-06-24 15:26:07 +02:00
parent 54616e9612
commit 8d2271699b
10 changed files with 61 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/application.js
View file

@ -16,6 +16,8 @@
//= require piwik
//= require richtext
//= require querystring
//= require bs-custom-file-input
//= require bs-custom-file-input-init
/*
* Called as the user scrolls/zooms around to manipulate hrefs of the

5
app/assets/javascripts/bs-custom-file-input-init.js Normal file
View file

@ -0,0 +1,5 @@
/* global bsCustomFileInput */
$(document).ready(function () {
bsCustomFileInput.init();
});

32
app/assets/stylesheets/common.scss
View file

@ -728,6 +728,14 @@ body.compact {
}
}
/* Temporary label size override until we remove site-wide font customisation */
form {
label {
font-size: 16px;
}
}
/* Rules for the search and direction forms */
header .search_forms,
@ -1168,30 +1176,6 @@ tr.turn:hover {
float: right;
}
/* Rules for the new trace form */
#new_trace {
input[type=text] {
width: 50%;
width: calc(100% - 150px);
max-width: 500px;
}
}
/* Rules for the edit trace form */
.edit_trace {
.standard-form-row p {
margin-bottom: 0px;
}
input[type=text] {
width: 50%;
width: calc(100% - 150px);
max-width: 500px;
}
}
/* Rules for the user profile page */
#userinformation {

57
app/views/traces/edit.html.erb
View file

@ -4,49 +4,16 @@
<img src="<%= url_for :controller => "traces", :action => "picture", :id => @trace.id, :display_name => @trace.user.display_name %>">
<%= form_for @trace do |f| %>
<div id='edit-trace-form' class='standard-form'>
<fieldset>
<div class='standard-form-row'>
<label class='standard-label'><%= t ".filename" %></label>
<p class='deemphasize'><%= @trace.name %> (<%= link_to t(".download"), trace_data_path(@trace) %>)</p>
</div>
<div class='standard-form-row'>
<label class='standard-label'><%= t ".uploaded_at" %></label>
<p class='deemphasize'><%= l @trace.timestamp, :format => :friendly %></p>
</div>
<% if @trace.inserted? %>
<div class='standard-form-row'>
<label class='standard-label'><%= t ".points" %></label>
<p class='deemphasize'><%= @trace.size.to_s.gsub(/(\d)(?=(\d{3})+$)/, '\1,') %></p>
</div>
<div class='standard-form-row'>
<label class='standard-label'><%= t ".start_coord" %></label>
</div>
<div class="geo">
<span class="latitude"><%= @trace.latitude %></span>;
<span class="longitude"><%= @trace.longitude %></span>
</div>
(<%= link_to t(".map"), :controller => "site", :action => "index", :anchor => "map=14/#{@trace.latitude}/#{@trace.longitude}" %> / <%= link_to t(".edit"), :controller => "site", :action => "edit", :gpx => @trace.id, :anchor => "map=14/#{@trace.latitude}/#{@trace.longitude}" %>)
<% end %>
<div class='standard-form-row'>
<label class='standard-label'><%= t ".owner" %></label>
<p class='deemphasize'><%= link_to @trace.user.display_name, user_path(@trace.user) %></p>
</div>
<div class='standard-form-row'>
<label class='standard-label'><%= t ".description" %></label>
<%= f.text_field :description %>
</div>
<div class='standard-form-row'>
<label class='standard-label'><%= t ".tags" %></label>
<%= f.text_field :tagstring %> (<%= t ".tags_help" %>)
</div>
<div class='standard-form-row'>
<label class='standard-label'><%= t ".visibility" %></label>
<%= f.select :visibility, [[t("traces.visibility.private"), "private"], [t("traces.visibility.public"), "public"], [t("traces.visibility.trackable"), "trackable"], [t("traces.visibility.identifiable"), "identifiable"]] %> (<a href="<%= t ".visibility_help_url" %>"><%= t ".visibility_help" %></a>)
</div>
</fieldset>
<%= f.submit %>
</div>
<%= bootstrap_form_for @trace do |f| %>
<%= f.text_field :name, :disabled => true %>
<%= f.text_field :description %>
<%= f.text_field :tagstring %>
<%= f.select :visibility,
[[t("traces.visibility.private"), "private"],
[t("traces.visibility.public"), "public"],
[t("traces.visibility.trackable"), "trackable"],
[t("traces.visibility.identifiable"), "identifiable"]],
:help => link_to(t(".visibility_help"), t(".visibility_help_url")) %>
<%= f.primary %>
<%= link_to t(".cancel"), show_trace_path(@trace.user, @trace), :class => "btn btn-link" %>
<% end %>

40
app/views/traces/new.html.erb
View file

@ -2,32 +2,16 @@
<h1><%= t ".upload_trace" %></h1>
<% end %>
<%= error_messages_for "trace" %>
<%= form_for @trace, :url => { :action => "create" }, :html => { :multipart => true } do |f| %>
<div class="standard-form">
<fieldset>
<div class='standard-form-row'>
<label for="trace_gpx_file" class="standard-label"><%= t ".upload_gpx" %></label>
<%= f.file_field :gpx_file %>
</div>
<div class='standard-form-row'>
<label class="standard-label"><%= t ".description" %></label>
<%= f.text_field :description %>
</div>
<div class='standard-form-row'>
<label class="standard-label"><%= t ".tags" %></label>
<%= f.text_field :tagstring %>
<span class="form-help deemphasize">(<%= t ".tags_help" %>)</span>
</div>
<div class='standard-form-row'>
<label class="standard-label"><%= t ".visibility" %></label>
<%= f.select :visibility, [[t("traces.visibility.private"), "private"], [t("traces.visibility.public"), "public"], [t("traces.visibility.trackable"), "trackable"], [t("traces.visibility.identifiable"), "identifiable"]] %>
<span class="form-help deemphasize">(<a href="<%= t ".visibility_help_url" %>"><%= t ".visibility_help" %></a>)</span>
</div>
</fieldset>
<%= f.submit %>
<span class="form-help deemphasize"><a href="<%= t ".help_url" %>"><%= t ".help" %></a></span>
</div>
<%= bootstrap_form_for @trace, :url => { :action => "create" }, :html => { :multipart => true } do |f| %>
<%= f.file_field :gpx_file, :placeholder => t("helpers.file.prompt") %>
<%= f.text_field :description %>
<%= f.text_field :tagstring %>
<%= f.select :visibility,
[[t("traces.visibility.private"), "private"],
[t("traces.visibility.public"), "public"],
[t("traces.visibility.trackable"), "trackable"],
[t("traces.visibility.identifiable"), "identifiable"]],
:help => link_to(t(".visibility_help"), t(".visibility_help_url")) %>
<%= f.primary %>
<%= link_to t(".help"), t(".help_url"), :class => "btn btn-link" %>
<% end %>

6
app/views/traces/show.html.erb
View file

@ -55,10 +55,10 @@
<br /><br />
<% if current_user && (current_user==@trace.user || current_user.administrator? || current_user.moderator?) %>
<div class="buttons standard-form">
<div>
<% if current_user == @trace.user %>
<%= link_to t(".edit_trace"), edit_trace_path(@trace), :class => "button" %>
<%= link_to t(".edit_trace"), edit_trace_path(@trace), :class => "btn btn-outline-primary" %>
<% end %>
<%= button_to t(".delete_trace"), { :controller => "traces", :action => "destroy", :id => @trace.id }, { :method => :delete, :data => { :confirm => t(".confirm_delete") } } %>
<%= link_to t(".delete_trace"), { :controller => "traces", :action => "destroy", :id => @trace.id }, { :method => :delete, :class => "btn btn-outline-danger", :data => { :confirm => t(".confirm_delete") } } %>
</div>
<% end %>

27
config/locales/en.yml
View file

@ -6,6 +6,8 @@ en:
friendly: "%e %B %Y at %H:%M"
blog: "%e %B %Y"
helpers:
file:
prompt: Choose file
submit:
diary_comment:
create: Save
@ -93,6 +95,10 @@ en:
longitude: "Longitude"
public: "Public"
description: "Description"
name: Filename
gpx_file: Upload GPX File
visibility: Visibility
tagstring: Tags
message:
sender: "Sender"
title: "Subject"
@ -105,6 +111,9 @@ en:
description: "Description"
languages: "Languages"
pass_crypt: "Password"
help:
trace:
tagstring: comma delimited
datetime:
distance_in_words_ago:
about_x_hours:
@ -1819,11 +1828,6 @@ en:
identifiable: "Identifiable (shown in trace list and as identifiable, ordered points with timestamps)"
new:
upload_trace: "Upload GPS Trace"
upload_gpx: "Upload GPX File:"
description: "Description:"
tags: "Tags:"
tags_help: "comma delimited"
visibility: "Visibility:"
visibility_help: "what does this mean?"
visibility_help_url: "https://wiki.openstreetmap.org/wiki/Visibility_of_GPS_traces"
help: "Help"
@ -1836,20 +1840,9 @@ en:
one: "You have %{count} trace waiting for upload. Please consider waiting for these to finish before uploading any more, so as not to block the queue for other users."
other: "You have %{count} traces waiting for upload. Please consider waiting for these to finish before uploading any more, so as not to block the queue for other users."
edit:
cancel: Cancel
title: "Editing trace %{name}"
heading: "Editing trace %{name}"
filename: "Filename:"
download: "download"
uploaded_at: "Uploaded:"
points: "Points:"
start_coord: "Start coordinate:"
map: "map"
edit: "edit"
owner: "Owner:"
description: "Description:"
tags: "Tags:"
tags_help: "comma delimited"
visibility: "Visibility:"
visibility_help: "what does this mean?"
visibility_help_url: "https://wiki.openstreetmap.org/wiki/Visibility_of_GPS_traces"
update:

4
package.json
View file

@ -1,7 +1,9 @@
{
"name": "openstreetmap",
"private": true,
"dependencies": {},
"dependencies": {
"bs-custom-file-input": "^1.3.4"
},
"devDependencies": {
"eslint": "^6.8.0"
}

2
test/controllers/traces_controller_test.rb
View file

@ -616,7 +616,7 @@ class TracesControllerTest < ActionDispatch::IntegrationTest
session_for(user)
post traces_path, :params => { :trace => { :gpx_file => file, :description => "", :tagstring => "new,trace", :visibility => "trackable" } }
assert_template :new
assert_match "Description is too short (minimum is 1 character)", response.body
assert_match "is too short (minimum is 1 character)", response.body
end
# Test fetching the edit page for a trace using GET

5
yarn.lock
View file

@ -100,6 +100,11 @@ brace-expansion@^1.1.7:
balanced-match "^1.0.0"
concat-map "0.0.1"
bs-custom-file-input@^1.3.4:
version "1.3.4"
resolved "https://registry.yarnpkg.com/bs-custom-file-input/-/bs-custom-file-input-1.3.4.tgz#c275cb8d4f1c02ba026324292509fa9a747dbda8"
integrity sha512-NBsQzTnef3OW1MvdKBbMHAYHssCd613MSeJV7z2McXznWtVMnJCy7Ckyc+PwxV6Pk16cu6YBcYWh/ZE0XWNKCA==
callsites@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"