Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-12-02T17:02:22Z

Kbasuch:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link generates a drop-down window, which contains the form for creating a new assignment. This form contains the same fields as the original form.<br/>
In addition, we have added data validations for two fields. The name of the assignment cannot be left blank, and the 'submission directory' field cannot be left blank or contain any special characters. If either of these conditions is violated, an error message is displayed to the user. Furthermore, these validations are done in the client-side itself, removing the need for a server request to validate the data.
Submitting the form will create a database entry and close the form.

[[image:FinalProj pic44.png|center]]

====Files to be changed====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

====Testing plan====

1. Log in as an instructor and check that creating a new assignment works as expected<br>
2. Log in as an instructor and check that the assignment could be created successfully and all the entered options have been preserved

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
#[https://facebook.github.io/react/ ReactJS by Facebook Code]
#[https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers ReactJS for Ruby on Rails]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Main_Page Expertiza wiki]

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T22:12:47Z

Kbasuch:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link will generate a popup window. This window will be generated in the same view (The URL remains unchanged) and will contain the same fields and options as the original form. Saving the details will make the database entry and close the popup window. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.

[[image:FinalProj pic44.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/assets/javascripts/tree_display.jsx
*apps/views/assignments/new.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====

1. Log in as an instructor and check that creating a new assignment works as expected<br>
2. Log in as an instructor and check that the assignment could be created successfully and all the entered options have been preserved

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
#[https://facebook.github.io/react/ ReactJS by Facebook Code]
#[https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers ReactJS for Ruby on Rails]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Main_Page Expertiza wiki]

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T22:11:58Z

Kbasuch: /* References */

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link will generate a popup window. This window will be generated in the same view (The URL remains unchanged) and will contain the same fields and options as the original form. Saving the details will make the database entry and close the popup window. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.

[[image:FinalProj pic44.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/assets/javascripts/tree_display.jsx
*apps/views/assignments/new.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====

1. Log in as an instructor and check that creating a new assignment works as expected<br>
2. Log in as an instructor and check that the assignment could be created successfully and all the entered options have been preserved

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
#[https://facebook.github.io/react/ ReactJS by Facebook Code]
#[https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers ReactJS for Ruby on Rails]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Main_Page Expertiza wiki]

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T22:10:40Z

Kbasuch:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link will generate a popup window. This window will be generated in the same view (The URL remains unchanged) and will contain the same fields and options as the original form. Saving the details will make the database entry and close the popup window. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.

[[image:FinalProj pic44.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/assets/javascripts/tree_display.jsx
*apps/views/assignments/new.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====

1. Log in as an instructor and check that creating a new assignment works as expected<br>
2. Log in as an instructor and check that the assignment could be created successfully and all the entered options have been preserved

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
#[https://facebook.github.io/react/ ReactJS by Facebook Code]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Main_Page Expertiza wiki]

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T22:07:41Z

Kbasuch: Added references

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link will generate a popup window. This window will be generated in the same view (The URL remains unchanged) and will contain the same fields and options as the original form. Saving the details will make the database entry and close the popup window. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.

[[image:FinalProj pic44.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/assets/javascripts/tree_display.jsx
*apps/views/assignments/new.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====

1. Log in as an instructor and check that creating a new assignment works as expected<br>
2. Log in as an instructor and check that the assignment could be created successfully and all the entered options have been preserved

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
#https://facebook.github.io/react/
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Main_Page Expertiza wiki]

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T22:05:40Z

Kbasuch:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link will generate a popup window. This window will be generated in the same view (The URL remains unchanged) and will contain the same fields and options as the original form. Saving the details will make the database entry and close the popup window. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.

[[image:FinalProj pic44.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/assets/javascripts/tree_display.jsx
*apps/views/assignments/new.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====

1. Log in as an instructor and check that creating a new assignment works as expected<br>
2. Log in as an instructor and check that the assignment could be created successfully and all the entered options have been preserved

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
*https://facebook.github.io/react/

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T22:04:54Z

Kbasuch:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link will generate a popup window. This window will be generated in the same view (The URL remains unchanged) and will contain the same fields and options as the original form. Saving the details will make the database entry and close the popup window. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.

[[image:FinalProj pic44.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/assets/javascripts/tree_display.jsx
*apps/views/assignments/new.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====

1. Log in as an instructor and check that creating a new assignment works as expected
2. Log in as an instructor and check that the assignment could be created successfully and all the entered options have been preserved

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
*https://facebook.github.io/react/

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T21:58:31Z

Kbasuch:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link will generate a popup window. This window will be generated in the same view (The URL remains unchanged) and will contain the same fields and options as the original form. Saving the details will make the database entry and close the popup window. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.

[[image:FinalProj pic44.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/assets/javascripts/tree_display.jsx
*apps/views/assignments/new.html.erb
*apps/views/assignments/edit/_general.html.erb

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
*https://facebook.github.io/react/

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T21:53:45Z

Kbasuch:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link will generate a popup window. This window will be generated in the same view (The URL remains unchanged) and will contain the same fields and options as the original form. Saving the details will make the database entry and close the popup window. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.

[[image:FinalProj pic44.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/new.html.erb
*apps/views/assignments/edit/_general.html.erb

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

====Files to be changed====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
*https://facebook.github.io/react/

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T21:43:15Z

Kbasuch: /* Current Implementation */

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link will generate a popup window. This window will be generated in the same view (The URL remains unchanged) and will contain the same fields and options as the original form. Saving the details will make the database entry and close the popup window. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.

[[image:FinalProj pic44.png|center]]

====Files to be changed====
*apps\views\assignments\new.html.erb
*apps\views\assignments\edit.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====
1. Log in as an instructor and check that new converted page is rendering as expected<br>
2. Log in as an instructor and check that an assignment could be successfully created and all the existing functionality is preserved<br>

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

====Files to be changed====
*apps\views\assignments\new.html.erb
*apps\views\assignments\edit.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
*https://facebook.github.io/react/

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T21:42:17Z

Kbasuch:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link will generate a popup window. This window will be generated in the same view (The URL remains unchanged) and will contain the same fields and options as the original form. Saving the details will make the database entry and close the popup window. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.

[[image:FinalProj pic44.png|center]]

====Files to be changed====
*apps\views\assignments\new.html.erb
*apps\views\assignments\edit.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====
1. Log in as an instructor and check that new converted page is rendering as expected<br>
2. Log in as an instructor and check that an assignment could be successfully created and all the existing functionality is preserved<br>

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:10px;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:10px;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

====Files to be changed====
*apps\views\assignments\new.html.erb
*apps\views\assignments\edit.html.erb
*apps/views/assignments/edit/_general.html.erb

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
*https://facebook.github.io/react/

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-13T23:36:18Z

Kbasuch:

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-09T23:22:40Z

Kbasuch:

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-09T23:19:31Z

Kbasuch: /* Proposed Solution */

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Current Implementation ==
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.
[[File:FinalProj pic1.png|centre]]

== Proposed Solution ==

In the revised implementation, clicking on the <i>New Assignment</i> link will generate a popup window. This window will be generated in the same view (The URL remains unchanged) and will contain the same fields and options as the original form. Saving the details will make the database entry and close the popup window. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.

==References==
*https://facebook.github.io/react/

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-09T23:18:09Z

Kbasuch:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Current Implementation ==
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.
[[File:FinalProj pic1.png|centre]]

== Proposed Solution ==

In the revised implementation, clicking on the [i]New Assignment[/i] link will generate a popup window. This window will be generated in the same view (The URL remains unchanged) and will contain the same fields and options as the original form. Saving the details will make the database entry and close the popup window. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.

==References==
*https://facebook.github.io/react/

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-09T23:03:08Z

Kbasuch:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current implementation ==
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view. Implementing this in ReactJS, will eliminate these server requests. New assignment link will generate a popup window, right there on the same view (The URL remains unchanged) and will be provided with the same options. Saving the details will make the database entry and close the popup window. Except for the database update, all the processing is done on the client side itself.
[[File:FinalProj pic1.png|centre]]

== Proposed solution - Dynamic Views==
Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

Using these principles, it is possible to create a dynamic view which will dynamically render a form in the popup window, allowing the Expertiza user to create a new assignment. The only request that will be sent to he server will be the one containing information regarding the database entry for the new assignment
==References==
*https://facebook.github.io/react/

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-09T22:57:17Z

Kbasuch:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current implementation ==
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view. Implementing this in ReactJS, will eliminate these server requests. New assignemnt link will generae a popoup window, right there on the same view (url remains same) and will be provided with the same options. Saving the details will make the databse entry and close the popup window. So basically the processing is done at the client side except for the database change.

[[File:FinalProj pic1.png|centre]]

== Proposed solution ==
[[File:Giphy.gif|centre]]
This is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

==References==
*https://facebook.github.io/react/

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-09T22:51:38Z

Kbasuch:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current implementation ==
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view. Implementing this in ReactJS, will eliminate these server requests. New assignemnt link will generae a popoup window, right there on the same view (url remains same) and will be provided with the same options. Saving the details will make the databse entry and close the popup window. So basically the processing is done at the client side except for the database change.

[[File:FinalProj pic1.png|centre]]

== Proposed solution ==
[[File:Giphy.gif|centre]]
This is

==References==
*https://facebook.github.io/react/

File:Giphy.gif

2016-11-09T22:51:02Z

Kbasuch: uploaded a new version of "File:Giphy.gif"

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-09T22:37:14Z

Kbasuch:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

== Current implementation ==
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view. Implementing this in ReactJS, will eliminate these server requests. New assignemnt link will generae a popoup window, right there on the same view (url remains same) and will be provided with the same options. Saving the details will make the databse entry and close the popup window. So basically the processing is done at the client side except for the database change.

[[File:FinalProj pic1.png|centre]]

== Proposed solution ==
[[File:Giphy.gif]]

==References==
*https://facebook.github.io/react/

File:Giphy.gif

2016-11-09T22:36:49Z

Kbasuch:

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-09T21:58:32Z

Kbasuch:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===

easy to know how a component is rendered, you just look at the render function.
JSX makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged/combined with each other.
you can render React on the server-side.
it is easy to test, and you can also integrate some tools like jest.
it ensures readability and makes maintainability easier.
you can use React with any framework (Backbone.js, Angular.js) as it is only a view layer.

== Current implementation ==
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view. Implementing this in ReactJS, will eliminate these server requests. New assignemnt link will generae a popoup window, right there on the same view (url remains same) and will be provided with the same options. Saving the details will make the databse entry and close the popup window. So basically the processing is done at the client side except for the database change.

[[File:FinalProj pic1.png|centre]]

===Proposed solution===

==References==
*https://facebook.github.io/react/

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-09T21:51:32Z

Kbasuch:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===

== Current implementation ==
The assignment creating page view is as follows.

[[File:FinalProj pic1.png|centre]]

Currently it is implemented fully in HTML which is hard to read and is also not dynamic.

===Proposed solution===

==References==
*https://facebook.github.io/react/

File:FinalProj pic1.png

2016-11-09T21:50:10Z

Kbasuch: uploaded a new version of "File:FinalProj pic1.png"

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-08T23:34:33Z

Kbasuch:

== E1691 Convert Assignment Creation Form to ReactJS ==

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

===React JS===
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

===Current implementation===
The assignment creating page view is as follows.
[[File:FinalProj pic1.png]]

Currently it is implemented fully in HTML which is hard to read and is also not dynamic.

===Proposed solution===

==References==
*https://facebook.github.io/react/

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-04T17:40:52Z

Kbasuch:

== E1691 Convert Assignment Creation Form to ReactJS ==

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==React JS==
ReactJS is an open source JavaScript library

===Current implementation===

===ReactJS introduction===

==References==
*https://facebook.github.io/react/

CSC/ECE 517 Fall 2016/oss E1649 KPS

2016-10-28T21:33:17Z

Kbasuch: /* New Implementation */

==Expertiza==
Expertiza is an Open Source Software project developed by NCSU through which students can submit and peer-review learning objects such as articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework.

==Current Implementation==
In the current implementation only the students can sign up for topics. Because of this, no higher authority (e.g instructor) can control the signups in a straightforward manner. If the instructor wishes to assign a particular topic to a team or remove a team from a particular topic then the instructor has to impersonate that student and sign up for the topic. Due, to the current implementation, you can neither handle the mistakes in signups , nor make modifications to the existing signups without impersonation.

==New Implementation==
The new implementation allows an instructor to assign a particular topic to a team as well as remove a team from a topic.This functionality has been added in views/sign_up_sheet/_all_actions.html.erb which now has a '+' sign to assign a topic to a particular user. If the instructor clicks on this, then a view will appear which takes in the username of a student to be added. When the box is filled out and the “add” button clicked, then the indicated user’s team is signed up for the topic. If there are no slots available for that topic then the team will be put on the waiting list. There is also a 'X' sign that will help the instructor to remove a team from a topic.

Some of the scenarios where the instructor might wish to add a team would be if the sign up deadline has passed, or if the instructor has decided to update the maximum number of teams allowed to choose a particular topic. The instructor might want to drop a team from the topic if the team doesn't want to proceed with the same topic for the assignment. With the new implementation, Instructors/Teaching Assistants do not need to go through the trouble of impersonating a student in order to add or drop their team from topics.

Changes were made in the following files -
* controllers/sign_up_sheet_controller.rb
* views/sign_up_sheet/_all_actions.html.erb
* views/sign_up_sheet/assign_topic.html.erb
* views/sign_up_sheet/remove_topic.html.erb

Functions added to implement functionality :-
* update_team
* assign_topic
* remove_team
* remove_topic

In the sign_up_sheet controller, two major methods were added:

===update_team===
This method allows an admin user to add a team to a particular topic, based on the username of any member of said team. If the number of teams already assigned to the topic is greater than or equal to the maximum number of teams allowed to pick the topic, the new team is added to the waitlist.
If a team was previously assigned a topic, and are then added by an admin to a new topic, their association with the old topic is deleted, and the required changes to the waitlist of topics are made as well.
The system will throw an error if the username of an invalid user is used to search for teams associated with the user.
The system checks that the topic is not being assigned again to the same team that has the topic.

===remove_team===
This method allows the admin to remove teams from a given topic, based on the username of a team member. First, a check is done to ensure that the team is indeed associated with the given topic. If this is the case, the entry is deleted from the table sign_up_teams, and the corresponding changes are made to the waitlist as well.

==Functionality==

[[File:Previous_View.png]][[File:New_View.png]]

Two additional icons have been added in the Actions column. The ‘green plus’ icon allows you to add a team to the current topic.
Clicking on the icon redirects you to a form, where the admin is required to enter the username of the person whose team he wishes to add.
[[File:Add_Team.png|centre]]

Clicking submit then redirects back to the original page, with a flash message containing the status of the operation.
[[File:Team_Added.png|centre]]

In case the topic has already been assigned the maximum number of teams, the new team is added to the waitlist.
[[File:Waitlisting.png|centre]]

The 'red cross' icon is used to remove a team from the given topic. Clicking on it takes the admin to a form, where he is required to enter the username of one of the team members belonging to the team that is to be removed. Submitting the form redirects the user back to the original page, with a flash message indicating the status of the remove operation.

[[File:Remove_Team.png|centre]]

==Scope for Improvement==
The system can take in individual users who don't have a team or topic and can add him/her to the existing teams that are enrolled for the topic.

==References==
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Main_Page Expertiza wiki]

CSC/ECE 517 Fall 2016/oss E1649 KPS

2016-10-28T21:11:10Z

Kbasuch: /* References */

==Expertiza==
Expertiza is an open source project based on Ruby on Rails framework. It is an efficient assignment management portal that allows instructor to create new assignments as well modify existing assignments which in turn have multiple topics for which students can sign up for. Students can form teams in Expertiza to work on the assignments and Expertiza also provides functionality to advertise for team members. Students can peer review other submissions and provide feedback about the same.

==Current Implementation==
In the current implementation only the students can sign up for topics. Because of this, no higher authority (e.g instructor) can control the signups in a straightforward manner. If the instructor wishes to assign a particular topic to a team or remove a team from a particular topic then the instructor has to impersonate that student and sign up for the topic. Due, to the current implementation, you can neither handle the mistakes in signups , nor make modifications to the existing signups without impersonation.

==New Implementation==
The new implementation allows an instructor to assign a particular topic to a team as well as remove a team from a topic.This functionality has been added in views/sign_up_sheet/_all_actions.html.erb which now has a '+' sign to assign a topic to a particular user. If the instructor clicks on this, then a view will appear which takes in the username of a student to be added. When the box is filled out and the “search” button clicked, then the indicated user’s team is signed up for the topic. If there are no slots available for that topic then the team will be put on the waiting list. There is also a 'X' sign that will help the instructor to remove a team from a topic.

Some of the scenarios where the instructor might wish to add a team would be if the sign up deadline has passed, or if the instructor has decided to update the maximum number of teams allowed to choose a particular topic. The instructor might want to drop a team from the topic if the team doesn't want to proceed with the same topic for the assignment. With the new implementation, Instructors/Teaching Assistants do not need to go through the trouble of impersonating a student in order to add or drop their team from topics.

Changes were made in the following files -
* controllers/sign_up_sheet_controller.rb
* views/sign_up_sheet/_all_actions.html.erb
* views/sign_up_sheet/assign_topic.html.erb
* views/sign_up_sheet/remove_topic.html.erb

Functions added to implement functionality :-
* update_team
* assign_topic
* remove_team
* remove_topic

In the sign_up_sheet controller, two major methods were added:

===update_team===
This method allows an admin user to add a team to a particular topic, based on the username of any member of said team. If the number of teams already assigned to the topic is greater than or equal to the maximum number of teams allowed to pick the topic, the new team is added to the waitlist.
If a team was previously assigned a topic, and are then added by an admin to a new topic, their association with the old topic is deleted, and the required changes to the waitlist of topics are made as well.
The system will throw an error if the username of an invalid user is used to search for teams associated with the user.
The system checks that the topic is not being assigned again to the same team that has the topic.

===remove_team===
This method allows the admin to remove teams from a given topic, based on the username of a team member. First, a check is done to ensure that the team is indeed associated with the given topic. If this is the case, the entry is deleted from the table sign_up_teams, and the corresponding changes are made to the waitlist as well.

==Functionality==

[[File:Previous_View.png]][[File:New_View.png]]

Two additional icons have been added in the Actions column. The ‘green plus’ icon allows you to add a team to the current topic.
Clicking on the icon redirects you to a form, where the admin is required to enter the username of the person whose team he wishes to add.
[[File:Add_Team.png|centre]]

Clicking submit then redirects back to the original page, with a flash message containing the status of the operation.
[[File:Team_Added.png|centre]]

In case the topic has already been assigned the maximum number of teams, the new team is added to the waitlist.
[[File:Waitlisting.png|centre]]

The 'red cross' icon is used to remove a team from the given topic. Clicking on it takes the admin to a form, where he is required to enter the username of one of the team members belonging to the team that is to be removed. Submitting the form redirects the user back to the original page, with a flash message indicating the status of the remove operation.

[[File:Remove_Team.png|centre]]

==Scope for Improvement==
The system can take in individual users who don't have a team or topic and can add him/her to the existing teams that are enrolled for the topic.

==References==
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Main_Page Expertiza wiki]

CSC/ECE 517 Fall 2016/oss E1649 KPS

2016-10-28T21:09:35Z

Kbasuch: Added references

==Expertiza==
Expertiza is an open source project based on Ruby on Rails framework. It is an efficient assignment management portal that allows instructor to create new assignments as well modify existing assignments which in turn have multiple topics for which students can sign up for. Students can form teams in Expertiza to work on the assignments and Expertiza also provides functionality to advertise for team members. Students can peer review other submissions and provide feedback about the same.

==Current Implementation==
In the current implementation only the students can sign up for topics. Because of this, no higher authority (e.g instructor) can control the signups in a straightforward manner. If the instructor wishes to assign a particular topic to a team or remove a team from a particular topic then the instructor has to impersonate that student and sign up for the topic. Due, to the current implementation, you can neither handle the mistakes in signups , nor make modifications to the existing signups without impersonation.

==New Implementation==
The new implementation allows an instructor to assign a particular topic to a team as well as remove a team from a topic.This functionality has been added in views/sign_up_sheet/_all_actions.html.erb which now has a '+' sign to assign a topic to a particular user. If the instructor clicks on this, then a view will appear which takes in the username of a student to be added. When the box is filled out and the “search” button clicked, then the indicated user’s team is signed up for the topic. If there are no slots available for that topic then the team will be put on the waiting list. There is also a 'X' sign that will help the instructor to remove a team from a topic.

Some of the scenarios where the instructor might wish to add a team would be if the sign up deadline has passed, or if the instructor has decided to update the maximum number of teams allowed to choose a particular topic. The instructor might want to drop a team from the topic if the team doesn't want to proceed with the same topic for the assignment. With the new implementation, Instructors/Teaching Assistants do not need to go through the trouble of impersonating a student in order to add or drop their team from topics.

Changes were made in the following files -
* controllers/sign_up_sheet_controller.rb
* views/sign_up_sheet/_all_actions.html.erb
* views/sign_up_sheet/assign_topic.html.erb
* views/sign_up_sheet/remove_topic.html.erb

Functions added to implement functionality :-
* update_team
* assign_topic
* remove_team
* remove_topic

In the sign_up_sheet controller, two major methods were added:

===update_team===
This method allows an admin user to add a team to a particular topic, based on the username of any member of said team. If the number of teams already assigned to the topic is greater than or equal to the maximum number of teams allowed to pick the topic, the new team is added to the waitlist.
If a team was previously assigned a topic, and are then added by an admin to a new topic, their association with the old topic is deleted, and the required changes to the waitlist of topics are made as well.
The system will throw an error if the username of an invalid user is used to search for teams associated with the user.
The system checks that the topic is not being assigned again to the same team that has the topic.

===remove_team===
This method allows the admin to remove teams from a given topic, based on the username of a team member. First, a check is done to ensure that the team is indeed associated with the given topic. If this is the case, the entry is deleted from the table sign_up_teams, and the corresponding changes are made to the waitlist as well.

==Functionality==

[[File:Previous_View.png]][[File:New_View.png]]

Two additional icons have been added in the Actions column. The ‘green plus’ icon allows you to add a team to the current topic.
Clicking on the icon redirects you to a form, where the admin is required to enter the username of the person whose team he wishes to add.
[[File:Add_Team.png|centre]]

Clicking submit then redirects back to the original page, with a flash message containing the status of the operation.
[[File:Team_Added.png|centre]]

In case the topic has already been assigned the maximum number of teams, the new team is added to the waitlist.
[[File:Waitlisting.png|centre]]

The 'red cross' icon is used to remove a team from the given topic. Clicking on it takes the admin to a form, where he is required to enter the username of one of the team members belonging to the team that is to be removed. Submitting the form redirects the user back to the original page, with a flash message indicating the status of the remove operation.

[[File:Remove_Team.png|centre]]

==Scope for Improvement==
The system can take in individual users who don't have a team or topic and can add him/her to the existing teams that are enrolled for the topic.

==References==
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wikis.lib.ncsu.edu/index.php/Expertiza Expertiza project documentation wiki]

CSC/ECE 517 Fall 2016/oss E1649 KPS

2016-10-28T21:06:02Z

Kbasuch:

CSC/ECE 517 Fall 2016/oss E1649 KPS

2016-10-28T21:04:51Z

Kbasuch: Added images to the functionality section

==Expertiza==
Expertiza is an open source project based on Ruby on Rails framework. It is an efficient assignment management portal that allows instructor to create new assignments as well modify existing assignments which in turn have multiple topics for which students can sign up for. Students can form teams in Expertiza to work on the assignments and Expertiza also provides functionality to advertise for team members. Students can peer review other submissions and provide feedback about the same.

==Current Implementation==
In the current implementation only the students can sign up for topics. Because of this, no higher authority (e.g instructor) can control the signups in a straightforward manner. If the instructor wishes to assign a particular topic to a team or remove a team from a particular topic then the instructor has to impersonate that student and sign up for the topic. Due, to the current implementation, you can neither handle the mistakes in signups , nor make modifications to the existing signups without impersonation.

==New Implementation==
The new implementation allows an instructor to assign a particular topic to a team as well as remove a team from a topic.This functionality has been added in views/sign_up_sheet/_all_actions.html.erb which now has a '+' sign to assign a topic to a particular user. If the instructor clicks on this, then a view will appear which takes in the username of a student to be added. When the box is filled out and the “search” button clicked, then the indicated user’s team is signed up for the topic. If there are no slots available for that topic then the team will be put on the waiting list. There is also a 'X' sign that will help the instructor to remove a team from a topic.

Some of the scenarios where the instructor might wish to add a team would be if the sign up deadline has passed, or if the instructor has decided to update the maximum number of teams allowed to choose a particular topic. The instructor might want to drop a team from the topic if the team doesn't want to proceed with the same topic for the assignment. With the new implementation, Instructors/Teaching Assistants do not need to go through the trouble of impersonating a student in order to add or drop their team from topics.

Changes were made in the following files -
* controllers/sign_up_sheet_controller.rb
* views/sign_up_sheet/_all_actions.html.erb
* views/sign_up_sheet/assign_topic.html.erb
* views/sign_up_sheet/remove_topic.html.erb

Functions added to implement functionality :-
* update_team
* assign_topic
* remove_team
* remove_topic

In the sign_up_sheet controller, two major methods were added:

===update_team===
This method allows an admin user to add a team to a particular topic, based on the username of any member of said team. If the number of teams already assigned to the topic is greater than or equal to the maximum number of teams allowed to pick the topic, the new team is added to the waitlist.
If a team was previously assigned a topic, and are then added by an admin to a new topic, their association with the old topic is deleted, and the required changes to the waitlist of topics are made as well.
The system will throw an error if the username of an invalid user is used to search for teams associated with the user.
The system checks that the topic is not being assigned again to the same team that has the topic.

===remove_team===
This method allows the admin to remove teams from a given topic, based on the username of a team member. First, a check is done to ensure that the team is indeed associated with the given topic. If this is the case, the entry is deleted from the table sign_up_teams, and the corresponding changes are made to the waitlist as well.

==Functionality==

[[File:Previous_View.png]][[File:New_View.png]]

Two additional icons have been added in the Actions column. The ‘green plus’ icon allows you to add a team to the current topic.
Clicking on the icon redirects you to a form, where the admin is required to enter the username of the person whose team he wishes to add.
[[File:Add_team.png|centre]]

Clicking submit then redirects back to the original page, with a flash message containing the status of the operation.
[[File:Team_Added.png|centre]]

In case the topic has already been assigned the maximum number of teams, the new team is added to the waitlist.
[[File:Waitlisting.png|centre]]

The 'red cross' icon is used to remove a team from the given topic. Clicking on it takes the admin to a form, where he is required to enter the username of one of the team members belonging to the team that is to be removed. Submitting the form redirects the user back to the original page, with a flash message indicating the status of the remove operation.

[[File:Remove_Team.png|centre]]

File:Add Team.png

2016-10-28T21:04:00Z

Kbasuch:

CSC/ECE 517 Fall 2016/oss E1649 KPS

2016-10-28T20:49:58Z

Kbasuch:

==Current Implementation==
In the current implementation only the students can sign up for topics. Because of this, no higher authority (e.g instructor) can control the signups. If the instructor wishes to assign a particular topic to a team or remove a team from a particular topic then the instructor has to impersonate that student and sign up for the topic.
Due, to the current implementation, you can neither handle the mistakes in signups , nor make modifications to the existing signups without impersonation.

==New Implementation==
The new implementation allows an instructor to assign a particular topic to a team as well as remove a team from a topic.This functionality has been added in views/sign_up_sheet/_all_actions.html.erb which now has a '+' sign to assign a topic to a particular user. If the instructor clicks on this, then a view will appear which takes in the username of a student to be added. When the box is filled out and the “search” button clicked, then the indicated user’s team is signed up for the topic. If there are no slots available for that topic then the team will be put on the waiting list. There is also a 'X' sign that will help the instructor to remove a team from a topic.

Some of the scenarios where the instructor might wish to add a team would be if the sign up deadline has passed, or if the instructor has decided to update the maximum number of teams allowed to choose a particular topic. The instructor might want to drop a team from the topic if the team doesn't want to proceed with the same topic for the assignment. With the new implementation, Instructors/Teaching Assistants do not need to go through the trouble of impersonating a student in order to add or drop their team from topics.

Changes were made in the following files -
* controllers/sign_up_sheet_controller.rb
* views/sign_up_sheet/_all_actions.html.erb
* views/sign_up_sheet/assign_topic.html.erb
* views/sign_up_sheet/remove_topic.html.erb

Functions added to implement functionality :-
* update_team
* assign_topic
* remove_team
* remove_topic

In the sign_up_sheet controller, two major methods were added:

===update_team===
This method allows an admin user to add a team to a particular topic, based on the username of any member of said team. If the number of teams already assigned to the topic is greater than or equal to the maximum number of teams allowed to pick the topic, the new team is added to the waitlist.
If a team was previously assigned a topic, and are then added by an admin to a new topic, their association with the old topic is deleted, and the required changes to the waitlist of topics are made as well.
The system will throw an error if the username of an invalid user is used to search for teams associated with the user.

===remove_team===
This method allows the admin to remove teams from a given topic, based on the username of a team member. First, a check is done to ensure that the team is indeed associated with the given topic. If this is the case, the entry is deleted from the table sign_up_teams, and the corresponding changes are made to the waitlist as well.

==Functionality==

[[File:Previous_View.png]][[File:New_View.png]]

[[File:Team_Added.png]] [[File:Waitlisting.png]]

[[File:Remove_Team.png]]

Two additional icons have been added in the something column. The ‘green plus’ icon allows you to add a team to the current topic.
Clicking on the icon redirects you to a form, where the admin is required to enter the username of the person whose team he wishes to add.

Clicking submit then redirects back to the original page, with a flash message containing the status of the operation, as well as the cause in case of a failure.
image_form_addteam, image_mainpage_success

The 'red cross' icon is used to remove a team from the given topic. Clicking on it takes the admin to a form, where he is required to enter the username of one of the team members belonging to the team that is to be removed. Submitting the form redirects the user back to the original page, with a flash message indicating the status of the remove operation.

image_form_removeteam, image_mainpage_success

File:Remove Team.png

2016-10-28T20:49:28Z

Kbasuch:

File:Waitlisting.png

2016-10-28T20:47:45Z

Kbasuch:

File:Team Added.png

2016-10-28T20:45:54Z

Kbasuch:

CSC/ECE 517 Fall 2016/oss E1649 KPS

2016-10-28T20:41:27Z

Kbasuch:

==New Implementation==
The new implementation allows an instructor to assign a particular topic to a team as well as remove a team from a topic. Some of the scenarios where the instructor might wish to add a team would be if the sign up deadline has passed, or if the instructor has decided to update the maximum number of teams allowed to choose a particular topic.

With the new implementation, Instructors/Teaching Assistants do not need to go through the trouble of impersonating a student in order to add or drop their team from topics.

Changes were made in the following files -
* controllers/sign_up_sheet_controller.rb
* views/sign_up_sheet/_all_actions.html.erb
* views/sign_up_sheet/assign_topic.html.erb
* views/sign_up_sheet/remove_topic.html.erb

In the sign_up_sheet controller, two major methods were added:

===update_team===
This method allows an admin user to add a team to a particular topic, based on the username of any member of said team. If the number of teams already assigned to the topic is greater than or equal to the maximum number of teams allowed to pick the topic, the new team is added to the waitlist.
If a team was previously assigned a topic, and are then added by an admin to a new topic, their association with the old topic is deleted, and the required changes to the waitlist of topics are made as well.
The system will throw an error if the username of an invalid user is used to search for teams associated with the user.

===remove_team===
This method allows the admin to remove teams from a given topic, based on the username of a team member. First, a check is done to ensure that the team is indeed associated with the given topic. If this is the case, the entry is deleted from the table sign_up_teams, and the corresponding changes are made to the waitlist as well.

==Functionality==

[[File:Previous_View.png]][[File:New_View.png]]

Two additional icons have been added in the something column. The ‘green plus’ icon allows you to add a team to the current topic.
Clicking on the icon redirects you to a form, where the admin is required to enter the username of the person whose team he wishes to add.

Clicking submit then redirects back to the original page, with a flash message containing the status of the operation, as well as the cause in case of a failure.
image_form_addteam, image_mainpage_success

The 'red cross' icon is used to remove a team from the given topic. Clicking on it takes the admin to a form, where he is required to enter the username of one of the team members belonging to the team that is to be removed. Submitting the form redirects the user back to the original page, with a flash message indicating the status of the remove operation.

image_form_removeteam, image_mainpage_success

File:Previous View.png

2016-10-28T20:39:32Z

Kbasuch: uploaded a new version of "File:Previous View.png"

Previous view for CSC/ECE_517_Fall_2016/oss_E1649_KPS

File:Previous View.png

2016-10-28T20:33:43Z

Kbasuch: uploaded a new version of "File:Previous View.png"

Previous view for CSC/ECE_517_Fall_2016/oss_E1649_KPS

CSC/ECE 517 Fall 2016/oss E1649 KPS

2016-10-28T20:27:32Z

Kbasuch:

==New Implementation==
The new implementation allows an instructor to assign a particular topic to a team as well as remove a team from a topic. Some of the scenarios where the instructor might wish to add a team would be if the sign up deadline has passed, or if the instructor has decided to update the maximum number of teams allowed to choose a particular topic.

With the new implementation, Instructors/Teaching Assistants do not need to go through the trouble of impersonating a student in order to add or drop their team from topics.

Changes were made in the following files -
* controllers/sign_up_sheet_controller.rb
* views/sign_up_sheet/_all_actions.html.erb
* views/sign_up_sheet/assign_topic.html.erb
* views/sign_up_sheet/remove_topic.html.erb

In the sign_up_sheet controller, two major methods were added:

===update_team===
This method allows an admin user to add a team to a particular topic, based on the username of any member of said team. If the number of teams already assigned to the topic is greater than or equal to the maximum number of teams allowed to pick the topic, the new team is added to the waitlist.
If a team was previously assigned a topic, and are then added by an admin to a new topic, their association with the old topic is deleted, and the required changes to the waitlist of topics are made as well.
The system will throw an error if the username of an invalid user is used to search for teams associated with the user.

===remove_team===
This method allows the admin to remove teams from a given topic, based on the username of a team member. First, a check is done to ensure that the team is indeed associated with the given topic. If this is the case, the entry is deleted from the table sign_up_teams, and the corresponding changes are made to the waitlist as well.

==Functionality==

[[File:Previous_View.png|centre]]

[[File:New_View.png|centre]]

2 additional icons have been added in the something column. The ‘green plus’ icon allows you to add a team to the current topic.
Clicking on the icon redirects you to a form, where the admin is required to enter the username of the person whose team he wishes to add.

Clicking submit then redirects back to the original page, with a flash message containing the status of the operation, as well as the cause in case of a failure.
image_form_addteam, image_mainpage_success

The 'red cross' icon is used to remove a team from the given topic. Clicking on it takes the admin to a form, where he is required to enter the username of one of the team members belonging to the team that is to be removed. Submitting the form redirects the user back to the original page, with a flash message indicating the status of the remove operation.

image_form_removeteam, image_mainpage_success

File:New View.png

2016-10-28T20:25:54Z

Kbasuch: uploaded a new version of "File:New View.png"

CSC/ECE 517 Fall 2016/oss E1649 KPS

2016-10-28T20:20:11Z

Kbasuch:

==New Implementation==
The new implementation allows an instructor to assign a particular topic to a team as well as remove a team from a topic. Some of the scenarios where the instructor might wish to add a team would be if the sign up deadline has passed, or if the instructor has decided to update the maximum number of teams allowed to choose a particular topic.

With the new implementation, Instructors/Teaching Assistants do not need to go through the trouble of impersonating a student in order to add or drop their team from topics.

Changes were made in the following files -
* controllers/sign_up_sheet_controller.rb
* views/sign_up_sheet/_all_actions.html.erb
* views/sign_up_sheet/assign_topic.html.erb
* views/sign_up_sheet/remove_topic.html.erb

In the sign_up_sheet controller, two major methods were added:

===update_team===
This method allows an admin user to add a team to a particular topic, based on the username of any member of said team. If the number of teams already assigned to the topic is greater than or equal to the maximum number of teams allowed to pick the topic, the new team is added to the waitlist.
If a team was previously assigned a topic, and are then added by an admin to a new topic, their association with the old topic is deleted, and the required changes to the waitlist of topics are made as well.
The system will throw an error if the username of an invalid user is used to search for teams associated with the user.

===remove_team===
This method allows the admin to remove teams from a given topic, based on the username of a team member. First, a check is done to ensure that the team is indeed associated with the given topic. If this is the case, the entry is deleted from the table sign_up_teams, and the corresponding changes are made to the waitlist as well.

==Functionality==

[[File:Previous_View.png|centre]]

2 additional icons have been added in the something column. The ‘green plus’ icon allows you to add a team to the current topic.
Clicking on the icon redirects you to a form, where the admin is required to enter the username of the person whose team he wishes to add.

Clicking submit then redirects back to the original page, with a flash message containing the status of the operation, as well as the cause in case of a failure.
image_form_addteam, image_mainpage_success

The 'red cross' icon is used to remove a team from the given topic. Clicking on it takes the admin to a form, where he is required to enter the username of one of the team members belonging to the team that is to be removed. Submitting the form redirects the user back to the original page, with a flash message indicating the status of the remove operation.

image_form_removeteam, image_mainpage_success

File:New View.png

2016-10-28T20:08:16Z

Kbasuch: uploaded a new version of "File:New View.png"

CSC/ECE 517 Fall 2016/oss E1649 KPS

2016-10-28T18:22:03Z

Kbasuch: Added the 'functionality' sub-heading

==New Implementation==
The new implementation allows an instructor to assign a particular topic to a team as well as remove a team from a topic. Some of the scenarios where the instructor might wish to add a team would be if the sign up deadline has passed, or if the instructor has decided to update the maximum number of teams allowed to choose a particular topic.\\
With the new implementation, Instructors/Teaching Assistants do not need to go through the trouble of impersonating a student in order to add or drop their team from topics.

Changes were made in the following files -
* controllers/sign_up_sheet_controller.rb
* views/sign_up_sheet/_all_actions.html.erb
* views/sign_up_sheet/assign_topic.html.erb
* views/sign_up_sheet/remove_topic.html.erb

In the sign_up_sheet controller, two major methods were added:

===update_team===
This method allows an admin user to add a team to a particular topic, based on the username of any member of said team. If the number of teams already assigned to the topic is greater than or equal to the maximum number of teams allowed to pick the topic, the new team is added to the waitlist.
If a team was previously assigned a topic, and are then added by an admin to a new topic, their association with the old topic is deleted, and the required changes to the waitlists of topics are made as well.

===remove_team===
This method allows the admin to remove teams from a given topic, based on the username of a team member. First, a check is done to ensure that the team is indeed associated with the given topic. If this is the case, the entry is deleted from the table sign_up_teams, and the corresponding changes are made to the waitlist as well.

==Functionality==

[[File:New_View.png|centre]]

2 additional icons have been added in the something column. The ‘green plus’ icon allows you to add a team to the current topic.
Clicking on the icon redirects you to a form, where the admin is required to enter the username of the person whose team he wishes to add.

Clicking submit then redirects back to the original page, with a flash message containing the status of the operation, as well as the cause in case of a failure.
image_form_addteam, image_mainpage_success

The 'red cross' icon is used to remove a team from the given topic. Clicking on it takes the admin to a form, where he is required to enter the username of one of the team members belonging to the team that is to be removed. Submitting the form redirects the user back to the original page, with a flash message indicating the status of the remove operation.

image_form_removeteam, image_mainpage_success

CSC/ECE 517 Fall 2016/oss E1649 KPS

2016-10-28T17:54:51Z

Kbasuch: Tested adding an image

File:New View.png

2016-10-28T17:53:47Z

Kbasuch:

File:Previous View.png

2016-10-28T17:48:33Z

Kbasuch: uploaded a new version of "File:Previous View.png"

Previous view for CSC/ECE_517_Fall_2016/oss_E1649_KPS

File:Previous View.png

2016-10-28T14:34:51Z

Kbasuch: Previous view for CSC/ECE_517_Fall_2016/oss_E1649_KPS

Previous view for CSC/ECE_517_Fall_2016/oss_E1649_KPS

CSC/ECE 517 Fall 2016/oss E1649 KPS

2016-10-28T04:29:22Z

Kbasuch: First draft of 'new implementation'

CSC/ECE 517 Fall 2016/oss E1649 KPS

2016-10-28T01:37:25Z

Kbasuch: Created page with " Implementation Changes were made in the following files- * controllers/sign_up_sheet_controller.rb * views/sign_up_sheet/_all_actions.html.erb * views/sign_up_sheet/assign_topi..."

Implementation

Changes were made in the following files-
* controllers/sign_up_sheet_controller.rb
* views/sign_up_sheet/_all_actions.html.erb
* views/sign_up_sheet/assign_topic.html.erb