From b7ab67667a1e0a0909ec2356bc92d0dce1fbc776 Mon Sep 17 00:00:00 2001
From: Sujit Kumar <me@therealsuji.tk>
Date: Sat, 31 Jul 2021 20:30:26 +0530
Subject: [PATCH 1/2] Improved timetable screenshots

---
 package.json           |   2 +-
 src/index.html         |  53 +++++++++++-
 src/js/color_change.js | 181 +++++++++++++++++++++++++++++++++++++++++
 src/js/main.js         |  56 -------------
 yarn.lock              |   8 +-
 5 files changed, 236 insertions(+), 64 deletions(-)

diff --git a/package.json b/package.json
index be5b609..4b65301 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
         "bootstrap-select": "^1.13.18",
         "bootstrap4": "npm:bootstrap@4.6.0",
         "easy-autocomplete": "1.3.5",
-        "html2canvas": "^1.0.0-rc.5",
+        "html2canvas": "^1.1.4",
         "jquery": "3.5.0",
         "localforage": "^1.7.3"
     }
diff --git a/src/index.html b/src/index.html
index 7a97973..dae10da 100644
--- a/src/index.html
+++ b/src/index.html
@@ -430,6 +430,52 @@ <h5 class="modal-title" id="reset-modal-label">
         </div>
         <!-- End of reset modal -->
 
+        <!-- The Download Timetable Modal -->
+        <div
+            id="download-modal"
+            class="modal fade"
+            tabindex="-1"
+            aria-labelledby="reset-modal-label"
+            aria-hidden="true"
+        >
+            <div class="modal-dialog modal-sm">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="download-modal-label">
+                            Download Timetable
+                        </h5>
+                        <button
+                            type="button"
+                            class="btn-close"
+                            data-bs-dismiss="modal"
+                            aria-label="Close"
+                        ></button>
+                    </div>
+
+                    <div class="modal-body">
+                        <button
+                            id="download-tt-button"
+                            type="button"
+                            class="btn btn-success w-100 download-button"
+                            style="margin-bottom: 0.5rem;"
+                        >
+                            <i class="fas fa-camera"></i>
+                            &nbsp;&nbsp;Download Timetable
+                        </button>
+                        <button
+                            id="download-course-list-button"
+                            type="button"
+                            class="btn btn-success w-100 download-button"
+                        >
+                            <i class="fas fa-camera"></i>
+                            &nbsp;&nbsp;Download Course List
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- End of download timetable modal -->
+
         <!-- #1 - Course Panel -->
         <div class="container">
             <div class="card mb-4">
@@ -640,12 +686,13 @@ <h5 class="modal-title" id="reset-modal-label">
 
                 <div id="tt-action-buttons" class="col-12 col-lg-8 text-center">
                     <button
-                        id="takeScreenshotBtn"
                         class="btn btn-success"
                         type="button"
+                        data-bs-toggle="modal"
+                        data-bs-target="#download-modal"
                     >
-                        <i class="fas fa-camera"></i>
-                        <span>&nbsp;&nbsp;Save Screenshot</span>
+                        <i class="fas fa-download"></i>
+                        <span>&nbsp;&nbsp;Download Timetable</span>
                     </button>
                     <button
                         id="toggleClickToSelect"
diff --git a/src/js/color_change.js b/src/js/color_change.js
index ccc6f05..217898f 100644
--- a/src/js/color_change.js
+++ b/src/js/color_change.js
@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import localforage from 'localforage';
+import html2canvas from 'html2canvas';
 import { resetFilterSlotArr, addSlotButtons } from './autocomplete_course';
 
 let timeTableStorage = [
@@ -70,6 +71,186 @@ $(function() {
             .catch(console.error);
     })();
 
+    const appendHeader = ($layout, width) => {
+        var campus = (() => {
+            if (window.location.hash === '#Chennai') {
+                return 'Chennai';
+            } else {
+                return 'Vellore';
+            }
+        })();
+        const $header = $('<div></div>')
+            .css({
+                width: width,
+                'margin-bottom': '1rem',
+            })
+            .append(
+                $('<h3>FFCS On The Go</h3>').css({
+                    margin: 0,
+                    display: 'inline',
+                    color: '#9c27b0',
+                    'font-weight': 'bold',
+                }),
+            )
+            .append(
+                $(`<h3>${campus} Campus</h3>`).css({
+                    margin: 0,
+                    display: 'inline',
+                    color: '#707070',
+                    float: 'right',
+                }),
+            )
+            .append(
+                $('<hr>').css({
+                    'border-color': '#000000',
+                    'border-width': '2px',
+                }),
+            );
+        const $title = $(`<h4>${activeTable.name}</h4>`).css({
+            'margin-bottom': '1rem',
+            width: width,
+            'text-align': 'center',
+        });
+
+        return $layout.append($header).append($title);
+    };
+
+    $('#download-tt-button').on('click', function() {
+        var buttonText = $(this).html();
+        $(this)
+            .html(
+                `<span
+                    class="spinner-border spinner-border-sm"
+                    role="status"
+                    aria-hidden="true"
+                ></span>&nbsp;&nbsp;Please Wait`,
+            )
+            .attr('disabled', true);
+
+        const width = $('#timetable')[0].scrollWidth;
+        var $layout = $('<div></div>').css({
+            padding: '2rem',
+            position: 'absolute',
+            top: 0,
+            left: `calc(-${width}px - 4rem)`,
+        });
+
+        $layout = appendHeader($layout, width);
+
+        const $timetableClone = $('#timetable')
+            .clone()
+            .css({
+                width: width,
+                'text-align': 'center',
+            });
+        $('table', $timetableClone).css({
+            margin: 0,
+        });
+        $('tr', $timetableClone).css({
+            border: 'none',
+        });
+
+        $layout.append($timetableClone);
+        $('body').append($layout);
+
+        html2canvas($layout[0], {
+            scrollX: -window.scrollX,
+            scrollY: -window.scrollY,
+        }).then((canvas) => {
+            $layout.remove();
+            $(this)
+                .html(buttonText)
+                .attr('disabled', false);
+
+            var $a = $('<a></a>')
+                .css({
+                    display: 'none',
+                })
+                .attr('href', canvas.toDataURL('image/jpeg'))
+                .attr(
+                    'download',
+                    `FFCS On The Go ${activeTable.name} (Timetable).jpg`,
+                );
+
+            $('body').append($a);
+            $a[0].click();
+            $a.remove();
+        });
+    });
+
+    $('#download-course-list-button').on('click', function() {
+        var buttonText = $(this).html();
+        $(this)
+            .html(
+                `<span
+                    class="spinner-border spinner-border-sm"
+                    role="status"
+                    aria-hidden="true"
+                ></span>&nbsp;&nbsp;Please Wait`,
+            )
+            .attr('disabled', true);
+
+        const width = $('#courseListTable')[0].scrollWidth;
+        var $layout = $('<div></div>').css({
+            padding: '2rem',
+            position: 'absolute',
+            top: 0,
+            left: `calc(-${width}px - 4rem)`,
+        });
+
+        $layout = appendHeader($layout, width);
+
+        const $courseListClone = $('#courseListTable')
+            .clone()
+            .css({
+                width: width,
+                border: '1px solid #000000',
+                'border-bottom': 'none',
+            });
+        $('table', $courseListClone).css({
+            margin: 0,
+        });
+        $('tr', $courseListClone)
+            .css({
+                border: 'none',
+            })
+            .each(function() {
+                if ($(this).children().length == 1) {
+                    return;
+                }
+
+                $('th:last-child', this).remove();
+                $('td:last-child', this).remove();
+            });
+
+        $layout.append($courseListClone);
+        $('body').append($layout);
+
+        html2canvas($layout[0], {
+            scrollX: -window.scrollX,
+            scrollY: -window.scrollY,
+        }).then((canvas) => {
+            $layout.remove();
+            $(this)
+                .html(buttonText)
+                .attr('disabled', false);
+
+            var $a = $('<a></a>')
+                .css({
+                    display: 'none',
+                })
+                .attr('href', canvas.toDataURL('image/jpeg'))
+                .attr(
+                    'download',
+                    `FFCS On The Go ${activeTable.name} (Course List).jpg`,
+                );
+
+            $('body').append($a);
+            $a[0].click();
+            $a.remove();
+        });
+    });
+
     // addColorChangeEvents(); quick visualization disabled by default
 
     // Disable On Click Selection
diff --git a/src/js/main.js b/src/js/main.js
index eb7656b..e7fc88b 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -4,7 +4,6 @@ import '../css/main.scss';
 
 import $ from 'jquery';
 import 'bootstrap';
-import html2canvas from 'html2canvas';
 
 import './color_change';
 import { removeTouchHoverCSSRule } from './utils';
@@ -17,61 +16,6 @@ $(function() {
         $(this).blur();
     });
 
-    // Timetable screenshot
-    $('#takeScreenshotBtn').click(function() {
-        // Hack: scroll to top gives better image with html2canvas
-        window.scrollTo({
-            top: 0,
-            behavior: 'instant',
-        });
-        var timetable_img_src;
-        var courseListTable_img_src;
-        var newWindow_data = '';
-        $('body').width('1500');
-        $('.screenshot_msg').show();
-        var newWindow = window.open();
-        newWindow.document.write('<h1>Wait. Capturing screenshot...</h1>');
-        // timetable screenshot
-        html2canvas(document.getElementById('timetable')).then((canvas) => {
-            timetable_img_src = canvas.toDataURL('image/jpeg');
-            newWindow_data = `<html>
-                <head><title>FFCS on The Go</title></head>
-                <body>
-                    <h1>Click on the respective images to download.</h1>
-                    <br>
-                    <h3>Timetable</h3>
-                    <a href="${timetable_img_src}" download="FFCSOTG_MyTimeTable">
-                        <img width="100%" src="${timetable_img_src}" alt="FFCSOTG_MyTimeTable"/>
-                    </a>`;
-            html2canvas(document.getElementById('courseListTable')).then(
-                (canvas) => {
-                    courseListTable_img_src = canvas.toDataURL('image/jpeg');
-                    newWindow_data =
-                        newWindow_data +
-                        `<br><br>
-                        <h3>Course List</h3>
-                        <a href="${courseListTable_img_src}" download="FFCSOTG_MyCourses">
-                            <img width="100%" src="${courseListTable_img_src}" alt="FFCSOTG_MyCourses"/>
-                        </a>
-                        </body></html>`;
-
-                    // closing the document to clear the the current content
-                    newWindow.document.close();
-                    newWindow.document.write(newWindow_data);
-                    newWindow.document.close();
-                    $('.screenshot_msg').hide();
-                    $('body').width('initial');
-                },
-            );
-        });
-        ga('send', {
-            hitType: 'event',
-            eventCategory: 'Timetable',
-            eventAction: 'click',
-            eventLabel: 'Screenshot',
-        });
-    });
-
     /**
      * Need to rework these events based on new share button
      */
diff --git a/yarn.lock b/yarn.lock
index ab828cf..a981416 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3996,10 +3996,10 @@ html-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-1.2.0.tgz#c78de65b5663aa597989dd2b7ab49200d7e4db98"
   integrity sha1-x43mW1Zjqll5id0rerSSANfk25g=
 
-html2canvas@^1.0.0-rc.5:
-  version "1.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.0.0-rc.5.tgz#4ee3cac9f6e20a0fa0c2f35a6f99c960ae7ec4c1"
-  integrity sha512-DtNqPxJNXPoTajs+lVQzGS1SULRI4GQaROeU5R41xH8acffHukxRh/NBVcTBsfCkJSkLq91rih5TpbEwUP9yWA==
+html2canvas@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.1.4.tgz#53ae91cd26e9e9e623c56533cccb2e3f57c8124c"
+  integrity sha512-uHgQDwrXsRmFdnlOVFvHin9R7mdjjZvoBoXxicPR+NnucngkaLa5zIDW9fzMkiip0jSffyTyWedE8iVogYOeWg==
   dependencies:
     css-line-break "1.1.1"
 

From 77491d87ee06b666c48ac0a5760fbc68797246e3 Mon Sep 17 00:00:00 2001
From: Sujit Kumar <me@therealsuji.tk>
Date: Sat, 31 Jul 2021 20:41:46 +0530
Subject: [PATCH 2/2] Minor improvements

---
 src/index.html         | 8 --------
 src/js/color_change.js | 4 ++--
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/index.html b/src/index.html
index dae10da..76939ba 100644
--- a/src/index.html
+++ b/src/index.html
@@ -778,9 +778,6 @@ <h5 class="modal-title" id="download-modal-label">
         <!-- Timetable -->
         <div class="table-responsive text-center noselect">
             <table id="timetable" class="table table-bordered">
-                <tr style="display:none" class="screenshot_msg">
-                    <td colspan="16">FFCS On The Go | bit.ly/ffcs-vit</td>
-                </tr>
                 <tr>
                     <td class="ColumnOneDays">THEORY <br />HOURS</td>
                     <td class="TheoryHours">
@@ -1139,11 +1136,6 @@ <h5 class="modal-title" id="download-modal-label">
             </blockquote>
             <table id="courseListTable" class="table table-hover">
                 <thead>
-                    <tr style="display:none" class="screenshot_msg">
-                        <td colspan="7">
-                            FFCS On The Go | bit.ly/ffcs-vit
-                        </td>
-                    </tr>
                     <tr class="table-success">
                         <th>Slot</th>
                         <th>Course Code</th>
diff --git a/src/js/color_change.js b/src/js/color_change.js
index 217898f..f575fa7 100644
--- a/src/js/color_change.js
+++ b/src/js/color_change.js
@@ -169,7 +169,7 @@ $(function() {
                 .attr('href', canvas.toDataURL('image/jpeg'))
                 .attr(
                     'download',
-                    `FFCS On The Go ${activeTable.name} (Timetable).jpg`,
+                    `FFCS On The Go - ${activeTable.name} (Timetable).jpg`,
                 );
 
             $('body').append($a);
@@ -242,7 +242,7 @@ $(function() {
                 .attr('href', canvas.toDataURL('image/jpeg'))
                 .attr(
                     'download',
-                    `FFCS On The Go ${activeTable.name} (Course List).jpg`,
+                    `FFCS On The Go - ${activeTable.name} (Course List).jpg`,
                 );
 
             $('body').append($a);