Display Sidebar & Local Time For Events (#438)

* show timestamp in local time

* Implement initializeTimeFixer

* Add Misc work WIP

* add local time to calendar event

* add local dates

* update localtime for calendar event

* show timestamp in local time

* Implement initializeTimeFixer

* Add Misc work WIP

* add local time to calendar event

* add local dates

* update localtime for calendar event

* return if no utc times on page

* add events sidebar

* only show 3 events on sidebar

* Change wording on events header

They won't all be streams

app/assets/javascripts/initializePage.js.erb

@@ -40,6 +40,7 @@ function callInitalizers(){
   initializeFooterMod();
   initializeCommentPreview();
   initializeAdditionalContentBoxes();
+  initializeTimeFixer();
   if (!initializeLiveArticle.called){
     initializeLiveArticle();
   }

app/assets/javascripts/initializers/initializeTimeFixer.js

@@ -0,0 +1,70 @@
+function initializeTimeFixer() {
+  var utcTime = document.getElementsByClassName('utc-time');
+  var utcDate = document.getElementsByClassName('utc-date');
+  var utc = document.getElementsByClassName('utc');
+
+  if (!utc) {
+    return;
+  }
+
+  function convertUtcTime(utcTime) {
+    var time = new Date(utcTime);
+    var options = {
+      hour: 'numeric',
+      minute: 'numeric',
+    };
+    time = new Intl.DateTimeFormat('en-US', options).format(time);
+    return time;
+  }
+
+  function updateLocalTime(times) {
+    var localTime;
+    for (var i = 0; i < times.length; i++) {
+      localTime = convertUtcTime(times[i].innerHTML);
+      times[i].innerHTML = localTime;
+    }
+  }
+
+  function convertUtcDate(utcDate) {
+    var date = new Date(utcDate);
+    var options = {
+      month: 'short',
+      day: 'numeric',
+    };
+    date = new Intl.DateTimeFormat('en-US', options).format(date);
+    return date;
+  }
+
+  function updateLocalDate(dates) {
+    var localDate;
+    for (var i = 0; i < dates.length; i++) {
+      localDate = convertUtcDate(dates[i].innerHTML);
+      dates[i].innerHTML = localDate;
+    }
+  }
+
+  function convertCalEvent(utc) {
+    var date = new Date(utc);
+    var options = {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+    };
+    date = new Intl.DateTimeFormat('en-US', options).format(date);
+    return date;
+  }
+
+  function updateCalendarTime(utcTimes) {
+    var calTime;
+    for (var i = 0; i < utcTimes.length; i++) {
+      calTime = convertCalEvent(utcTimes[i].innerHTML);
+      utcTimes[i].innerHTML = calTime;
+    }
+  }
+
+  updateLocalTime(utcTime);
+  updateLocalDate(utcDate);
+  updateCalendarTime(utc);
+}

app/assets/javascripts/utilities/getLocalTime.js

@@ -0,0 +1,15 @@
+function updateLocalTime(times) {
+  function convertUtcTime(timestamp) {
+    var time = new Date(timestamp);
+    var options = {
+      hour: 'numeric',
+      minute: 'numeric',
+    };
+    time = new Intl.DateTimeFormat('en-US', options).format(time);
+    return time;
+  }
+  for (var i = 0; i < times.length; i++) {
+    localTime = convertUtcTime(times[i].innerHTML);
+    times[i].innerHTML = localTime;
+  }
+}

app/views/articles/_sidebar_additional.html.erb

@@ -95,6 +95,21 @@
           </div>
         </div>
       <% end %>
+      <% if Event.in_the_future_and_published.any? && Flipflop.upcoming_events? %>
+        <div class="widget">
+          <header>
+            <a href="/events">upcoming live events</a>
+          </header>
+          <div class="widget-body">
+            <div class="widget-link-list">
+              <% Event.in_the_future_and_published.limit(3).sort_by(&:starts_at).each do |event| %>
+                <%= render "events/widget_events_item", event: event %>
+              <% end %>
+            </div>
+            <a class="cta cta-button" href="/events">VIEW ALL EVENTS</a>
+          </div>
+        </div>
+      <% end %>
       <% if Article.active_help.any? %>
         <div class="widget">
           <header>

app/views/events/_event.html.erb

@@ -2,7 +2,7 @@
   .container .event {
     padding: 20px;
     border: solid 2px #66e2d5;;
-    border-radius: 3px; 
+    border-radius: 3px;
     margin: 50px auto;
     box-shadow: 5px 8px 0px #ccfff9;
     font-size: 17px;
@@ -24,7 +24,7 @@
   }
   .event .event-details p {
     margin: 5px;
-  }  
+  }
 
   .event .event-description p {
     text-align: justify;
@@ -33,8 +33,8 @@
     margin: 0 0 .5em 0;
     font-weight: 800;
     font-size: 1.11em;
-  }  
-  
+  }
+
   @media screen and (max-width: 900px) {
     .container .body .event .event-image {
       display: block;
@@ -45,7 +45,7 @@
   .copyx{
     display: none !important;
   }
-  .addeventatc {visibility:hidden;}  
+  .addeventatc {visibility:hidden;}
 </style>
 
 <div class="event">
@@ -55,18 +55,16 @@
   <div class="event-details" >
     <h3><a href="/events/<%= event.slug %>"><%= event.category %>: <%= event.title %></a></h3>
     <p>
-      <% if !event.cover_image.present? %>
-        Date: <%= event.starts_at.in_time_zone('Eastern Time (US & Canada)').strftime("%b %d %Y") %>
-        <br>
-      <% end %>
-      Time: <%= event.starts_at.in_time_zone('Eastern Time (US & Canada)').to_formatted_s(:time) %> - <%= event.ends_at.in_time_zone('Eastern Time (US & Canada)').to_formatted_s(:time) %> EDT
+      Date: <span class="utc-date"><%= event.starts_at %></span>
       <br>
-      Location: <a href="<%= event.location_url %>"><%= event.location_name %></a> 
+      Time: <span class="utc-time"><%= event.starts_at %></span> - <span class="utc-time"><%= event.ends_at %></span>
+      <br>
+      Location: <a href="<%= event.location_url %>"><%= event.location_name %></a>
     </p>
     <div title="Add to Calendar" class="addeventatc">
         Add to Calendar
-        <span class="start"><%= event.starts_at.in_time_zone('Eastern Time (US & Canada)').strftime("%m/%d/%Y") %> <%= event.starts_at.in_time_zone('Eastern Time (US & Canada)').to_formatted_s(:time) %></span>
-        <span class="end"><%= event.ends_at.in_time_zone('Eastern Time (US & Canada)').strftime("%m/%d/%Y") %> <%= event.ends_at.in_time_zone('Eastern Time (US & Canada)').to_formatted_s(:time) %></span>
+        <span class="start utc"><%= event.starts_at %></span>
+        <span class="end utc"><%= event.ends_at %></span>
         <span class="timezone">America/New_York</span>
         <span class="title"><%= event.title %></span>
         <span class="organizer">The DEV Community</span>
@@ -77,20 +75,19 @@
         <span class="description">
           <%= event.description_html.html_safe %>
           ------
-          
-          Link to attend - <%= event.location_url%> 
+          Link to attend - <%= event.location_url%>
         </span>
       </div>
   </div>
   <div class="event-description">
     <%= event.description_html.html_safe %>
-  </div>            
+  </div>
 </div>
 
-  <script defer>
-    window.addeventasync = function(){
-      addeventatc.register('button-dropdown-click', function(obj){
-          ga('send', 'event', 'click', 'Add Event To Calendar', 'User: <%= user_signed_in? %>');
-      });
-    }
-  </script>
+<script defer>
+  window.addeventasync = function(){
+    addeventatc.register('button-dropdown-click', function(obj){
+        ga('send', 'event', 'click', 'Add Event To Calendar', 'User: <%= user_signed_in? %>');
+    });
+  }
+</script>

app/views/events/index.html.erb

@@ -40,10 +40,9 @@
     <h1 style="font-size:1.9em;font-weight:600;text-align:center;">
       PAST <br> EVENTS
     </h1>
-    
+
     <% @past_events.each do |event|%>
       <%= render 'event', event: event %>
     <% end %>
-    
-  </div>
 
+  </div>

app/views/events/show.html.erb

@@ -51,7 +51,7 @@
   }
   .container .event .event-details {
     font-size: 1.3em;
-  }  
+  }
   .addeventatc {
     border: solid 1px #66e2d5;
   }

config/features.rb

@@ -31,4 +31,7 @@ Flipflop.configure do
   feature :sendbird,
     default: true,
     description: "Toggle between Sendbird and our custom chat"
+  feature :upcoming_events,
+    default: true,
+    description: "Toggle upcoming events in sidebar"
 end