indocomsoft/cvwo-assignment-2017

<%= render "header" %>
<div class="toolbar">
  <%= link_to '<i class="fa fa-chevron-left" aria-hidden="true"></i>'.html_safe, 'javascript:history.back()', class: 'btn btn-primary', title: 'Back', data: { toggle: 'tooltip', placement: 'bottom' } %>
</div>

<%= form_for @category, html: { id: "needs-validation", novalidate: "novalidate" } do |c| %>
  <div class="form-row">
    <div class="form-group col-md">
      <%= c.label :name %>
      <%= c.text_field :name, class: 'form-control' %>
    </div>
    <div class="form-group col-md">
      <%= check_box_tag "check-colour", "", !@category.colour.nil? %>
      <label for="check-colour">
        Use custom colour?
      </label>
      <div class="input-group colorpicker-component" id="colourpicker">
        <%= c.text_field :colour, class: 'form-control' %>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label>Tasks</label>
    <%= text_field_tag "task", @category.tasks.map { |t| t.name }.join(","), class: 'form-control', data: { role: 'tagsinput' } %>
  </div>
  <%= c.submit "Save", class: 'btn btn-primary' %>
<% end %>
<%= render "footer" %>
<script type="text/javascript">
$(document).on('turbolinks:load',() => {
  $("#category_colour").hide();
  if (!$("#check-colour")[0].checked) {
    $("#colourpicker").hide();
  }
  $("#colourpicker").colorpicker({
    color: '<%= if !@category.colour.nil?; @category.colour; else; '#FFFFFF'; end %>',
    inline: true,
    container: true
  });
});
$("#check-colour").change(function() {
  if (this.checked) {
    $("#colourpicker").show("slow");
  } else {
    $("#category_colour")[0].value = "nil";
    $("#colourpicker").hide("slow");
  }
});
var tasknames = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: {
    cache: false,
    url: '/tasks/all',
    filter: list => $.map(list, categoryname => ({ name: categoryname }))
  }
});
$("#task").tagsinput({
  freeInput: false,
  typeaheadjs: {
    name: 'tasknames',
    displayKey: 'name',
    valueKey: 'name',
    source: tasknames.ttAdapter()
  }
})
</script>