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

Add Airtable demo

Browse Source
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
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>