Merge pull request #220 from YACS-RCOS/staging

Sort Periods by Day/Time; Flavor Text in Footer; Day Names on Schedule

app/assets/javascripts/controllers/footer/controller.js

@@ -0,0 +1,59 @@
+Yacs.views.footer = function (target) {
+
+  var selectFlavorText=function(){
+    var choices = [
+      'A grass-fed, free-ranged',
+      'The best',
+      'Yet another',
+      "An experimental, GMO'd",
+      'A radioactive',
+      'A zombie',
+      'An',
+      'A pizza-funded',
+      'An ice tea powered',
+      'A lone computer runs this',
+      "Some guy's",
+      'A (somewhat) tested',
+      'Batteries not included in this',
+      'A GMO-free',
+      'A mutant',
+      'The second biggest',
+      'A longstanding',
+      "A Red Hat-supported",
+      "A 100% all natural",
+      "A third-generation",
+      "A heavily debugged",
+      "A filmed on location",
+      "A Y2K compliant",
+      "A vortigaunt maintained",
+      "Degree not included in this",
+      "Clippy's favorite",
+      "9/10 mindless drones recommend this",
+      "Ask your doctor before using this",
+      "Far more work than necessary went into this",
+      "Report Any Issues to the Data Mouse for this",
+      "An officially cursed",
+      "A caffeine-powered",
+      "Better than your mother's",
+      "A kid-tested, mother-approved",
+      "A science-backed",
+      "A somewhat broken",
+      "An official dad approved",
+      "A PHP-free",
+      "A dog-friendly",
+      "A cat-approved",
+      "A dishwasher-safe"
+    ];
+
+    var index = Math.floor(Math.random()*choices.length);
+    return choices[index];
+
+  };
+  var data = {
+    flavortext: selectFlavorText(),
+    yacsversion: '0.9'
+  };
+
+  Yacs.render(target, 'footer', data);
+
+};

app/assets/javascripts/controllers/root/controller.js

@@ -50,4 +50,7 @@ Yacs.views.root = function (target) {
   Yacs.models.schools.preload(function () {
     Yacs.router.listen();
   });
+
+  Yacs.views.footer(document.getElementById('footer'));
+
 };

app/assets/javascripts/templates/footer/template.hbs

@@ -0,0 +1,15 @@
+<footer-obj>
+  <footer-column class="footer-column">
+    <div><flavortext>{{flavortext}} <a href="http://rcos.io">RCOS</a> project.</flavortext></div>
+    <inspired-by>Inspired by Jeff Hui's YACS.</inspired-by>
+  </footer-column>
+
+  <footer-column class="footer-column">
+    <div><version-name>YACS Version {{yacsversion}}</version-name></div>
+    <div><feedback>We love feedback!
+      <a href="https://github.com/YACS-RCOS/yacs/">Github</a>
+      |
+      <a href="mailto:yacsrpi@gmail.com">Email</a></feedback></div>
+  </footer-column>
+</footer-obj>
+

app/controllers/api/v5/courses_controller.rb

@@ -18,4 +18,4 @@ def index
     end
   end
 
-end
+end

app/controllers/api/v5/departments_controller.rb

@@ -7,4 +7,4 @@ def index
       query.includes! courses: [:sections] if @show_sections
     end
   end
-end
+end

app/controllers/api/v5/schedules_controller.rb

@@ -8,4 +8,4 @@ def index
     end
     @schedules = Scheduler.all_schedules sections
   end
-end
+end

app/controllers/api/v5/schools_controller.rb

@@ -8,4 +8,4 @@ def index
     end
     query.order! :id
   end
-end
+end

app/controllers/api/v5/sections_controller.rb

@@ -3,4 +3,4 @@ def index
     filter_model Section
     filter_any :id, :course_id, :name, :crn
   end
-end
+end

app/models/department.rb

@@ -4,4 +4,4 @@ class Department < ActiveRecord::Base
   validates  :code, presence: true, uniqueness: true
   validates  :name, presence: true, uniqueness: true
   default_scope { order(code: :asc) }
-end
+end

app/models/section.rb

@@ -3,6 +3,7 @@ class Section < ActiveRecord::Base
   validates  :name, presence: true, uniqueness: { scope: :course_id }
   validates  :crn, presence: true, uniqueness: true
   default_scope { order(name: :asc) }
+  before_save :sort_periods, if: :periods_changed?
 
   def conflicts_with(section)
     i = 0
@@ -20,4 +21,14 @@ def conflicts_with(section)
     end
     false
   end
+
+  def sort_periods
+    periods_info = periods_day.zip periods_start, periods_end, periods_type
+    periods_info = periods_info.sort!.transpose
+    self.periods_day, self.periods_start, self.periods_end, self.periods_type = periods_info
+  end
+
+  def periods_changed?
+    (self.changed & %w(periods_start periods_end periods_day periods_type)).any?
+  end
 end

app/views/static/index.html.erb

@@ -23,18 +23,8 @@
   <%= image_tag 'loading.gif', id: 'loading' %>
 </div>
 
-<footer>
-  <div class="footer-column">
-    <div>A Red Hat-supported RCOS project.</div>
-    <div>Inspired by Jeff Hui's YACS.</div>
-  </div>
-  <div class="footer-column">
-    <div>Yacs v0.9 - One Box Life</div>
-    <div>
-      We love feedback!
-      <a href="https://github.com/YACS-RCOS/yacs/">Github</a>
-      |
-      <a href="mailto:yacsrpi@gmail.com">Email</a>
-    </div>
-  </div>
+
+
+<footer id="footer">
+
 </footer>

spec/models/section_spec.rb

@@ -0,0 +1,44 @@
+require "rails_helper"
+
+RSpec.describe Section do
+  context 'when a section is updated' do
+    context 'when period information is updated' do
+      before do
+        @section = create(:section, num_periods: 5, 
+          periods_day: [3, 5, 2, 2, 4], 
+          periods_start: [1200, 800, 1600, 800, 800], 
+          periods_end: [1400, 900, 1800, 900, 1000], 
+          periods_type: ['LAB', 'LEC', 'TEST', 'LEC', 'LEC'])
+      end
+
+      it 'sorts periods by day, and then start time' do 
+        expect(@section.num_periods).to eq 5
+        expect(@section.periods_day).to eq [2, 2, 3, 4, 5]
+        expect(@section.periods_start).to eq [800, 1600, 1200, 800, 800]
+        expect(@section.periods_end).to eq [900, 1800, 1400, 1000, 900]
+        expect(@section.periods_type).to eq ['LEC', 'TEST', 'LAB', 'LEC', 'LEC']
+      end
+    end
+
+    context 'when non-period information is updated' do
+      before do
+        Section.skip_callback(:save, :before, :sort_periods, if: :periods_changed?)
+        @section = create(:section, num_periods: 5, 
+          periods_day: [3, 5, 2, 2, 4], 
+          periods_start: [1200, 800, 1600, 800, 800], 
+          periods_end: [1400, 900, 1800, 900, 1000], 
+          periods_type: ['LAB', 'LEC', 'TEST', 'LEC', 'LEC'])
+        Section.set_callback(:save, :before, :sort_periods, if: :periods_changed?)
+        @section.update(instructors: ['>:-]', ':-)', ':-|', ':-(', '>:-['])
+      end
+
+      it 'does not sort period' do 
+        expect(@section.num_periods).to eq 5
+        expect(@section.periods_day).to eq [3, 5, 2, 2, 4]
+        expect(@section.periods_start).to eq [1200, 800, 1600, 800, 800]
+        expect(@section.periods_end).to eq [1400, 900, 1800, 900, 1000]
+        expect(@section.periods_type).to eq ['LAB', 'LEC', 'TEST', 'LEC', 'LEC']
+      end
+    end
+  end
+end

vendor/assets/javascripts/schedule/schedule.js

@@ -1,3 +1,16 @@
+/**
+ * Schedule function. Initializes a Schedule object and renders it inside
+ * a provided element. A Schedule represents a weekly schedule.
+ * @constructor
+ * @param {HTMLElement} scheduleContainer - The HTML element in which to render the schedule grid.
+ * @param {Object} options - An object containing any of several fields to determine the time ranges of the schedule.
+ * @param {int} options.daySpan - The number of days to display. Default is 5.
+ * @param {int} options.dayBegin - The first day of the week to show (week is Sunday to Saturday, Sunday = 0). Default is 1 (Monday).
+ * @param {int} options.gridSize - The number of minutes represented by each grid box vertically. Changing this does not change the overall size of the schedule. Default is 60.
+ * @param {int} options.timeSpan - The total nuber of minutes to display. Rounds up to the nearest hour. Default is 720 (12 hours).
+ * @param {int} options.timeBegin - The starting minute of the schedule, in minutes since midnight format. Default is 480 (8 AM).
+ */
+
 window.Schedule = function (scheduleContainer, options) {
   var self = this;
 
@@ -7,6 +20,7 @@ window.Schedule = function (scheduleContainer, options) {
   var BORDER_COLORS     = ['#ff2066', '#00aff2', '#ffcb45', '#48da58', '#d373da', '#a48363', '#ff9332'];
   var SELECTED_COLORS   = ['#ff3575', '#19b5f2', '#ffcf56', '#59dc68', '#d57fdd', '#ac8f71', '#ff9c46'];
   // /*                         PINK       BLUE       YELLOW     GREEN      PURPLE     BROWN      ORANGE */
+  var DAY_NAMES         = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
 
   // var NUM_COLORS        = 6;
   // var TEXT_COLORS       = ['#720', '#722', '#661', '#227', '#166', '#616'];
@@ -42,12 +56,19 @@ window.Schedule = function (scheduleContainer, options) {
     var eventBackground = document.createElement('event-background');
     var colorIndex      = event.colorNum % NUM_COLORS;
 
+    /* This uses smelly hacks to calculate the exact size needed,
+     * which depend on the associated CSS code.
+     * 16px = exact offset to account for day-label at top of column
+     * -5px = eat up 4px of schedule-element left border and 1px of grid-hour right border
+     * -1px = eat up 1px of grid-hour bottom border
+     * Anyone in the future who wants to figure out some way to not have to do these offsets, PLEASE do.
+     */
     eventText.innerHTML                   = event.title.join('<br>');
     eventText.style.color                 = TEXT_COLORS[colorIndex];
-    eventElement.style.top                = timeSize(event.start - options.timeBegin);
+    eventElement.style.top                = 'calc(' + timeSize(event.start - options.timeBegin) + ' + 16px)';
     eventElement.style.left               = daySize(event.day - options.dayBegin);
-    eventElement.style.width              = 'calc(' + daySize(1) + ' - 6px)';
-    eventElement.style.height             = 'calc(' + timeSize(event.end - event.start) + ' - 2px)';
+    eventElement.style.width              = 'calc(' + daySize(1) + ' - 5px)';
+    eventElement.style.height             = 'calc(' + timeSize(event.end - event.start) + ' - 1px)';
     eventElement.style.borderColor        = BORDER_COLORS[colorIndex];
     eventBackground.style.backgroundColor = BACKGROUND_COLORS[colorIndex];
 
@@ -98,6 +119,11 @@ window.Schedule = function (scheduleContainer, options) {
       var dayElement = document.createElement('grid-day');
       dayElement.style.width = daySize(1);
 
+      // add day label to the top of each day column
+      var dayLabel = document.createElement('day-label');
+      dayLabel.textContent = DAY_NAMES[d + options.dayBegin];
+      dayElement.appendChild(dayLabel);
+
       for (var r = 0; r < options.timeSpan / options.gridSize; ++r) {
         var hourElement = document.createElement('grid-hour');
         hourElement.style.height = timeSize(options.gridSize);

vendor/assets/stylesheets/schedule/schedule.css

@@ -32,12 +32,23 @@ grid-day {
   float: left;
 }
 
+day-label {
+  color: #777777;
+  display:block;
+  margin: 0 auto;
+  text-align: center;
+  /* should be the same as grid-hour */
+  border-bottom: 1px solid #e7e7e7;
+  height:16px;
+  max-height:16px;
+  font-variant: small-caps;
+}
+
 grid-hour {
   display: block;
   box-sizing: border-box;
-  opacity: 0.25;
-  border-bottom: 1px solid #999599;
-  border-right: 1px solid #999599;
+  border-bottom: 1px solid #e7e7e7;
+  border-right: 1px solid #e7e7e7;
 }
 
 grid-day:last-child grid-hour {
@@ -66,7 +77,6 @@ event-background {
   height: 100%;
   width: 100%;
   top: 0;
-  z-index: -1;
 }
 
 event-text {
@@ -78,4 +88,4 @@ event-text {
   font-size: small;
   overflow: hidden;
   box-sizing: border-box;
-}
+}