pennlabs · esqu1 · Apr 14, 2017 · Apr 14, 2017 · Apr 14, 2017 · Apr 14, 2017
diff --git a/courses.json b/courses.json
diff --git a/import_courses.py b/import_courses.py
@@ -13,14 +13,14 @@ def fetch_courses(term):
     r = Registrar(os.getenv('PENN_SDK_USERNAME'), os.getenv('PENN_SDK_PASSWORD'))
     s = r.search({'term': term})
     courses = []
-    for i in s:
+    for ids, i in enumerate(s):
         s = i['section_id']
         section_id = ' '.join([s[0:4].strip(), s[4:7], s[7:10]])
         course_title = i['course_title']
         instructors = [j['name'] for j in i['instructors']]
         meetings = i['meetings']
         meeting_days = [meeting['meeting_days'] + ' ' + meeting['start_time'] + ' - ' + meeting['end_time'] for meeting in meetings]
-        courses.append({'section_id': section_id, 'course_title': course_title, 'instructors': instructors, 'meeting_days': meeting_days})
+        courses.append({'id': ids + 1, 'section_id': section_id, 'course_title': course_title, 'instructors': instructors, 'meeting_days': meeting_days})
     return courses
 
 with open('courses.json','w') as f:

diff --git a/index.html b/index.html
@@ -1,21 +1,25 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  </head>
-  <body>
-    <div id="container">
-      <div id="title"> Hi, this is penn course lmk.</div>
-    </div>
-    <form action="/submitted" method="POST">
-      <input type="text" placeholder="email" name="email">
-      <div id="bloodhound"><input type="text" class="typeahead" placeholder="course" name="course"></div>
-      <button type="submit">Submit</button>
-    </form>
-    <script type="text/javascript" src="/jquery-1.9.1.min.js"></script>
-    <script type="text/javascript" src="/typeahead.bundle.js"></script>
-    <script type="text/javascript" src="/searchbar.js"></script>
-  </body>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <link href="/style/select2.min.css" rel="stylesheet"/>
+</head>
+<body>
+  <div id="container">
+    <div id="title"> Hi, this is penn course lmk.</div>
+  </div>
+  <form action="/submitted" method="POST">
+    <input type="text" placeholder="email" name="email">
+    <select class="courses" multiple="multiple" style="width:1000px">
+      <option value='STAT 430 401'>STAT 430 401</option>
+    </select>
+    <button type="submit">Submit</button>
+  </form>
+  <script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
+  <script type="text/javascript" src="/js/typeahead.bundle.js"></script>
+  <script type="text/javascript" src="/js/searchbar.js"></script>
+  <script type="text/javascript" src="/js/select2.full.min.js"></script>
+</body>
 </html>
diff --git a/package.json b/package.json
@@ -9,9 +9,7 @@
     "express": "^4.15.2",
     "mongodb": "^2.2.25",
     "node-schedule": "^1.2.1",
-    "penn-sdk": "^0.2.1",
-    "penn-sdk": "^0.2.1",
-    "emailjs": "^1.0.8"
+    "penn-sdk": "^0.2.1"
   },
   "devDependencies": {
     "nodemon": "^1.11.0"

diff --git a/src/js/searchbar.js b/src/js/searchbar.js
@@ -1,28 +1,45 @@
-$(document).ready(function(){
-  var courses = new Bloodhound({
-    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('section_id'),
-    queryTokenizer: Bloodhound.tokenizers.whitespace,
-    prefetch: '/courses'
-    });
+function formatCourse (data) {
+  if (data.instructors) {
+    var l = '';  
+    if (data.instructors.length != 0) {     
+      var l = data.instructors.join(', ')   
+    }
+    return '<p><i>' + data.section_id + '</i> - ' + data.course_title 
+           + '<br><small>' + l + '<br>' + data.meeting_days + '</small></p>';
+  } else {
+    return '<p>Loading...</p>';
+  }
+}
+
+function formatCourseSelection (data) {
+  return data.section_id;
+}
 
-  $('#bloodhound .typeahead').typeahead({
-    hint: true,
-    highlight: false,
-    minLength: 1,
+$(document).ready(function () { 
+  $(".courses").select2({
+    ajax: {
+      url: "/courses",
+      dataType: 'json',
+      delay: 250,
+      data: function (params) {
+        return {
+        q: params.term, // search term
+      };
+    },
+    processResults: function (data, params) {
+      // parse the results into the format expected by Select2
+      // since we are using custom formatting functions we do not need to
+      // alter the remote JSON data, except to indicate that infinite
+      // scrolling can be used
+      return {
+        results: data,
+      };
+    },
+    cache: true
   },
-  {
-    name: 'states',
-    source: courses,
-    display: 'section_id',
-    templates: {
-      empty: 'No courses found.',
-      suggestion: function(data) {
-        var l = ''
-        if(data.instructors.length != 0){ 
-          var l = data.instructors.join(', ')
-        }
-        return '<p><i>' + data.section_id + '</i> - ' + data.course_title + '<br><small>' + l + '<br>' + data.meeting_days + '</small></p>';
-      }
-    }
-  });
-});
+  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
+  minimumInputLength: 2,
+  templateResult: formatCourse, // omitted for brevity, see the source of this page
+  templateSelection: formatCourseSelection // omitted for brevity, see the source of this page
+});
+})
diff --git a/src/js/select2.full.min.js b/src/js/select2.full.min.js
diff --git a/src/main.js b/src/main.js
@@ -22,10 +22,19 @@ app.get('/', (req, res) => {
 })
 
 app.get('/courses', (req, res) => {
-  res.json(courses)
+  if (req.query.q) {
+    search_param = req.query.q.toUpperCase()
+    var newCourses = courses.filter( (course) => {
+      return course.section_id.substring(0,search_param.length) == search_param
+    })
+    res.json(newCourses)
+  } else {
+    res.json(courses)
+  }
 })
 
-app.use(express.static(__dirname + '/js'))
+app.use('/js', express.static(path.join(__dirname, 'js')))
+app.use('/style', express.static(path.join(__dirname, 'style')))
 
 app.post('/submitted', (req, res) => {
   // Checks if course is open