View source for CSC/ECE 517 Fall 2015 E1585 Use Ajax for Add Participants, Add TA ,Edit Questionnaires Screens

==Overall Design==
===Purpose===
On some of the views, whenever a user adds or modifies an existing record, the system is saving the entire page and then reloading the entire page back. This is an inefficient way of saving, especially if only one attribute has been modified. Our goal is to modify the views and use AJAX, so that only the newly added information is saved and not the entire page.
For instance, when a new participant is added for an assignment, the list of participants should be appended dynamically, without reloading the whole page.

We will be altering the views for the following scenarios

# Add Participants to an assignment
# Edit questionnaire
# Add TA to an existing course

===Scope and Documentation===
Upon careful investigation, we find that the following views need to be modified

# participant/list.html.erb
# course/view_teaching_assistants.html.erb
# questionnaires/edit.html.erb

Partial views which were modified
#views/course/_add_individual.html.erb
#views/participants/_participant.html.erb
#views/questionnaires/_questionnaire.html.erb

New partials are created to reflect the changes
#views/questionnaires/_edit.html.erb
#views/questionnaires/_add_quests.html.erb
#views/course/_ta.html.erb

New files are created to render the partial views
#views/course/add_ta.js.erb
#views/participants/add.js.erb
#views/questionnaires/add_new_questions.js.erb
#questionnaires/save_all_questions.js.erb
#views/questionnaires/update.js.erb

The following controller files are also modified
#controllers/course_controller.rb
#controllers/questionnaires_controller.rb
#controllers/participants_controller.rb

The documents that will be generated for this project are the design document, the actual files that we edit or create, and a ReadMe that explains what we did and how to use the modified product.

===AJAX===
Ajax is the acronym for Asynchronous Javascript and XML. It is not a programming language or a tool but a concept. Using Ajax allows us to update parts of web page without updating the entire page. Ajax requires basic understanding of HTML and Javascript. Ajax is a client side script which communicates with a server without sharing the entire page over again. It allows web pages to be updated asynchronously by exchanging small pieces of information with the server. It is not visible to the user, but works on the back end. The general web pages which do not use Ajax, load the entire page over when part of new information is added. 
Applications where AJAX is used: Google Maps, Gmail, Twitter, Facebook. Ajax is very popular now, and the reason being its user friendliness, increased speed of web page updating and efficiency is increased as well.

Functionality of Ajax could be understood by the following diagram:

[[File:AJAX.png]]

==Interface and Testing==
Our project will modify the existing views. After modification, the views’ look and feel should remain same as before. The rendering should be faster with lesser data sent to and from the server.

===Sample of Code Changes===
====Changes in  app/controllers/participants_controller.rb====
These are the server side modifications.

The following line is removed

 redirect_to :action => 'list', :id => curr_object.id, :model => params[:model], :authorization => params[:authorization] 

The following lines are added 

   respond_to do |format|
   if curr_object.save
     format.html { redirect_to :action => 'list', :id => curr_object.id, :model => params[:model], :authorization => params[:authorization] }
     format.js   {}
     #format.json { render json: @participant, status: :created, location: @participant }
   else
     format.html { render action: "list" }
     #format.json { render json: @participant.errors, status: :unprocessable_entity }
   end
  end

====Added a new partial app/views/participants/_participant.html.erb====

 <div class="exp">
 <% @user_id = [] %>
 user = User.find(participant.user_id) %>
   <% @user_id << participant.user_id %>
 <tr class= "exp">
    <td ><%= link_to user.name, :controller=> 'users', :action => 'show', :id => user.id %></td>
    <td ><%= user.fullname %></td>
    <td ><%= user.email %></td>
    <td ><%= link_to user.role.name, :controller => 'roles', :action => 'show', :id => user.role.id %></td>
    <td  align="center"><%= (User.find(user.parent_id)).name %></td>
    <td ><%= User.yesorno(user.email_on_review) %></td>
    <td ><%= User.yesorno(user.email_on_submission) %></td>
    <td ><%= User.yesorno(user.email_on_review_of_review) %></td>
    <td ><%= participant.can_submit == false ? 'no' : 'yes' %></td>
    <td ><%= participant.can_review == false ? 'no' : 'yes' %></td>  
    <td ><%= participant.can_take_quiz == false ? 'no' : 'yes' %></td>  
    <td ><%= participant.handle %></td>
           
    <td ><%= link_to 'Remove', {:controller => controller, :action => 'destroy', :id => participant.id}, :method => :delete %></td>

    <!-- E726 Fall2012 Changes Begin -->
    <% authorization = Participant.get_authorization(participant.can_submit, participant.can_review, participant.can_take_quiz) %>
    <% if authorization =='reader' %>
      <td><%= fa_icon 'book', title: 'reader' %></td>
    <% else %>
      <td></td>
    <% end %>
    <!-- E726 Fall2012 Changes End -->

    <td>
      <%= form_tag :controller=>'participants', :action=>'update_authorizations', :id => participant.id do %>
        <% params[:authorization] = authorization %>
        <select id=<%=participant.user_id%> name="authorization" style="font-size:12px">

          <option value="participant" 
            <% if params[:authorization] == "participant" -%>
              selected
            <% end -%>
          >participant</option>
          <option value="reader"
            <% if params[:authorization] == "reader" -%>
              selected
            <% end -%>
          >reader</option>
          <option value="reviewer"
            <% if params[:authorization] == "reviewer" -%>
              selected
            <% end -%>
          >reviewer</option>
          <option value="submitter"
            <% if params[:authorization] == "submitter" -%>
              selected
            <% end -%>
          >submitter</option>
        </select>
        <%= button_tag "Submit", {:id=>'button'+participant.user_id.to_s,:style=>"font-size:12px; display:none;"} %>
      <% end %>
    </td>
    
  </tr>
 </div>

====Added app/views/participants/add.js.erb====
This is added to render the new partial view

 $('#mytable').append('<%= j render partial: “participant”, locals: {participant: @participant} %>');

====Modified app/views/shared_scripts/_add_individual.html.erb====

Removed the line

 <%= form_tag :action => form_action, :method => 'post' do %>

Added the line. :remote => true is added to the built-in Ruby helpers. These are the Rails "AJAX helpers".

 <%= form_tag form_action, :remote => true, :method => 'post' do %>

====Modified app/views/shared_scripts/_user_list.html.erb====

Modified the < table > tag to include an id tag which is used in add.js.erb to append to the current table. 
 < table class = "exp", id = 'mytable' >

===To test add participants:===
# Log in as instructor.
# Create a new assignment and save it.
# Go to Manage -> Assignments, you should see your newly added assignment here.
# Now click on ’Add participants’ button available in the list of actions for the assignment, which will direct you to the page which lists all the participants of an assignment. Here you will have the option to add a new participant.

[[File:AssgnPart.png]]

===To test editing questionnaire===
# Log in as instructor.
# Go to Manage -> Questionnaires. Create a new Review Questionnaire by clicking on the ‘New public item’ button for ‘Review’.
# Name the Questionnaire and click on create button
# Click on Edit for newly created questionnaire.

[[File:Questionnaire.png]]

===To test adding TA===
# Log in as instructor.
# Go to Manage -> Courses, you should see the list of courses already present in the Expertiza.
# Now click on ’Add TA’ button available in the list of actions for the course, which will direct you to the page which lists all the TAs of a course. Through this page, we can add new TAs as well.

[[File:TA.png]]

==Assumptions==
This project only modifies the way that views rendered to the user. It also demands scripting some server side code to handle the requests. We do not implement anything beyond this.

==Portability==
The system is portable on windows and UNIX environment. After our modification, it can continue running on both Windows and UNIX environment.

==Details of Requirements==
===Hardware requirements===
* Computing Power: The amount of computing power would be the same as the current Expertiza system.

* Memory: The amount of memory would be the same as the current Expertiza system.

* Disk Storage: The amount of disk storage would be the same as the current Expertiza system.

* Peripherals: The peripherals would be the same as the current Expertiza system.

* Network: The network would be the same as the current Expertiza system.

===Software requirements===
* Operating system environment : The operating system can be either windows or UNIX based OS.  Both are now used in the current Expertiza system.

* Networking environment: As used in the current Expertiza system

* Tools: Ruby Mines, Git

===References===

1. http://www.w3schools.com/Ajax/ajax_intro.asp

2. http://www.seguetech.com/blog/2013/03/12/what-is-ajax-and-where-is-it-used-in-technology

3. http://www.tutorialspoint.com/ajax/what_is_ajax.htm