upgraded to rails

app/assets/javascripts/application.js

@@ -0,0 +1,16 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require jquery
+//= require jquery_ujs
+//= require turbolinks
+//= require_tree .

app/assets/javascripts/forms.js

@@ -0,0 +1,9 @@
+$(document).ready(function() {
+  
+  $('#generate').click(function(){
+    $('#command_line').val("ffmpeg" + 
+      " -i " + $('#input_name').val() + 
+      " -o " + $('#output_name').val())
+  });
+
+});

app/assets/javascripts/forms.js.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/stylesheets/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any styles
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
+ * file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

app/assets/stylesheets/forms.css.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the forms controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/jquery.steps.css

@@ -0,0 +1,382 @@
+/*
+    Common 
+*/
+
+.wizard,
+.tabcontrol
+{
+    display: block;
+    width: 100%;
+    overflow: hidden;
+}
+
+.wizard a,
+.tabcontrol a
+{
+    outline: 0;
+}
+
+.wizard ul,
+.tabcontrol ul
+{
+    list-style: none !important;
+    padding: 0;
+    margin: 0;
+}
+
+.wizard ul > li,
+.tabcontrol ul > li
+{
+    display: block;
+    padding: 0;
+}
+
+/* Accessibility */
+.wizard > .steps .current-info,
+.tabcontrol > .steps .current-info
+{
+    position: absolute;
+    left: -999em;
+}
+
+.wizard > .content > .title,
+.tabcontrol > .content > .title
+{
+    position: absolute;
+    left: -999em;
+}
+
+
+
+/*
+    Wizard
+*/
+
+.wizard > .steps
+{
+    position: relative;
+    display: block;
+    width: 100%;
+}
+
+.wizard.vertical > .steps
+{
+    display: inline;
+    float: left;
+    width: 30%;
+}
+
+.wizard > .steps .number
+{
+    font-size: 1.429em;
+}
+
+.wizard > .steps > ul > li
+{
+    width: 25%;
+}
+
+.wizard > .steps > ul > li,
+.wizard > .actions > ul > li
+{
+    float: left;
+}
+
+.wizard.vertical > .steps > ul > li
+{
+    float: none;
+    width: 100%;
+}
+
+.wizard > .steps a,
+.wizard > .steps a:hover,
+.wizard > .steps a:active
+{
+    display: block;
+    width: auto;
+    margin: 0 0.5em 0.5em;
+    padding: 1em 1em;
+    text-decoration: none;
+
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.wizard > .steps .disabled a,
+.wizard > .steps .disabled a:hover,
+.wizard > .steps .disabled a:active
+{
+    background: #eee;
+    color: #aaa;
+    cursor: default;
+}
+
+.wizard > .steps .current a,
+.wizard > .steps .current a:hover,
+.wizard > .steps .current a:active
+{
+    background: #2184be;
+    color: #fff;
+    cursor: default;
+}
+
+.wizard > .steps .done a,
+.wizard > .steps .done a:hover,
+.wizard > .steps .done a:active
+{
+    background: #9dc8e2;
+    color: #fff;
+}
+
+.wizard > .steps .error a,
+.wizard > .steps .error a:hover,
+.wizard > .steps .error a:active
+{
+    background: #ff3111;
+    color: #fff;
+}
+
+.wizard > .content
+{
+    background: #eee;
+    display: block;
+    margin: 0.5em;
+    min-height: 35em;
+    overflow: hidden;
+    position: relative;
+    width: auto;
+
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.wizard.vertical > .content
+{
+    display: inline;
+    float: left;
+    margin: 0 2.5% 0.5em 2.5%;
+    width: 65%;
+}
+
+.wizard > .content > .body
+{
+    float: left;
+    position: absolute;
+    width: 95%;
+    height: 95%;
+    padding: 2.5%;
+}
+
+.wizard > .content > .body ul
+{
+    list-style: disc !important;
+}
+
+.wizard > .content > .body ul > li
+{
+    display: list-item;
+}
+
+.wizard > .content > .body > iframe
+{
+    border: 0 none;
+    width: 100%;
+    height: 100%;
+}
+
+.wizard > .content > .body input
+{
+    display: block;
+    border: 1px solid #ccc;
+}
+
+.wizard > .content > .body input[type="checkbox"]
+{
+    display: inline-block;
+}
+
+.wizard > .content > .body input.error
+{
+    background: rgb(251, 227, 228);
+    border: 1px solid #fbc2c4;
+    color: #8a1f11;
+}
+
+.wizard > .content > .body label
+{
+    display: inline-block;
+    margin-bottom: 0.5em;
+}
+
+.wizard > .content > .body label.error
+{
+    color: #8a1f11;
+    display: inline-block;
+    margin-left: 1.5em;
+}
+
+.wizard > .actions
+{
+    position: relative;
+    display: block;
+    text-align: right;
+    width: 100%;
+}
+
+.wizard.vertical > .actions
+{
+    display: inline;
+    float: right;
+    margin: 0 2.5%;
+    width: 95%;
+}
+
+.wizard > .actions > ul
+{
+    display: inline-block;
+    text-align: right;
+}
+
+.wizard > .actions > ul > li
+{
+    margin: 0 0.5em;
+}
+
+.wizard.vertical > .actions > ul > li
+{
+    margin: 0 0 0 1em;
+}
+
+.wizard > .actions a,
+.wizard > .actions a:hover,
+.wizard > .actions a:active
+{
+    background: #2184be;
+    color: #fff;
+    display: block;
+    padding: 0.5em 1em;
+    text-decoration: none;
+
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.wizard > .actions .disabled a,
+.wizard > .actions .disabled a:hover,
+.wizard > .actions .disabled a:active
+{
+    background: #eee;
+    color: #aaa;
+}
+
+.wizard > .loading
+{
+}
+
+.wizard > .loading .spinner
+{
+}
+
+
+
+/*
+    Tabcontrol
+*/
+
+.tabcontrol > .steps
+{
+    position: relative;
+    display: block;
+    width: 100%;
+}
+
+.tabcontrol > .steps > ul
+{
+    position: relative;
+    margin: 6px 0 0 0;
+    top: 1px;
+    z-index: 1;
+}
+
+.tabcontrol > .steps > ul > li
+{
+    float: left;
+    margin: 5px 2px 0 0;
+    padding: 1px;
+
+    -webkit-border-top-left-radius: 5px;
+    -webkit-border-top-right-radius: 5px;
+    -moz-border-radius-topleft: 5px;
+    -moz-border-radius-topright: 5px;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+}
+
+.tabcontrol > .steps > ul > li:hover
+{
+    background: #edecec;
+    border: 1px solid #bbb;
+    padding: 0;
+}
+
+.tabcontrol > .steps > ul > li.current
+{
+    background: #fff;
+    border: 1px solid #bbb;
+    border-bottom: 0 none;
+    padding: 0 0 1px 0;
+    margin-top: 0;
+}
+
+.tabcontrol > .steps > ul > li > a
+{
+    color: #5f5f5f;
+    display: inline-block;
+    border: 0 none;
+    margin: 0;
+    padding: 10px 30px;
+    text-decoration: none;
+}
+
+.tabcontrol > .steps > ul > li > a:hover
+{
+    text-decoration: none;
+}
+
+.tabcontrol > .steps > ul > li.current > a
+{
+    padding: 15px 30px 10px 30px;
+}
+
+.tabcontrol > .content
+{
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 35em;
+    overflow: hidden;
+    border-top: 1px solid #bbb;
+    padding-top: 20px;
+}
+
+.tabcontrol > .content > .body
+{
+    float: left;
+    position: absolute;
+    width: 95%;
+    height: 95%;
+    padding: 2.5%;
+}
+
+.tabcontrol > .content > .body ul
+{
+    list-style: disc !important;
+}
+
+.tabcontrol > .content > .body ul > li
+{
+    display: list-item;
+}

app/assets/stylesheets/scaffolds.css.scss

@@ -0,0 +1,69 @@
+body {
+  background-color: #fff;
+  color: #333;
+  font-family: verdana, arial, helvetica, sans-serif;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+p, ol, ul, td {
+  font-family: verdana, arial, helvetica, sans-serif;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+pre {
+  background-color: #eee;
+  padding: 10px;
+  font-size: 11px;
+}
+
+a {
+  color: #000;
+  &:visited {
+    color: #666;
+  }
+  &:hover {
+    color: #fff;
+    background-color: #000;
+  }
+}
+
+div {
+  &.field, &.actions {
+    margin-bottom: 10px;
+  }
+}
+
+#notice {
+  color: green;
+}
+
+.field_with_errors {
+  padding: 2px;
+  background-color: red;
+  display: table;
+}
+
+#error_explanation {
+  width: 450px;
+  border: 2px solid red;
+  padding: 7px;
+  padding-bottom: 0;
+  margin-bottom: 20px;
+  background-color: #f0f0f0;
+  h2 {
+    text-align: left;
+    font-weight: bold;
+    padding: 5px 5px 5px 15px;
+    font-size: 12px;
+    margin: -7px;
+    margin-bottom: 0px;
+    background-color: #c00;
+    color: #fff;
+  }
+  ul li {
+    font-size: 12px;
+    list-style: square;
+  }
+}

app/controllers/application_controller.rb

@@ -0,0 +1,5 @@
+class ApplicationController < ActionController::Base
+  # Prevent CSRF attacks by raising an exception.
+  # For APIs, you may want to use :null_session instead.
+  protect_from_forgery with: :exception
+end

app/controllers/forms_controller.rb

@@ -0,0 +1,74 @@
+class FormsController < ApplicationController
+  before_action :set_form, only: [:show, :edit, :update, :destroy]
+
+  # GET /forms
+  # GET /forms.json
+  def index
+    @forms = Form.all
+  end
+
+  # GET /forms/1
+  # GET /forms/1.json
+  def show
+  end
+
+  # GET /forms/new
+  def new
+    @form = Form.new
+  end
+
+  # GET /forms/1/edit
+  def edit
+  end
+
+  # POST /forms
+  # POST /forms.json
+  def create
+    @form = Form.new(form_params)
+
+    respond_to do |format|
+      if @form.save
+        format.html { redirect_to @form, notice: 'Form was successfully created.' }
+        format.json { render :show, status: :created, location: @form }
+      else
+        format.html { render :new }
+        format.json { render json: @form.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # PATCH/PUT /forms/1
+  # PATCH/PUT /forms/1.json
+  def update
+    respond_to do |format|
+      if @form.update(form_params)
+        format.html { redirect_to @form, notice: 'Form was successfully updated.' }
+        format.json { render :show, status: :ok, location: @form }
+      else
+        format.html { render :edit }
+        format.json { render json: @form.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # DELETE /forms/1
+  # DELETE /forms/1.json
+  def destroy
+    @form.destroy
+    respond_to do |format|
+      format.html { redirect_to forms_url, notice: 'Form was successfully destroyed.' }
+      format.json { head :no_content }
+    end
+  end
+
+  private
+    # Use callbacks to share common setup or constraints between actions.
+    def set_form
+      @form = Form.find(params[:id])
+    end
+
+    # Never trust parameters from the scary internet, only allow the white list through.
+    def form_params
+      params[:form]
+    end
+end

app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

app/helpers/forms_helper.rb

@@ -0,0 +1,2 @@
+module FormsHelper
+end

app/models/form.rb

@@ -0,0 +1,2 @@
+class Form < ActiveRecord::Base
+end

app/views/forms/_form.html.erb

@@ -0,0 +1,17 @@
+<%= form_for(@form) do |f| %>
+  <% if @form.errors.any? %>
+    <div id="error_explanation">
+      <h2><%= pluralize(@form.errors.count, "error") %> prohibited this form from being saved:</h2>
+
+      <ul>
+      <% @form.errors.full_messages.each do |message| %>
+        <li><%= message %></li>
+      <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div class="actions">
+    <%= f.submit %>
+  </div>
+<% end %>

app/views/forms/edit.html.erb

@@ -0,0 +1,6 @@
+<h1>Editing form</h1>
+
+<%= render 'form' %>
+
+<%= link_to 'Show', @form %> |
+<%= link_to 'Back', forms_path %>

app/views/forms/index.html.erb

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>ffmproviser</title>
+    <meta charset="utf-8">
+
+    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
+    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/bootstrap.min.css">
+    <link href="assets/jquery.steps.css" rel="stylesheet" >
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="assets/forms.js"></script>
+    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+  </head>
+
+    <div class="container">
+      <h1>➺ ffmproviser ❥</h1>
+
+<!-- form begins -->
+
+      <div class="well">
+        <fieldset>
+          <legend>First form</legend>
+          <!-- First we need a select question option... form or not? -->
+          <h4>What is your question?</h4>
+          <ul>
+            <li>Display info</li>
+            <li>Export for web</li>
+            <li>Add subtitles track</li>
+            <li>Remove audio track</li>
+            <li>Add audio track</li>
+          </ul>
+        </fieldset>
+       </div>
+
+      <div id="file_names">
+        <div class="well">
+        <fieldset>
+          <legend>Input and Output</legend>
+            <div class="form-group">
+            <label class="control-label" for="input_name">Input</label>
+              <div class="controls">
+              <input type="text" name="input_name" id="input_name" placeholder="input" />
+              </div>
+            </div>
+            <div class="form-group">
+            <label class="control-label" for="output_name">Output</label>
+              <div class="controls">
+              <input type="text" name="output_name" id="output_name" placeholder="output" />
+              </div>
+            </div>
+          <br/>
+          <input type="button" class="btn btn-large btn-primary" name="generate" id="generate" value="Generate" />
+        </fieldset>
+        </div>
+      </div>
+
+      <div class="well">
+        <fieldset>
+          <legend>Your command line:</legend>
+          <textarea name="command_line" id="command_line" rows="3" cols="100"></textarea>
+        </fieldset>
+      </div>
+
+    </div> <!-- container -->
+
+    <div class="footer">
+      <p>Made with ♥ by <a href="http://www.ashleyblewer.com">Ashley Blewer</a></p>
+    </div>
+  </body>
+</html>

app/views/forms/index.json.jbuilder

@@ -0,0 +1,4 @@
+json.array!(@forms) do |form|
+  json.extract! form, :id
+  json.url form_url(form, format: :json)
+end

app/views/forms/new.html.erb

@@ -0,0 +1,5 @@
+<h1>New form</h1>
+
+<%= render 'form' %>
+
+<%= link_to 'Back', forms_path %>

app/views/forms/show.html.erb

@@ -0,0 +1,4 @@
+<p id="notice"><%= notice %></p>
+
+<%= link_to 'Edit', edit_form_path(@form) %> |
+<%= link_to 'Back', forms_path %>

app/views/forms/show.json.jbuilder

@@ -0,0 +1 @@
+json.extract! @form, :id, :created_at, :updated_at

app/views/layouts/application.html.erb

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Ffmprovisor</title>
+  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+  <%= csrf_meta_tags %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

app/views/layouts/index.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>ffmproviser</title>
+    <meta charset="utf-8">
+
+    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
+    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link href="css/jquery.steps.css" rel="stylesheet" >
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="js/forms.js"></script>
+    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+  </head>
+
+    <div class="container">
+      <h1>➺ ffmproviser ❥</h1>
+
+<!-- form begins -->
+
+      <div class="well">
+        <fieldset>
+          <legend>First form</legend>
+          <!-- First we need a select question option... form or not? -->
+          <h4>What is your question?</h4>
+          <ul>
+            <li>Display info</li>
+            <li>Export for web</li>
+            <li>Add subtitles track</li>
+            <li>Remove audio track</li>
+            <li>Add audio track</li>
+          </ul>
+        </fieldset>
+       </div>
+
+      <div id="file_names">
+        <div class="well">
+        <fieldset>
+          <legend>Input and Output</legend>
+            <div class="form-group">
+            <label class="control-label" for="input_name">Input</label>
+              <div class="controls">
+              <input type="text" name="input_name" id="input_name" placeholder="input" />
+              </div>
+            </div>
+            <div class="form-group">
+            <label class="control-label" for="output_name">Output</label>
+              <div class="controls">
+              <input type="text" name="output_name" id="output_name" placeholder="output" />
+              </div>
+            </div>
+          <br/>
+          <input type="button" class="btn btn-large btn-primary" name="generate" id="generate" value="Generate" />
+        </fieldset>
+        </div>
+      </div>
+
+      <div class="well">
+        <fieldset>
+          <legend>Your command line:</legend>
+          <textarea name="command_line" id="command_line" rows="3" cols="100"></textarea>
+        </fieldset>
+      </div>
+
+    </div> <!-- container -->
+
+    <div class="footer">
+      <p>Made with ♥ by <a href="http://www.ashleyblewer.com">Ashley Blewer</a></p>
+    </div>
+  </body>
+</html>