Feedback

application.html.erb

<% if user_signed_in? %>
<div id="feedback">
  <h5><i class="ss-icon">&#x1F4AC;</i> How can we make Status Chart better for you?</h5>
  <%= form_tag("/feedback", :method => "post", :remote => true, :id => "feedbackForm", :name => "feedbackForm") do %>
    <textarea placeholder="We would love to hear your feedback, ideas, and complaints :)" name="feedback_note"></textarea>
    <input type="hidden" value="" name="feedback_browser">
    <input type="hidden" value="" name="feedback_version">
    <input type="hidden" value="" name="feedback_os">
    <input type="hidden" value="" name="feedback_url">
    <input type="hidden" value="<%=current_user.email%>" name="feedback_email">
    <input type="hidden" value="<%=current_user.name%>" name="feedback_fullname">
    <button type="submit"  id="feeback-btn" class="btn btn-primary">Send</button>
    <div id="spinner" style="display: none" class="btn btn-primary"><img src="/assets/loader.gif"/> Sending...</div>
  <% end %>
</div><!--/feedback-->
<% end %>

feedback.css

/* ========================================================= Feedback ===*/
#feedback{
    background-color: #fafafa;
    border: 1px solid #bbbdbf;
    border-radius: 3px;
    box-shadow: 0 0 0 2px rgba(100,100,100, 0.14);
    margin: 0 0 30px;
    padding: 10px;
}
#feedback h5{
    color: #5C6E76;
    display: inline-block;
    font-size: 16px;
    margin: 0;
    vertical-align: top;
}
#feedback h5 i{
    font-size: 14px;
    font-weight: normal;
}
#feedback h5.success{
    color: #24906a;
}
#feedback textarea{
    display: inline-block;
    margin: 10px 0 0;
    height: 37px;
    width: 925px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#feedback .btn{
    float: right;
    height: 36px;
    margin: 10px 0 0;
    width: 113px;
}
#feedback #spinner{
    height: 24px;
    width: 85px;
}
#feedback :-moz-placeholder {
    color: #aaa!important;
}
#feedback ::-webkit-input-placeholder {
    color: #aaa!important;
}

feedback.js

// http://www.quirksmode.org/js/detect.html
var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++)    {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {     string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera",
            versionSearch: "Version"
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino"
        },
        {        // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {         // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();

feedback.rb

class Feedback < ActionMailer::Base
  default from: "support@statuschart.com"

  def send_feedback(username, fields)
    @fullname = fields[:feedback_fullname]
    @username = username
    @useremail = fields[:feedback_email]
    @browser = fields[:feedback_browser]
    @version = fields[:feedback_version]
    @os = fields[:feedback_os]
    @url = fields[:feedback_url]
    @message = fields[:feedback_note]
    mail(:to => "support@statuschart.com", :subject => "Feedback: #{@username}")
  end
end

feedback_controller.rb

class FeedbackController < ApplicationController

  def create
    f = Feedback.send_feedback(current_user.username, params)
    f.deliver
    session[:return_to] ||= request.referer
    render json: {'Response' => 'Thanks so much! We really applicate the feedback.'}.to_json
  end

end

routes.rb

match '/feedback' => 'feedback#create', :via => :post

script.js

// Feedback
$('input[name=feedback_browser]').val(BrowserDetect.browser);
$('input[name=feedback_version]').val(BrowserDetect.version);
$('input[name=feedback_os]').val(BrowserDetect.OS);
$('input[name=feedback_url]').val(document.URL);

$('#feedbackForm').bind('ajax:complete',function(evt,xhr,status){
  o = JSON.parse(xhr.responseText);
  $("#feedback h5").addClass("success").html(o.Response);
});
$('#feedback #spinner').ajaxStart(function() {
  $('#feedback #feeback-btn').hide();
  $('#feedback #spinner').show();
});
$('#feedback #feeback-btn').ajaxComplete(function() {
  $('#feedback #spinner').hide();
  $('#feedback #feeback-btn').show();
  $("#feedback textarea").val('');
});

send_feedback.html.erb

<strong>From:</strong> <%= @fullname %><br/>
<strong>Username:</strong> <%= @username %><br/>
<strong>Email:</strong> <%= @useremail %><br/>
<strong>Browser:</strong> <%= @browser %> (<%= @version %>)<br/>
<strong>OS:</strong> <%= @os %><br/>
<strong>URL:</strong> <%= @url %><br/><br/>

<strong>Feedback:</strong> <%= @message %>