coupler 0.0.1-java

data/webroot/views/resources/show.erb

@@ -0,0 +1,86 @@
+<%- @breadcrumbs = [@project, @resource] -%>
+<%- add_javascript('jquery.dataTables.min.js') -%>
+<%- add_stylesheet('dataTables.css') -%>
+<h2>Fields</h2>
+<table id="fields" class="dataTable" style="clear: both;">
+  <thead>
+    <tr>
+      <th>Field</th>
+      <th>Type</th>
+    </tr>
+  </thead>
+  <tbody>
+  <%- @fields.each do |field| -%>
+    <tr>
+      <td<%= ' class="altered-field"' if field.is_generated %>><%= field.name %></td>
+      <td<%= ' class="altered-field"' if field.local_db_type %>><%= field.final_db_type %></td>
+    </tr>
+  <%- end -%>
+  </tbody>
+</table>
+<p>
+  <a href="/projects/<%= @project.id %>/resources/<%= @resource.id %>/edit">Select Fields</a>
+</p>
+
+<h2>Transformations</h2>
+<div class="section">
+  <%= erb(:"transformations/list", :layout => false) %>
+</div>
+
+<h2>Status</h2>
+<div class="section">
+  <%- if @job -%>
+    <% if @job.status == 'running' %>
+      <p>This resource is currently being transformed (since <%= timeago(@job.started_at, 'strong', 'span') %>).</p>
+      <div id="progressbar"></div>
+      <div id="progressbar-info" style="float: left;"><%= "#{@job.completed} / #{@job.total}"   if @job.status == 'running' %></div>
+      <img id="progressbar-spinner" src="/images/ajax-loader.gif" alt="Spinner" style="float: left;" />
+      <div class="clear"></div>
+    <% elsif @job.status == 'scheduled' %>
+      <p>This resource is currently scheduled to be transformed (since <%= timeago(@job.created_at, 'strong', 'span') %>).</p>
+    <% end %>
+  <% else %>
+    <p>
+      Status: <span class="strong"<%= ' style="color: red;"' if @resource.status != "ok" %>><%= humanize(@resource.status) %></span><br/>
+      <% if !@transformations.empty? %>
+        Last transformed: <%= timeago(@resource.transformed_at, 'strong', 'span') %>
+      <% end %>
+    </p>
+    <% if !@transformations.empty? %>
+      <form method="get" action="/projects/<%= @project.id %>/resources/<%= @resource.id %>/transform">
+        <p>
+          <input onclick="return confirm('Are you sure you want to transform this resource?');" value="Transform now" type="submit" />
+        </p>
+      </form>
+    <% end %>
+  <% end %>
+</div>
+
+<% if !@scenarios.empty? %>
+<h2>Related Scenarios</h2>
+<div class="section">
+  <%= erb(:"scenarios/list", :layout => false) %>
+</div>
+<% end %>
+
+<script type="text/javascript">
+  var intervalId;
+  $(function() {
+    $('#fields').dataTable({bJQueryUI: true, aaSorting: [], aoColumns: [null, null] });
+  <%- if @job && @job.status == 'running' -%>
+    $('#progressbar').progressbar({value: <%= @job.percent_completed %>});
+    setInterval(function() {
+      $.get("/jobs/<%= @job.id %>/progress", function(data) {
+        var total = parseInt(data.total);
+        var completed = parseInt(data.completed);
+        var percent = completed / total * 100;
+        $('#progressbar').progressbar('option', 'value', percent);
+        $('#progressbar-info').html(completed + " / " + total);
+        if (percent == 100) {
+          window.location.reload(true);
+        }
+      }, 'json');
+    }, 5000);
+  <%- end -%>
+  });
+</script>

data/webroot/views/resources/transform.erb

@@ -0,0 +1,2 @@
+<% @breadcrumbs = [@project, @resource, "Transform"] %>
+

data/webroot/views/results/csv.erb

@@ -0,0 +1,12 @@
+Project: <%= @snapshot[:project][:name] %>
+Scenario: <%= @snapshot[:scenario][:name] %>
+<%- if @snapshot[:resource_2] -%>
+Resource 1: <%= @snapshot[:resource_1][:name] %>
+Resource 2: <%= @snapshot[:resource_2][:name] %>
+<%- else -%>
+Resource: <%= @snapshot[:resource_1][:name] %>
+<%- end -%>
+Host: <%= local_ip %>
+Time: <%= @result.created_at %>
+
+<%= @result.to_csv.chomp %>

data/webroot/views/results/details.erb

@@ -0,0 +1,15 @@
+<h2>Group #<%= @group[:id] %></h2>
+<div id="result-group-0" class="result-group result-group-left">&nbsp;</div>
+<div id="result-group-1" class="result-group result-group-right">&nbsp;</div>
+<div class="clear"></div>
+<script type="text/javascript">
+  var detailsUrl = "<%= @result.id %>/details/<%= @group[:id] %>/record";
+  var useWhich = <%= @scenario.linkage_type != 'self-linkage' %>;
+  $(function() {
+    $('#result-tabs').bind("tabsshow", function(e, ui) {
+      contentWidth = $('#group-details').width();
+    });
+    getRecord($('#result-group-0'), 0, useWhich ? 0 : null);
+    getRecord($('#result-group-1'), useWhich ? 0 : 1, useWhich ? 1 : null);
+  });
+</script>

data/webroot/views/results/index.erb

@@ -0,0 +1,2 @@
+<% @breadcrumbs = [@project, @scenario, "Results"] %>
+<%= erb(:"results/list", :layout => false) %>

data/webroot/views/results/list.erb

@@ -0,0 +1,22 @@
+<% if @results.empty? %>
+<p>There are currently no results for this scenario.</p>
+<% else %>
+<table class="list">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>Run at</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+  <% @results.each do |result| %>
+    <tr>
+      <td><%= result.run_number %></td>
+      <td><%= result.created_at %></td>
+      <td><a href="/projects/<%=@project.id%>/scenarios/<%=@scenario.id%>/results/<%=result.id%>">Show</a></td>
+    </tr>
+  <% end %>
+  </tbody>
+</table>
+<% end %>

data/webroot/views/results/record.erb

@@ -0,0 +1,24 @@
+<div class="column-name column-header">
+  Field
+  <div class="resize-handle"></div>
+</div>
+<div class="column-value column-header">
+  Value
+  <div class="resize-handle"></div>
+</div>
+<%- @num_columns.times do |i| -%>
+  <div class="column-name row-<%= i % 2 %>">
+    <%= @columns[i] || "&nbsp;" %>
+    <div class="resize-handle"></div>
+  </div>
+  <div class="column-value row-<%= i % 2 %>">
+    <%= @columns[i] ? @record[@columns[i]] : "&nbsp;" %>
+    <div class="resize-handle"></div>
+  </div>
+<%- end -%>
+<div class="clear"></div>
+<div class="record-navigation">
+  Record <%= @index + 1 %> of <%= @total %>
+  <span class="record-nav previous-record record-<%= @index > 0 ? @index - 1 : 'x' %><%= " which-#{@which}"  if @which %> ui-icon ui-icon-circle-arrow-w"></span>
+  <span class="record-nav next-record record-<%= @index + 1 < @total ? @index + 1 : 'x' %><%= " which-#{@which}"  if @which %> ui-icon ui-icon-circle-arrow-e"></span>
+</div>

data/webroot/views/results/show.erb

@@ -0,0 +1,68 @@
+<%- add_javascript('jquery.dataTables.min.js', 'results.js') -%>
+<%- add_stylesheet('dataTables.css') -%>
+<%- @breadcrumbs = [@project, @scenario, @result] -%>
+
+<div id="result-tabs">
+  <ul>
+    <li><a href="#groups">Groups</a></li>
+  </ul>
+  <div id="groups">
+    <p>
+      There were <strong><%= groups_dataset.count %></strong> groups of records
+      found.  Click on a group row to see more details.
+    </p>
+    <table class="summary dataTable">
+      <thead>
+        <tr>
+          <%- (columns = groups_dataset.columns).each do |column| -%>
+            <%- if column.to_s =~ /pair_(\d+)/ -%>
+              <th><%= "Pair #%d" % ($1.to_i + 1) %></th>
+            <%- else -%>
+              <th><%= column %></th>
+            <%- end -%>
+          <%- end -%>
+        </tr>
+      </thead>
+      <tbody>
+        <%- groups_dataset.each do |group| -%>
+          <tr id="group-<%= group[:id] %>" class="group">
+            <%- columns.each do |column| -%>
+              <td><%= group[column] %></td>
+            <%- end -%>
+          </tr>
+        <%- end -%>
+      </tbody>
+    </table>
+  </div>
+</div>
+<p>
+  <a href="/projects/<%= @project.id %>/scenarios/<%= @scenario.id %>/results/<%= @result.id %>.csv">Download results &raquo;</a>
+</p>
+
+<script type="text/javascript">
+  $(function() {
+    $('#result-tabs').tabs({fx: {opacity: 'toggle', duration: 100}});
+    $("table.summary tbody").click(function(e) {
+      /* highlight row */
+      $(oTable.fnSettings().aoData).each(function() {
+        $(this.nTr).removeClass('row_selected');
+      });
+      var tr = $(e.target.parentNode);
+      tr.addClass('row_selected');
+
+      /* get group details */
+      var groupId = tr.attr('id').replace(/^group-/, "");
+      var detailsUrl = window.location.href + "/details/" + groupId;
+      if ($('#group-details').length == 0) {
+        $('#result-tabs').tabs('add', '#group-details', "Details");
+      }
+      $('#group-details').load(detailsUrl, function() {
+        $('#result-tabs').tabs('select', 1);
+      });
+    });
+    var oTable = $('table.summary').dataTable({
+      bJQueryUI: true,
+      aoColumns: <%= columns.collect { |c| case c.to_s when /count$/ then { "sWidth" => "150px" } when "id" then { "sWidth" => "65px" } else nil end }.to_json %>
+    });
+  });
+</script>

data/webroot/views/scenarios/index.erb

@@ -0,0 +1,5 @@
+<%- @breadcrumbs = [@project, "Scenarios"] -%>
+<%= erb(:"scenarios/list", :layout => false) %>
+<p>
+  <a href="/projects/<%= @project.id %>/scenarios/new">Create scenario</a>
+</p>

data/webroot/views/scenarios/list.erb

@@ -0,0 +1,20 @@
+<% if @scenarios.empty? %>
+<p>There are currently no scenarios for this project.</p>
+<% else %>
+<table class="list">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Type</th>
+    </tr>
+  </thead>
+  <tbody>
+  <% @scenarios.each do |scenario| %>
+    <tr>
+      <td><a href="/projects/<%= @project.id %>/scenarios/<%= scenario.id %>"><%= scenario[:name] %></a></td>
+      <td><%= scenario.linkage_type %></td>
+    </tr>
+  <% end %>
+  </tbody>
+</table>
+<% end %>

data/webroot/views/scenarios/new.erb

@@ -0,0 +1,99 @@
+<% @breadcrumbs = [@project, @scenario] %>
+<%= error_messages_for @scenario %>
+
+<style type="text/css">
+  #resources {
+    list-style-type: none;
+    margin: 1em;
+    padding: 0;
+    width: 20em;
+  }
+  #resources li {
+    padding: 0.3em;
+    margin: 0.5em;
+    border: 1px solid black;
+    background-color: #eee;
+    cursor: pointer;
+  }
+  #resources li.selected {
+    background-color: yellow;
+  }
+  #resources li.disabled {
+    border-style: dashed;
+    text-decoration: line-through;
+  }
+</style>
+
+<form method="post" action="/projects/<%= @project.id %>/scenarios">
+  <table id="form-table" class="form">
+    <tr>
+      <td class="left"><label for="name">Name</label></td>
+      <td>
+        <input id="name" name="scenario[name]" type="text" value="<%= @scenario.name %>" />
+      </td>
+    </tr>
+    <tr class="alt">
+      <td class="left"><label for="description">Description</label></td>
+      <td>
+        <input id="name" name="scenario[description]" type="text" value="<%= @scenario.description %>" />
+      </td>
+    </tr>
+  </table>
+
+  <h3>Resource(s)</h3>
+  <p>
+    Here you can specify which resource(s) you want to use in this scenario.
+    The number you choose determines the type of linkage that is performed.  If
+    you choose one resource, a <em>self-linkage</em> will be performed.  If
+    two, a <em>dual-linkage</em> will be performed.  You can choose a
+    <strong>maximum of two</strong> resources.
+  </p>
+  <div style="border-bottom: 1px solid #ddd;">
+    Click which resources you want:
+  </div>
+  <ul id="resources">
+  <% @project.resources.each do |resource| %>
+    <li id="resource-<%= resource.id %>" class="resource"><%= resource.name %></li>
+  <% end %>
+  </ul>
+  <div id="linkage-type" style="margin: 1em 0">
+    Linkage type: <strong>N/A</strong>
+  </div>
+
+  <p>
+    <input type="submit" value="Submit" /> or <a href="/projects/<%= @project.id %>">Cancel</a>
+  </p>
+</form>
+
+<script type="text/javascript">
+  $(function() {
+    $('.resource').disableSelection().click(function() {
+      obj = $(this);
+      if (obj.hasClass('disabled')) return;
+
+      id  = obj.attr('id').split('-')[1];
+      if (obj.hasClass('selected')) {
+        obj.removeClass('selected');
+        $('#resource-input-'+id).remove();
+      }
+      else {
+        obj.addClass('selected');
+        $('form').append("<input id='resource-input-"+id+"' type='hidden' name='scenario[resource_ids][]' value='"+id+"' />");
+      }
+
+      switch($('.resource.selected').length) {
+        case 0:
+          $('#linkage-type strong').text("N/A");
+          break;
+        case 1:
+          $('#linkage-type strong').text("self-linkage");
+          $('.resource.disabled').removeClass('disabled');
+          break;
+        case 2:
+          $('#linkage-type strong').text("dual-linkage");
+          $('.resource:not(.selected)').addClass('disabled');
+          break;
+      }
+    });
+  });
+</script>

data/webroot/views/scenarios/run.erb

@@ -0,0 +1,2 @@
+<% @breadcrumbs = [@project, @scenario, "Run"] %>
+

data/webroot/views/scenarios/show.erb

@@ -0,0 +1,50 @@
+<% @breadcrumbs = [@project, @scenario] %>
+<% if flash[:newly_created] %>
+<div id="notice">
+  Scenario successfully created!  Next you'll need to add a matcher.
+</div>
+<% end %>
+
+<h2>Resource(s)</h2>
+<div class="section">
+  <%= erb(:"resources/list", :layout => false) %>
+</div>
+
+<h2>Matcher</h2>
+<div class="section">
+  <%= erb(:"matchers/list", :layout => false) %>
+  <%- if @matcher.nil? -%>
+  <p>
+    <a href="/projects/<%= @project.id %>/scenarios/<%= @scenario.id %>/matchers/new">Add matcher</a>
+  </p>
+  <%- end -%>
+</div>
+
+<h2>Status</h2>
+<div class="section">
+<% if !@running_jobs.empty? %>
+  <p>This scenario is currently being run:</p>
+  <%= erb(:'jobs/list', {:layout => false}, {:jobs => @running_jobs, :show_target => false}) %>
+<% elsif !@scheduled_jobs.empty? %>
+  <p>This scenario is currently scheduled to run:</p>
+  <%= erb(:'jobs/list', {:layout => false}, {:jobs => @scheduled_jobs, :show_target => false}) %>
+<% else %>
+  <div class="p">
+    Status: <span class="strong"<%= ' style="color: red"' if @scenario.status != 'ok' %>><%= humanize(@scenario.status) %></span><br/>
+    Last run: <%= timeago(@scenario.last_run_at, "inline strong") %>
+  </div>
+  <%- if @scenario.status == 'ok' -%>
+    <form method="get" action="/projects/<%= @project.id %>/scenarios/<%= @scenario.id %>/run" class="button-to">
+      <p>
+        <input onclick="return confirm('Are you sure you want to run this scenario?');" value="Run now" type="submit" />
+      </p>
+    </form>
+  <%- end -%>
+<% end %>
+</div>
+<% if @results.length > 0 %>
+  <h2>Results</h2>
+  <div class="section">
+    <%= erb(:"results/list", :layout => false) %>
+  </div>
+<% end %>

data/webroot/views/sidebar.erb

@@ -0,0 +1,106 @@
+<div class='accordion'>
+  <h3><a href="/projects">Projects</a></h3>
+  <div>
+    <%- projects = Coupler::Models::Project.recently_accessed -%>
+    <%- if projects.empty? -%>
+    <%- else -%>
+      <ul class="accordion-top">
+      <%- projects.each_with_index do |project, i| -%>
+        <%- current_project = @project && @project.id == project.id -%>
+        <li class="<%= current_project ? "current-project" : i % 2 == 0 ? "alt" : "" %>">
+          <span class="ui-icon <%= current_project ? 'ui-icon-triangle-1-e' : 'ui-icon-document' %>"></span>
+          <a href="/projects/<%= project.id %>"><%= project.name %></a>
+          <%- if current_project -%>
+          <ul>
+            <li>
+              <span class="ui-icon ui-icon-document"></span>
+              <a href="/projects/<%= project.id %>/resources">Resources</a>
+            </li>
+            <li>
+              <span class="ui-icon ui-icon-document"></span>
+              <a href="/projects/<%= project.id %>/scenarios">Scenarios</a>
+            </li>
+          </ul>
+          <%- end -%>
+        </li>
+      <%- end -%>
+      </ul>
+    <%- end -%>
+    <ul class="buttons">
+    <%- if Coupler::Models::Project.count > projects.count -%>
+      <li><button class="more-projects">More</button></li>
+    <%- end -%>
+      <li><button class="new-project">New</button></li>
+    </ul>
+  </div>
+  <h3><a href="/connections">Connections</a></h3>
+  <div>
+    <%- connections = Coupler::Models::Connection.recently_accessed -%>
+    <%- if connections.empty? -%>
+    <%- else -%>
+      <ul class="accordion-top">
+      <%- connections.each_with_index do |connection, i| -%>
+        <li<%= ' class="alt"' if i % 2 == 1 %>>
+          <span class="ui-icon ui-icon-signal-diag"></span>
+          <a href="/connections/<%= connection.id %>"><%= connection.name %></a>
+        </li>
+      <%- end -%>
+      </ul>
+    <%- end -%>
+    <ul class="buttons">
+    <%- if Coupler::Models::Connection.count > connections.count -%>
+      <li><button class="more-connections">More</button></li>
+    <%- end -%>
+      <li><button class="new-connection">New</button></li>
+    </ul>
+  </div>
+  <h3><a href="/transformers">Transformers</a></h3>
+  <div>
+    <%- transformers = Coupler::Models::Transformer.recently_accessed -%>
+    <%- if transformers.empty? -%>
+    <%- else -%>
+      <ul class="accordion-top">
+      <%- transformers.each_with_index do |transformer, i| -%>
+        <li<%= ' class="alt"' if i % 2 == 1 %>>
+          <span class="ui-icon ui-icon-carat-2-e-w"></span>
+          <a href="/transformers"><%= transformer.name %></a>
+        </li>
+      <%- end -%>
+      </ul>
+    <%- end -%>
+    <ul class="buttons">
+    <%- if Coupler::Models::Transformer.count > transformers.count -%>
+      <li><button class="more-transformers">More</button></li>
+    <%- end -%>
+      <li><button class="new-transformer">New</button></li>
+    </ul>
+  </div>
+  <h3><a href="/jobs">Jobs</a></h3>
+  <div>
+    <%- jobs = Coupler::Models::Job.recently_accessed -%>
+    <%- if jobs.empty? -%>
+      There are no recent jobs.
+    <%- else -%>
+      <ul class="accordion-top">
+      <%- jobs.each_with_index do |job, i| -%>
+        <li<%= ' class="alt"' if i % 2 == 1 %>>
+          <%- if job.status == 'done' -%>
+          <span class="ui-icon ui-icon-check"></span>
+          <%- elsif job.status == 'failed' -%>
+          <span class="ui-icon ui-icon-alert"></span>
+          <%- elsif job.status == 'running' -%>
+          <span class="ui-icon ui-icon-play"></span>
+          <%- elsif job.status == 'scheduled' -%>
+          <span class="ui-icon ui-icon-clock"></span>
+          <%- end -%>
+          <%- if job.resource -%>
+            <a href="/jobs">Transform: <%= job.resource.name %></a>
+          <%- elsif job.scenario -%>
+            <a href="/jobs">Run: <%= job.scenario.name %></a>
+          <%- end -%>
+        </li>
+      <%- end -%>
+      </ul>
+    <%- end -%>
+  </div>
+</div>

data/webroot/views/transformations/create.erb

@@ -0,0 +1,115 @@
+<% @breadcrumbs = [@project, @resource, @transformation] %>
+<% add_javascript('jquery-ui.combobox.js', 'jquery.dataTables.min.js', 'transformations.js') %>
+<% add_stylesheet('dataTables.css') %>
+<%= error_messages_for @transformation %>
+<form method="post" action="/projects/<%= @project.id %>/resources/<%= @resource.id %>/transformations">
+  <div class="hidden">
+    <input type="hidden" name="transformation[source_field_id]" value="<%= @transformation.source_field_id %>" />
+    <input type="hidden" name="transformation[transformer_id]" value="<%= @transformation.transformer_id %>" />
+  </div>
+  <h2>Source Field</h2>
+  <div class="section">
+    <table class="show no-border">
+      <tr>
+        <td class="col1">
+          <label for="source_field_id" class="strong">Field:</label>
+        </td>
+        <td id="source-field-name"><%= @transformation.source_field.name %></td>
+      </tr>
+      <tr id="field-info">
+        <td class="col1">Current Type:</td>
+        <td><span id='field-type'><%= @transformation.source_field.final_type %></span> (<span id='field-db-type'><%= @transformation.source_field.final_db_type %></span>)</td>
+      </tr>
+    </table>
+  </div>
+  <div id="transformer">
+    <h2>Transformer</h2>
+    <div class="section">
+      <% if @transformation.transformer_id %>
+        <div id="transformer-select">
+          <table class='show no-border'>
+            <tr>
+              <td class='col1'>
+                <label for="transformer_id" class='strong'>Select existing:</label>
+              </td>
+              <td id="transformer-name"><%= @transformation.transformer.name %></td>
+            </tr>
+            <tr id="transformer-info">
+              <td class="col1">Result Type:</td>
+              <td id='transformer-result-type'><%= @transformation.transformer.result_type %></td>
+            </tr>
+          </table>
+        </div>
+      <% else %>
+        <div id="transformer-attributes">
+          <table class="show no-border">
+            <tr>
+              <td class="col1"><label for="transformer-name">Name:</label></td>
+              <td><input id="transformer-name" name="transformation[transformer_attributes][name]" type="text" value="<%= @transformation.transformer.name %>" /></td>
+            </tr>
+            <tr>
+              <td class="col1" style="vertical-align: top"><label for="transformer-allowed_types">Allowed Field Types:</label></td>
+              <td>
+                <select id="transformer-allowed_types" name="transformation[transformer_attributes][allowed_types][]" multiple="multiple">
+                <% [%w{integer Integer}, %w{string String}, %w{datetime Date/Time}].each do |(value, label)| %>
+                  <option value="<%= value %>"<%= ' selected="selected"' if @transformation.transformer.accepts_type?(value) %>><%= label %></option>
+                <% end %>
+                </select>
+              </td>
+            </tr>
+            <tr>
+              <td class="col1"><label for="transformer-result_type">Result Type:</label></td>
+              <td>
+                <select id="transformer-result_type" name="transformation[transformer_attributes][result_type]">
+                <% [['same', 'Same as original field type'], %w{integer Integer}, %w{string String}, %w{datetime Date/Time}].each do |(value, label)| %>
+                  <option value="<%= value %>"<%= ' selected="selected"' if @transformation.transformer.result_type == value %>><%= label %></option>
+                <% end %>
+                </select>
+              </td>
+            </tr>
+            <tr>
+              <td class="col1" style="vertical-align: top"><label for="transformer-code">Code:</label></td>
+              <td><textarea id="transformer-code" name="transformation[transformer_attributes][code]" rows="10" cols="25"><%= @transformation.transformer.code %></textarea></td>
+            </tr>
+          </table>
+        </div>
+      <% end %>
+    </div>
+    <div id="result-field-selection">
+      <h2>Result Field</h2>
+      <div class="section">
+        <p>
+          <input id="result-field-same" type="radio" name="transformation[result_field_id]" value="<%= @transformation.source_field_id %>"<%= ' checked="checked"' if @transformation.result_field_id == @transformation.source_field_id %> />
+          <label for="result-field-same">Same as source field</label>
+          <input id="result-field-new" type="radio" name="transformation[result_field_id]" value=""<%= ' checked="checked"' if @transformation.result_field.new? %> />
+          <label for="result-field-new">New field</label>
+        </p>
+        <div id="result-field-attributes"<%= ' class="hidden"' unless @transformation.result_field.new? %>>
+          <label for="result-field-name" class="strong">Name:</label>
+          <input id="result-field-name" type="text" name="transformation[result_field_attributes][name]" <%= @transformation.result_field.new? ? %{value="#{@transformation.result_field.name}"}: 'value="" disabled="disabled"' %> />
+        </div>
+        <div id="preview-button">
+          <p><button>Preview</button></p>
+        </div>
+      </div>
+    </div>
+    <div id="transformation-result">
+      <h2>Result</h2>
+      <div class="section visible-overflow">
+        <h3>Preview</h3>
+        <div id="transformation-preview" style="float: left;">
+          <%= erb(:'transformations/preview', :layout => false) %>
+        </div>
+        <div class="clear"></div>
+      </div>
+      <p>
+        <input type="submit" value="Submit" /> or <a href="/projects/<%= @project.id %>/resources/<%= @resource.id %>">Cancel</a>
+      </p>
+    </div>
+  </div>
+</form>
+<script type="text/javascript">
+  var fields = <%= @fields.inject({}) { |h, f| h[f.id] = { 'name' => f.name, 'type' => f.final_type, 'db_type' => f.final_db_type }; h }.to_json %>;
+  var transformers = <%= @transformers.inject({}) { |h, t| h[t.id] = { 'name' => t.name, 'allowed_types' => t.allowed_types, 'result_type' => t.result_type }; h }.to_json %>;
+  var previewUrl = "/projects/<%= @project.id %>/resources/<%= @resource.id %>/transformations/preview";
+</script>