community/: Add a feedback form

Closes coala#274

Author: KVGarg

community/forms.py

@@ -293,3 +293,18 @@ class NewcomerPromotion(forms.Form):
         max_length=50, label='GitHub Username',
         widget=forms.TextInput(attrs={'autocomplete': 'off', 'hidden': True})
     )
+
+
+class Feedback(forms.Form):
+    username = forms.CharField(
+        label='GitHub Username', required=False,
+        widget=forms.TextInput(attrs={'autocomplete': 'off'})
+    )
+    feedback = forms.CharField(
+        max_length=1000, label='What you want us to improve?',
+        widget=forms.Textarea(attrs={'autocomplete': 'off'})
+    )
+    experience = forms.CharField(
+        required=False,
+        widget=forms.TextInput(attrs={'autocomplete': 'off', 'hidden': True})
+    )

community/views.py

@@ -19,7 +19,8 @@
     OrganizationMentor,
     GSOCStudent,
     AssignIssue,
-    NewcomerPromotion
+    NewcomerPromotion,
+    Feedback
 )
 from data.models import Team
 from gamification.models import Participant as GamificationParticipant
@@ -50,6 +51,14 @@ def initialize_org_context_details():
     return org_details
 
 
+def get_feedback_form_variables(context):
+    context['feedback_form'] = Feedback()
+    context['feedback_form_name'] = os.environ.get(
+        'FEEDBACK_FORM_NAME', None
+    )
+    return context
+
+
 def get_newcomer_promotion_form_variables(context):
     context['newcomer_promotion_form'] = NewcomerPromotion()
     context['newcomer_promotion_form_name'] = os.environ.get(
@@ -105,6 +114,7 @@ def get_all_community_forms(context):
     context = get_gsoc_student_form_variables(context)
     context = get_assign_issue_form_variables(context)
     context = get_newcomer_promotion_form_variables(context)
+    context = get_feedback_form_variables(context)
     return context
 
 

static/css/main.css

@@ -38,7 +38,8 @@ body {
     justify-content: center;
 }
 
-.community-form {
+.community-form,
+.feedback {
     position: absolute;
     width: 70%;
     min-width: 330px;
@@ -52,25 +53,31 @@ body {
     overflow-x: auto;
 }
 
-.community-form form {
+.community-form form,
+.feedback form {
     padding-bottom: inherit;
 
 }
-.community-form form label {
+.community-form form label,
+.feedback form label,
+.experience {
     font-weight: bold;
     font-size: 1.5rem;
     color: darkcyan;
 }
 
-.community-form form p{
+.community-form form p,
+.feedback form p {
     margin: 0;
 }
 
-.community-form form textarea{
+.community-form form textarea,
+.feedback form textarea {
     margin-top: 10px;
 }
 
-.community-form form .row{
+.community-form form .row,
+.feedback form .row {
     margin-bottom: 0;
 }
 
@@ -97,6 +104,17 @@ body {
     display: none;
 }
 
+.feedback-icon {
+    position: fixed;
+    bottom: 2%;
+    right: 1%;
+}
+
+.feedback-comment {
+    width: 80px;
+    cursor: pointer;
+}
+
 .form-popup,
 .form-submission-popup {
     width: 100%;
@@ -275,6 +293,11 @@ strong {
     text-align: center;
 }
 
+.user-feeling-level i {
+    font-size: 3rem;
+    cursor: pointer;
+}
+
 #user-dropdown li.user-profile,
 #user-dropdown li.user-logout {
     display: none;

static/js/forms.js

@@ -7,13 +7,15 @@ $(document).ready(function () {
   var get_issue_assigned_form_op = $('.get-issue-assigned-form-op');
   var participated_in_gsoc_form_op = $('.participated-in-gsoc-form-op');
   var mentor_students_form_op = $('.mentor-students-form-op');
+  var feedback_form_op = $('.feedback-comment');
 
   var community_google_form = $('.community-google-form');
   var newcomer_promotion_form = $('.newcomer-promotion-form');
   var calendar_event_form = $('.calendar-event-form');
   var get_issue_assigned_form = $('.get-issue-assigned-form');
   var participated_in_gsoc_form = $('.participated-in-gsoc-form');
   var mentor_students_form = $('.mentor-students-form');
+  var feedback_form = $('.feedback');
 
   var is_user_authenticated = Cookies.get('authenticated');
   var authenticated_username = Cookies.get('username');
@@ -23,7 +25,7 @@ $(document).ready(function () {
   username_input.attr('value', authenticated_username || 'Anonymous User');
   username_input.attr('disabled', true);
 
-  $('form').attr(
+  $('.community-form form').attr(
     'action',window.location.pathname +
                    '?form_submitted=True&form_type=community'
   );
@@ -87,6 +89,26 @@ $(document).ready(function () {
     display_form_or_error(mentor_students_form);
   });
 
+  feedback_form_op.on('click', function () {
+    var top_offset = feedback_form_op.offset().top;
+    feedback_form.css('top', (top_offset-440).toString()+'px');
+    feedback_form.css('display', 'block');
+    $('.user-feeling-level i').on('click', function () {
+      var experience = $(this).attr('experience');
+      $('input[name="experience"]').val(experience);
+      $('.user-feeling-level i').css('color', 'black');
+      if(experience==='Negative'){
+        $(this).css('color', 'red');
+      }
+      else if(experience==='Neutral'){
+        $(this).css('color', 'blue');
+      }
+      else {
+        $(this).css('color', 'darkgreen');
+      }
+    })
+  });
+
   $('.community-form :input').focusin(function () {
     if (is_user_authenticated===undefined &&
           authenticated_username===undefined) {

static/js/main.js

@@ -22,6 +22,10 @@ $(document).ready(function(){
               ' the validation checks are passed or not. If not, the email' +
               ' will contain the validation errors. Correct them, if any';
         }
+        else if(formType==='feedback'){
+          message = 'Your valuable feedback has been received. Thanks for' +
+            ' providing feedback.'
+        }
         $('.important-message').text(message);
         $('.form-submission-popup').css('display', 'block');
     }
@@ -124,12 +128,18 @@ $(document).ready(function(){
         $('.form-popup').css('display', 'block');
     });
 
+    $('.feedback form').attr(
+      'action',window.location.pathname +
+                   '?form_submitted=True&form_type=feedback'
+    );
+
     $('.close-form').click(function () {
         $('.form-popup').css('display', 'none');
         $('.form-submission-popup').css('display', 'none');
         $('.oauth-error').css('display', 'none');
         $('.community-form').css('display', 'none');
-        $('form').css('display', 'none');
+        $('.feedback').css('display', 'none');
+        $('.community-form form').css('display', 'none');
     });
 
     logout_user_el.click(function () {

templates/base.html

@@ -173,6 +173,50 @@ <h6>Enjoy Coding 'n' Learning</h6>
       {% include 'community_forms.html' %}
     </div>
 
+  <div class="feedback-icon">
+    <img alt="feedback" class="feedback-comment"
+         src="https://www.agcsoftware.com/wp-content/uploads//2017/06/feedback-icon.png">
+  </div>
+
+  <div class="feedback display-none">
+    <div class="apply-flex close-form">
+      <i class="fa fa-times" aria-hidden="true"></i>
+    </div>
+    <form name="{{ feedback_form_name }}" method="post"
+          netlify-honeypot="bot-field" class="feedback-form"
+          data-netlify="true" action="/">
+      <h5 class="text-center custom-green-color-font bold-text">
+        Feedback
+      </h5>
+      {% csrf_token %}
+      {% for field in feedback_form %}
+        {% if field.name != 'experience' %}
+        <div class="row">
+          <div class="input-field col s12">
+            {{ field.label_tag }}
+            {{ field }}
+          </div>
+        </div>
+        {% else %}
+        {{ field }}
+        {% endif %}
+      {% endfor %}
+      <div class="row">
+        <div class="input-field col s12">
+          <h6 class="experience">Feeling about {{ org.name }} organization?</h6>
+          <div class="user-feeling-level apply-flex evenly-spread-content">
+            <i class="fa fa-frown-o" experience="Negative" aria-hidden="true"></i>
+            <i class="fa fa-meh-o"  experience="Neutral" aria-hidden="true"></i>
+            <i class="fa fa-smile-o" experience="Positive" aria-hidden="true"></i>
+          </div>
+        </div>
+      </div>
+      <div class="apply-flex center-content submit-btn">
+        <input class="waves-effect waves-light btn-large large-font" type="submit" value="Submit">
+      </div>
+    </form>
+  </div>
+
   <footer class="page-footer">
     <div class="row">
       <div class="col m3 s12">