fix font used in flashed messages

Add a feedback mechanism

.gitignore

@@ -1,4 +1,4 @@
-config_centillion.py
+feedback_database.json
 config_flask.py
 vp
 credentials.json

Readme.md

@@ -12,8 +12,13 @@ one centillion is 3.03 log-times better than a googol.
 ## What Is It
 
 Centillion (https://github.com/dcppc/centillion) is a search engine that can index 
-three kinds of collections: Google Documents (.docx files), Github issues, and Markdown files in 
+different kinds of document collections: Google Documents (.docx files), Google Drive files,
-Github repos.
+Github issues, Github files, Github Markdown files, and Groups.io email threads.
+
+
+
+
+## What Is It
 
 We define the types of documents the centillion should index,
 what info and how. The centillion then builds and

Todo.md

@@ -17,11 +17,13 @@ feedback form: where we are at
 - feedback button
 - button triggers modal form
 - modal has emojis for feedback, text box, buttons
-
-feedback form: what we need to do
 - clicking emojis changes color, to select
 - clicking submit with filled out form submits to an endpoint
-- not sure how to use separate url, and then redirect back to same place
+- clicking submit also closes form, but only if submit successful
+
+feedback form: what we need to do
+- fix alerts - thank you for your feedback doesn't show up until a refresh
+- probably an easy ajax fix
 
 
 

centillion.py

@@ -3,6 +3,7 @@ import subprocess
 
 import codecs
 import os, json
+from datetime import datetime
 
 from werkzeug.contrib.fixers import ProxyFix
 from flask import Flask, request, redirect, url_for, render_template, flash, jsonify
@@ -266,16 +267,54 @@ def list_docs(doctype):
                 search = Search(app.config["INDEX_DIR"])
                 return jsonify(search.get_list(doctype))
 
+    # nope
     return render_template('403.html')
 
 
 @app.route('/feedback', methods=['POST'])
 def parse_request():
-    data = request.get_json()
-    flash("Thank you for your feedback!")
-    with open('dumdumdumdeedum.json','w') as f:
-        json.dumps(data,indent=4)
 
+    if not github.authorized:
+        return redirect(url_for("github.login"))
+    username = github.get("/user").json()['login']
+    resp = github.get("/user/orgs")
+    if resp.ok:
+        all_orgs = resp.json()
+        for org in all_orgs:
+            if org['login']=='dcppc':
+
+
+                try:
+                    # Business as usual
+                    data = request.form.to_dict();
+                    data['github_login'] = username
+                    data['timestamp'] = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+
+                    feedback_database = 'feedback_database.json'
+                    if not os.path.isfile(feedback_database):
+                        with open(feedback_database,'w') as f:
+                            json_data = [data]
+                            json.dump(json_data, f, indent=4)
+
+                    else:
+                        json_data = []
+                        with open(feedback_database,'r') as f:
+                            json_data = json.load(f)
+
+                        json_data.append(data)
+
+                        with open(feedback_database,'w') as f:
+                            json.dump(json_data, f, indent=4)
+
+                    ## Should be done with Javascript
+                    #flash("Thank you for your feedback!")
+                    return jsonify({'status':'ok','message':'Thank you for your feedback!'})
+                except:
+                    return jsonify({'status':'error','message':'An error was encountered while submitting your feedback. Try submitting an issue in the <a href="https://github.com/dcppc/centillion/issues/new">dcppc/centillion</a> repository.'})
+
+
+    # nope
+    return render_template('403.html')
 
 @app.errorhandler(404)
 def oops(e):
@@ -303,5 +342,10 @@ def store_search(query, fields):
 if __name__ == '__main__':
     # if running local instance, set to true
     os.environ['OAUTHLIB_INSECURE_TRANSPORT'] = 'true'
-    app.run(host="0.0.0.0",port=5000)
+    port = os.environ.get('CENTILLION_PORT','')
+    if port=='':
+        port = 5000
+    else:
+        port = int(port)
+    app.run(host="0.0.0.0",port=port)
 

config_centillion.py

@@ -0,0 +1,28 @@
+config = {
+    "repositories" : [
+        "dcppc/project-management",
+        "dcppc/nih-demo-meetings",
+        "dcppc/internal",
+        "dcppc/organize",
+        "dcppc/dcppc-bot",
+        "dcppc/full-stacks",
+        "dcppc/design-guidelines-discuss",
+        "dcppc/dcppc-deliverables",
+        "dcppc/dcppc-milestones",
+        "dcppc/crosscut-metadata",
+        "dcppc/lucky-penny",
+        "dcppc/dcppc-workshops",
+        "dcppc/metadata-matrix",
+        "dcppc/data-stewards",
+        "dcppc/dcppc-phase1-demos",
+        "dcppc/apis",
+        "dcppc/2018-june-workshop",
+        "dcppc/2018-july-workshop",
+        "dcppc/2018-august-workshop",
+        "dcppc/2018-september-workshop",
+        "dcppc/design-guidelines",
+        "dcppc/2018-may-workshop",
+        "dcppc/centillion"
+    ]
+}
+

static/feedback.js

@@ -7,19 +7,127 @@
 // flask post data as json:
 // https://stackoverflow.com/a/16664376
 
-/* make the smile green */
+/* this function is called when the user submits
+ * the feedback form. it submits a post request
+ * to the flask server, which squirrels away the
+ * feedback in a file.
+ */
+function submit_feedback() {
+    // this function is called when submit button clicked
+    // algorithm:
+    // - check if text box has content
+    // - check if happy/sad filled out
+
+    var smile_active = $('#modal-feedback-smile-div').hasClass('smile-active');
+    var frown_active = $('#modal-feedback-frown-div').hasClass('frown-active');
+    if( !( smile_active || frown_active ) ) {
+        alert('Please pick the smile or the frown.')
+    } else if( $('#modal-feedback-textarea').val()=='' ) {
+        alert('Please provide us with some feedback.')
+    } else {
+        var user_sentiment = '';
+        if(smile_active) {
+            user_sentiment = 'smile';
+        } else {
+            user_sentiment = 'frown';
+        }
+        var escaped_text = $('#modal-feedback-textarea').val();
+
+        // prepare form data 
+        var data = {
+            sentiment : user_sentiment,
+            content : escaped_text
+        };
+        // post the form. the callback function resets the form
+        $.post("/feedback", 
+            data, 
+            function(response) {
+                $('#myModal').modal('hide');
+                $('#myModalForm')[0].reset();
+                add_alert(response);
+                frown_unclick();
+                smile_unclick();
+        });
+    }
+}
+
+
+function add_alert(response) {
+    str = ""
+    str += '<div id="feedback-messages-container" class="container">';
+
+    if (response['status']=='ok') {
+        // if status is ok, use alert-success
+        str += '    <div id="feedback-messages-alert" class="alert alert-success alert-dismissible fade in">';
+    } else {
+        // otherwise use alert-danger
+        str += '    <div id="feedback-messages-alert" class="alert alert-danger alert-dismissible fade in">';
+    }
+
+    str += '        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>';
+    str += '        <div id="feedback-messages-contianer" class="container-fluid">';
+    str += '            <div id="feedback-messages-div" class="co-xs-12">';
+    str += '                <p>'
+    str += response['message'];
+    str += '                </p>';
+    str += '            </div>';
+    str += '    </div>';
+    str += '</div>';
+    $('div#messages').append(str);
+}
+
+
+/* for those particularly wordy users... limit feedback to 1000 chars */
+function cool_it() { 
+    if($('#modal-feedback-textarea').val().length > 1100 ){
+        $('#modal-too-long').show();
+    } else {
+        $('#modal-too-long').hide();
+    }
+}
+
+/* smiley functions */
 function smile_click() {
     $('#modal-feedback-smile-div').addClass('smile-active');
     $('#modal-feedback-smile-icon').addClass('smile-active');
+}
+function frown_click() {
+    $('#modal-feedback-frown-div').addClass('frown-active');
+    $('#modal-feedback-frown-icon').addClass('frown-active');
+}
+function smile_unclick() {
+    $('#modal-feedback-smile-div').removeClass('smile-active');
+    $('#modal-feedback-smile-icon').removeClass('smile-active');
+}
+function frown_unclick() {
     $('#modal-feedback-frown-div').removeClass('frown-active');
     $('#modal-feedback-frown-icon').removeClass('frown-active');
 }
 
-/* make the frown red */
+function smile() {
-function frown_click() {
+    frown_unclick();
-    $('#modal-feedback-smile-div').removeClass('smile-active');
+    smile_click();
-    $('#modal-feedback-smile-icon').removeClass('smile-active');
+}
-    $('#modal-feedback-frown-div').addClass('frown-active');
+function frown() { 
-    $('#modal-feedback-frown-icon').addClass('frown-active');
+    smile_unclick();
+    frown_click();
 }
 
+
+/* for those particularly wordy users... limit feedback to 1100 chars */
+// how to check n characters in a textarea
+// https://stackoverflow.com/a/19934613
+/*
+$(document).ready(function() {
+
+    $('#modal-feedback-textarea').on('change',function(event) {
+        if($('#modal-feedback-textarea').val().length > 1100 ){
+            $('#modal-too-long').show();
+        } else {
+            $('#modal-too-long').hide();
+        }
+    });
+
+}
+*/
+

static/style.css

@@ -1,3 +1,7 @@
+#modal-too-long {
+    visibility: hidden;
+}
+
 /* feedback smileys */
 #modal-feedback-smile-icon,
 #modal-feedback-frown-icon {

templates/banner.html

@@ -0,0 +1,25 @@
+<div class="container" id="banner-container">
+
+    {#
+    banner image
+    #}
+    <div class="row" id="banner-row">
+        <div class="col12sm" id="banner-col">
+            <center>
+                <a id="banner-a" href="{{ url_for('search')}}?query=&fields=">
+                    <img id="banner-img" src="{{ url_for('static', filename='centillion_white.png') }}">
+                </a>
+            </center>
+        </div>
+    </div>
+    {% if config['TAGLINE'] %}
+    <div class="row" id="tagline-row">
+        <div class="col12sm" id="tagline-col">
+            <center>
+                    <h2 id="tagline-tagline"> {{config['TAGLINE']}} </h2>
+            </center>
+        </div>
+    </div>
+    {% endif %}
+
+</div>

templates/flashed_messages.html

@@ -0,0 +1,14 @@
+<div id="messages">
+{% with messages = get_flashed_messages() %}
+    {% if messages %}
+        <div class="container" id="flashed-messages-container">
+            <div class="alert alert-success alert-dismissible fade in">
+                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                    {% for message in messages %}
+                        <p>{{ message }}</p>
+                    {% endfor %}
+            </div>
+        </div>
+    {% endif %}
+{% endwith %}
+</div>

templates/layout.html

@@ -26,46 +26,15 @@
 
 <div id="master-div">
 
-    {% with messages = get_flashed_messages() %}
+    {#
-    {% if messages %}
+    flashed messages
-    <div class="container" id="flashed-messages-container">
+    #}
-        <div class="alert alert-success alert-dismissible">
+    {% include "flashed_messages.html" %}
-            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
-            <ul class=flashes>
-                {% for message in messages %}
-                <li>{{ message }}</li>
-                {% endfor %}
-            </ul>
-        </div>
-    </div>
-    {% endif %}
-    {% endwith %}
-
-    <div class="container" id="banner-container">
 
     {#
     banner image
     #}
-        <div class="row" id="banner-row">
+    {% include "banner.html" %}
-            <div class="col12sm" id="banner-col">
-                <center>
-                    <a id="banner-a" href="{{ url_for('search')}}?query=&fields=">
-                        <img id="banner-img" src="{{ url_for('static', filename='centillion_white.png') }}">
-                    </a>
-                </center>
-            </div>
-        </div>
-        {% if config['TAGLINE'] %}
-        <div class="row" id="tagline-row">
-            <div class="col12sm" id="tagline-col">
-                <center>
-                        <h2 id="tagline-tagline"> {{config['TAGLINE']}} </h2>
-                </center>
-            </div>
-        </div>
-        {% endif %}
-    
-    </div>
 
     {#
     feedback modal
@@ -73,6 +42,7 @@
     {% include "modal.html" %}
 
     {% block body %}{% endblock %}
+
 </div>
 
 {% if active_page=="search" or active_page=="master_list" %}

templates/modal.html

@@ -1,7 +1,10 @@
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+
+  <form id="myModalForm" method="post">
+
     <div class="modal-dialog" role="document">
-    <div class="modal-content">
+      <div id="myModal-content" class="modal-content">
-      <div class="modal-header">
+        <div id="myModal-header" class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
           </button>
@@ -9,30 +12,40 @@
           Send us feedback!
           </h4>
         </div>
-      <div class="modal-body">
+        <div id="myModal-body" class="modal-body">
-        <div class="container-fluid">
+          <div id="modal-feedback-smile-frown-container" class="container-fluid">
-            <div id="modal-feedback-smile-div" class="col-xs-6 text-center" onClick="smile_click()">
+              <div id="modal-feedback-smile-div" class="col-xs-6 text-center" 
+                  onClick="smile()">
                   <i id="modal-feedback-smile-icon" class="fa fa-smile-o fa-4x" aria-hidden="true"></i>
               </div>
-            <div id="modal-feedback-frown-div" class="col-xs-6 text-center" onClick="frown_click()">
+              <div id="modal-feedback-frown-div" class="col-xs-6 text-center" 
+                  onClick="frown()">
                   <i id="modal-feedback-frown-icon" class="fa fa-frown-o fa-4x" aria-hidden="true"></i>
               </div>
           </div>
           <div class="container-fluid">
               <p>&nbsp;</p>
           </div>
-        <div class="container-fluid">
+          <div id="modal-feedback-textarea-container" class="container-fluid">
               <textarea id="modal-feedback-textarea" rows="6"></textarea>
           </div>
+          <div id="modal-too-long" class="container-fluid" >
+              <p id="modal-too-long-text" class="lead">Please limit the length of your feedback. Thank you in advance!</p>
           </div>
-      <div class="modal-footer">
+        </div>
+        <div id="myModal-footer" class="modal-footer">
             <div class="text-center">
-            <button id="submit-feedback-btn" type="button" class="btn btn-lg btn-primary" data-dismiss="modal">
+              <button id="submit-feedback-btn" type="button" 
+                  onClick="submit_feedback()"
+                  class="btn btn-lg btn-primary">
                   Send
               </button>
             </div>
         </div>
       </div>
     </div>
+
+  </form>
+
 </div>        
 

templates/search.html

@@ -25,6 +25,8 @@
     </div>
 </div>
 
+<div style="height: 20px;"><p>&nbsp;</p></div>
+
 <div id="info-bars-container" class="container">
     <div class="row">