added v1 skill tagger

Author: Mobmaker55

conditional/blueprints/major_project_submission.py

@@ -91,12 +91,15 @@ def submit_major_project(user_dict=None):
 
     post_data = request.get_json()
     name = post_data['projectName']
+    tldr = post_data['projectTldr']
+    time_spent = post_data['projectTimeSpent']
     description = post_data['projectDescription']
+
     user_id = user_dict['username']
 
     if name == "" or len(description.strip().split()) < 50: # check for 50 word minimum
         return jsonify({"success": False}), 400
-    project = MajorProject(user_id, name, description)
+    project = MajorProject(user_id, name, tldr, time_spent, description)
 
     db.session.add(project)
     db.session.commit()

conditional/templates/major_project_submission.html

@@ -35,11 +35,13 @@ <h3 class="page-title">Major Project Form</h3>
                     <div class="row">
                         <div class="col-lg-6">
                             <label class="form-label" for="skills-applied">Skills Applied</label>
-                            <div id="skills-applied" class="form-control form-textarea">
-                                List what skills you meaningfully used while working on this project (at least 2!)</div>
-                            <textarea id="skills-applied-old" name="skills-applied" class="form-control form-textarea"
+                            <div id="skills-applied" class="form-control form-skilltags">
+                                <input id="skill-input" name="skill" type="text" maxlength="16" placeholder="Add a skill">
+
+                                <span class="placeholder">List what skills you meaningfully used while working on this project (at least 2!)</span></div>
+                            <!--<textarea id="skills-applied" name="skills-applied" class="form-control form-textarea"
                                       rows="5"
-                                      placeholder="List what skills you meaningfully used while working on this project (at least 2!)"><span>Test</span></textarea>
+                                      placeholder="List what skills you meaningfully used while working on this project (at least 2!)"><span>Test</span></textarea>-->
                         </div>
                         <div class="col-lg-6">
                             <label class="form-label" for="time-commitment">Time Commitment</label>

frontend/javascript/modules/majorProjectForm.js

@@ -1,6 +1,9 @@
 import FetchUtil from "../utils/fetchUtil";
 
 export default class MajorProjectForm {
+
+  tags_written = false;
+
   constructor(form) {
     this.form = form;
     this.endpoint = '/major_project/submit';
@@ -10,13 +13,30 @@ export default class MajorProjectForm {
   render() {
     this.form.querySelector('input[type=submit]')
       .addEventListener('click', e => this._submitForm(e));
+    this.form.querySelector('input[id=skill-input]')
+        .addEventListener('focusout')
+  }
+
+  onWriteSkill(e) {
+    let input = document.getElementById("skill-input")
+    if (!this.tags_written) {
+      this.tags_written = true
+      document.getElementsByClassName("placeholder").item(0).remove()
+    }
+        let txt = input.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // allowed characters list
+    if (txt) input.before('<span class="skill-tag">' + txt + '</span>');
+    input.value = "";
+    input.focus();
+
   }
 
   _submitForm(e) {
     e.preventDefault();
 
     let payload = {
       projectName: this.form.querySelector('input[name=name]').value,
+      projectTldr: this.form.querySelector('input[name=tldr]').value,
+      projectTimeSpent: this.form.querySelector('textarea[name=time-commitment]').value,
       projectDescription:
         this.form.querySelector('textarea[name=description]').value
     };

frontend/stylesheets/pages/_major-project.scss

@@ -10,4 +10,15 @@
 
 .form-textarea {
   resize: vertical;
+}
+
+.form-skilltags {
+  box-shadow: inset 0 -1px 0 #ddd;
+  border: none;
+  padding: 0;
+}
+
+.placeholder {
+  color: #bbb;
+  font-size: 16px;
 }

migrations/versions/05126dcdf40e_add_mp_fields.py

@@ -25,8 +25,8 @@ def upgrade():
     op.alter_column('freshman_hm_attendance', 'attendance_status',
                existing_type=postgresql.ENUM('Attended', 'Excused', 'Absent', name='attendance_enum'),
                nullable=True)
-    op.add_column('major_projects', sa.Column('time', sa.Text(), nullable=False))
-    op.add_column('major_projects', sa.Column('tldr', sa.String(length=128), nullable=False))
+    op.add_column('major_projects', sa.Column('time', sa.Text(), nullable=False, server_default='N/A'))
+    op.add_column('major_projects', sa.Column('tldr', sa.String(length=128), nullable=False, server_default='N/A'))
     op.alter_column('major_projects', 'description',
                existing_type=sa.TEXT(),
                nullable=False)