bumi
/
tinyforms
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add Airtable demo

This commit is contained in:
bumi 2020-04-15 14:53:33 +02:00
parent 5793b71ae6
commit 47a4de735d
8 changed files with 117 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/controllers/home_controller.rb
View File

@ -3,4 +3,12 @@ class HomeController < ApplicationController
def index
redirect_to forms_url if logged_in?
end
def demo
if params[:backend] == 'airtable'
render 'demo-airtable'
else
render 'demo-google'
end
end
end

5
app/javascript/demo.js
View File

@ -13,8 +13,13 @@ document.addEventListener("turbolinks:load", function () {
var name = document.getElementById('demo-submission-name');
var demoFields = document.getElementById('demo-fields');
var demoSucess = document.getElementById('demo-success');
var demoIframe = document.getElementById('demo-sheet');
demoFields.style.display = 'none';
demoSucess.style.display = 'block';
name.innerText = e.detail.submission.Name;
// The airtable sheet must be reloaded for the submission to get visible
if (demoIframe.dataset.refresh) {
demoIframe.src = demoIframe.src + '&c=' + new Date().getTime();
}
});
});

2
app/models/submission.rb
View File

@ -37,7 +37,7 @@ class Submission < ApplicationRecord
attachment = ActiveStorage::Attachment.new(record: self, name: 'files', blob: create_one.blob)
attachment.save
# return the URL that we use to show in the Spreadsheet
Rails.application.routes.url_helpers.file_upload_url(form_id: form, submission_id: self, id: attachment.token, host: DEFAULT_HOST)
Rails.application.routes.url_helpers.file_upload_url(form_id: form, submission_id: self, id: attachment.token, host: DEFAULT_HOST, filename: attachment.blob.filename)
else
value.to_s
end

87
app/views/home/demo-airtable.html.erb Normal file
View File

@ -0,0 +1,87 @@
<section class="section demo">
<div class="container">
<div class="columns">
<div class="column is-one-third">
<form class="form demo-form" id="demo-form" action="<%= submission_url(AIRTABLE_DEMO_FORM) %>" method="POST" enctype="multipart/form-data" data-tinyforms="true">
<input type="hidden" name="ID" value="tinyforms_id">
<h3 class="title">Demo</h3>
<p>
This short form is connected to the embedded <%= link_to 'document', AIRTABLE_DEMO_EMBED_URL %> on the right. <br>
Submit the form and see the update of the document in realtime.
</p>
<div id="demo-success" style="display:none;">
<p class="is-size-4 has-text-success">
<span id="demo-submission-name"></span>, thanks for your submission!
</p>
<p>See your entry in the spreadsheet?!</p>
<p>
<%= link_to "Create your form now!", signup_url, class: 'button' %>
<br>
or got <%= link_to 'further questions?', contact_url %>
</p>
</div>
<div id="demo-fields">
<div class="field">
<label class="label">What's your name?*</label>
<div class="control">
<input class="input" type="text" name="Name" required="true" placeholder="Your name">
</div>
</div>
<div class="field">
<label class="label">Where are you from?*</label>
<div class="control">
<div class="select">
<select name="Continent">
<option value="Africa">Africa</option>
<option value="Antartica">Antartica</option>
<option value="Asia">Asia</option>
<option value="Australia">Australia</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Australia">Australia</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">Do you like Pizza with Pinapples?*</label>
<div class="control">
<label class="radio">
<input type="radio" name="Pinapples Pizza?" required value="yes">
Yes
</label>
<label class="radio">
<input type="radio" name="Pinapples Pizza?" required value="no">
Hell, no!
</label>
</div>
</div>
<div class="field">
<label class="label">What's your favorit cat picture?</label>
<div class="control">
<input class="input" type="file" name="Cat Picture">
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link" id="demo-submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
<div class="column">
<iframe id="demo-sheet" data-refresh="true" style="width:100%;height:100%;" src="<%= AIRTABLE_DEMO_EMBED_URL %>" frameborder="0" onmousewheel=""></iframe>
</div>
</div>
</div>
</section>

12
app/views/home/demo.html.erb → app/views/home/demo-google.html.erb
View File

@ -1,12 +1,12 @@
<section class="section demo">
<div class="container content">
<div class="container">
<div class="columns">
<div class="column is-one-third">
<form class="form demo-form" id="demo-form" action="<%= submission_url(DEMO_FORM) %>" method="POST" enctype="multipart/form-data" data-tinyforms="true">
<form class="form demo-form" id="demo-form" action="<%= submission_url(GOOGLE_DEMO_FORM) %>" method="POST" enctype="multipart/form-data" data-tinyforms="true">
<input type="hidden" name="ID" value="tinyforms_id">
<h3>Demo</h3>
<h3 class="title">Demo</h3>
<p>
This short form is connected to the embedded <%= link_to 'document', DEMO_FORM.spreadsheet_url %> on the right. <br>
This short form is connected to the embedded <%= link_to 'document', GOOGLE_DEMO_FORM.spreadsheet_url %> on the right. <br>
Submit the form and see the update of the document in realtime.
</p>
@ -79,8 +79,8 @@
</div>
<div class="column">
<iframe id="demo-sheet" style="width:100%;height:100%;" src="https://docs.google.com/spreadsheets/d/<%= DEMO_FORM.google_spreadsheet_id %>/edit?usp=sharing&nocache=<%= Time.now.to_i %>#gid=0&range=<%= DEMO_FORM.submissions.count + 1 %>:<%= DEMO_FORM.submissions.count + 2 %>"></iframe>
<p class="has-text-grey has-text-centered">Document not loading? <%= link_to 'Open it here', DEMO_FORM.spreadsheet_url %>.</p>
<iframe id="demo-sheet" style="width:100%;height:100%;" src="https://docs.google.com/spreadsheets/d/<%= GOOGLE_DEMO_FORM.google_spreadsheet_id %>/edit?usp=sharing&nocache=<%= Time.now.to_i %>#gid=0&range=<%= GOOGLE_DEMO_FORM.submissions.count + 1 %>:<%= GOOGLE_DEMO_FORM.submissions.count + 2 %>"></iframe>
<p class="has-text-grey has-text-centered">Document not loading? <%= link_to 'Open it here', GOOGLE_DEMO_FORM.spreadsheet_url %>.</p>
</div>
</div>
</div>

4
config/initializers/demo.rb
View File

@ -1 +1,3 @@
DEMO_FORM = Form.find_by(id: ENV['DEMO_FORM_ID'])
GOOGLE_DEMO_FORM = Form.find_by(id: ENV['GOOGLE_DEMO_FORM_ID'])
AIRTABLE_DEMO_FORM = Form.find_by(id: ENV['AIRTABLE_DEMO_FORM_ID'])
AIRTABLE_DEMO_EMBED_URL = ENV['AIRTABLE_DEMO_EMBED_URL']

6
config/routes.rb
View File

@ -6,7 +6,9 @@ Rails.application.routes.draw do
resources :submissions
end
# short link for submission file uploads
get '/s/:form_id/:submission_id/:id' => 'file_uploads#show', as: :file_upload
# we add the filename as part of the URL which allows e.g. Airtable to identify and name the file properly
# the constraint makes sure that a . (dot) can be in the filename. e.g. cat.jpg
get '/s/:form_id/:submission_id/:id(/:filename)' => 'file_uploads#show', as: :file_upload, constraints: { filename: /[^\/]+/ }
# form post url to save new submissions
post '/s/:form_id' => 'submissions#create', as: :submission
@ -21,7 +23,7 @@ Rails.application.routes.draw do
get '/logout' => 'sessions#destroy', as: :logout
get '/auth' => 'sessions#auth', as: :auth
get '/demo' => 'home#demo', as: :demo
get '/demo(/:backend)' => 'home#demo', as: :demo
get '/contact' => 'home#contact', as: :contact
get '/help', to: redirect('https://www.notion.so/Tinyforms-Help-Center-04f13b5908bc46cfb4283079a3cb1149')

3
env.example
View File

@ -2,3 +2,6 @@ GOOGLE_CLIENT_ID=clientid
GOOGLE_CLIENT_SECRET=secret
GOOGLE_PROJECT_ID=projectid
LOCKBOX_MASTER_KEY=f7b18b63d3f7ec48fa78bab327cdf81b0969020f70dc16947b14572cde3e2b7d
GOOGLE_DEMO_FORM_ID=1
AIRTABLE_DEMO_FROM_ID=2
AIRTABLE_DEMO_EMBED_URL=''