Add basic deadline to sections index

app/assets/stylesheets/application.postcss.css

@@ -44,6 +44,30 @@ header {
     text-decoration-line: underline;
 }
 
+.deadline-info-container {
+    padding: 2rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.extension-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+}
+
+.extension {
+    align-self: stretch;
+    color: black;
+    background-color: white;
+    padding: 1rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
 .title-card-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;

app/controllers/extensions_controller.rb

@@ -0,0 +1,7 @@
+class ExtensionsController < ApplicationController
+  def confirm
+    Extension.find(params[:id]).confirm!
+
+    redirect_to sections_url
+  end
+end

app/controllers/sections_controller.rb

@@ -1,6 +1,11 @@
 class SectionsController < ApplicationController
   def index
     @sections = Section.all.order(id: :asc)
+    @extensions = Extension.all.order(id: :asc)
+    @deadline = Time.zone.local(2025, 7, 8, 0, 0, 0)
+    @extensions.each do |e|
+      @deadline = e.affect_deadline(@deadline)
+    end
   end
 
   def show

app/helpers/extensions_helper.rb

@@ -0,0 +1,2 @@
+module ExtensionsHelper
+end

app/javascript/application.js

@@ -5,6 +5,7 @@ import initPoliticianQuestions from './politicians_answer.js'
 import initAcrosticQuestions from './acrostic_answer.js'
 import initConnectionsQuestions from './connections_answer.js'
 import initLyricsQuestions from './lyrics_answer.js'
+import initDeadlineDisplay from './deadline_display.js'
 
 import { Sortable, Swap } from 'sortablejs'
 
@@ -17,4 +18,5 @@ addEventListener("DOMContentLoaded", () => {
     initAcrosticQuestions()
     initConnectionsQuestions()
     initLyricsQuestions()
+    initDeadlineDisplay()
 })

app/javascript/deadline_display.js

@@ -0,0 +1,27 @@
+export default function initDeadlineDisplay() {
+    document.querySelectorAll('[data-behaviour="deadline_display"]').forEach((span) => {
+        const deadline = new Date(span.dataset.deadline)
+
+        function update() {
+            const remaining = Math.floor((deadline - new Date()) / 1000)
+            const days = Math.floor(remaining / (60 * 60 * 24))
+            const hours = Math.floor((remaining % (60 * 60 * 24)) / (60 * 60))
+            const minutes = Math.floor((remaining % (60 * 60)) / 60)
+            const seconds = remaining % 60
+            let remainingText = ""
+            if (days > 0) {
+                remainingText += `${days} dagen, `
+            }
+            if (days > 0 || hours > 0) {
+                remainingText += `${hours} uren, `
+            }
+            if (days > 0 || hours > 0 || minutes > 0) {
+                remainingText += `${minutes} minuten en `
+            }
+            remainingText += `${seconds} seconden`
+            span.innerText =  remainingText
+        }
+
+        setInterval(update, 200)
+    })
+}

app/models/extension.rb

@@ -0,0 +1,21 @@
+# == Schema Information
+#
+# Table name: extensions
+#
+#  id         :integer          not null, primary key
+#  confirmed  :boolean
+#  reason     :text
+#  created_at :datetime         not null
+#  updated_at :datetime         not null
+#
+class Extension < ApplicationRecord
+  def affect_deadline(deadline)
+    return deadline unless confirmed
+
+    deadline + 6.weeks
+  end
+
+  def confirm!
+    update!(confirmed: true)
+  end
+end

app/views/sections/index.html.erb

@@ -1,3 +1,21 @@
+<div class="deadline-info-container">
+    <div>
+        Je hebt nog
+        <span class="deadline-display" data-behaviour="deadline_display" data-deadline="<%= @deadline.httpdate %>">tijd tot <%= @deadline.to_fs(:short) %>.</span>
+    </div>
+    Je kan extra tijd krijgen door volgende dingen te organiseren. Je krijgt dan 6 weken extra.
+    <div class="extension-grid">
+        <% @extensions.each do |extension| %>
+            <div class="extension">
+                <span><%= extension.reason %></span>
+                <%= form_with url: confirm_extension_path(extension), method: :put do |form| %>
+                    <%= form.submit "Bevestig", disabled: extension.confirmed %>
+                <% end %>
+            </div>
+        <% end %>
+    </div>
+</div>
+
 <div class="title-card-grid">
     <% @sections.each do |section| %>
         <%= link_to(section_url(section), html_options = { class: 'title-card-container' }) do %>