enabling calibration on the table level

currently Boilerplate calibration of a fixed date, next step is to make this dependend on the selected items from the table

app/controllers/calibrations_controller.rb

@@ -0,0 +1,7 @@
+class CalibrationsController < ApplicationController
+  # GET /:section
+  def new
+      @calibration = C14.first.calibration
+      @calibration.calibrate
+  end
+end

app/controllers/data_controller.rb

@@ -1,6 +1,8 @@
 class DataController < ApplicationController
   include Pagy::Backend
 
+  include CalibrationsHelper
+
   def turn_off_lasso
     session[:spatial_lasso_selection] = nil
     redirect_to request.env["HTTP_REFERER"]#:action => 'map'

app/helpers/calibrations_helper.rb

@@ -15,6 +15,11 @@ def calibration_plot(calibration)
       )
   end
 
+  def calibration_plot_json(calibration)
+    plot = calibration_plot(calibration)
+    plot.to_json if plot
+  end
+
   def format_hd_interval(hdi)
     "#{hdi['begin']}–#{hdi['end']}"
   end

app/javascript/controllers/index.js

@@ -25,6 +25,9 @@ application.register("remote-modal", RemoteModalController)
 import SliderController from "./slider_controller"
 application.register("slider", SliderController)
 
+import TableController from "./table_controller"
+application.register("table", TableController)
+
 import TomSelectController from "./tom_select_controller"
 application.register("tom-select", TomSelectController)
 

app/javascript/controllers/table_controller.js

@@ -0,0 +1,109 @@
+import { Controller } from "@hotwired/stimulus"
+import vegaEmbed from "vega-embed"
+
+export default class extends Controller {
+  static targets = ["selectAll", "checkbox"]
+
+  connect() {
+    console.log("TableController connected");
+
+    this.allPagesSelected = false;
+
+    this.selectAllTarget.addEventListener('change', this.toggleSelectAll.bind(this));
+  }
+
+  selectAllPage(event) {
+    event.preventDefault();
+    this.allPagesSelected = false;
+    this.toggleCheckboxes(true);
+  }
+
+  changeSelectMode(event) {
+    event.preventDefault();
+    const value = event.target.getAttribute("data-value");
+    if (value === "page") {
+      this.allPagesSelected = false;
+      this.toggleCheckboxes(true);
+    } else if (value === "all") {
+      this.allPagesSelected = true;
+      this.toggleSelectAllAcrossPages();
+    }
+    console.log(`Select mode changed to: ${value}`);	
+  }
+
+  toggleSelectAll(event) {
+    const isChecked = event.target.checked;
+    this.allPagesSelected = false;
+    this.toggleCheckboxes(isChecked);
+    console.log(`Toggling checkboxes across all pages: ${this.allPagesSelected}`);
+
+  }
+
+  toggleSelectAllAcrossPages() {
+    const isChecked = true;
+    this.toggleCheckboxes(isChecked);
+    console.log(`Toggling checkboxes across all pages: ${this.allPagesSelected}`);
+    // Implement the logic to check/uncheck all checkboxes across all pages if needed.
+    // This may involve an AJAX call to get all items and update their status accordingly.
+    // For now, we'll just log the state change.
+  }
+
+  toggleCheckbox(event) {
+    this.updateSelectAllState();
+  }
+
+  toggleCheckboxes(isChecked) {
+    this.checkboxTargets.forEach(checkbox => {
+      checkbox.checked = isChecked;
+    });
+    this.updateSelectAllState();
+  }
+
+  updateSelectAllState() {
+    const allChecked = this.checkboxTargets.every(checkbox => checkbox.checked);
+    const someChecked = this.checkboxTargets.some(checkbox => checkbox.checked);
+
+    this.selectAllTarget.checked = allChecked;
+    this.selectAllTarget.indeterminate = !allChecked && someChecked;
+
+    if (this.allPagesSelected && allChecked) {
+      this.selectAllTarget.checked = true;
+      this.selectAllTarget.indeterminate = false;
+    }
+  }
+    showCalibrationPlot(event) {
+        console.log("Showing the calibration plot")
+
+        const calibrationId = this.calibrationIdValue
+        const modalElement = document.querySelector('#remote_modal')
+        console.log(modalElement ? "#remote_modal found" : "#remote_modal not found")
+
+        if (modalElement) {
+          modalElement.addEventListener('shown.bs.modal', () => {
+            const plotDataElement = document.querySelector(`#calibration-plot-data`)
+            console.log(plotDataElement ? "Calibration plot data found" : "Calibration plot data not found")
+
+            if (plotDataElement) {
+              const spec = JSON.parse(plotDataElement.textContent)
+              console.log("Vega spec:", spec)
+
+              const chartContainer = document.querySelector('#vega-chart')
+              console.log(chartContainer ? "#vega-chart found" : "#vega-chart not found")
+
+              if (chartContainer) {
+                vegaEmbed('#vega-chart', spec).then(function(result) {
+                  console.log("Vega chart rendered!")
+                }).catch(error => {
+                  console.error("Error rendering Vega chart:", error)
+                })
+              } else {
+                console.error("#vega-chart does not exist")
+              }
+            } else {
+              console.error("Calibration plot data not found")
+            }
+          }, { once: true }) // Ensure the event listener is only called once
+        }
+      }
+
+}

app/views/calibrations/new.html.erb

@@ -0,0 +1,11 @@
+<%= render "shared/remote_modal", title: "Edit radiocarbon date" do %>
+  <div id="calibration-plot-data" data-calibration-id="<%= @calibration.id %>" style="display:none;">
+    <%= raw calibration_plot_json(@calibration) %>
+  </div>
+
+    <div id="vega-chart" style="width: 100%; height: 400px;"></div>
+
+	<%= content_for :buttons do %>
+      <%= button_tag "Close", type: 'reset', class: 'btn btn-danger', data: { "bs-dismiss": "modal" } %>
+    <% end %>
+<% end %>

app/views/data/_table.html.erb

@@ -1,9 +1,20 @@
 <%= turbo_frame_tag "data_table" do %>
-  <table class="table">
-
+  <table id="data-table" class="table" data-controller="table">
     <thead>
       <tr>
-        <th><!-- Select --></th>
+        <th style="width: 3%">
+          <div class="btn-group me-1" role="group" aria-label="Select options">
+            <div class="btn btn-sm btn-outline-light">
+              <input type="checkbox" data-table-target="selectAll" id="select-all" class="form-check-input">
+            </div>
+            <button type="button" class="btn btn-sm btn-outline-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+            </button>
+            <ul class="dropdown-menu" aria-labelledby="select-all-dropdown">
+              <li><a class="dropdown-item" href="#" data-action="click->table#selectAllPage">All items on this page</a></li>
+              <li><a class="dropdown-item" href="#" data-value="all" data-action="click->table#changeSelectMode">All items across all pages</a></li>
+            </ul>
+          </div>
+        </th>
         <th>Lab ID</th>
         <th>Site</th>
         <th>Material</th>
@@ -12,11 +23,10 @@
         <th>Age (cal BP)</th>
       </tr>
     </thead>
-
     <tbody>
       <% @xrons.each do |x| %>
         <tr>
-          <td><!-- <%= x.id %> --></td>
+          <td><input type="checkbox" class="form-check-input select-checkbox" data-table-target="checkbox" data-action="change->table#toggleCheckbox" data-model-id="<%= x.id %>"></td>
           <td><%= x.lab_identifier.present? ? (link_to x.lab_identifier, x, target: :_top) : na_value %></td>
           <td><%= x.site.present? ? (link_to x.site.name, x.site, target: :_top) : na_value %></td>
           <% if x.sample.present? %>
@@ -31,9 +41,13 @@
         </tr>
       <% end %>
     </tbody>
-
   </table>
 
   <%== pagy_bootstrap_nav(@pagy) %>
-<% end %>
-
+
+<%= link_to new_calibration_path, class: "btn btn-outline-primary btn-sm", 
+      data: { turbo_frame: "remote_modal", controller: "table", action: "click->table#showCalibrationPlot", calibration_id_value: 2 } do
+        edit_icon title: "Edit Data"
+    end %>
+
+<% end %>

config/routes.rb

@@ -51,6 +51,7 @@
     get 'search', on: :collection
   end
   resources :taxon_usages, only: :show
+  resources :calibrations, only: :new
 
   # User management
   devise_for :users, controllers: {