Migration + Front End for Learning Den Support (#1106)

* added front end and models

* added migration py with a few courses, not sure if working

* model is saving to db but not showing on ui

* front end works when run commands from shell

* added try catch, migrate not running after initial

* removed console log

* migration works and edited styling

* added 5px more padding

* styled logo

* removed search result persist

* added a period to learning den description

* accidently left in static results

* passes tests and syntax

Author: kristinyim

integrations/tests.py

@@ -31,23 +31,28 @@ class IntegrationsGetAddTest(APITestCase):
     }
 
     def setUp(self):
-        Integration.objects.create(id=1, name='myint')
-        Course.objects.create(id=1, school='uoft', code='SEA101', name='Intro')
-        CourseIntegration.objects.create(course_id=1, integration_id=1, json='oldstuff')
+        #get or create
+        self.integration = Integration.objects.create(name='myint')
+        self.integrationIdStr = str(self.integration.id)
+        self.course = Course.objects.create(school='uoft', code='SEA101', name='Intro')
+        self.courseIdStr = str(self.course.id)
+        self.courseIntegration = CourseIntegration.objects.create(course_id=self.course.id, integration_id=self.integration.id, json='oldstuff')
 
     def test_get_existing_integration(self):
-        response = self.client.get('/integrations/1/course/1/', format='json', **self.request_headers)
+        response = self.client.get('/integrations/' + self.integrationIdStr + '/course/' + self.courseIdStr + '/', format='json', **self.request_headers)
         self.assertEqual(response.status_code, status.HTTP_200_OK)
 
     def test_get_nonexistent_integration(self):
-        response = self.client.get('/integrations/5/course/3/', format='json', **self.request_headers)
+        nonexistentIntegrationIdStr = str(self.integration.id + 1)
+        nonexistentCourseIdStr = str(self.course.id + 1)
+        response = self.client.get('/integrations/' + nonexistentIntegrationIdStr + '/course/' + nonexistentCourseIdStr + '/', format='json', **self.request_headers)
         self.assertEqual(response.status_code, status.HTTP_404_NOT_FOUND)
 
     def test_add_integration(self):
         data = {'json': 'newstuff'}
-        response = self.client.post('/integrations/1/course/1/', data, format='json', **self.request_headers)
+        response = self.client.post('/integrations/' + self.integrationIdStr + '/course/' + self.courseIdStr + '/', data, format='json', **self.request_headers)
         self.assertEqual(response.status_code, status.HTTP_204_NO_CONTENT)
-        CourseIntegration.objects.get(course_id=1, integration_id=1, **data)
+        CourseIntegration.objects.get(course_id=self.course.id, integration_id=self.integration.id, **data)
 
 
 class IntegrationsDeleteTest(APITestCase):
@@ -56,11 +61,13 @@ class IntegrationsDeleteTest(APITestCase):
     }
 
     def setUp(self):
-        Integration.objects.create(id=1, name='myint')
-        Course.objects.create(id=1, school='uoft', code='SEA101', name='Intro')
-        CourseIntegration.objects.create(course_id=1, integration_id=1, json='oldstuff')
+        self.integration = Integration.objects.create(name='myint')
+        self.integrationIdStr = str(self.integration.id)
+        self.course = Course.objects.create(school='uoft', code='SEA101', name='Intro')
+        self.courseIdStr = str(self.course.id)
+        self.courseIntegration = CourseIntegration.objects.create(course_id=self.course.id, integration_id=self.integration.id, json='oldstuff')
 
     def test_delete_integration(self):
-        response = self.client.delete('/integrations/1/course/1/', **self.request_headers)
+        response = self.client.delete('/integrations/' + self.integrationIdStr + '/course/' + self.courseIdStr + '/', **self.request_headers)
         self.assertEqual(response.status_code, status.HTTP_204_NO_CONTENT)
-        self.assertFalse(CourseIntegration.objects.filter(course_id=1, integration_id=1).exists())
+        self.assertFalse(CourseIntegration.objects.filter(course_id=self.course.id, integration_id=self.integration.id).exists())

static/css/timetable/partials/course_modal.scss

@@ -585,6 +585,7 @@
   li {
     list-style-type: none;
     padding-top: 5px;
+    padding-bottom: 5px;
   }
 
   .integration-image {
@@ -607,6 +608,7 @@
   a {
     float: right;
     font-size: 12px;
+    line-height: 22px;
   }
 
   p {

static/css/timetable/partials/search_bar.scss

@@ -221,6 +221,8 @@
   }
 
   .integration {
+    margin: 1px 5px 0 0;
+
     a {
       float: left;
       font-size: 12px;
@@ -319,6 +321,20 @@
   width: 43px;
 }
 
+// If a course has an den integration turned on
+.has-den {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  float: left;
+  height: 15px;
+  margin-right: 5px;
+  opacity: 1;
+  transition: visibility .3s, opacity .3s;
+  visibility: visible;
+  width: 100px;
+}
+
 // Section Listings per Course
 .search-sections {
   opacity: 1;

static/img/integrations/learningDen.png

@@ -214,23 +214,43 @@ class CourseModalBody extends React.Component {
               <h3 className="modal-module-header">{this.props.schoolSpecificInfo.areasName}</h3>
               <p>{ this.props.data.areas || 'None' }</p>
             </div>);
-    const integrationDivStyle = {
+    const pilotLogoImg = {
       backgroundImage: 'url(/static/img/integrations/pilot.png)',
     };
-    const academicSupportDisplay = integrationList.indexOf('Pilot') > -1 ?
-            (<div className="modal-module academic-support">
-              <h3 className="modal-module-header">Academic Support</h3>
-              <li className="cf">
-                <span className="integration-image" style={integrationDivStyle} />
-                <h4>Pilot</h4>
-                <a href="http://academicsupport.jhu.edu/pilot-learning/" target="_blank" rel="noopener noreferrer">
-                  Learn More
-                </a>
-                <p>In the PILOT program, students are organized into study teams consisting of
-                        6-10 members who meet
-                        weekly to work problems together.</p>
-              </li>
-            </div>) : null;
+    const pilotDisplay = integrationList.indexOf('Pilot') > -1 ?
+      (<li className="cf">
+        <span className="integration-image" style={pilotLogoImg} />
+        <h4>Pilot</h4>
+        <a href="http://academicsupport.jhu.edu/pilot-learning/" target="_blank" rel="noopener noreferrer">
+          Learn More
+        </a>
+        <p>In the PILOT program, students are organized into study teams consisting of
+          6-10 members who meet
+          weekly to work problems together.</p>
+      </li>) : null;
+    const learningDenLogoImg = {
+      backgroundImage: 'url(/static/img/integrations/learningDen_books.png)',
+    };
+    const learningDenDisplay = integrationList.indexOf('LearningDen') > -1 ?
+      (<li className="cf">
+        <span className="integration-image" style={learningDenLogoImg} />
+        <h4>Learning Den</h4>
+        <a
+          href="https://advising.jhu.edu/tutoring-mentoring/learning-den-tutoring-services/" target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn More
+        </a>
+        <p>The Learning Den is a peer-to-peer, small group tutoring program that
+          helps students to improve their understanding of course materials,
+          and prepare for exams.</p>
+      </li>) : null;
+    const academicSupportDisplay = integrationList.indexOf('LearningDen') > -1 || integrationList.indexOf('Pilot') > -1 ?
+      (<div className="modal-module academic-support">
+        <h3 className="modal-module-header">Academic Support</h3>
+        { pilotDisplay }
+        { learningDenDisplay }
+      </div>) : null;
     let friendCircles = (<div className="loading"><span className="img-icon"><div
       className="loader"
     /></span><p>

static/img/integrations/learningDenLogo.jpg

@@ -138,13 +138,19 @@ class SearchResult extends React.Component {
       info = !inRoster ? 'Add this course to your timetable' :
         'Remove this course from your timetable';
     }
-    const integrationLogoImageUrl = {
+    const pilotLogoImg = {
       backgroundImage: 'url(/static/img/integrations/pilotLogo.png)',
     };
-    const integrationLogo = course.integrations.indexOf('Pilot') > -1 ?
+    const pilotLogo = course.integrations.indexOf('Pilot') > -1 ?
       (<div className="label integration">
-        <span className="has-pilot" style={integrationLogoImageUrl} />
+        <span className="has-pilot" style={pilotLogoImg} />
       </div>) : null;
+    const learningDenLogoImg = {
+      backgroundImage: 'url(/static/img/integrations/learningDen.png)',
+    };
+    const learningDenLogo = course.integrations.indexOf('LearningDen') > -1 ? (<div className="label integration">
+      <span className="has-den" style={learningDenLogoImg} />
+    </div>) : null;
     const waitlistOnlyFlag = this.hasOnlyWaitlistedSections() ?
       <h4 className="label flag">Waitlist Only</h4> : null;
     return (
@@ -171,7 +177,8 @@ class SearchResult extends React.Component {
           <h4
             className={classNames('label', 'bubble')}
           >{this.props.campuses[course.campus]}</h4>
-          { integrationLogo }
+          { pilotLogo }
+          { learningDenLogo }
           { waitlistOnlyFlag }
         </div>
       </li>);

static/img/integrations/learningDen_books.png

@@ -0,0 +1,92 @@
+"""
+Copyright (C) 2017 Semester.ly Technologies, LLC
+Semester.ly is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+Semester.ly is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+"""
+
+from __future__ import unicode_literals
+
+from django.db import migrations
+from timetable.models import Integration, CourseIntegration, Course
+
+
+def add_learning_den(apps, schema_editor):
+  """ Learning Den classes for Spring 2018 """
+  learning_den_codes = [
+    "AS.020.152",
+    "AS.020.306",
+    "AS.030.102",
+    "AS.030.103",
+    "AS.030.206",
+    "AS.050.203",
+    "AS.080.203",
+    "AS.080.306",
+    "AS.110.106",
+    "AS.110.107",
+    "AS.110.109",
+    "AS.110.302",
+    "AS.171.101",
+    "AS.171.102",
+    "AS.171.104",
+    "AS.171.108",
+    "AS.180.102",
+    "AS.180.242",
+    "AS.180.302",
+    "AS.180.334",
+    "AS.210.102",
+    "AS.210.111",
+    "AS.200.101",
+    "AS.200.141",
+    "AS.210.112",
+    "AS.210.202",
+    "AS.210.211",
+    "AS.210.212",
+    "AS.210.301",
+    "AS.210.302",
+    "AS.210.311",
+    "AS.210.312",
+    "AS.280.350",
+    "AS.375.116",
+    "AS.375.216",
+    "EN.510.312",
+    "EN.510.314",
+    "EN.530.105",
+    "EN.540.202",
+    "EN.540.203",
+    "EN.540.303",
+    "EN.553.111",
+    "EN.553.112",
+    "EN.553.171",
+    "EN.553.211",
+    "EN.553.310",
+    "EN.580.222",
+    "EN.580.223",
+    "EN.540.422",
+    "EN.601.107",
+    "EN.660.203",
+    ]
+
+  integration, created = Integration.objects.get_or_create(name="LearningDen")
+  integration.save()
+
+  for code in learning_den_codes:
+    if Course.objects.filter(school="jhu",code=code).exists():
+        course = Course.objects.filter(school="jhu",code=code)
+        courseIntegration, created = CourseIntegration.objects.get_or_create(course=course[0],integration=integration,json='')
+        courseIntegration.save()
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('timetable', '0022_auto_20170821_1305'),
+    ]
+
+    operations = [
+      migrations.RunPython(add_learning_den)
+    ]