Added export calendar to PNG. Fixed some bugs on share page

CHANGELOG.md

+v2.1.0
+	- Added "Save as PNG" feature for the calendar view
+	- Fixed bugs related to exporting/sharing a view-only schedule

schedules/app/assets/javascripts/schedules.js

@@ -45,6 +45,14 @@ const addToSystemCalendar = () => {
     window.open(`webcal://${window.location.hostname}/api/schedules?crns=${window.cart._courses.join(',')}`);
 };
 
+const saveImage = () => {
+    html2canvas(document.querySelector("#calendar")).then(canvas => {
+        canvas.toBlob(blob => {
+            saveAs(blob, 'GMU Schedule.png');
+        });
+    });
+};
+
 const initListeners = () => {
     const items = Array.from(document.querySelectorAll('.section-item'));
     items.forEach(item => (item.onclick = () => remove(item)));
@@ -52,6 +60,7 @@ const initListeners = () => {
     document.getElementById('open-modal-btn').onclick = setUrlInModal;
     document.getElementById('download-ics').onclick = downloadIcs;
     document.getElementById('add-to-system').onclick = addToSystemCalendar;
+    document.getElementById('save-image').onclick = saveImage;
 
     document.getElementById('share-url').innerText = `${window.location.protocol}//${window.location.hostname}/schedule/view?crns=${window.cart._courses.join(',')}`;
 };

schedules/app/assets/javascripts/schedules_view.js

+const params = new URLSearchParams(document.location.search);
+const crns = params.get('crns');
+
 document.addEventListener('DOMContentLoaded', () => {
     const eventsTemplate = document.querySelector('#events');
     if (eventsTemplate) {
@@ -27,23 +30,32 @@ const renderEvents = (start, end, timezone, callback) => {
  * and sets the link in the modal to it.
  */
 const setUrlInModal = () => {
-    document.getElementById('calendar-link').innerText = `${window.location.protocol}//${window.location.hostname}/api/schedules?section_ids=${window.cart._courses.join(',')}`;
+    document.getElementById('calendar-link').innerText = `${window.location.protocol}//${window.location.hostname}/api/schedules?crns=${crns}`;
 };
 
 const downloadIcs = async () => {
-    const response = await fetch(`${window.location.protocol}//${window.location.hostname}/api/schedules?section_ids=${window.cart._courses.join(',')}`);
+    const response = await fetch(`${window.location.protocol}//${window.location.hostname}/api/schedules?crns=${crns}`);
     const text = await response.text();
     const blob = new Blob([text], { type: 'text/calendar;charset=utf-8' });
     saveAs(blob, 'GMU Schedule.ics');
 };
 
 const addToSystemCalendar = () => {
-    window.open(`webcal://${window.location.hostname}/api/schedules?section_ids=${window.cart._courses.join(',')}`);
+    window.open(`webcal://${window.location.hostname}/api/schedules?crns=${crns}`);
+};
+
+const saveImage = () => {
+    html2canvas(document.querySelector("#calendar")).then(canvas => {
+        canvas.toBlob(blob => {
+            saveAs(blob, 'GMU Schedule.png');
+        });
+    });
 };
 
 const initListeners = () => {
     document.getElementById('open-modal-btn').onclick = setUrlInModal;
     document.getElementById('download-ics').onclick = downloadIcs;
     document.getElementById('add-to-system').onclick = addToSystemCalendar;
-    document.getElementById('share-url').innerText = `${window.location.protocol}//${window.location.hostname}/schedule/view?section_ids=${window.cart._courses.join(',')}`;
+    document.getElementById('share-url').innerText = `${window.location.protocol}//${window.location.hostname}/schedule/view?crns=${crns}`;
+    document.getElementById('save-image').onclick = saveImage;
 };

schedules/app/assets/stylesheets/schedules.scss

@@ -3,7 +3,8 @@
     padding: 16px;
     margin-bottom: 8px;
     margin-top: 8px;
-    min-width: 800px;
+    min-width: 1000px;
+    min-height: 800px;
 }
 
 .section-item.selected {

schedules/app/views/schedules/show.html.erb

+<%= javascript_include_tag 'html2canvas.min' %>
+
 <%= javascript_include_tag 'schedules' %>
 <%= stylesheet_link_tag 'schedules' %>
 
@@ -12,7 +14,10 @@
 <button id="open-modal-btn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exportModal">
     Export Schedule
 </button>
+<button id="save-image" class="btn btn-secondary">Save as PNG</button>
+
 <div id="calendar"></div>
+
 <h3>Quick add</h3>
 <p>Populate your calendar quickly by entering a comma separated list of CRNs.</p>
 <form action="/sessions/add_bulk" class="form">

schedules/app/views/schedules/view.html.erb

+<%= javascript_include_tag 'html2canvas.min' %>
+
 <%= javascript_include_tag 'schedules_view' %>
 <%= stylesheet_link_tag 'schedules' %>
 
@@ -12,6 +14,8 @@
 <button id="open-modal-btn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exportModal">
     Export Schedule
 </button>
+<button id="save-image" class="btn btn-secondary" onclick="saveImage()">Save as PNG</button>
+
 <div id="calendar"></div>
 
 <template id="events" data-events="<%= @events.to_json %>"></template>

schedules/config/initializers/assets.rb

@@ -31,4 +31,5 @@ Rails.application.config.assets.precompile += %w(
   moment.min.js
   fullcalendar.min.js
   fullcalendar.min.css
+  html2canvas.min.js
 )