Refactor PeriodDeltaChain to move into webpack compilation

app/assets/javascripts/create_assignment.js

@@ -145,10 +145,6 @@ function update_due_date(new_due_date) {
   grace_periods.set_due_date(new_due_date);
   penalty_decay_periods.set_due_date(new_due_date);
   penalty_periods.set_due_date(new_due_date);
-
-  grace_periods.refresh();
-  penalty_decay_periods.refresh();
-  penalty_periods.refresh();
 }
 
 function toggle_assessment_section_properties(section_due_dates_type) {

app/javascript/application_webpack.js

@@ -25,11 +25,14 @@ import "javascripts/jquery.easyModal";
 import safe_marked from "./common/safe_marked";
 window.safe_marked = safe_marked;
 
-// dayjs (date/times manipulation)
+// dayjs (date/times manipulation) and PeriodDeltaChain
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 dayjs.extend(customParseFormat);
-window.dayjs = dayjs;
+dayjs.locale(I18N_LOCALE);
+
+import PeriodDeltaChain from "./common/PeriodDeltaChain";
+window.PeriodDeltaChain = PeriodDeltaChain;
 
 // mousetrap (keybindings)
 import "mousetrap";
@@ -43,6 +46,7 @@ window.Rails = Rails;
 import {I18n} from "i18n-js";
 import translations from "translations.json";
 window.I18n = new I18n(translations);
+window.I18n.locale = I18N_LOCALE;
 
 // JCrop
 import Jcrop from "jcrop";

app/javascript/common/PeriodDeltaChain.js

@@ -0,0 +1,35 @@
+/** PeriodDeltaChain Class */
+import dayjs from "dayjs";
+
+export default class PeriodDeltaChain {
+  constructor(params) {
+    this.period_root_id = params.period_root_id;
+    this.date_format = params.date_format || "";
+    this.period_class = params.period_class || "period";
+
+    this.set_due_date(params.due_date);
+  }
+
+  refresh() {
+    let current_time = this.due_date;
+    const format = this.date_format;
+    const period_rows = document
+      .getElementById(this.period_root_id)
+      .getElementsByClassName(this.period_class);
+
+    for (let row of period_rows) {
+      const from_time_node = row.getElementsByClassName("PeriodDeltaChain_FromTime")[0];
+      from_time_node.textContent = current_time.format(format);
+
+      const hours_value = row.getElementsByClassName("PeriodDeltaChain_Hours")[0].value;
+      current_time = current_time.add(hours_value, "hours");
+      const to_time_node = row.getElementsByClassName("PeriodDeltaChain_ToTime")[0];
+      to_time_node.textContent = current_time.format(format);
+    }
+  }
+
+  set_due_date(new_due_date) {
+    this.due_date = dayjs(new_due_date, this.date_format);
+    this.refresh();
+  }
+}

app/views/assignments/_form.html.erb

@@ -1,6 +1,5 @@
 <% content_for :head do %>
-  <%= javascript_include_tag 'create_assignment',
-                             'PeriodDeltaChain/PeriodDeltaChain', nonce: true %>
+  <%= javascript_include_tag 'create_assignment', nonce: true %>
   <%= render partial: 'boot', formats: [:js], handlers: [:erb] %>
   <%= render partial: 'shared/navigation_warning',
              formats: [:js],

app/views/assignments/_peer_review_form.html.erb

@@ -1,6 +1,5 @@
 <% content_for :head do %>
-  <%= javascript_include_tag 'create_assignment',
-                             'PeriodDeltaChain/PeriodDeltaChain', nonce: true %>
+  <%= javascript_include_tag 'create_assignment', nonce: true %>
   <%= render partial: 'boot', formats: [:js], handlers: [:erb] %>
   <%= render partial: 'shared/navigation_warning',
              formats: [:js],

app/views/automated_tests/_form.html.erb

@@ -1,6 +1,4 @@
 <% content_for :head do %>
-  <%= javascript_include_tag 'PeriodDeltaChain/PeriodDeltaChain', nonce: true %>
-
   <%= javascript_tag nonce: true do %>
     document.addEventListener('DOMContentLoaded', () => {
       window.autotestManagerComponent = makeAutotestManager(document.getElementById('autotest-manager'),

app/views/groups/index.html.erb

@@ -1,6 +1,5 @@
 <% content_for :head do %>
   <%= javascript_include_tag 'Groups/index', nonce: true %>
-  <%= javascript_include_tag 'PeriodDeltaChain/PeriodDeltaChain', nonce: true %>
 
   <%= javascript_tag nonce: true do %>
     <% parts = @assignment.duration_parts

app/views/layouts/_head.html.erb

@@ -16,6 +16,7 @@
 <%= javascript_tag("const AUTH_TOKEN = document.querySelector('[name=\"csrf-token\"]').content;", nonce: true) if protect_against_forgery?%>
 <%= javascript_tag nonce: true do %>
   const MARKUS_VERSION = '<%= Rails.configuration.markus_version %>';
+  const I18N_LOCALE = '<%= I18n.locale %>';
 <% end %>
 <%= javascript_tag nonce: true do %>
   <%= render partial: 'layouts/mathjax_config', formats: :js %>

app/views/layouts/assignment_content.html.erb

@@ -9,7 +9,6 @@
     <%= javascript_include_tag 'check_timeout', nonce: true %>
   <% end %>
   <%= render partial: 'layouts/jsroutes_config' %>
-  <%= render partial: 'layouts/i18n_config' %>
   <%= render partial: 'layouts/pdfjs_config' %>
   <%= yield :head %>
 </head>

app/views/layouts/content.html.erb

@@ -9,7 +9,6 @@
     <%= javascript_include_tag 'check_timeout', nonce: true %>
   <% end %>
   <%= render partial: 'layouts/jsroutes_config' %>
-  <%= render partial: 'layouts/i18n_config' %>
   <%= render partial: 'layouts/pdfjs_config' %>
   <%= yield :head %>
 </head>

app/views/layouts/result_content.erb

@@ -9,7 +9,6 @@
     <%= javascript_include_tag 'check_timeout', nonce: true %>
   <% end %>
   <%= render partial: 'layouts/jsroutes_config' %>
-  <%= render partial: 'layouts/i18n_config' %>
   <%= render partial: 'layouts/pdfjs_config' %>
   <%= yield :head %>
 </head>