_form.html.erb

<link rel="stylesheet" type="text/css" href="/css/restrictedElements.css">
<script src="/js/metadata.json"></script>

<%= form_with(model: [group,@assignment], local: true, html: {onsubmit:"beforeSubmit()"}, multipart: true ,id:"assignmentForm") do |form| %>
  <% if @assignment.errors.any? %>
    <div id="error-message">
      <ul>
        <% @assignment.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div id="name-field" class="field form-group">
    <h6><%= form.label :name %></h6>
    <%= form.text_field :name, id: :assignment_name, class: 'form-control form-input' %>
  </div>
  <div id="description" class="field form-group">
    <h6><%= form.label :description %></h6>
    <%= render :partial => 'editor/index', :locals => {:content => (sanitize @assignment.description)} %>
  </div>
  <div id="deadline-field" class="field form-group projects-tag-form-group">
    <h6><label for="assignment_deadline">Deadline</label></h6> (<span id='remaining-time'><b>(something went wrong when loading script)</b></span>)
    <input id="assignment_deadline" name="assignment[deadline]" type="text" class="form-control form-input">
  </div>
  <div id="grade-field" class="form-group projects-tag-form-group">
    <h6><%= form.label :grading_scale %></h6>
    <% if @assignment.new_record? %>
      <span> (Cannot be changed once set)</span>
      <%= form.select :grading_scale, [["No Grade", :no_scale], ["Letter(A-F)", :letter], ["Percent(1-100)", :percent], ["Custom", :custom]], {}, class: 'form-control form-input' %>
    <% else %>
      <div class="assignments-noedit-grade-field">
        <p><%= AssignmentDecorator.new(@assignment).graded %> - Cannot be edited</p>
      </div>
    <% end %>
  </div>

  <div id="restrictions-field" class="field form-group">
    <label for="restrict-elements" class="primary-checkpoint-container" id="label-restrict-elements"><h6>Enable elements restriction:</h6>
      <%= check_box_tag "restrict-elements", checked: @assignment.elements_restricted? %>
      <div class="primary-checkpoint"></div>
    </label>
    <div class="restricted-elements-list"> <!-- Operated by script --> </div>
  </div>

  <div class="field form-group">
    <%= form.submit class: 'btn primary-button' %> &nbsp;
    <%= link_to 'Back', :back, class: 'anchor-text' %>
  </div>
<% end %>

<script type="text/javascript">
  $(document).ready(function() {
    loadRestrictions(`JSON.parse(<%= raw @assignment.restrictions %>)`);
    loadDeadlinePicker();
  })

  function loadDeadlinePicker() {
    $('#assignment_deadline').datetimepicker({
      format: 'd/m/Y H:i',
      minDate: formatDate(new Date(),'d/m/Y'),
      validateOnBlur: false,
      step: 30,
      value: defaultAssignmentDate()
    });
    $('#assignment_deadline').change(function()
    {
      const newDate = Date.parseDate($('#assignment_deadline').val(),'d/m/Y H:i');
      const remainingTimeLabel = $('#remaining-time');
      const remainingSeconds = (newDate - Date.now()) / 1000;

      if(newDate == null || remainingSeconds <= 0){
        $('#assignment_deadline').datetimepicker({value: defaultAssignmentDate()});
        $('#assignment_deadline').change();
        return;
      }
      $('#assignment_deadline').datetimepicker({value: newDate});
      updateRemainingTime(remainingTimeLabel,newDate);
    });
    $('#assignment_deadline').change();
  }
  function updateRemainingTime(label,toDate) {
    const timeString = convertSecondsToReadableString((toDate - Date.now()) / 1000);
    label.html(`Time remaining: ${timeString}`);
  }
  function defaultAssignmentDate() {
    const splittedDate = "<%= assignment.deadline.strftime("%d/%m/%Y %H:%M") %>".split(/[\s,/:]+/);
    let pickerDate = new Date(splittedDate[2], splittedDate[1]-1, splittedDate[0], splittedDate[3], splittedDate[4]);
    const pickerUnix = pickerDate.getTime();
    const pickerUnixWithTimezone = new Date(pickerUnix - new Date().getTimezoneOffset()*60*1000);
    return formatDate(pickerUnixWithTimezone,"dd/MM/yyyy HH:mm");
  }
  function beforeSubmit() {
      cleanEditor();
      generateRestrictions();
      generateDate();
  }
  function generateDate() {
    const splittedDate = $('#assignment_deadline').val().split(/[\s,/:]+/);
    let pickerDate = new Date(splittedDate[2], splittedDate[1]-1, splittedDate[0], splittedDate[3], splittedDate[4]);
    const pickerUnix = pickerDate.getTime();
    const pickerUnixWithTimezone = new Date(pickerUnix + new Date().getTimezoneOffset()*60*1000);
    $('#assignment_deadline').val(formatDate(pickerUnixWithTimezone,"yyyy-MM-ddTHH:mm"));
  }
  function cleanEditor() {
    $('<input />').attr('type', 'hidden')
      .attr('name', 'description')
      .attr('value', $("#trumbowyg-editor").cleanHtml())
      .appendTo('#assignmentForm');
  }
  function generateRestrictions() {
    let updated_restrictions = [];
    if ($('#restrict-elements').is(":checked")) {
      let restricted_elements = $('.element-restriction');
      for (let i = 0; i < restricted_elements.length; i++) {
        let temp = $(restricted_elements[i]);
        if (temp.is(":checked"))
          updated_restrictions.push(temp.val());
      }
    }
    $('<input />').attr('type', 'hidden')
        .attr('name', 'assignment[restrictions]')
        .attr('value', JSON.stringify(updated_restrictions))
        .appendTo('#assignmentForm');
  }

</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.4.5/jquery.datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.4.5/jquery.datetimepicker.min.js"></script>