Adds time line (#446)

* Added validation for matric num and contact num * Removes white space for problem report page * Add timeline * Add timeline * Adds timeline * Adds timeline * Adds timeline * Add timeline * Add timeline * Add timeline * Add timeline * Add timeline * Adds timeline * Changes 0px to 0 * remove comma * un-hardcode the closing time * combine lines 76-77
nussucommit · Mar 21, 2020 · 1d4deaa · 1d4deaa
1 parent 9868b3a
commit 1d4deaa
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 4 deletions.
diff --git a/app/assets/javascripts/duties.js b/app/assets/javascripts/duties.js
@@ -67,6 +67,43 @@ function scrollToCurrentTime(startTime) {
   }
 }
 
+function drawLine(startTime, endTime) {
+  var line = document.getElementById("vertical_line");
+  line.style.display = "none";
+  var table = document.getElementById("table");
+  var tableLeft = document.getElementById("tableLeft");
+  var container = document.getElementById("container");
+  line.style.height = (container.clientHeight) + "px";
+  container.addEventListener("scroll", helper);
+  var currHours;
+  var currMinutes;
+  setInterval(function () {
+    var date = new Date();
+    currHours = date.getHours();
+    currMinutes = date.getMinutes();
+    if (currHours < startTime || (currHours >= endTime && currMinutes > 0)) {
+      line.style.display = "none";
+    } else {
+      helper();
+    }
+  }, 1000);
+  function helper() {
+    var currTimeInMinutes = currHours * 60 + currMinutes;
+    var rightColumnWidth = table.rows[0].cells[0].offsetWidth;
+    var leftColumnWidth = tableLeft.offsetWidth + 15;
+    // I am so sorry for hardcoding the adjusting term, but let's just get this thing working, okay :")
+    var lowTime = container.scrollLeft / rightColumnWidth * 60 + startTime * 60;
+    console.log(rightColumnWidth);
+    var highTime = lowTime + container.clientWidth / rightColumnWidth * 60;
+    if (lowTime <= currTimeInMinutes && currTimeInMinutes <= highTime) {
+      line.style.display = "block";
+      line.style.left = (((currTimeInMinutes - lowTime) / 60) * rightColumnWidth) + leftColumnWidth + "px";
+    } else {
+      line.style.display = "none";
+    }
+  }
+}
+
 function colourScheduleTable(numOfPlaces) {
   var nthChildInt = numOfPlaces * 2;
 
@@ -87,10 +124,12 @@ function setDutyTableWidth(averageColspan) {
 
 function load() {
   var START_TIME = $('#duty-start-time').data('start-time');
+  var END_TIME = $('#duty-end-time').data('end-time');
   var NUM_OF_PLACES = $('#num-of-places').data('num-of-places');
   var AVERAGE_COLSPAN = $('#average-colspan').data('average-colspan');
 
-  scrollToCurrentTime(START_TIME);
+  scrollToCurrentTime(START_TIME); //I find this mildly annoying, and when the drawLine function is properly implemented, I think we can yeet this function away
+  drawLine(START_TIME, END_TIME);
   toggleSidebar();
   sidebarOnLoad();
   setDutyTableButtons();

diff --git a/app/views/duties/index.html.erb b/app/views/duties/index.html.erb
@@ -1,4 +1,5 @@
 <div id="duty-start-time" data-start-time=<%= TimeRange.order(:start_time).first.start_time.strftime('%H') %>></div>
+<div id="duty-end-time" data-end-time=<%= TimeRange.order(:end_time).last.end_time.strftime('%H')%>></div>
 <div id="num-of-places" data-num-of-places=<%= @places.count %>></div>
 
 <div class="container-fluid no-padding-top">
@@ -34,7 +35,7 @@
       </div>
 
       <div class="schedule-container">
-        <div class="schedule-left">
+        <div class="schedule-left" id="tableLeft">
           <table class="table table-sm">
             <!-- Empty row to accommodate the timing -->
             <thead>
@@ -62,8 +63,19 @@
 
           </table>
         </div>
-        <div class="schedule-right scrollable">
-          <table class="table table-sm duty-table">
+        <div class="schedule-right scrollable" id="container">
+          <style>
+              .vl {
+              border-left: 4px solid tomato;
+              position: absolute;
+              opacity:0.5;
+              }
+            }
+            </style>
+
+          <div class="vl" id="vertical_line"></div>
+          <table class="table table-sm duty-table" id="table">
+
             <thead>
               <tr>
                 <% @header_iter.each do |t| %>